diff --git a/.nvmrc b/.nvmrc
index d78bf0a56c..564e92d084 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v18.20.4
+v24.4.1
diff --git a/Dockerfile b/Dockerfile
index 65402a492c..65b79df75e 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:24.1.0-alpine3.21 AS builder
+FROM node:24.4.1-alpine3.22 AS builder
 
 RUN apk update --no-cache && apk add --no-cache git
 
@@ -11,9 +11,9 @@ COPY server/package*.json server/
 
 RUN npm ci
 
-COPY . .
-
 ARG SELF_HOSTED
+ARG HOST_NAME
+ARG PORT
 ARG SELF_HOSTED_SHARE
 ARG SELF_HOSTED_BROADCAST
 ARG BROADCAST_PORT
@@ -21,13 +21,25 @@ ARG SANDBOX_HOST_NAME
 ARG SANDBOX_PORT
 ARG FIREBASE_CONFIG
 ARG DOCS_BASE_URL
+ARG LOCAL_MODULES
+ARG NODE_OPTIONS
+
+COPY scripts/download-modules.js scripts/
+COPY src/livecodes/vendors.ts src/livecodes/
+COPY src/sdk/package.sdk.json src/sdk/
+
+RUN if [ "$LOCAL_MODULES" == "true" ]; \
+  then npm run download-modules; \
+  fi
+
+COPY . .
 
 RUN if [ "$DOCS_BASE_URL" == "null" ]; \
   then npm run build:app; \
   else npm run build; \
   fi
 
-FROM node:24.1.0-alpine3.21 AS server
+FROM node:24.4.1-alpine3.22 AS server
 
 RUN addgroup -S appgroup
 RUN adduser -S appuser -G appgroup
diff --git a/README.md b/README.md
index 900089383e..7798ed9929 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@ A [feature-rich](https://livecodes.io/docs/features/), open-source, **client-sid
 [![LiveCodes: npm version](https://img.shields.io/npm/v/livecodes)](https://www.npmjs.com/package/livecodes)
 [![LiveCodes: npm downloads](https://img.shields.io/npm/dm/livecodes)](https://www.npmjs.com/package/livecodes)
 [![LiveCodes: jsdelivr downloads](https://data.jsdelivr.com/v1/package/npm/livecodes/badge?style=rounded)](https://www.jsdelivr.com/package/npm/livecodes)
-[![LiveCodes: languages](https://img.shields.io/badge/languages-96-blue)](https://livecodes.io/docs/languages/)
+[![LiveCodes: languages](https://img.shields.io/badge/languages-97-blue)](https://livecodes.io/docs/languages/)
 [![LiveCodes: docs](https://img.shields.io/badge/Documentation-575757?logo=gitbook&logoColor=white)](https://livecodes.io/docs/)
 [![LiveCodes: llms.txt](https://img.shields.io/badge/llms.txt-575757?logo=googledocs&logoColor=white)](https://livecodes.io/docs/llms.txt)
 [![LiveCodes: llms-full.txt](https://img.shields.io/badge/llms--full.txt-575757?logo=googledocs&logoColor=white)](https://livecodes.io/docs/llms-full.txt)
diff --git a/docker-compose.yml b/docker-compose.yml
index e8bb4ca09c..dfcc8c54ed 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -5,6 +5,8 @@ services:
       dockerfile: Dockerfile
       args:
         - SELF_HOSTED=true
+        - HOST_NAME=${HOST_NAME:-livecodes.localhost}
+        - PORT=${PORT:-443}
         - SELF_HOSTED_SHARE=${SELF_HOSTED_SHARE:-true}
         - SELF_HOSTED_BROADCAST=${SELF_HOSTED_BROADCAST:-true}
         - BROADCAST_PORT=${BROADCAST_PORT:-3030}
@@ -12,6 +14,8 @@ services:
         - SANDBOX_PORT=${SANDBOX_PORT:-8090}
         - FIREBASE_CONFIG=${FIREBASE_CONFIG:-}
         - DOCS_BASE_URL=${DOCS_BASE_URL:-null}
+        - LOCAL_MODULES=${LOCAL_MODULES:-false}
+        - NODE_OPTIONS=--max-old-space-size=4096
     restart: unless-stopped
     environment:
       - SELF_HOSTED=true
@@ -26,6 +30,7 @@ services:
       - LOG_URL=${LOG_URL:-null}
       - VALKEY_HOST=valkey
       - VALKEY_PORT=6379
+      - NODE_OPTIONS=--max-old-space-size=4096
     volumes:
       - ./assets:/srv/build/assets
     depends_on:
diff --git a/docs/docs/advanced/docker.mdx b/docs/docs/advanced/docker.mdx
index 1e0188300a..e8a3a02a63 100644
--- a/docs/docs/advanced/docker.mdx
+++ b/docs/docs/advanced/docker.mdx
@@ -169,10 +169,56 @@ The hostname and many other options can be set using [environment variables](#en
 
   Runs code in a separate origin [sandboxed iframe](https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/) to prevent cross-site scripting.
 
+- Local modules
+
+  See [Local Modules](#local-modules) section for details.
+
 - [404 page](https://livecodes.io/404)
 
   Custom 404 page for resources that are not found.
 
+## Local Modules
+
+(EXPERIMENTAL)
+
+LiveCodes depends on a large number of external modules to support a wide range of features (e.g. code editors, compilers, formatters, etc).
+These modules are loaded from CDNs (e.g. [jsDelivr](https://www.jsdelivr.com/), [unpkg](https://unpkg.com/), etc).
+So, in spite of being a client-side app, LiveCodes requires an internet connection to load these modules.
+
+However, if you want to be able to run LiveCodes without an internet connection, you can download all these modules locally by setting the [environment variable](#environment-variables) `LOCAL_MODULES=true` (it is set to `false` by default).
+In this case, all modules are downloaded during build (~ 1.5 GB), and are served locally.
+
+When working without internet connection, all resources have to be available locally. So, automatic [module resolution](../features/module-resolution.mdx) (e.g. of npm modules imported in user code) and loading type definitions for [intellisense](../features/intellisense.mdx) and auto-complete will not work out of the box.
+However, you can provide the list of modules to load using the [`imports`](../configuration/configuration-object.mdx#imports) property of the [config](../configuration/configuration-object.mdx) object (see [Custom Module Resolution](../features/module-resolution.mdx#custom-module-resolution)).
+Similarly, you can also provide the list of type definitions to load using the [`types`](../configuration/configuration-object.mdx#types) property (see [Custom Types](../features/intellisense.mdx#custom-types)).
+These modules and type definitions should be prepared in advance and made available to the running app (e.g. in the `/assets` directory - see [Volumes](#volumes)).
+
+Example:
+
+To run [React starter template](https://livecodes.io/?template=react) locally without internet connection, you need to:
+
+(assuming that the app is running on this URL: https://livecodes.localhost/)
+
+- Add [these files](https://github.com/hatemhosny/custom-modules-demo/tree/main/modules) to the [`/assets` directory](#volumes).
+- Open React starter template: https://livecodes.localhost/?template=react
+- Add this code to custom settings (Project menu → Custom Settings):
+
+```json
+{
+  "imports": {
+    "react": "https://livecodes.localhost/assets/react.js",
+    "react/compiler-runtime": "https://livecodes.localhost/assets/react-compiler-runtime.js",
+    "react/jsx-runtime": "https://livecodes.localhost/assets/react-jsx-runtime.js",
+    "react-dom": "https://livecodes.localhost/assets/react-dom.js",
+    "react-dom/client": "https://livecodes.localhost/assets/react-dom-client.js",
+    "scheduler": "https://livecodes.localhost/assets/scheduler.js"
+  },
+  "types": {
+    "react": "https://livecodes.localhost/assets/react.d.ts"
+  }
+}
+```
+
 ## Environment Variables
 
 The app can be customized by setting different environment variables.
@@ -205,6 +251,7 @@ The following environment variables are supported:
 | `FIREBASE_CONFIG` | [Firebase config object](https://firebase.google.com/docs/web/learn-more#config-object) (JSON), used for [authentication](../features/github-integration.mdx) | |
 | `DOCS_BASE_URL` | [Base URL](../features/self-hosting.mdx#custom-build) of the documentation (e.g. `/docs/`) | `null` |
 | `LOG_URL` | Full URL to send [server-side analytics](https://github.com/live-codes/livecodes/blob/develop/functions/index.ts) (e.g. `https://api.website.com/log`) | `null` |
+| `LOCAL_MODULES` | Download and use all modules locally (see [Local Modules](#local-modules)) | `false` |
 
 :::info note
 When running in a non-local environment (e.g. VPS),
diff --git a/docs/docs/languages/go-wasm.mdx b/docs/docs/languages/go-wasm.mdx
new file mode 100644
index 0000000000..1f8c108758
--- /dev/null
+++ b/docs/docs/languages/go-wasm.mdx
@@ -0,0 +1,93 @@
+# Go (Wasm)
+
+[Go](https://go.dev/) (Golang), is an open-source, statically typed, and compiled programming language developed by Google. It is designed for simplicity, efficiency, and strong support for concurrency, making it well-suited for building scalable and high-performance applications.
+
+LiveCodes uses [Yaegi](https://github.com/traefik/yaegi), the Go interpreter (running on WebAssembly), to run Go in the browser.
+
+:::info Note
+
+LiveCodes also supports running Go using [GopherJS](https://github.com/gopherjs/gopherjs) which is a Go to JavaScript compiler. Read documentation [here](./go.mdx).
+
+:::
+
+## Demo
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+export const params = {
+  'go-wasm': 'package main\n\nimport "fmt"\n\nfunc main() {\n\tfmt.Println("Hello, World!")\n}\n',
+  console: 'full',
+};
+
+<LiveCodes params={params}></LiveCodes>
+
+## Usage
+
+LiveCodes runs Go in the browser, including the [standard library](https://pkg.go.dev/std).
+
+
+### Communication with JavaScript
+
+The Go code runs in the context of the [result page](../features/result.mdx).
+A few helper properties and methods are available in the browser global `livecodes.goWasm` object:
+
+- `livecodes.goWasm.input`: the initial standard input that is passed to the Go code.
+- `livecodes.goWasm.loaded`: A promise that resolves when the Go environment is loaded. Any other helpers should be used after this promise resolves.
+- `livecodes.goWasm.output`: the standard output.
+- `livecodes.goWasm.error`: the standard error.
+- `livecodes.goWasm.exitCode`: the exit code.
+- `livecodes.goWasm.run`: a function that runs the Go code with new input. This function takes a string as input and returns a promise that resolves when the Go code is done running. The promise resolves with an object containing the `input`, `output`, `error`, and `exitCode` properties.
+
+See the [example below](#example-usage) for more details.
+
+## Language Info
+
+### Name
+
+`go-wasm`
+
+### Extensions
+
+`wasm.go`, `go-wasm`, `gowasm`
+
+### Editor
+
+`script`
+
+## Compiler
+
+[Yaegi](https://github.com/traefik/yaegi), compiled to WebAssembly ([yaegi-wasm](https://github.com/Muhammad-Ayman/yaegi-wasm))
+
+### Version
+
+Yaegi v0.16.1, running go1.25.0
+
+## Code Formatting
+
+Using [GopherJS](https://github.com/gopherjs/gopherjs)
+
+## Example Usage
+
+This example demonstrates standard library usage and JavaScript interoperability (also check the code in the HTML editor):
+
+<LiveCodes template="go-wasm" height="80vh"></LiveCodes>
+
+
+## Live Reload
+
+By default, new code changes are sent to the result page for re-evaluation without a full page reload, to avoid the need to reload the Go environment.
+
+This behavior can be disabled by adding the code comment `// __livecodes_reload__` to the code, which will force a full page reload.
+This comment can be added in the [`hiddenContent` property of the editor](../configuration/configuration-object.mdx#markup) for embedded playgrounds.
+
+## Starter Template
+
+https://livecodes.io/?template=go-wasm
+
+## Links
+
+- [Go](https://go.dev/)
+- [Go documentation](https://go.dev/doc/)
+- [Go standard library](https://pkg.go.dev/std)
+- [Yaegi](https://github.com/traefik/yaegi)
+- [Go using GopherJS](./go.mdx) in LiveCodes
diff --git a/docs/docs/languages/go.mdx b/docs/docs/languages/go.mdx
index 2e71b7f967..e3a584e872 100644
--- a/docs/docs/languages/go.mdx
+++ b/docs/docs/languages/go.mdx
@@ -1,3 +1,72 @@
 # Go (Golang)
 
-TODO...
+[Go](https://go.dev/) (Golang), is an open-source, statically typed, and compiled programming language developed by Google. It is designed for simplicity, efficiency, and strong support for concurrency, making it well-suited for building scalable and high-performance applications.
+
+LiveCodes uses [GopherJS](https://github.com/gopherjs/gopherjs) which is a Go to JavaScript compiler, to run Go in the browser.
+
+:::info Note
+
+LiveCodes also supports running Go using [Yaegi](https://github.com/traefik/yaegi), the Go interpreter (running on WebAssembly). Read documentation [here](./go-wasm.mdx).
+
+:::
+
+## Demo
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+export const params = {
+  'go': 'package main\n\nimport "fmt"\n\nfunc main() {\n\tfmt.Println("Hello, World!")\n}\n',
+  console: 'full',
+};
+
+<LiveCodes params={params}></LiveCodes>
+
+## Usage
+
+LiveCodes runs Go in the browser, including the [standard library](https://pkg.go.dev/std).
+
+JavaScript interoperability and DOM access is achieved using [package `js`](https://pkg.go.dev/syscall/js) (see the [example below](#example-usage)).
+
+## Language Info
+
+### Name
+
+`go`
+
+### Extensions
+
+`go`, `golang`
+
+### Editor
+
+`script`
+
+## Compiler
+
+[GopherJS](https://github.com/gopherjs/gopherjs), the Go to JavaScript compiler.
+
+### Version
+
+GopherJS v1.19.0 beta1, running Go 1.19.13
+
+## Code Formatting
+
+Using [GopherJS](https://github.com/gopherjs/gopherjs)
+
+## Example Usage
+
+This example demonstrates standard library usage, JavaScript interoperability and DOM access:
+
+<LiveCodes template="go" height="80vh"></LiveCodes>
+
+## Starter Template
+
+https://livecodes.io/?template=go
+
+## Links
+
+- [Go](https://go.dev/)
+- [Go documentation](https://go.dev/doc/)
+- [Go standard library](https://pkg.go.dev/std)
+- [GopherJS](https://github.com/gopherjs/gopherjs)
+- [Go using Yaegi](./go-wasm.mdx) in LiveCodes
diff --git a/docs/docs/languages/markdown.mdx b/docs/docs/languages/markdown.mdx
index 4793abb742..1e01cc18d9 100644
--- a/docs/docs/languages/markdown.mdx
+++ b/docs/docs/languages/markdown.mdx
@@ -1,3 +1,160 @@
 # Markdown
 
-TODO...
+[Markdown](https://daringfireball.net/projects/markdown/) is a text-to-HTML conversion tool for web writers.
+Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid HTML.
+
+Markdown is now one of the world's most popular markup languages.
+
+:::info Note
+
+Please note that MDX is also supported in LiveCodes and is [documented here](./mdx.mdx).
+
+:::
+
+## Demo
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+export const markdownConfig = {
+  markup: {
+    language: 'markdown',
+    content: `## Markdown
+
+_Hello_ **World**
+
+Ordered List:
+
+1. item
+2. item
+3. item
+
+Unordered list:
+
+- item
+- item
+- item
+
+Link:
+
+[link](https://livecodes.io)
+
+Image:
+
+![image](https://placehold.co/300x200)
+
+Table:
+
+| header 1 | header 2 |
+| -------- | -------- |
+| cell 1   | cell 2   |
+| cell 3   | cell 4   |
+
+Quote:
+
+> blockquote
+
+Code:
+
+\`\`\`python
+print("Hello, World!")
+\`\`\`
+`
+  },
+}
+
+<LiveCodes config={markdownConfig}></LiveCodes>
+
+## Styles
+
+By default, no styes are added. Only HTML output is generated from the Markdown code.
+
+If you want to style the result page similar to GitHub Markdown, you can use [`github-markdown-css`](https://github.com/sindresorhus/github-markdown-css).
+Note that the body needs to have a `class="markdown-body"` for the styles to be applied.
+
+```js title="Script Editor (JS)"
+document.body.classList.add('markdown-body');
+```
+
+Example:
+
+export const styledMarkdownParams = {
+  template: 'markdown',
+  activeEditor: 'style',
+  css: `@import 'github-markdown-css';
+
+.markdown-body {
+  box-sizing: border-box;
+  min-width: 200px;
+  max-width: 980px;
+  margin: 0 auto;
+  padding: 45px;
+}
+
+@media (max-width: 767px) {
+  .markdown-body {
+    padding: 15px;
+  }
+}
+`,
+}
+
+<LiveCodes params={styledMarkdownParams} height='80vh'></LiveCodes>
+
+## Language Info
+
+### Name
+
+`markdown`
+
+### Aliases
+
+`md`, `mdown`, `mkdn`
+
+### Extension
+
+`.md`
+
+### Editor
+
+`script`
+
+## Compiler
+
+[Marked](https://marked.js.org/)
+
+### Version
+
+`marked`: v13.0.2
+
+## Code Formatting
+
+Using [Prettier](https://prettier.io/).
+
+## Custom Settings
+
+[Custom settings](../advanced/custom-settings.mdx) added to the property `markdown` are passed as a JSON object to [`marked.parse`](https://marked.js.org/using_advanced). Please check the [documentation](https://marked.js.org/using_advanced#options) for full reference.
+
+Please note that custom settings should be valid JSON (i.e. functions are not allowed).
+
+**Example:**
+
+```json title="Custom Settings"
+{
+  "markdown": {
+    "gfm": true,
+    "breaks": true
+  }
+}
+```
+
+## Starter Template
+
+https://livecodes.io/?template=markdown
+
+## Links
+
+- [Markdown](https://daringfireball.net/projects/markdown/)
+- [Marked](https://marked.js.org/)
+- [The Markdown Guide](https://www.markdownguide.org/)
+- [MDX support in LiveCodes](./mdx.mdx)
+
diff --git a/docs/docs/languages/mdx.mdx b/docs/docs/languages/mdx.mdx
index 24ff946ef7..878089b313 100644
--- a/docs/docs/languages/mdx.mdx
+++ b/docs/docs/languages/mdx.mdx
@@ -1,3 +1,109 @@
 # MDX
 
-TODO...
+[MDX](https://mdxjs.com/) allows using JSX in [Markdown](./markdown.mdx), creating dynamic and component-driven content for websites, documentation, and applications.
+
+:::info Note
+
+Please note that Markdown is also supported in LiveCodes and is [documented here](./markdown.mdx).
+
+:::
+
+## Demo
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+export const mdxConfig = {
+  markup: {
+    language: 'mdx',
+    content: `import { Counter } from './script';
+
+# Counter
+
+<Counter />
+`,},
+  style: {
+    language: 'css',
+    content: `body, body button {
+  text-align: center;
+  font: 1em sans-serif;
+}
+`,
+  },
+  script: {
+    language: 'jsx',
+    content: `import { useState } from "react";
+
+export function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <p>You clicked {count} times.</p>
+      <button onClick={() => setCount(count + 1)}>
+        click me
+      </button>
+    </div>
+  );
+}
+`,
+  },
+}
+
+<LiveCodes config={mdxConfig}></LiveCodes>
+
+## Usage
+
+Components can be imported from the script editor that uses [JSX](./jsx.mdx) or [React](./react.mdx) by importing from `'./script'` (with no extension).
+
+Example:
+
+```js
+import { ComponentName } from './script';
+```
+
+## Language Info
+
+### Name
+
+`mdx`
+
+### Extension
+
+`.mdx`
+
+### Editor
+
+`script`
+
+## Compiler
+
+[MDX](https://mdxjs.com/)
+
+### Version
+
+`@mdx-js/mdx`: v3.1.0
+
+## Code Formatting
+
+Using [Prettier](https://prettier.io/).
+
+## Custom Settings
+
+[Custom settings](../advanced/custom-settings.mdx) added to the property `mdx` are passed as a JSON object to [`mdx.compile`](https://mdxjs.com/packages/mdx/#compilefile-options). Please check the [documentation](https://mdxjs.com/packages/mdx/#compileoptions) for full reference.
+
+Please note that custom settings should be valid JSON (i.e. functions are not allowed).
+
+
+## Starter Template
+
+https://livecodes.io/?template=mdx
+
+## Links
+
+- [MDX](https://mdxjs.com/)
+- [JSX](https://react.dev/learn/writing-markup-with-jsx)
+- [React](https://react.dev/)
+- [Markdown support in LiveCodes](./markdown.mdx)
+- [JSX support in LiveCodes](./jsx.mdx)
+- [React support in LiveCodes](./react.mdx)
+
+
diff --git a/docs/docs/languages/python-wasm.mdx b/docs/docs/languages/python-wasm.mdx
index a174a2b301..e98f819e3b 100644
--- a/docs/docs/languages/python-wasm.mdx
+++ b/docs/docs/languages/python-wasm.mdx
@@ -101,7 +101,7 @@ Check the [starter template](#starter-template) for an example.
 
 ### Version
 
-Pyodide v0.25.1, running Python v3.11.3
+Pyodide v0.28.0, running Python v3.13.2
 
 ## Code Formatting
 
diff --git a/docs/src/components/LanguageSliders.tsx b/docs/src/components/LanguageSliders.tsx
index e1daff5ac6..960c4933a6 100644
--- a/docs/src/components/LanguageSliders.tsx
+++ b/docs/src/components/LanguageSliders.tsx
@@ -83,6 +83,7 @@ export default function Sliders() {
       { name: 'ruby', title: 'Ruby' },
       { name: 'ruby-wasm', title: 'Ruby (Wasm)' },
       { name: 'go', title: 'Go' },
+      { name: 'go-wasm', title: 'Go (Wasm)' },
       { name: 'php', title: 'PHP' },
       { name: 'php-wasm', title: 'PHP (Wasm)' },
       { name: 'cpp', title: 'C++' },
diff --git a/docs/src/components/TemplateList.tsx b/docs/src/components/TemplateList.tsx
index 126f377f72..a246d4d47a 100644
--- a/docs/src/components/TemplateList.tsx
+++ b/docs/src/components/TemplateList.tsx
@@ -42,6 +42,7 @@ const templates = [
   { name: 'ruby', title: 'Ruby Starter', thumbnail: 'ruby.svg' },
   { name: 'ruby-wasm', title: 'Ruby (Wasm) Starter', thumbnail: 'ruby.svg' },
   { name: 'go', title: 'Go Starter', thumbnail: 'go.svg' },
+  { name: 'go-wasm', title: 'Go (Wasm) Starter', thumbnail: 'go.svg' },
   { name: 'php', title: 'PHP Starter', thumbnail: 'php.svg' },
   { name: 'php-wasm', title: 'PHP (Wasm) Starter', thumbnail: 'php.svg' },
   { name: 'cpp', title: 'C++ Starter', thumbnail: 'cpp.svg' },
diff --git a/e2e/specs/compilers.spec.ts b/e2e/specs/compilers.spec.ts
index bba6112526..d18dd75263 100644
--- a/e2e/specs/compilers.spec.ts
+++ b/e2e/specs/compilers.spec.ts
@@ -1,1783 +1,1783 @@
-import { expect } from '@playwright/test';
-import { getLoadedApp, waitForEditorFocus } from '../helpers';
-import { test } from '../test-fixtures';
-
-test.describe('Compiler Results', () => {
-  test('HTML/CSS/JS', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text="HTML"');
-    await waitForEditorFocus(app);
-    await page.keyboard.type('hello, ');
-
-    await app.click(':nth-match([title="Change Language"], 2)');
-    await app.click('text="CSS"');
-    await waitForEditorFocus(app);
-    await page.keyboard.type('body {color: blue;}');
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text="JavaScript"');
-    await waitForEditorFocus(app);
-    await page.keyboard.type('document.body.innerHTML += "world!"');
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerText('body');
-
-    expect(resultText).toContain('hello, world!');
-    expect(await getResult().$eval('body', (e) => getComputedStyle(e).color)).toBe(
-      'rgb(0, 0, 255)',
-    );
-  });
-
-  test('Markdown', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text=Markdown');
-    await waitForEditorFocus(app);
-    await app.page().keyboard.type('# Hi There');
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toBe('Hi There');
-  });
-
-  test('MDX', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text=MDX');
-    await waitForEditorFocus(app);
-    await app.page().keyboard.type(`
-import {Hello} from './script';
-
-<Hello title="World" />
-`);
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=JSX');
-    await waitForEditorFocus(app);
-    await app.page().keyboard.type(`
-import React from 'react';
-export const Hello = (props) => <h1>Hello, {props.title}!</h1>;
-`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toBe('Hello, World!');
-  });
-
-  test('Astro', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text=Astro');
-    await waitForEditorFocus(app);
-    await app.page().keyboard.type(`---
-const title = "World";
----
-
-<h1>Hello, {title}!</h1>`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toBe('Hello, World!');
-  });
-
-  test('Pug', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text=Pug');
-    await waitForEditorFocus(app);
-    await page.keyboard.type('h1 Hi There');
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toBe('Hi There');
-  });
-
-  test('Haml', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('[aria-label="Project"]');
-    await app.click('text=Custom Settings');
-    await waitForEditorFocus(app, '#custom-settings-editor');
-    await page.keyboard.press('Control+A');
-    await page.keyboard.press('Delete');
-    await page.keyboard.type(`{"template":{"data":{"name": "Haml"}}}`);
-    await app.click('button:has-text("Load"):visible');
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text="Haml"');
-    await waitForEditorFocus(app);
-    await page.keyboard.type('.content Hello, #{name}!');
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('.content');
-
-    expect(resultText).toContain('Hello, Haml!');
-  });
-
-  test('AsciiDoc', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text=AsciiDoc');
-    await waitForEditorFocus(app);
-    await page.keyboard.type('== Hello, World!');
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('h2');
-
-    expect(resultText).toContain('Hello, World!');
-  });
-
-  test('Mustache', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('[aria-label="Project"]');
-    await app.click('text=Custom Settings');
-    await waitForEditorFocus(app, '#custom-settings-editor');
-    await page.keyboard.press('Control+A');
-    await page.keyboard.press('Delete');
-    await page.keyboard.type(`{"template":{"data":{"name": "Mustache"}}}`);
-    await app.click('button:has-text("Load"):visible');
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text=Mustache');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`<h1>Welcome to {{name}}</h1>`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain('Welcome to Mustache');
-  });
-
-  test('Mustache dynamic', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('[aria-label="Project"]');
-    await app.click('text=Custom Settings');
-    await waitForEditorFocus(app, '#custom-settings-editor');
-    await page.keyboard.press('Control+A');
-    await page.keyboard.press('Delete');
-    await page.keyboard.type(`{"template":{"prerender": false}}`);
-    await app.click('button:has-text("Load"):visible');
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=JavaScript');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`window.livecodes.templateData = { name: 'Mustache' };`);
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text=Mustache');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`<h1>Welcome to {{name}}</h1>`);
-
-    await waitForResultUpdate();
-    await app.waitForTimeout(3000);
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain('Welcome to Mustache');
-  });
-
-  test('Handlebars', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('[aria-label="Project"]');
-    await app.click('text=Custom Settings');
-    await waitForEditorFocus(app, '#custom-settings-editor');
-    await page.keyboard.press('Control+A');
-    await page.keyboard.press('Delete');
-    await page.keyboard.type(`{"template":{"data":{"name": "Handlebars"}}}`);
-    await app.click('button:has-text("Load"):visible');
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text=Handlebars');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`<h1>Welcome to {{name}}</h1>`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain('Welcome to Handlebars');
-  });
-
-  test('Handlebars dynamic', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('[aria-label="Project"]');
-    await app.click('text=Custom Settings');
-    await waitForEditorFocus(app, '#custom-settings-editor');
-    await page.keyboard.press('Control+A');
-    await page.keyboard.press('Delete');
-    await page.keyboard.type(`{"template":{"prerender": false}}`);
-    await app.click('button:has-text("Load"):visible');
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=JavaScript');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`window.livecodes.templateData = { name: 'Handlebars' };`);
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text=Handlebars');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`<h1>Welcome to {{name}}</h1>`);
-
-    await waitForResultUpdate();
-    await app.waitForTimeout(3000);
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain('Welcome to Handlebars');
-  });
-
-  test('Nunjucks', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('[aria-label="Project"]');
-    await app.click('text=Custom Settings');
-    await waitForEditorFocus(app, '#custom-settings-editor');
-    await page.keyboard.press('Control+A');
-    await page.keyboard.press('Delete');
-    await page.keyboard.type(`{"template":{"data":{"name": "Nunjucks"}}}`);
-    await app.click('button:has-text("Load"):visible');
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text=Nunjucks');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`<h1>Welcome to {{name}}</h1>`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain('Welcome to Nunjucks');
-  });
-
-  test('Nunjucks dynamic', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('[aria-label="Project"]');
-    await app.click('text=Custom Settings');
-    await waitForEditorFocus(app, '#custom-settings-editor');
-    await page.keyboard.press('Control+A');
-    await page.keyboard.press('Delete');
-    await page.keyboard.type(`{"template":{"prerender": false}}`);
-    await app.click('button:has-text("Load"):visible');
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=JavaScript');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`window.livecodes.templateData = { name: 'Nunjucks' };`);
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text=Nunjucks');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`<h1>Welcome to {{name}}</h1>`);
-
-    await waitForResultUpdate();
-    await app.waitForTimeout(3000);
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain('Welcome to Nunjucks');
-  });
-
-  test('EJS', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('[aria-label="Project"]');
-    await app.click('text=Custom Settings');
-    await waitForEditorFocus(app, '#custom-settings-editor');
-    await page.keyboard.press('Control+A');
-    await page.keyboard.press('Delete');
-    await page.keyboard.type(`{"template":{"data":{"name": "EJS"}}}`);
-    await app.click('button:has-text("Load"):visible');
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text=EJS');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`<h1>Welcome to <%= name %></h1>`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain('Welcome to EJS');
-  });
-
-  test('EJS dynamic', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('[aria-label="Project"]');
-    await app.click('text=Custom Settings');
-    await waitForEditorFocus(app, '#custom-settings-editor');
-    await page.keyboard.press('Control+A');
-    await page.keyboard.press('Delete');
-    await page.keyboard.type(`{"template":{"prerender": false}}`);
-    await app.click('button:has-text("Load"):visible');
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=JavaScript');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`window.livecodes.templateData = { name: 'EJS' };`);
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text=EJS');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`<h1>Welcome to <%= name %></h1>`);
-
-    await waitForResultUpdate();
-    await app.waitForTimeout(3000);
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain('Welcome to EJS');
-  });
-
-  test('Eta', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('[aria-label="Project"]');
-    await app.click('text=Custom Settings');
-    await waitForEditorFocus(app, '#custom-settings-editor');
-    await page.keyboard.press('Control+A');
-    await page.keyboard.press('Delete');
-    await page.keyboard.type(`{"template":{"data":{"name": "Eta"}}}`);
-    await app.click('button:has-text("Load"):visible');
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text="Eta"');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`<h1>Welcome to <%= it.name %></h1>`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain('Welcome to Eta');
-  });
-
-  test('Eta dynamic', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('[aria-label="Project"]');
-    await app.click('text=Custom Settings');
-    await waitForEditorFocus(app, '#custom-settings-editor');
-    await page.keyboard.press('Control+A');
-    await page.keyboard.press('Delete');
-    await page.keyboard.type(`{"template":{"prerender": false}}`);
-    await app.click('button:has-text("Load"):visible');
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=JavaScript');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`window.livecodes.templateData = { name: 'Eta' };`);
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text="Eta"');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`<h1>Welcome to <%= it.name %></h1>`);
-
-    await waitForResultUpdate();
-    await app.waitForTimeout(3000);
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain('Welcome to Eta');
-  });
-
-  test('Liquid', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('[aria-label="Project"]');
-    await app.click('text=Custom Settings');
-    await waitForEditorFocus(app, '#custom-settings-editor');
-    await page.keyboard.press('Control+A');
-    await page.keyboard.press('Delete');
-    await page.keyboard.type(`{"template":{"data":{"name":"liquid"}}}`);
-    await app.click('button:has-text("Load"):visible');
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text=Liquid');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`{{ name | capitalize | prepend: "Welcome to "}}`);
-
-    await waitForResultUpdate();
-    const body = await getResult().$('body');
-
-    expect(await body?.innerHTML()).toContain('Welcome to Liquid');
-  });
-
-  test('Liquid dynamic', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('[aria-label="Project"]');
-    await app.click('text=Custom Settings');
-    await waitForEditorFocus(app, '#custom-settings-editor');
-    await page.keyboard.press('Control+A');
-    await page.keyboard.press('Delete');
-    await page.keyboard.type(`{"template":{"prerender": false}}`);
-    await app.click('button:has-text("Load"):visible');
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=JavaScript');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`window.livecodes.templateData = { name: 'liquid' };`);
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text=Liquid');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`{{ name | capitalize | prepend: "Welcome to "}}`);
-
-    await waitForResultUpdate();
-    await app.waitForTimeout(3000);
-    const body = await getResult().$('body');
-
-    expect(await body?.innerHTML()).toContain('Welcome to Liquid');
-  });
-
-  test('doT', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('[aria-label="Project"]');
-    await app.click('text=Custom Settings');
-    await waitForEditorFocus(app, '#custom-settings-editor');
-    await page.keyboard.press('Control+A');
-    await page.keyboard.press('Delete');
-    await page.keyboard.type(`{"template":{"data":{"name":"doT"}}}`);
-    await app.click('button:has-text("Load"):visible');
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text=doT');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`<h1>Welcome to {{=it.name}}</h1>`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain('Welcome to doT');
-  });
-
-  test('doT dynamic', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('[aria-label="Project"]');
-    await app.click('text=Custom Settings');
-    await waitForEditorFocus(app, '#custom-settings-editor');
-    await page.keyboard.press('Control+A');
-    await page.keyboard.press('Delete');
-    await page.keyboard.type(`{"template":{"prerender": false}}`);
-    await app.click('button:has-text("Load"):visible');
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=JavaScript');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`window.livecodes.templateData = { name: 'doT' };`);
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text=doT');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`<h1>Welcome to {{=it.name}}</h1>`);
-
-    await waitForResultUpdate();
-    await app.waitForTimeout(3000);
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain('Welcome to doT');
-  });
-
-  test('Twig', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('[aria-label="Project"]');
-    await app.click('text=Custom Settings');
-    await waitForEditorFocus(app, '#custom-settings-editor');
-    await page.keyboard.press('Control+A');
-    await page.keyboard.press('Delete');
-    await page.keyboard.type(`{"template":{"data":{"name": "Twig"}}}`);
-    await app.click('button:has-text("Load"):visible');
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text=Twig');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`<h1>Welcome to {{ name }}</h1>`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain('Welcome to Twig');
-  });
-
-  test('Twig dynamic', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('[aria-label="Project"]');
-    await app.click('text=Custom Settings');
-    await waitForEditorFocus(app, '#custom-settings-editor');
-    await page.keyboard.press('Control+A');
-    await page.keyboard.press('Delete');
-    await page.keyboard.type(`{"template":{"prerender": false}}`);
-    await app.click('button:has-text("Load"):visible');
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=JavaScript');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`window.livecodes.templateData = { name: 'Twig' };`);
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text=Twig');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`<h1>Welcome to {{ name }}</h1>`);
-
-    await waitForResultUpdate();
-    await app.waitForTimeout(3000);
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain('Welcome to Twig');
-  });
-
-  test('Vento', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('[aria-label="Project"]');
-    await app.click('text=Custom Settings');
-    await waitForEditorFocus(app, '#custom-settings-editor');
-    await page.keyboard.press('Control+A');
-    await page.keyboard.press('Delete');
-    await page.keyboard.type(`{"template":{"data":{"name": "Vento"}}}`);
-    await app.click('button:has-text("Load"):visible');
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text=Vento');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`<h1>Welcome to {{ name }}</h1>`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain('Welcome to Vento');
-  });
-
-  test('Vento dynamic', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('[aria-label="Project"]');
-    await app.click('text=Custom Settings');
-    await waitForEditorFocus(app, '#custom-settings-editor');
-    await page.keyboard.press('Control+A');
-    await page.keyboard.press('Delete');
-    await page.keyboard.type(`{"template":{"prerender": false}}`);
-    await app.click('button:has-text("Load"):visible');
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=JavaScript');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`window.livecodes.templateData = { name: 'Vento' };`);
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text=Vento');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`<h1>Welcome to {{ name }}</h1>`);
-
-    await waitForResultUpdate();
-    await app.waitForTimeout(3000);
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain('Welcome to Vento');
-  });
-
-  test('art-template', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('[aria-label="Project"]');
-    await app.click('text=Custom Settings');
-    await waitForEditorFocus(app, '#custom-settings-editor');
-    await page.keyboard.press('Control+A');
-    await page.keyboard.press('Delete');
-    await page.keyboard.type(`{"template":{"data":{"name": "art-template"}}}`);
-    await app.click('button:has-text("Load"):visible');
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text=art-template');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`<h1>Welcome to {{ name }}</h1>`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain('Welcome to art-template');
-  });
-
-  test('art-template dynamic', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('[aria-label="Project"]');
-    await app.click('text=Custom Settings');
-    await waitForEditorFocus(app, '#custom-settings-editor');
-    await page.keyboard.press('Control+A');
-    await page.keyboard.press('Delete');
-    await page.keyboard.type(`{"template":{"prerender": false}}`);
-    await app.click('button:has-text("Load"):visible');
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=JavaScript');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`window.livecodes.templateData = { name: 'art-template' };`);
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text=art-template');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`<h1>Welcome to {{ name }}</h1>`);
-
-    await waitForResultUpdate();
-    await app.waitForTimeout(3000);
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain('Welcome to art-template');
-  });
-
-  test('jinja', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('[aria-label="Project"]');
-    await app.click('text=Custom Settings');
-    await waitForEditorFocus(app, '#custom-settings-editor');
-    await page.keyboard.press('Control+A');
-    await page.keyboard.press('Delete');
-    await page.keyboard.type(`{"template":{"data":{"name": "jinja"}}}`);
-    await app.click('button:has-text("Load"):visible');
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text="Jinja"');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`<h1>Welcome to {{ name }}</h1>`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain('Welcome to jinja');
-  });
-
-  test('jinja dynamic', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('[aria-label="Project"]');
-    await app.click('text=Custom Settings');
-    await waitForEditorFocus(app, '#custom-settings-editor');
-    await page.keyboard.press('Control+A');
-    await page.keyboard.press('Delete');
-    await page.keyboard.type(`{"template":{"prerender": false}}`);
-    await app.click('button:has-text("Load"):visible');
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=JavaScript');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`window.livecodes.templateData = { name: 'jinja' };`);
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text="Jinja"');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`<h1>Welcome to {{ name }}</h1>`);
-
-    await waitForResultUpdate();
-    await app.waitForTimeout(3000);
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain('Welcome to jinja');
-  });
-
-  test('BBCode', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text=BBCode');
-    await waitForEditorFocus(app);
-    await app.page().keyboard.type('[quote]quoted text[/quote]');
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerText('blockquote');
-
-    expect(resultText).toBe('quoted text');
-  });
-
-  test('MJML', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 1)');
-    await app.click('text=MJML');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`
-<mjml>
-  <mj-body>
-    <mj-section>
-      <mj-column>
-        <mj-text color="blue">
-          Hello MJML!
-        </mj-text>
-      </mj-column>
-    </mj-section>
-  </mj-body>
-</mjml>
-`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('table');
-
-    expect(resultText).toContain('Hello MJML!');
-  });
-
-  test('SCSS', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 2)');
-    await app.click('text=SCSS');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(
-      `$font-stack: Helvetica, sans-serif; body { font: 100% $font-stack; }`,
-    );
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('style');
-
-    expect(resultText).toContain('font: 100% Helvetica, sans-serif;');
-  });
-
-  test('Sass', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 2)');
-    await app.click('text=Sass');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`$font-stack: Helvetica, sans-serif\nbody\n  font: 100% $font-stack`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('style');
-
-    expect(resultText).toContain('font: 100% Helvetica, sans-serif;');
-  });
-
-  test('Less', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 2)');
-    await app.click('text=Less');
-    await waitForEditorFocus(app);
-    await page.keyboard.type(`@width: 10px; #header { width: @width; }`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('style');
-
-    expect(resultText).toContain('width: 10px;');
-  });
-
-  test('Stylus', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 2)');
-    await app.click('text=Stylus');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(`font-size = 14px\nbody\n  font font-size Arial, sans-serif`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('style');
-
-    expect(resultText).toContain('font: 14px Arial, sans-serif;');
-  });
-
-  test('Stylis', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 2)');
-    await app.click('text=Stylis');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(
-      '[namespace] {\n  div {\n    display: flex;\n\n    @media screen {\n      color: blue;\n    }\n  }\n\n  div {\n    transform: translateZ(0);\n\n    h1, h2 {\n      color: red;\n    }\n  }\n}',
-    );
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('style');
-
-    expect(resultText).toContain(
-      '[namespace] div{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}@media screen{[namespace] div{color:blue;}}[namespace] div{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);}[namespace] div h1,[namespace] div h2{color:red;}',
-    );
-  });
-
-  test('PostCSS/postcssImportUrl', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 2)');
-    await app.click('text=Import Url');
-    await app.click('text=CSS');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(`@import "github-markdown-css";`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('style');
-
-    expect(resultText).toContain('.markdown-body');
-  });
-
-  test('PostCSS/Autoprefixer', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 2)');
-    await app.click('text=Autoprefixer');
-    await app.click('text=CSS');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(`.example { user-select: none; }`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('style');
-
-    expect(resultText).toContain('-webkit-user-select: none;');
-  });
-
-  test('PostCSS/Preset Env', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 2)');
-    await app.click('text=Preset Env');
-    await app.click('text=CSS');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(
-      `:root { --mainColor: #12345678; --secondaryColor: lab(32.5 38.5 -47.6 / 90%); }`,
-    );
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('style');
-
-    expect(resultText).toContain('--mainColor: rgba(18,52,86,0.47059);');
-  });
-
-  test('Babel', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=Babel');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(`[1, 2, 3].map(n => n + 1);`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('body > script');
-
-    expect(resultText).toContain(
-      `[1, 2, 3].map(function (n) {
-  return n + 1;
-});`,
-    );
-  });
-
-  test('Sucrase', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=Sucrase');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(`const Greet = (name: string) => <>Hello {name}!</>;`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('body > script');
-
-    expect(resultText).toContain(
-      `const Greet = (name) => React.createElement(React.Fragment, null, "Hello " , name, "!");`,
-    );
-  });
-
-  test('TypeScript', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=TypeScript');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(
-      `type Fish = { swim: () => void };
-type Bird = { fly: () => void };
-declare function getSmallPet(): Fish | Bird;
-// ---cut---
-function isFish(pet: Fish | Bird): pet is Fish {
-  return (pet as Fish).swim !== undefined;
-}`,
-    );
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('body > script');
-
-    expect(resultText).toContain(
-      `// ---cut---
-function isFish(pet) {
-    return pet.swim !== undefined;
-}`,
-    );
-  });
-
-  test('Flow', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=Flow');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(
-      'function foo(x: ?number): string {if (x) { return x; } return "default string"; }',
-    );
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('body > script');
-
-    expect(resultText).toContain(
-      'function foo(x         )         {if (x) { return x; } return "default string"; }',
-    );
-  });
-
-  test('JSX', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('text="HTML"');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(`<div id="app">Loading...</div>`);
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text="JSX"');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(
-      `
-const Hello = (props) => <h1>Hello, {props.name}</h1>
-export default () => <Hello name="React" />;
-`,
-    );
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain(`Hello, React`);
-  });
-
-  test('TSX', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text="TSX"');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(
-      `
-interface Props { name: string }
-const Hello = (props: Props) => <h1>Hello, {props.name}</h1>
-export default () => <Hello name="React" />;
-`,
-    );
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain(`Hello, React`);
-  });
-
-  test('React', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('text="HTML"');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(`<div id="app">Loading...</div>`);
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text="React"');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(
-      `
-const Hello = (props) => <h1>Hello, {props.name}</h1>
-export default () => <Hello name="React" />;
-`,
-    );
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain(`Hello, React`);
-  });
-
-  test('React (TSX)', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text="React (TSX)"');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(
-      `
-interface Props { name: string }
-const Hello = (props: Props) => <h1>Hello, {props.name}</h1>
-export default () => <Hello name="React" />;
-`,
-    );
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain(`Hello, React`);
-  });
-
-  test('Vue', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await (await app.$('[data-lang="vue"]'))?.click();
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(
-      `<template>
-<h1>Hello, {{ title }}</h1>
-</template>
-<script>
-export default {
-  data: () =>({ title: 'Vue' })
-};
-</script>
-<style scoped>
-h1 {
-  color: blue;
-}
-</style>`,
-    );
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain(`Hello, Vue`);
-    expect(await getResult().$eval('h1', (e) => getComputedStyle(e).color)).toBe('rgb(0, 0, 255)');
-  });
-
-  test('Vue JSX', async ({ page, getTestUrl }) => {
-    const sfc = `<script>
-  export default {
-    data() {
-      return {
-        counter: 0,
-        align: "center",
-      };
-    },
-    methods: {
-      increment() {
-        this.counter += 1;
-      },
-    },
-    render() {
-      return (
-        <div class="container">
-          <h1>Hello, Vue!</h1>
-          <img
-            class="logo"
-            src="${getTestUrl({})}/livecodes/assets/templates/vue.svg"
-          />
-          <p>You clicked {this.counter} times.</p>
-          <button onClick={this.increment}>Click me</button>
-        </div>
-      );
-    },
-  };
-</script>
-
-<style scoped>
-  .container,
-  .container button {
-    text-align: v-bind("align");
-    font: 1em sans-serif;
-  }
-  .logo {
-    width: 150px;
-  }
-</style>
-`;
-
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await (await app.$('[data-lang="vue"]'))?.click();
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(sfc);
-
-    await waitForResultUpdate();
-
-    await getResult().click('text=Click me');
-    await getResult().click('text=Click me');
-    await getResult().click('text=Click me');
-
-    const titleText = await getResult().innerText('h1');
-    expect(titleText).toBe('Hello, Vue!');
-
-    const counterText = await getResult().innerText('text=You clicked');
-    expect(counterText).toBe('You clicked 3 times.');
-  });
-
-  test('Vue import', async ({ page, getTestUrl }) => {
-    const sfc = `<template>
-  <div class="container">
-    <p id="uuid">{{ uuid }}</p>
-    <Counter />
-  </div>
-</template>
-
-<script>
-  import 'https://hatemhosny.github.io/typescript-demo-for-testing-import-/style.css';
-  import {v4} from 'uuid';
-  import Counter from 'https://hatemhosny.github.io/vue3-samples/src/components/Counter.vue';
-  export default {
-    components: {
-      Counter,
-    },
-    data() {
-      return {
-        uuid: v4(),
-      };
-    },
-  };
-</script>
-`;
-
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await (await app.$('[data-lang="vue"]'))?.click();
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(sfc);
-
-    await waitForResultUpdate();
-
-    // css import
-    const headHTML = await getResult().innerHTML('head');
-    expect(headHTML).toContain(
-      '<link rel="stylesheet" href="https://hatemhosny.github.io/typescript-demo-for-testing-import-/style.css">',
-    );
-
-    // bare module import
-    const uuidText = await getResult().innerText('#uuid');
-    expect(uuidText.length).toBeGreaterThan(10);
-
-    // import vue component
-    await getResult().click(':nth-match(button, 1)');
-    await getResult().click(':nth-match(button, 1)');
-    await getResult().click(':nth-match(button, 1)');
-
-    // import vue component that has relative imports and fetches absolute url
-    const buttonText = await getResult().innerText(':nth-match(button, 1)');
-    expect(buttonText).toBe('Count is: 3, double is: 6');
-  });
-
-  test('Vue langs', async ({ page, getTestUrl }) => {
-    const sfc = `<template lang="md">
-  # Hello, {{ name }}!
-  <p :class="$style.text">some text</p>
-</template>
-
-<script lang="ts" setup>
-  const name: string = 'Vue';
-</script>
-
-<style lang="scss" module>
-  $font-stack: Helvetica, sans-serif;
-  $primary-color: #555;
-  $secondary-color: green;
-
-  h1 {
-    font: 200% $font-stack;
-    color: $primary-color;
-  }
-
-  .text {
-    font: 100% $font-stack;
-    color: $secondary-color;
-  }
-</style>
-`;
-
-    await page.goto(
-      getTestUrl({
-        x: 'code/N4IgLglmA2CmIC4QFUB2kawCYAIAKATgPYBWsAxmCADQhawDO5BEADpEaoiDeAIYBzBogDaAXVp9KEAG6wAolihEC3Ji3a8AtnwIBrAK6tEoaH1QCDg+EgAWYLdF7lOYWOm4gAvrQZgAnnAmIGYWVgI2IOQMwrQu6O5USN6+zGxJpuaW1twyBvBxroncADxuWqxmbjihAgC8ADogWlhNAHwNBA2oODgAxDgAErDQ0ETUOMDAOKh8WrA4Xl4AhJ3dvSWsOAjkZjGNIAAkfoGwAHRuAB5g7QxE8zhXYCUA9KwdXaiv5ZV8bh-dNZfdTpGpZA5gBhNHAMWBgIwAno4eJ+GZzWAIGFgFgWHB1HAAcgAavkcABmAkAbiBrxB7ERNJOcDBFgOTBi0K0RCwBjgiN6hwAZq4ALR+KR6THDaBySDkPgTBjmBhi2AsQXUz4C1gsHQEfwilxjAiYvoAVgtmvWOGOFE4WF0BqNKkxAgIsHcVtQQN6tgAjJMfb0cML0JiAEwABkjAFIbaGwGKwBKvcHkURjZjDjqIHqnRmVKnFkCgxdYNdA1rgwnMX7o3GhaLxeQ9EXes6TTbYfEHfrDQWCEWvDSXkzYG0UiAxwxbB7IaIJFO0uxhAhxHEYoRGHDPLQdURyIw7gRV+uogY-PcAMpwyAWVfAHwgXOsFTzhCP2gBViMExPtx+A+IRZOEkTfowy5UIUCQeMkT5yCeECcNwAAs3hAA',
-      }),
-    );
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await (await app.$('[data-lang="vue"]'))?.click();
-    await waitForEditorFocus(app);
-    // await page.keyboard.insertText(sfc);
-
-    await waitForResultUpdate();
-
-    const headerText = await getResult().innerText('h1');
-
-    // markdown, scss, typescript
-    expect(headerText).toContain(`Hello, Vue 3!`);
-    expect(await getResult().$eval('h1', (e) => getComputedStyle(e).color)).toBe('rgb(85, 85, 85)');
-
-    // css modules
-    expect(await getResult().$eval('p', (e) => getComputedStyle(e).color)).toBe('rgb(0, 128, 0)');
-  });
-
-  test('Vue + Tailwind CSS', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await (await app.$('[data-lang="vue"]'))?.click();
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(
-      `<template>
-  <div class="flex items-center justify-center h-40">
-    <h1 class="text-red-600">Tailwind in Vue SFC</h1>
-  </div>
-</template>
-`,
-    );
-
-    await app.click(':nth-match([title="Change Language"], 2)');
-    await app.click('text=Tailwind CSS');
-    await app.click('text=CSS');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(
-      `@tailwind base;
-@tailwind components;
-@tailwind utilities;
-`,
-    );
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain(`Tailwind in Vue SFC`);
-    expect(await getResult().$eval('h1', (e) => getComputedStyle(e).color)).toBe(
-      'rgb(220, 38, 38)',
-    );
-  });
-
-  test('Vue 2', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=Vue 2');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(
-      `<template>
-<h1>Hello, {{ title }}</h1>
-</template>
-<script>
-export default {
-  data: { title: 'Vue 2' }
-};
-</script>
-<style scoped>
-h1 { color: blue; }
-</style>`,
-    );
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain(`Hello, Vue 2`);
-    expect(await getResult().$eval('h1', (e) => getComputedStyle(e).color)).toBe('rgb(0, 0, 255)');
-  });
-
-  test('Svelte', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await (await app.$('[data-lang="svelte"]'))?.click();
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(
-      `<script>
-  let title = "Svelte";
-</script>
-<style>
-  h1 {
-    color: blue;
-  }
-</style>
-<div class="container">
-  <h1>Hello, {title}</h1>
-</div>
-`,
-    );
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain(`Hello, Svelte`);
-    expect(await getResult().$eval('h1', (e) => getComputedStyle(e).color)).toBe('rgb(0, 0, 255)');
-  });
-
-  test('Malina.js', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=Malina.js');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(
-      `<script>
-  let title = "Malina.js";
-</script>
-<style>
-  h1 {
-    color: blue;
-  }
-</style>
-<div class="container">
-  <h1>Hello, {title}</h1>
-</div>
-`,
-    );
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain(`Hello, Malina.js`);
-    expect(await getResult().$eval('h1', (e) => getComputedStyle(e).color)).toBe('rgb(0, 0, 255)');
-  });
-
-  test('Stencil', async ({ page, getTestUrl, editor }) => {
-    test.skip(editor === 'codejar', 'please fix');
-
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('text="HTML"');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText('<my-app title="Stencil"></my-app>');
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=Stencil');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(
-      `import { Component, Prop, h } from "@stencil/core";
-@Component({
-  tag: "my-app",
-  styles: "h1 { color: blue; }",
-})
-export class App {
-  @Prop() title: string;
-  render() {
-    return (
-        <h1>Hello, {this.title}</h1>
-    );
-  }
-}`,
-    );
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('h1');
-
-    expect(resultText).toContain(`Hello, Stencil`);
-    expect(await getResult().$eval('h1', (e) => getComputedStyle(e).color)).toBe('rgb(0, 0, 255)');
-  });
-
-  test('CoffeeScript', async ({ page, getTestUrl }) => {
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=CoffeeScript');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(`square = (x) -> x * x`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerHTML('body > script');
-
-    expect(resultText).toContain(`var square;`);
-    expect(resultText).toContain(`square = function(x) {
-  return x * x;
-};`);
-  });
-
-  test('LiveScript', async ({ page, getTestUrl, editor }) => {
-    test.skip(editor === 'codejar', 'please fix');
-
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('text="HTML"');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText('<h1>Hello, <span id="title">World</span></h1>');
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=LiveScript');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(`{ capitalize, join, map, words } = require 'prelude-ls'
-title = 'live script'
-|> words
-|> map capitalize
-|> join ''
-(document.getElementById \\title).textContent = title`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerText('h1');
-
-    expect(resultText).toContain(`Hello, LiveScript`);
-  });
-
-  test('Riot.js', async ({ page, getTestUrl, editor }) => {
-    test.skip(editor === 'codejar', 'please fix');
-
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('text="HTML"');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText('<hello title="Riot.js"></hello>');
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=Riot.js');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText('<hello><h1>Hello, {props.title}</h1></hello>');
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerText('h1');
-
-    expect(resultText).toContain(`Hello, Riot.js`);
-  });
-
-  test('AssemblyScript', async ({ page, getTestUrl }) => {
-    test.fixme();
-
-    await page.goto(getTestUrl());
-
-    const { app, getResult } = await getLoadedApp(page);
-
-    await app.click('text="HTML"');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(
-      `<h1>Hello, <span id="title">World</span></h1>
-  <script>
-  (async() => {
-    const { wasmModule } = await livecodes.wasm;
-    const { __getString, getTitle, increment } = wasmModule.exports;
-    const title = document.querySelector('#title');
-    title.innerHTML = __getString(getTitle());
-    })();
-  </script>`,
-    );
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=AssemblyScript');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(`export function getTitle(): string {return "AssemblyScript";`);
-    // workaround for monaco auto-complete
-    await page.keyboard.press('Delete');
-    await page.keyboard.insertText(`}`);
-
-    await app.waitForTimeout(15000);
-    const resultText = await getResult().innerText('text=Hello, AssemblyScript');
-
-    expect(resultText).toContain(`Hello, AssemblyScript`);
-  });
-
-  test('Python', async ({ page, getTestUrl, editor }) => {
-    test.skip(editor === 'codejar', 'please fix');
-
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('text="HTML"');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText('<h1 id="header">Hello, World</h1>');
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=Python');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(`from browser import document
-title = 'Python'
-document['header'].html = f"Hello, {title}"`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerText('h1');
-
-    expect(resultText).toContain(`Hello, Python`);
-  });
-
-  test('Pyodide', async ({ page, getTestUrl }) => {
-    test.skip();
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('text="HTML"');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText('<h1 id="header">Hello, World</h1>');
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=Pyodide');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText(`from js import document
-title = 'Python'
-document.getElementById('header').innerHTML = f"Hello, {title}"`);
-
-    await waitForResultUpdate();
-    await getResult().waitForSelector('text=Hello, Python');
-    const resultText = await getResult().innerText('h1');
-
-    expect(resultText).toContain(`Hello, Python`);
-  });
-
-  test('Ruby', async ({ page, getTestUrl, editor }) => {
-    test.skip(editor === 'codejar', 'please fix');
-
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('text="HTML"');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText('<h1>Hello, <span id="title">world</span></h1>');
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=Ruby');
-    await waitForEditorFocus(app);
-
-    await page.keyboard.insertText(`require "native"
-title = 'Ruby'
-$$.document.querySelector('#title').innerHTML = title`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerText('text=Hello, Ruby');
-
-    expect(resultText).toContain(`Hello, Ruby`);
-  });
-
-  test('Go', async ({ page, getTestUrl, editor }) => {
-    test.slow();
-
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('text="HTML"');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText('<h1>Hello, <span id="title">world</span></h1>');
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=Go');
-    await waitForEditorFocus(app);
-
-    await page.keyboard.insertText(`package main
-import "syscall/js"
-func main() {
-	js.Global().Get("document").Call("querySelector", "#title").Set("innerHTML", "Golang")
-}`);
-
-    await waitForResultUpdate({ delay: 4000, timeout: 60_000 });
-    const resultText = await getResult().innerText('h1');
-
-    expect(resultText).toContain(`Hello, Golang`);
-  });
-
-  test('PHP', async ({ page, getTestUrl, editor }) => {
-    test.skip(editor === 'codejar', 'please fix');
-
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('text="HTML"');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText('<h1>Hello, <span id="title">world</span></h1>');
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=PHP');
-    await waitForEditorFocus(app);
-
-    // go below pre-inserted '<?php'
-    await page.keyboard.press('ArrowDown');
-    await page.keyboard.insertText(
-      `$title = 'PHP';
-$document->getElementById('title')->textContent = $title;`,
-    );
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerText('h1');
-
-    expect(resultText).toContain(`Hello, PHP`);
-  });
-
-  test('Perl', async ({ page, getTestUrl, editor }) => {
-    test.skip(editor === 'codejar', 'please fix');
-
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('text="HTML"');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText('<h1>Hello, <span id="title">world</span></h1>');
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=Perl');
-    await waitForEditorFocus(app);
-
-    await page.keyboard.insertText(`use strict;
-my $title = 'Perl';
-JS::inline('document.getElementById("title").innerHTML') = $title;`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerText('h1');
-
-    expect(resultText).toContain(`Hello, Perl`);
-  });
-
-  test('Lua', async ({ page, getTestUrl, editor }) => {
-    test.skip(editor === 'codejar', 'please fix');
-
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('text="HTML"');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText('<h1>Hello, <span id="title">world</span></h1>');
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=Lua');
-    await waitForEditorFocus(app);
-
-    await page.keyboard.insertText(`js = require "js"
-window = js.global
-document = window.document
-document:getElementById("title").innerHTML = "Lua"`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerText('h1');
-
-    expect(resultText).toContain(`Hello, Lua`);
-  });
-
-  test('Scheme', async ({ page, getTestUrl, editor }) => {
-    test.skip(editor === 'codejar', 'please fix');
-
-    await page.goto(getTestUrl());
-
-    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
-
-    await app.click('text="HTML"');
-    await waitForEditorFocus(app);
-    await page.keyboard.insertText('<h1>Hello, <span id="title">world</span></h1>');
-
-    await app.click(':nth-match([title="Change Language"], 3)');
-    await app.click('text=Scheme');
-    await waitForEditorFocus(app);
-
-    await page.keyboard.insertText(`(let ((title "Scheme"))
-  (set-content! "#title" title))`);
-
-    await waitForResultUpdate();
-    const resultText = await getResult().innerText('h1');
-
-    expect(resultText).toContain(`Hello, Scheme`);
-  });
-});
+import { expect } from '@playwright/test';
+import { getLoadedApp, waitForEditorFocus } from '../helpers';
+import { test } from '../test-fixtures';
+
+test.describe('Compiler Results', () => {
+  test('HTML/CSS/JS', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text="HTML"');
+    await waitForEditorFocus(app);
+    await page.keyboard.type('hello, ');
+
+    await app.click(':nth-match([title="Change Language"], 2)');
+    await app.click('text="CSS"');
+    await waitForEditorFocus(app);
+    await page.keyboard.type('body {color: blue;}');
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text="JavaScript"');
+    await waitForEditorFocus(app);
+    await page.keyboard.type('document.body.innerHTML += "world!"');
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerText('body');
+
+    expect(resultText).toContain('hello, world!');
+    expect(await getResult().$eval('body', (e) => getComputedStyle(e).color)).toBe(
+      'rgb(0, 0, 255)',
+    );
+  });
+
+  test('Markdown', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text=Markdown');
+    await waitForEditorFocus(app);
+    await app.page().keyboard.type('# Hi There');
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toBe('Hi There');
+  });
+
+  test('MDX', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text=MDX');
+    await waitForEditorFocus(app);
+    await app.page().keyboard.type(`
+import {Hello} from './script';
+
+<Hello title="World" />
+`);
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=JSX');
+    await waitForEditorFocus(app);
+    await app.page().keyboard.type(`
+import React from 'react';
+export const Hello = (props) => <h1>Hello, {props.title}!</h1>;
+`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toBe('Hello, World!');
+  });
+
+  test('Astro', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text=Astro');
+    await waitForEditorFocus(app);
+    await app.page().keyboard.type(`---
+const title = "World";
+---
+
+<h1>Hello, {title}!</h1>`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toBe('Hello, World!');
+  });
+
+  test('Pug', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text=Pug');
+    await waitForEditorFocus(app);
+    await page.keyboard.type('h1 Hi There');
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toBe('Hi There');
+  });
+
+  test('Haml', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('[aria-label="Project"]');
+    await app.click('text=Custom Settings');
+    await waitForEditorFocus(app, '#custom-settings-editor');
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type(`{"template":{"data":{"name": "Haml"}}}`);
+    await app.click('button:has-text("Load"):visible');
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text="Haml"');
+    await waitForEditorFocus(app);
+    await page.keyboard.type('.content Hello, #{name}!');
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('.content');
+
+    expect(resultText).toContain('Hello, Haml!');
+  });
+
+  test('AsciiDoc', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text=AsciiDoc');
+    await waitForEditorFocus(app);
+    await page.keyboard.type('== Hello, World!');
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h2');
+
+    expect(resultText).toContain('Hello, World!');
+  });
+
+  test('Mustache', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('[aria-label="Project"]');
+    await app.click('text=Custom Settings');
+    await waitForEditorFocus(app, '#custom-settings-editor');
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type(`{"template":{"data":{"name": "Mustache"}}}`);
+    await app.click('button:has-text("Load"):visible');
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text=Mustache');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`<h1>Welcome to {{name}}</h1>`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain('Welcome to Mustache');
+  });
+
+  test('Mustache dynamic', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('[aria-label="Project"]');
+    await app.click('text=Custom Settings');
+    await waitForEditorFocus(app, '#custom-settings-editor');
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type(`{"template":{"prerender": false}}`);
+    await app.click('button:has-text("Load"):visible');
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=JavaScript');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`window.livecodes.templateData = { name: 'Mustache' };`);
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text=Mustache');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`<h1>Welcome to {{name}}</h1>`);
+
+    await waitForResultUpdate();
+    await app.waitForTimeout(3000);
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain('Welcome to Mustache');
+  });
+
+  test('Handlebars', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('[aria-label="Project"]');
+    await app.click('text=Custom Settings');
+    await waitForEditorFocus(app, '#custom-settings-editor');
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type(`{"template":{"data":{"name": "Handlebars"}}}`);
+    await app.click('button:has-text("Load"):visible');
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text=Handlebars');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`<h1>Welcome to {{name}}</h1>`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain('Welcome to Handlebars');
+  });
+
+  test('Handlebars dynamic', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('[aria-label="Project"]');
+    await app.click('text=Custom Settings');
+    await waitForEditorFocus(app, '#custom-settings-editor');
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type(`{"template":{"prerender": false}}`);
+    await app.click('button:has-text("Load"):visible');
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=JavaScript');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`window.livecodes.templateData = { name: 'Handlebars' };`);
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text=Handlebars');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`<h1>Welcome to {{name}}</h1>`);
+
+    await waitForResultUpdate();
+    await app.waitForTimeout(3000);
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain('Welcome to Handlebars');
+  });
+
+  test('Nunjucks', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('[aria-label="Project"]');
+    await app.click('text=Custom Settings');
+    await waitForEditorFocus(app, '#custom-settings-editor');
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type(`{"template":{"data":{"name": "Nunjucks"}}}`);
+    await app.click('button:has-text("Load"):visible');
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text=Nunjucks');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`<h1>Welcome to {{name}}</h1>`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain('Welcome to Nunjucks');
+  });
+
+  test('Nunjucks dynamic', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('[aria-label="Project"]');
+    await app.click('text=Custom Settings');
+    await waitForEditorFocus(app, '#custom-settings-editor');
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type(`{"template":{"prerender": false}}`);
+    await app.click('button:has-text("Load"):visible');
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=JavaScript');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`window.livecodes.templateData = { name: 'Nunjucks' };`);
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text=Nunjucks');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`<h1>Welcome to {{name}}</h1>`);
+
+    await waitForResultUpdate();
+    await app.waitForTimeout(3000);
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain('Welcome to Nunjucks');
+  });
+
+  test('EJS', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('[aria-label="Project"]');
+    await app.click('text=Custom Settings');
+    await waitForEditorFocus(app, '#custom-settings-editor');
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type(`{"template":{"data":{"name": "EJS"}}}`);
+    await app.click('button:has-text("Load"):visible');
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text=EJS');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`<h1>Welcome to <%= name %></h1>`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain('Welcome to EJS');
+  });
+
+  test('EJS dynamic', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('[aria-label="Project"]');
+    await app.click('text=Custom Settings');
+    await waitForEditorFocus(app, '#custom-settings-editor');
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type(`{"template":{"prerender": false}}`);
+    await app.click('button:has-text("Load"):visible');
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=JavaScript');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`window.livecodes.templateData = { name: 'EJS' };`);
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text=EJS');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`<h1>Welcome to <%= name %></h1>`);
+
+    await waitForResultUpdate();
+    await app.waitForTimeout(3000);
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain('Welcome to EJS');
+  });
+
+  test('Eta', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('[aria-label="Project"]');
+    await app.click('text=Custom Settings');
+    await waitForEditorFocus(app, '#custom-settings-editor');
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type(`{"template":{"data":{"name": "Eta"}}}`);
+    await app.click('button:has-text("Load"):visible');
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text="Eta"');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`<h1>Welcome to <%= it.name %></h1>`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain('Welcome to Eta');
+  });
+
+  test('Eta dynamic', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('[aria-label="Project"]');
+    await app.click('text=Custom Settings');
+    await waitForEditorFocus(app, '#custom-settings-editor');
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type(`{"template":{"prerender": false}}`);
+    await app.click('button:has-text("Load"):visible');
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=JavaScript');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`window.livecodes.templateData = { name: 'Eta' };`);
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text="Eta"');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`<h1>Welcome to <%= it.name %></h1>`);
+
+    await waitForResultUpdate();
+    await app.waitForTimeout(3000);
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain('Welcome to Eta');
+  });
+
+  test('Liquid', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('[aria-label="Project"]');
+    await app.click('text=Custom Settings');
+    await waitForEditorFocus(app, '#custom-settings-editor');
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type(`{"template":{"data":{"name":"liquid"}}}`);
+    await app.click('button:has-text("Load"):visible');
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text=Liquid');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`{{ name | capitalize | prepend: "Welcome to "}}`);
+
+    await waitForResultUpdate();
+    const body = await getResult().$('body');
+
+    expect(await body?.innerHTML()).toContain('Welcome to Liquid');
+  });
+
+  test('Liquid dynamic', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('[aria-label="Project"]');
+    await app.click('text=Custom Settings');
+    await waitForEditorFocus(app, '#custom-settings-editor');
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type(`{"template":{"prerender": false}}`);
+    await app.click('button:has-text("Load"):visible');
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=JavaScript');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`window.livecodes.templateData = { name: 'liquid' };`);
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text=Liquid');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`{{ name | capitalize | prepend: "Welcome to "}}`);
+
+    await waitForResultUpdate();
+    await app.waitForTimeout(3000);
+    const body = await getResult().$('body');
+
+    expect(await body?.innerHTML()).toContain('Welcome to Liquid');
+  });
+
+  test('doT', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('[aria-label="Project"]');
+    await app.click('text=Custom Settings');
+    await waitForEditorFocus(app, '#custom-settings-editor');
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type(`{"template":{"data":{"name":"doT"}}}`);
+    await app.click('button:has-text("Load"):visible');
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text=doT');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`<h1>Welcome to {{=it.name}}</h1>`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain('Welcome to doT');
+  });
+
+  test('doT dynamic', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('[aria-label="Project"]');
+    await app.click('text=Custom Settings');
+    await waitForEditorFocus(app, '#custom-settings-editor');
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type(`{"template":{"prerender": false}}`);
+    await app.click('button:has-text("Load"):visible');
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=JavaScript');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`window.livecodes.templateData = { name: 'doT' };`);
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text=doT');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`<h1>Welcome to {{=it.name}}</h1>`);
+
+    await waitForResultUpdate();
+    await app.waitForTimeout(3000);
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain('Welcome to doT');
+  });
+
+  test('Twig', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('[aria-label="Project"]');
+    await app.click('text=Custom Settings');
+    await waitForEditorFocus(app, '#custom-settings-editor');
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type(`{"template":{"data":{"name": "Twig"}}}`);
+    await app.click('button:has-text("Load"):visible');
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text=Twig');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`<h1>Welcome to {{ name }}</h1>`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain('Welcome to Twig');
+  });
+
+  test('Twig dynamic', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('[aria-label="Project"]');
+    await app.click('text=Custom Settings');
+    await waitForEditorFocus(app, '#custom-settings-editor');
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type(`{"template":{"prerender": false}}`);
+    await app.click('button:has-text("Load"):visible');
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=JavaScript');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`window.livecodes.templateData = { name: 'Twig' };`);
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text=Twig');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`<h1>Welcome to {{ name }}</h1>`);
+
+    await waitForResultUpdate();
+    await app.waitForTimeout(3000);
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain('Welcome to Twig');
+  });
+
+  test('Vento', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('[aria-label="Project"]');
+    await app.click('text=Custom Settings');
+    await waitForEditorFocus(app, '#custom-settings-editor');
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type(`{"template":{"data":{"name": "Vento"}}}`);
+    await app.click('button:has-text("Load"):visible');
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text=Vento');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`<h1>Welcome to {{ name }}</h1>`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain('Welcome to Vento');
+  });
+
+  test('Vento dynamic', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('[aria-label="Project"]');
+    await app.click('text=Custom Settings');
+    await waitForEditorFocus(app, '#custom-settings-editor');
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type(`{"template":{"prerender": false}}`);
+    await app.click('button:has-text("Load"):visible');
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=JavaScript');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`window.livecodes.templateData = { name: 'Vento' };`);
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text=Vento');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`<h1>Welcome to {{ name }}</h1>`);
+
+    await waitForResultUpdate();
+    await app.waitForTimeout(3000);
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain('Welcome to Vento');
+  });
+
+  test('art-template', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('[aria-label="Project"]');
+    await app.click('text=Custom Settings');
+    await waitForEditorFocus(app, '#custom-settings-editor');
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type(`{"template":{"data":{"name": "art-template"}}}`);
+    await app.click('button:has-text("Load"):visible');
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text=art-template');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`<h1>Welcome to {{ name }}</h1>`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain('Welcome to art-template');
+  });
+
+  test('art-template dynamic', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('[aria-label="Project"]');
+    await app.click('text=Custom Settings');
+    await waitForEditorFocus(app, '#custom-settings-editor');
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type(`{"template":{"prerender": false}}`);
+    await app.click('button:has-text("Load"):visible');
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=JavaScript');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`window.livecodes.templateData = { name: 'art-template' };`);
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text=art-template');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`<h1>Welcome to {{ name }}</h1>`);
+
+    await waitForResultUpdate();
+    await app.waitForTimeout(3000);
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain('Welcome to art-template');
+  });
+
+  test('jinja', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('[aria-label="Project"]');
+    await app.click('text=Custom Settings');
+    await waitForEditorFocus(app, '#custom-settings-editor');
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type(`{"template":{"data":{"name": "jinja"}}}`);
+    await app.click('button:has-text("Load"):visible');
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text="Jinja"');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`<h1>Welcome to {{ name }}</h1>`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain('Welcome to jinja');
+  });
+
+  test('jinja dynamic', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('[aria-label="Project"]');
+    await app.click('text=Custom Settings');
+    await waitForEditorFocus(app, '#custom-settings-editor');
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type(`{"template":{"prerender": false}}`);
+    await app.click('button:has-text("Load"):visible');
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=JavaScript');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`window.livecodes.templateData = { name: 'jinja' };`);
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text="Jinja"');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`<h1>Welcome to {{ name }}</h1>`);
+
+    await waitForResultUpdate();
+    await app.waitForTimeout(3000);
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain('Welcome to jinja');
+  });
+
+  test('BBCode', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text=BBCode');
+    await waitForEditorFocus(app);
+    await app.page().keyboard.type('[quote]quoted text[/quote]');
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerText('blockquote');
+
+    expect(resultText).toBe('quoted text');
+  });
+
+  test('MJML', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text=MJML');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`
+<mjml>
+  <mj-body>
+    <mj-section>
+      <mj-column>
+        <mj-text color="blue">
+          Hello MJML!
+        </mj-text>
+      </mj-column>
+    </mj-section>
+  </mj-body>
+</mjml>
+`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('table');
+
+    expect(resultText).toContain('Hello MJML!');
+  });
+
+  test('SCSS', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 2)');
+    await app.click('text=SCSS');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(
+      `$font-stack: Helvetica, sans-serif; body { font: 100% $font-stack; }`,
+    );
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('style');
+
+    expect(resultText).toContain('font: 100% Helvetica, sans-serif;');
+  });
+
+  test('Sass', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 2)');
+    await app.click('text=Sass');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`$font-stack: Helvetica, sans-serif\nbody\n  font: 100% $font-stack`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('style');
+
+    expect(resultText).toContain('font: 100% Helvetica, sans-serif;');
+  });
+
+  test('Less', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 2)');
+    await app.click('text=Less');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`@width: 10px; #header { width: @width; }`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('style');
+
+    expect(resultText).toContain('width: 10px;');
+  });
+
+  test('Stylus', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 2)');
+    await app.click('text=Stylus');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(`font-size = 14px\nbody\n  font font-size Arial, sans-serif`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('style');
+
+    expect(resultText).toContain('font: 14px Arial, sans-serif;');
+  });
+
+  test('Stylis', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 2)');
+    await app.click('text=Stylis');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(
+      '[namespace] {\n  div {\n    display: flex;\n\n    @media screen {\n      color: blue;\n    }\n  }\n\n  div {\n    transform: translateZ(0);\n\n    h1, h2 {\n      color: red;\n    }\n  }\n}',
+    );
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('style');
+
+    expect(resultText).toContain(
+      '[namespace] div{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}@media screen{[namespace] div{color:blue;}}[namespace] div{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);}[namespace] div h1,[namespace] div h2{color:red;}',
+    );
+  });
+
+  test('PostCSS/postcssImportUrl', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 2)');
+    await app.click('text=Import Url');
+    await app.click('text=CSS');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(`@import "github-markdown-css";`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('style');
+
+    expect(resultText).toContain('.markdown-body');
+  });
+
+  test('PostCSS/Autoprefixer', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 2)');
+    await app.click('text=Autoprefixer');
+    await app.click('text=CSS');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(`.example { user-select: none; }`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('style');
+
+    expect(resultText).toContain('-webkit-user-select: none;');
+  });
+
+  test('PostCSS/Preset Env', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 2)');
+    await app.click('text=Preset Env');
+    await app.click('text=CSS');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(
+      `:root { --mainColor: #12345678; --secondaryColor: lab(32.5 38.5 -47.6 / 90%); }`,
+    );
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('style');
+
+    expect(resultText).toContain('--mainColor: rgba(18,52,86,0.47059);');
+  });
+
+  test('Babel', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=Babel');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(`[1, 2, 3].map(n => n + 1);`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('body > script');
+
+    expect(resultText).toContain(
+      `[1, 2, 3].map(function (n) {
+  return n + 1;
+});`,
+    );
+  });
+
+  test('Sucrase', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=Sucrase');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(`const Greet = (name: string) => <>Hello {name}!</>;`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('body > script');
+
+    expect(resultText).toContain(
+      `const Greet = (name) => React.createElement(React.Fragment, null, "Hello " , name, "!");`,
+    );
+  });
+
+  test('TypeScript', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=TypeScript');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(
+      `type Fish = { swim: () => void };
+type Bird = { fly: () => void };
+declare function getSmallPet(): Fish | Bird;
+// ---cut---
+function isFish(pet: Fish | Bird): pet is Fish {
+  return (pet as Fish).swim !== undefined;
+}`,
+    );
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('body > script');
+
+    expect(resultText).toContain(
+      `// ---cut---
+function isFish(pet) {
+    return pet.swim !== undefined;
+}`,
+    );
+  });
+
+  test('Flow', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=Flow');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(
+      'function foo(x: ?number): string {if (x) { return x; } return "default string"; }',
+    );
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('body > script');
+
+    expect(resultText).toContain(
+      'function foo(x         )         {if (x) { return x; } return "default string"; }',
+    );
+  });
+
+  test('JSX', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('text="HTML"');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(`<div id="app">Loading...</div>`);
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text="JSX"');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(
+      `
+const Hello = (props) => <h1>Hello, {props.name}</h1>
+export default () => <Hello name="React" />;
+`,
+    );
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain(`Hello, React`);
+  });
+
+  test('TSX', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text="TSX"');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(
+      `
+interface Props { name: string }
+const Hello = (props: Props) => <h1>Hello, {props.name}</h1>
+export default () => <Hello name="React" />;
+`,
+    );
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain(`Hello, React`);
+  });
+
+  test('React', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('text="HTML"');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(`<div id="app">Loading...</div>`);
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text="React"');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(
+      `
+const Hello = (props) => <h1>Hello, {props.name}</h1>
+export default () => <Hello name="React" />;
+`,
+    );
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain(`Hello, React`);
+  });
+
+  test('React (TSX)', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text="React (TSX)"');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(
+      `
+interface Props { name: string }
+const Hello = (props: Props) => <h1>Hello, {props.name}</h1>
+export default () => <Hello name="React" />;
+`,
+    );
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain(`Hello, React`);
+  });
+
+  test('Vue', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await (await app.$('[data-lang="vue"]'))?.click();
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(
+      `<template>
+<h1>Hello, {{ title }}</h1>
+</template>
+<script>
+export default {
+  data: () =>({ title: 'Vue' })
+};
+</script>
+<style scoped>
+h1 {
+  color: blue;
+}
+</style>`,
+    );
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain(`Hello, Vue`);
+    expect(await getResult().$eval('h1', (e) => getComputedStyle(e).color)).toBe('rgb(0, 0, 255)');
+  });
+
+  test('Vue JSX', async ({ page, getTestUrl }) => {
+    const sfc = `<script>
+  export default {
+    data() {
+      return {
+        counter: 0,
+        align: "center",
+      };
+    },
+    methods: {
+      increment() {
+        this.counter += 1;
+      },
+    },
+    render() {
+      return (
+        <div class="container">
+          <h1>Hello, Vue!</h1>
+          <img
+            class="logo"
+            src="${getTestUrl({})}/livecodes/assets/templates/vue.svg"
+          />
+          <p>You clicked {this.counter} times.</p>
+          <button onClick={this.increment}>Click me</button>
+        </div>
+      );
+    },
+  };
+</script>
+
+<style scoped>
+  .container,
+  .container button {
+    text-align: v-bind("align");
+    font: 1em sans-serif;
+  }
+  .logo {
+    width: 150px;
+  }
+</style>
+`;
+
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await (await app.$('[data-lang="vue"]'))?.click();
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(sfc);
+
+    await waitForResultUpdate();
+
+    await getResult().click('text=Click me');
+    await getResult().click('text=Click me');
+    await getResult().click('text=Click me');
+
+    const titleText = await getResult().innerText('h1');
+    expect(titleText).toBe('Hello, Vue!');
+
+    const counterText = await getResult().innerText('text=You clicked');
+    expect(counterText).toBe('You clicked 3 times.');
+  });
+
+  test('Vue import', async ({ page, getTestUrl }) => {
+    const sfc = `<template>
+  <div class="container">
+    <p id="uuid">{{ uuid }}</p>
+    <Counter />
+  </div>
+</template>
+
+<script>
+  import 'https://hatemhosny.github.io/typescript-demo-for-testing-import-/style.css';
+  import {v4} from 'uuid';
+  import Counter from 'https://hatemhosny.github.io/vue3-samples/src/components/Counter.vue';
+  export default {
+    components: {
+      Counter,
+    },
+    data() {
+      return {
+        uuid: v4(),
+      };
+    },
+  };
+</script>
+`;
+
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await (await app.$('[data-lang="vue"]'))?.click();
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(sfc);
+
+    await waitForResultUpdate();
+
+    // css import
+    const headHTML = await getResult().innerHTML('head');
+    expect(headHTML).toContain(
+      '<link rel="stylesheet" href="https://hatemhosny.github.io/typescript-demo-for-testing-import-/style.css">',
+    );
+
+    // bare module import
+    const uuidText = await getResult().innerText('#uuid');
+    expect(uuidText.length).toBeGreaterThan(10);
+
+    // import vue component
+    await getResult().click(':nth-match(button, 1)');
+    await getResult().click(':nth-match(button, 1)');
+    await getResult().click(':nth-match(button, 1)');
+
+    // import vue component that has relative imports and fetches absolute url
+    const buttonText = await getResult().innerText(':nth-match(button, 1)');
+    expect(buttonText).toBe('Count is: 3, double is: 6');
+  });
+
+  test('Vue langs', async ({ page, getTestUrl }) => {
+    const sfc = `<template lang="md">
+  # Hello, {{ name }}!
+  <p :class="$style.text">some text</p>
+</template>
+
+<script lang="ts" setup>
+  const name: string = 'Vue';
+</script>
+
+<style lang="scss" module>
+  $font-stack: Helvetica, sans-serif;
+  $primary-color: #555;
+  $secondary-color: green;
+
+  h1 {
+    font: 200% $font-stack;
+    color: $primary-color;
+  }
+
+  .text {
+    font: 100% $font-stack;
+    color: $secondary-color;
+  }
+</style>
+`;
+
+    await page.goto(
+      getTestUrl({
+        x: 'code/N4IgLglmA2CmIC4QFUB2kawCYAIAKATgPYBWsAxmCADQhawDO5BEADpEaoiDeAIYBzBogDaAXVp9KEAG6wAolihEC3Ji3a8AtnwIBrAK6tEoaH1QCDg+EgAWYLdF7lOYWOm4gAvrQZgAnnAmIGYWVgI2IOQMwrQu6O5USN6+zGxJpuaW1twyBvBxroncADxuWqxmbjihAgC8ADogWlhNAHwNBA2oODgAxDgAErDQ0ETUOMDAOKh8WrA4Xl4AhJ3dvSWsOAjkZjGNIAAkfoGwAHRuAB5g7QxE8zhXYCUA9KwdXaiv5ZV8bh-dNZfdTpGpZA5gBhNHAMWBgIwAno4eJ+GZzWAIGFgFgWHB1HAAcgAavkcABmAkAbiBrxB7ERNJOcDBFgOTBi0K0RCwBjgiN6hwAZq4ALR+KR6THDaBySDkPgTBjmBhi2AsQXUz4C1gsHQEfwilxjAiYvoAVgtmvWOGOFE4WF0BqNKkxAgIsHcVtQQN6tgAjJMfb0cML0JiAEwABkjAFIbaGwGKwBKvcHkURjZjDjqIHqnRmVKnFkCgxdYNdA1rgwnMX7o3GhaLxeQ9EXes6TTbYfEHfrDQWCEWvDSXkzYG0UiAxwxbB7IaIJFO0uxhAhxHEYoRGHDPLQdURyIw7gRV+uogY-PcAMpwyAWVfAHwgXOsFTzhCP2gBViMExPtx+A+IRZOEkTfowy5UIUCQeMkT5yCeECcNwAAs3hAA',
+      }),
+    );
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await (await app.$('[data-lang="vue"]'))?.click();
+    await waitForEditorFocus(app);
+    // await page.keyboard.insertText(sfc);
+
+    await waitForResultUpdate();
+
+    const headerText = await getResult().innerText('h1');
+
+    // markdown, scss, typescript
+    expect(headerText).toContain(`Hello, Vue 3!`);
+    expect(await getResult().$eval('h1', (e) => getComputedStyle(e).color)).toBe('rgb(85, 85, 85)');
+
+    // css modules
+    expect(await getResult().$eval('p', (e) => getComputedStyle(e).color)).toBe('rgb(0, 128, 0)');
+  });
+
+  test('Vue + Tailwind CSS', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await (await app.$('[data-lang="vue"]'))?.click();
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(
+      `<template>
+  <div class="flex items-center justify-center h-40">
+    <h1 class="text-red-600">Tailwind in Vue SFC</h1>
+  </div>
+</template>
+`,
+    );
+
+    await app.click(':nth-match([title="Change Language"], 2)');
+    await app.click('text=Tailwind CSS');
+    await app.click('text=CSS');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(
+      `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+`,
+    );
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain(`Tailwind in Vue SFC`);
+    expect(await getResult().$eval('h1', (e) => getComputedStyle(e).color)).toBe(
+      'rgb(220, 38, 38)',
+    );
+  });
+
+  test('Vue 2', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=Vue 2');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(
+      `<template>
+<h1>Hello, {{ title }}</h1>
+</template>
+<script>
+export default {
+  data: { title: 'Vue 2' }
+};
+</script>
+<style scoped>
+h1 { color: blue; }
+</style>`,
+    );
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain(`Hello, Vue 2`);
+    expect(await getResult().$eval('h1', (e) => getComputedStyle(e).color)).toBe('rgb(0, 0, 255)');
+  });
+
+  test('Svelte', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await (await app.$('[data-lang="svelte"]'))?.click();
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(
+      `<script>
+  let title = "Svelte";
+</script>
+<style>
+  h1 {
+    color: blue;
+  }
+</style>
+<div class="container">
+  <h1>Hello, {title}</h1>
+</div>
+`,
+    );
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain(`Hello, Svelte`);
+    expect(await getResult().$eval('h1', (e) => getComputedStyle(e).color)).toBe('rgb(0, 0, 255)');
+  });
+
+  test('Malina.js', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=Malina.js');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(
+      `<script>
+  let title = "Malina.js";
+</script>
+<style>
+  h1 {
+    color: blue;
+  }
+</style>
+<div class="container">
+  <h1>Hello, {title}</h1>
+</div>
+`,
+    );
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain(`Hello, Malina.js`);
+    expect(await getResult().$eval('h1', (e) => getComputedStyle(e).color)).toBe('rgb(0, 0, 255)');
+  });
+
+  test('Stencil', async ({ page, getTestUrl, editor }) => {
+    test.skip(editor === 'codejar', 'please fix');
+
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('text="HTML"');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText('<my-app title="Stencil"></my-app>');
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=Stencil');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(
+      `import { Component, Prop, h } from "@stencil/core";
+@Component({
+  tag: "my-app",
+  styles: "h1 { color: blue; }",
+})
+export class App {
+  @Prop() title: string;
+  render() {
+    return (
+        <h1>Hello, {this.title}</h1>
+    );
+  }
+}`,
+    );
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain(`Hello, Stencil`);
+    expect(await getResult().$eval('h1', (e) => getComputedStyle(e).color)).toBe('rgb(0, 0, 255)');
+  });
+
+  test('CoffeeScript', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=CoffeeScript');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(`square = (x) -> x * x`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('body > script');
+
+    expect(resultText).toContain(`var square;`);
+    expect(resultText).toContain(`square = function(x) {
+  return x * x;
+};`);
+  });
+
+  test('LiveScript', async ({ page, getTestUrl, editor }) => {
+    test.skip(editor === 'codejar', 'please fix');
+
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('text="HTML"');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText('<h1>Hello, <span id="title">World</span></h1>');
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=LiveScript');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(`{ capitalize, join, map, words } = require 'prelude-ls'
+title = 'live script'
+|> words
+|> map capitalize
+|> join ''
+(document.getElementById \\title).textContent = title`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerText('h1');
+
+    expect(resultText).toContain(`Hello, LiveScript`);
+  });
+
+  test('Riot.js', async ({ page, getTestUrl, editor }) => {
+    test.skip(editor === 'codejar', 'please fix');
+
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('text="HTML"');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText('<hello title="Riot.js"></hello>');
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=Riot.js');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText('<hello><h1>Hello, {props.title}</h1></hello>');
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerText('h1');
+
+    expect(resultText).toContain(`Hello, Riot.js`);
+  });
+
+  test('AssemblyScript', async ({ page, getTestUrl }) => {
+    test.fixme();
+
+    await page.goto(getTestUrl());
+
+    const { app, getResult } = await getLoadedApp(page);
+
+    await app.click('text="HTML"');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(
+      `<h1>Hello, <span id="title">World</span></h1>
+  <script>
+  (async() => {
+    const { wasmModule } = await livecodes.wasm;
+    const { __getString, getTitle, increment } = wasmModule.exports;
+    const title = document.querySelector('#title');
+    title.innerHTML = __getString(getTitle());
+    })();
+  </script>`,
+    );
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=AssemblyScript');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(`export function getTitle(): string {return "AssemblyScript";`);
+    // workaround for monaco auto-complete
+    await page.keyboard.press('Delete');
+    await page.keyboard.insertText(`}`);
+
+    await app.waitForTimeout(15000);
+    const resultText = await getResult().innerText('text=Hello, AssemblyScript');
+
+    expect(resultText).toContain(`Hello, AssemblyScript`);
+  });
+
+  test('Python', async ({ page, getTestUrl, editor }) => {
+    test.skip(editor === 'codejar', 'please fix');
+
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('text="HTML"');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText('<h1 id="header">Hello, World</h1>');
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=Python');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(`from browser import document
+title = 'Python'
+document['header'].html = f"Hello, {title}"`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerText('h1');
+
+    expect(resultText).toContain(`Hello, Python`);
+  });
+
+  test('Pyodide', async ({ page, getTestUrl }) => {
+    test.skip();
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('text="HTML"');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText('<h1 id="header">Hello, World</h1>');
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=Pyodide');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText(`from js import document
+title = 'Python'
+document.getElementById('header').innerHTML = f"Hello, {title}"`);
+
+    await waitForResultUpdate();
+    await getResult().waitForSelector('text=Hello, Python');
+    const resultText = await getResult().innerText('h1');
+
+    expect(resultText).toContain(`Hello, Python`);
+  });
+
+  test('Ruby', async ({ page, getTestUrl, editor }) => {
+    test.skip(editor === 'codejar', 'please fix');
+
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('text="HTML"');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText('<h1>Hello, <span id="title">world</span></h1>');
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=Ruby');
+    await waitForEditorFocus(app);
+
+    await page.keyboard.insertText(`require "native"
+title = 'Ruby'
+$$.document.querySelector('#title').innerHTML = title`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerText('text=Hello, Ruby');
+
+    expect(resultText).toContain(`Hello, Ruby`);
+  });
+
+  test('Go', async ({ page, getTestUrl, editor }) => {
+    test.slow();
+
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('text="HTML"');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText('<h1>Hello, <span id="title">world</span></h1>');
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=Go');
+    await waitForEditorFocus(app);
+
+    await page.keyboard.insertText(`package main
+import "syscall/js"
+func main() {
+	js.Global().Get("document").Call("querySelector", "#title").Set("innerHTML", "Golang")
+}`);
+
+    await waitForResultUpdate({ delay: 4000, timeout: 60_000 });
+    const resultText = await getResult().innerText('h1');
+
+    expect(resultText).toContain(`Hello, Golang`);
+  });
+
+  test('PHP', async ({ page, getTestUrl, editor }) => {
+    test.skip(editor === 'codejar', 'please fix');
+
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('text="HTML"');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText('<h1>Hello, <span id="title">world</span></h1>');
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=PHP');
+    await waitForEditorFocus(app);
+
+    // go below pre-inserted '<?php'
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.insertText(
+      `$title = 'PHP';
+$document->getElementById('title')->textContent = $title;`,
+    );
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerText('h1');
+
+    expect(resultText).toContain(`Hello, PHP`);
+  });
+
+  test('Perl', async ({ page, getTestUrl, editor }) => {
+    test.skip(editor === 'codejar', 'please fix');
+
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('text="HTML"');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText('<h1>Hello, <span id="title">world</span></h1>');
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=Perl');
+    await waitForEditorFocus(app);
+
+    await page.keyboard.insertText(`use strict;
+my $title = 'Perl';
+JS::inline('document.getElementById("title").innerHTML') = $title;`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerText('h1');
+
+    expect(resultText).toContain(`Hello, Perl`);
+  });
+
+  test('Lua', async ({ page, getTestUrl, editor }) => {
+    test.skip(editor === 'codejar', 'please fix');
+
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('text="HTML"');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText('<h1>Hello, <span id="title">world</span></h1>');
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=Lua');
+    await waitForEditorFocus(app);
+
+    await page.keyboard.insertText(`js = require "js"
+window = js.global
+document = window.document
+document:getElementById("title").innerHTML = "Lua"`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerText('h1');
+
+    expect(resultText).toContain(`Hello, Lua`);
+  });
+
+  test('Scheme', async ({ page, getTestUrl, editor }) => {
+    test.skip(editor === 'codejar', 'please fix');
+
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('text="HTML"');
+    await waitForEditorFocus(app);
+    await page.keyboard.insertText('<h1>Hello, <span id="title">world</span></h1>');
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=Scheme');
+    await waitForEditorFocus(app);
+
+    await page.keyboard.insertText(`(let ((title "Scheme"))
+  (set-content! "#title" title))`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerText('h1');
+
+    expect(resultText).toContain(`Hello, Scheme`);
+  });
+});
diff --git a/eslint.config.mjs b/eslint.config.mjs
index aab8c872fb..1b84e6be5e 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -31,6 +31,7 @@ export default [
       '**/.docusaurus',
       '**/.jest',
       '**/.storybook',
+      '**/.cache',
       'functions/vendors',
     ],
   },
diff --git a/functions/vendors/templates.js b/functions/vendors/templates.js
index 10dbce55f7..2bbc7ed68f 100644
--- a/functions/vendors/templates.js
+++ b/functions/vendors/templates.js
@@ -447,10 +447,10 @@ body {
     font-size: 3.5rem;
   }
 }
-`.trimStart()},script:{language:"javascript",content:""},stylesheets:["{{ __CDN_URL__ }}bootstrap@5.3.0/dist/css/bootstrap.min.css"],scripts:["{{ __CDN_URL__ }}bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"],cssPreset:"",imports:{},types:{}};var y={name:"coffeescript",title:getTemplateName("templates.starter.coffeescript","CoffeeScript Starter"),thumbnail:"assets/templates/coffeescript.svg",activeEditor:"script",markup:{language:"html",content:`
+`.trimStart()},script:{language:"javascript",content:""},stylesheets:["{{ __CDN_URL__ }}bootstrap@5.3.0/dist/css/bootstrap.min.css"],scripts:["{{ __CDN_URL__ }}bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"],cssPreset:"",imports:{},types:{}};var y={name:"civet",title:getTemplateName("templates.starter.civet","Civet Starter"),thumbnail:"assets/templates/civet.png",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/coffeescript.svg" />
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/civet.png" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
@@ -463,25 +463,25 @@ body {
 .logo {
   width: 150px;
 }
-`.trimStart()},script:{language:"coffeescript",content:`
-titleElement = document.getElementById 'title'
-counterElement = document.getElementById 'counter'
-button = document.getElementById 'counter-button'
+`.trimStart()},script:{language:"civet",content:`
+titleElement := document.getElementById 'title'
+counterElement := document.getElementById 'counter'
+button := document.getElementById 'counter-button'
 
-title = 'CoffeeScript'
+title := 'Civet'
 titleElement.innerText = title
 
-counter = (count) -> -> count += 1
-increment = counter 0
+counter := (count: number) => => count += 1
+increment := counter 0
+function handleClick: void counterElement.innerText = increment()
 
-button.addEventListener('click',
-  -> counterElement.innerText = increment())
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var x={name:"go",title:getTemplateName("templates.starter.go","Go Starter"),thumbnail:"assets/templates/go.svg",activeEditor:"script",markup:{language:"html",content:`
+button.addEventListener 'click', handleClick
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var x={name:"clio",title:getTemplateName("templates.starter.clio","Clio Starter"),thumbnail:"assets/templates/clio.png",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
-  <h1>Hello, <span id="title">World</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/go.svg" />
+  <h1 id="title">Hello, World!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/clio.png" />
   <p>You clicked <span id="counter">0</span> times.</p>
-  <button id="counter-button">Click me</button>
+  <button id="counter-button" disabled>Loading...</button>
 </div>
 `.trimStart()},style:{language:"css",content:`
 .container,
@@ -490,62 +490,38 @@ button.addEventListener('click',
   font: 1em sans-serif;
 }
 .logo {
-  width: 250px;
+  width: 150px;
 }
-`.trimStart()},script:{language:"go",content:`
-package main
-
-import (
-	"fmt"
-	"syscall/js"
-	"time"
-)
-
-func main() {
-	title := querySelector("#title")
-	title.Set("innerHTML", "Golang")
+`.trimStart()},script:{language:"clio",content:`
+fn capitalize str:
+  (str.charAt 0 -> .toUpperCase) + (str.slice 1 -> .toLowerCase)
 
-	registerCounter()
+fn greet name:
+  f"Hello, {name}!"
 
-	// yes, you can use goroutines (check the console)
-	go greet()
-  fmt.Println("Hello!")
-}
+fn setTitle name:
+  title = document.querySelector "#title"
+  title.innerText = name -> capitalize -> greet
 
-func querySelector(id string) js.Value {
-	return js.Global().Get("document").Call("querySelector", id)
-}
+fn increment value:
+  (Number value) + 1
 
-func registerCounter() {
-	btn := querySelector("#counter-button")
-	counter := querySelector("#counter")
-	count := 0
+fn activateBtn btn:
+  btn.disabled = false
+  btn.innerText = "Click me"
+  btn
 
-	var cb js.Func
-	cb = js.FuncOf(func(this js.Value, args []js.Value) interface{} {
-		count += 1
-		counter.Set("innerHTML", count)
-		return nil
-	})
-	btn.Call("addEventListener", "click", cb)
-}
+fn onBtnClick:
+  counter = document.querySelector "#counter"
+  counter.innerText = increment counter.innerText
 
-func greet() {
-	if hours, _, _ := time.Now().Clock(); hours < 12 {
-		fmt.Println("Good morning")
-	} else if hours < 18 {
-		fmt.Println("Good afternoon")
-	} else {
-		fmt.Println("Good evening")
-	}
-}
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var w={name:"jquery",title:getTemplateName("templates.starter.jquery","jQuery Starter"),thumbnail:"assets/templates/jquery.svg",activeEditor:"script",markup:{language:"html",content:`
-<div class="container">
-  <h1>Hello, <span id="title">World</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/jquery.svg" />
-  <p>You clicked <span id="counter">0</span> times.</p>
-  <button id="counter-button">Click me</button>
-</div>
+export fn main argv:
+  setTitle "clio"
+  document.querySelector "#counter-button"
+    -> activateBtn
+    -> .addEventListener "click" onBtnClick
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var w={name:"clojurescript",title:getTemplateName("templates.starter.clojurescript","ClojureScript Starter"),thumbnail:"assets/templates/cljs.svg",activeEditor:"script",markup:{language:"html",content:`
+<div id="app">Loading...</div>
 `.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
@@ -553,24 +529,43 @@ func greet() {
   font: 1em sans-serif;
 }
 .logo {
-  width: 300px;
+  width: 150px;
 }
-`.trimStart()},script:{language:"javascript",content:`
-import $ from "jquery";
+`.trimStart()},script:{language:"clojurescript",content:`
+(ns react.component
+  (:require
+    ;; you may use npm packages
+    ["canvas-confetti$default" :as confetti]
+    ["react$default" :as React]
+    ["react" :refer [useState]]
+    ["react-dom/client" :refer [createRoot]]))
 
-$("#title").text('jQuery');
+(defn Counter [^:js {:keys [name]}]
+  (let [[counter setCount] (useState 0)]
+    #jsx [:div
+            {:className "container"}
+            [:h1 (str "Hello, " name "!")]
+            [:img
+              {:className "logo"
+              :alt "logo"
+              :src "{{ __livecodes_baseUrl__ }}assets/templates/cljs.svg"}]
+            [:p "You clicked " counter " times."]
+            [:button
+              {:onClick (fn []
+                          (if (= (mod counter 3) 0) (confetti))
+                          (setCount (inc counter)))}
+              "Click me"]]))
 
-let count = 0;
-$("#counter-button").click(() => {
-  count += 1;
-  $("#counter").text(count);
-});
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var S={name:"knockout",title:getTemplateName("templates.starter.knockout","Knockout Starter"),thumbnail:"assets/templates/knockout.svg",activeEditor:"script",markup:{language:"html",content:`
+(def title "ClojureScript")
+(print (str "Hello, " title "!"))
+(defonce root (createRoot (js/document.querySelector "#app")))
+(.render root #jsx [Counter #js {:name title}])
+`.trimStart()}};var S={name:"coffeescript",title:getTemplateName("templates.starter.coffeescript","CoffeeScript Starter"),thumbnail:"assets/templates/coffeescript.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
-  <h1>Hello, <span data-bind="text: title">World</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/knockout.svg" />
-  <p>You clicked <span data-bind="text: numberOfClicks">0</span> times.</p>
-  <button data-bind="click: registerClick">Click me</button>
+  <h1>Hello, <span id="title">World</span>!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/coffeescript.svg" />
+  <p>You clicked <span id="counter">0</span> times.</p>
+  <button id="counter-button">Click me</button>
 </div>
 `.trimStart()},style:{language:"css",content:`
 .container,
@@ -579,27 +574,25 @@ $("#counter-button").click(() => {
   font: 1em sans-serif;
 }
 .logo {
-  width: 250px;
+  width: 150px;
 }
-`.trimStart()},script:{language:"javascript",content:`
-import ko from "knockout";
+`.trimStart()},script:{language:"coffeescript",content:`
+titleElement = document.getElementById 'title'
+counterElement = document.getElementById 'counter'
+button = document.getElementById 'counter-button'
 
-class ClickCounterViewModel {
-  constructor() {
-    this.title = 'Knockout';
-    this.numberOfClicks = ko.observable(0);
+title = 'CoffeeScript'
+titleElement.innerText = title
 
-    this.registerClick = function () {
-      this.numberOfClicks(this.numberOfClicks() + 1);
-    };
-  }
-}
+counter = (count) -> -> count += 1
+increment = counter 0
 
-ko.applyBindings(new ClickCounterViewModel());
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var k={name:"livescript",title:getTemplateName("templates.starter.livescript","LiveScript Starter"),thumbnail:"assets/templates/livescript.svg",activeEditor:"script",markup:{language:"html",content:`
+button.addEventListener('click',
+  -> counterElement.innerText = increment())
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var k={name:"commonlisp",title:getTemplateName("templates.starter.commonlisp","Common Lisp Starter"),thumbnail:"assets/templates/commonlisp.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
-  <h1>Hello, <span id="title">World</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/livescript.svg" />
+  <h1 id="title">Hello, World!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/commonlisp.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
@@ -612,31 +605,70 @@ ko.applyBindings(new ClickCounterViewModel());
 .logo {
   width: 150px;
 }
-`.trimStart()},script:{language:"livescript",content:`
-{ capitalize, join, map, words } = require 'prelude-ls'
-
-title = 'live script'
-|> words
-|> map capitalize
-|> join ''
-
-(document.getElementById \\title).innerText = title
+`.trimStart()},script:{language:"commonlisp",content:`
+(defun set-attribute (&key selector attribute value)
+  (let ((node
+         (#j:document:querySelector selector)))
+    (setf (jscl::oget node attribute) value)
+    node))
 
-increment = (count) -> -> count += 1
-counter = increment 0
+(let ((title "Common Lisp"))
+  (set-attribute :selector "#title" :attribute "innerHTML"
+      :value (format nil "Hello, ~A!" title)))
 
-counter-element = document.getElementById \\counter
-button = document.getElementById \\counter-button
+(let ((counter 0))
+  (set-attribute :selector "#counter-button" :attribute "onclick"
+    :value #'(lambda (ev)
+              (setf counter (+ counter 1))
+              (set-attribute :selector "#counter" :attribute "innerHTML"
+               :value counter))))
 
-button.addEventListener \\click,
-  -> counter-element.innerText = counter!
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var _={name:"lua",title:getTemplateName("templates.starter.lua","Lua Starter"),thumbnail:"assets/templates/lua.svg",activeEditor:"script",markup:{language:"html",content:`
+(#j:console:clear)
+(write "Hello, Common Lisp!")
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var _={name:"cpp",title:getTemplateName("templates.starter.cpp","C++ Starter"),thumbnail:"assets/templates/cpp.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
-  <h1>Hello, <span id="title">World</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/lua.svg" />
-  <p id="counter">You clicked 0 times.</p>
+  <h1>Hello, <span id="name">World</span>!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/cpp.svg" />
+  <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
+
+<script>
+  // set initial input
+  livecodes.cpp.input = "-1";
+
+  addEventListener('load', async () => {
+    const button = document.querySelector("#counter-button");
+
+    // wait till loaded
+    await livecodes.cpp.loaded;
+
+    // get initial output
+    const initialOutput = livecodes.cpp.output;
+    update(initialOutput);
+
+    button.onclick = async () => {
+      // run with new input
+      const {output, error, exitCode} = await livecodes.cpp.run(window.count);
+      update(output);
+    };
+
+    function update(output) {
+      const counter = document.querySelector("#counter");
+      const name = document.querySelector("#name");
+
+      const [title, count] = output.split('\\n');
+
+      if (parseInt(count) !== NaN) {
+        window.count = count;
+        counter.innerText = window.count;
+      }
+      if (title) {
+        name.innerText = title;
+      }
+    }
+  });
+<\/script>
 `.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
@@ -646,84 +678,68 @@ button.addEventListener \\click,
 .logo {
   width: 150px;
 }
-`.trimStart()},script:{language:"lua",content:`
-js = require "js"
-window = js.global
-document = window.document
-
-document:getElementById("title").innerHTML = "Lua"
+`.trimStart()},script:{language:"cpp",content:`
+#include <iostream>
+using namespace std;
 
-Counter = {count = 0}
-function Counter:new (o)
-  o = o or {}
-  setmetatable(o, self)
-  self.__index = self
-  return o
-end
-function Counter:increment ()
-  self.count = self.count + 1
-end
-function Counter:show ()
-  local counter_el = document:getElementById("counter")
-  counter_el.innerHTML = ("You clicked %d times."):format(self.count)
-end
+int main() {
+    char title[] = "C++";
+    cout << title << endl;
 
-counter = Counter:new(nil)
-button = document:querySelector("#counter-button")
-button:addEventListener("click", function()
-  counter:increment()
-  counter:show()
-end)
+    int count;
+    cin >> count;
+    count += 1;
+    cout << count << endl;
 
--- check console
-time = os.date("*t").hour
-if time < 12 then
-  print ("Good morning")
-elseif time >= 12 and time < 18 then
-  print ("Good afternoon")
-else
-  print ("Good evening")
-end
-`.trimStart()}};var j={name:"mdx",title:getTemplateName("templates.starter.mdx","MDX Starter"),thumbnail:"assets/templates/mdx.svg",activeEditor:"markup",markup:{language:"mdx",content:`
-import { Greeting, Counter } from './script';
+    return 0;
+}
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var j={name:"cpp-wasm",aliases:["clang"],title:"C++ (Wasm) Starter",thumbnail:"assets/templates/cpp.svg",activeEditor:"script",markup:{language:"html",content:`
+<div class="container">
+  <h1>Hello, <span id="name">World</span>!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/cpp.svg" />
+  <p>You clicked <span id="counter">0</span> times.</p>
+  <button id="counter-button" disabled>Loading...</button>
+</div>
 
-<Greeting name="MDX" />
+<script>
+  // set initial input
+  livecodes.cpp.input = "-1";
 
-![MDX Logo]({{ __livecodes_baseUrl__ }}assets/templates/mdx.svg)
+  addEventListener('load', async () => {
+    const button = document.querySelector("#counter-button");
 
-<Counter />
-`.trimStart()},style:{language:"css",content:`
-body,
-body button {
-  text-align: center;
-  font: 1em sans-serif;
-}
-img {
-  width: 150px;
-}
-`.trimStart()},script:{language:"jsx",content:`
-import { useState } from "react";
+    // wait till loaded
+    await livecodes.cpp.loaded;
 
-export const Greeting = (props) => <h1>Hello, {props.name || "World"}!</h1>;
+    // get initial output
+    const initialOutput = livecodes.cpp.output;
+    update(initialOutput);
 
-export function Counter() {
-  const [count, setCount] = useState(0);
-  return (
-    <div>
-      <p>You clicked {count} times.</p>
-      <button onClick={() => setCount(count + 1)}>
-        Click me
-      </button>
-    </div>
-  );
-}
-`.trimStart()}};var T={name:"perl",title:getTemplateName("templates.starter.perl","Perl Starter"),thumbnail:"assets/templates/perl.svg",activeEditor:"script",markup:{language:"html",content:`
-<div class="container">
-  <h1>Hello, <span id="title">World</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/perl.svg" />
-  <p>You clicked <span id="counter">0</span> times.</p>
-  <button id="counter-button">Click me</button>
-</div>
+    button.onclick = async () => {
+      button.disabled = true;
+      // run with new input
+      const {output, error, exitCode} = await livecodes.cpp.run(window.count);
+      update(output);
+    };
+
+    function update(output) {
+      const counter = document.querySelector("#counter");
+      const name = document.querySelector("#name");
+
+      const [title, count] = output.split('\\n');
+
+      if (parseInt(count) !== NaN) {
+        window.count = count;
+        counter.innerText = window.count;
+      }
+      if (title) {
+        name.innerText = title;
+      }
+      button.innerText = "Click me";
+      button.disabled = false;
+    }
+  });
+<\/script>
 `.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
@@ -733,55 +749,68 @@ export function Counter() {
 .logo {
   width: 150px;
 }
-`.trimStart()},script:{language:"perl",content:`
-use strict;
-
-my $title = 'Perl';
-JS::inline('document.getElementById("title").innerHTML') = $title;
-
-{
-package Counter;
-  sub new {
-    my $class = shift;
-    my $self = {count => 0};
-    return bless $self, $class;
-  }
-  sub count {
-    my $self = shift;
-    return $self->{count};
-  }
-  sub increment {
-    my $self = shift;
-    $self->{count}++;
-  }
-}
-
-my $counter = Counter->new;
+`.trimStart()},script:{language:"cpp-wasm",content:`
+#include <iostream>
+using namespace std;
 
-sub onClick {
-    $counter->increment;
-    JS::inline('document.getElementById("counter").innerHTML') =
-    $counter->count;
-}
+int main() {
+    char title[] = "C++";
+    cout << title << endl;
 
-JS::inline('document.getElementById("counter-button").onclick') = \\&onClick;
+    int count;
+    cin >> count;
+    count += 1;
+    cout << count << endl;
 
-# check console
-my ($sec,$min,$hour) = localtime(time);
-if ($hour < 12) {
-  print "Good morning";
-} elsif ($hour >= 12 && $hour < 18) {
-  print "Good afternoon";
-} else {
-  print "Good evening";
+    return 0;
 }
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var C={name:"php",title:getTemplateName("templates.starter.php","PHP Starter"),thumbnail:"assets/templates/php.svg",activeEditor:"script",markup:{language:"html",content:`
+`.trimStart()}};var T={name:"csharp-wasm",title:"C# (Wasm) Starter",thumbnail:"assets/templates/csharp.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
-  <h1>Hello, <span id="title">world</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/php.svg" />
+  <h1>Hello, <span id="name">World</span>!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/csharp.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
-  <button id="counter-button">Click me</button>
+  <button id="counter-button" disabled>Loading...</button>
 </div>
+
+<script>
+  // set initial input
+  livecodes.csharp.input = "-1";
+
+  addEventListener('load', async () => {
+    const button = document.querySelector("#counter-button");
+
+    // wait till loaded
+    await livecodes.csharp.loaded;
+
+    // get initial output
+    const initialOutput = livecodes.csharp.output;
+    update(initialOutput);
+
+    button.onclick = async () => {
+      button.disabled = true;
+      // run with new input
+      const {output, error, exitCode} = await livecodes.csharp.run(window.count);
+      update(output);
+    };
+
+    function update(output) {
+      const counter = document.querySelector("#counter");
+      const name = document.querySelector("#name");
+
+      const [title, count] = output.split('\\n');
+
+      if (parseInt(count) !== NaN) {
+        window.count = count;
+        counter.innerText = window.count;
+      }
+      if (title) {
+        name.innerText = title;
+      }
+      button.innerText = "Click me";
+      button.disabled = false;
+    }
+  });
+<\/script>
 `.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
@@ -791,116 +820,220 @@ if ($hour < 12) {
 .logo {
   width: 150px;
 }
-`.trimStart()},script:{language:"php",content:`
-<?php
-$title = 'PHP';
-$document->getElementById('title')->innerText = $title;
+`.trimStart()},script:{language:"csharp-wasm",content:`
+using System;
 
-$count = 0;
+class Program
+{
+    static void Main()
+    {
+        string title = "C#";
+        Console.WriteLine(title);
 
-$document
-  ->getElementById('counter-button')
-  ->addEventListener('click', function () use (&$count, $document) {
-    $count += 1;
-    $document->getElementById('counter')->innerText = $count;
-    echo "count: $count";
-  });
-`.trimStart()}};var U={name:"preact",title:getTemplateName("templates.starter.preact","Preact Starter"),thumbnail:"assets/templates/preact.svg",activeEditor:"script",markup:{language:"html",content:`<div id="app"></div>
+        string input = Console.ReadLine();
+        int count = int.Parse(input);
+        count += 1;
+        Console.WriteLine(count);
+    }
+}
+`.trimStart()}};var C={name:"d3",title:"D3 Starter",thumbnail:"assets/templates/d3.svg",activeEditor:"script",markup:{language:"html",content:`<div id="chart">Loading...</div>
 `},style:{language:"css",content:`
-.container,
-.container button {
-  text-align: center;
-  font: 1em sans-serif;
+.bar {
+  fill: steelblue;
 }
-.logo {
-  width: 150px;
+
+.bar:hover {
+  fill: orange;
 }
-`.trimStart()},script:{language:"jsx",content:`
-/** @jsx h */
-import { h, render } from 'preact';
-import { useSignal } from "@preact/signals";
+`.trimStart()},script:{language:"javascript",content:`
+import * as d3 from "d3";
 
-function App(props) {
-  const count = useSignal(0);
-  return (
-    <div class="container">
-      <h1>Hello, {props.name}!</h1>
-      <img className="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/preact.svg" />
-      <p>You clicked {count} times.</p>
-      <button onClick={() => count.value++}>Click me</button>
-    </div>
-  );
-}
+const data = [150, 230, 180, 90];
 
-render(<App name="Preact" />, document.body);
-`.trimStart()}};var E={name:"python-wasm",aliases:["pyodide"],title:"Python (Wasm) Starter",thumbnail:"assets/templates/python.svg",activeEditor:"script",markup:{language:"html",content:`
-<h1 id="title">Hello, World!</h1>
-<div id="loading">Loading...</div>
-<div id="plots"></div>
-`.trimStart()},style:{language:"css",content:`h1 {
-  text-align: center;
-}
-`.trimStart()},script:{language:"python-wasm",content:`
-from js import document, XMLHttpRequest
-import pandas as pd
-import matplotlib.pyplot as plt
-from io import StringIO
+const svg = d3
+  .select("#chart")
+  .html('')
+  .append("svg")
+  .attr("width", 300)
+  .attr("height", 200);
 
+svg
+  .selectAll(".bar")
+  .data(data)
+  .enter()
+  .append("rect")
+  .attr("class", "bar")
+  .attr("width", (d) => d)
+  .attr("height", 40)
+  .attr("y", (d, i) => i * 50 + 10)
+  .attr("x", 10);
+`.trimStart()}};var U={name:"daisyui",title:getTemplateName("templates.starter.daisyui","daisyUI Starter"),thumbnail:"assets/templates/daisyui.svg",activeEditor:"markup",markup:{language:"html",content:`
+<!-- based on https://daisyui.com/tailwindplay/ -->
 
-def load_data(url):
-  req = XMLHttpRequest.new()
-  req.open("GET", url, False)
-  req.send()
-  res = req.response
-  return StringIO(f"""{res}""")
+<!-- buttons -->
+<div class="p-4">
+  <button class="btn btn-primary">primary</button>
+  <button class="btn btn-secondary">secondary</button>
+  <button class="btn btn-accent">accent</button>
+</div>
 
+<!-- same buttons with another theme! -->
+<div class="p-4" data-theme="abyss">
+  <button class="btn btn-primary">Primary</button>
+  <button class="btn btn-secondary">Secondary</button>
+  <button class="btn btn-accent">Accent</button>
+</div>
+<div class="p-4" data-theme="purplewind">
+  <button class="btn btn-primary">Primary</button>
+  <button class="btn btn-secondary">Secondary</button>
+  <button class="btn btn-accent">Accent</button>
+</div>
 
-def prepare_data(dataframe):
-  def add_species_id(x):
-    if x == "setosa":
-      return 0
-    elif x == "versicolor":
-      return 1
-    return 2
+<!-- tab -->
+<div class="tabs tabs-lift p-4">
+  <button class="tab">Tab 1</button>
+  <button class="tab tab-active">Tab 2</button>
+  <button class="tab">Tab 3</button>
+  <button class="tab"></button>
+</div>
 
-  df = dataframe.copy()
-  df["species_id"] = df["species"].apply(add_species_id)
-  return df
+<!-- toggle, checkbox, radio -->
+<div class="p-4">
+  <input type="checkbox" class="toggle" />
+  <input type="checkbox" class="toggle toggle-primary" />
+  <input type="checkbox" class="toggle toggle-secondary" />
+  <input type="checkbox" class="toggle toggle-accent" />
+  <br/>
+  <input type="checkbox" class="checkbox" />
+  <input type="checkbox" class="checkbox-primary checkbox" />
+  <input type="checkbox" class="checkbox-secondary checkbox" />
+  <input type="checkbox" class="checkbox-accent checkbox" />
+  <br/>
+  <input type="radio" name="radio" class="radio" />
+  <input type="radio" name="radio" class="radio-primary radio" />
+  <input type="radio" name="radio" class="radio-secondary radio" />
+  <input type="radio" name="radio" class="radio-accent radio" />
+</div>
 
+<!-- card -->
+<div class="card m-4 w-80 shadow-sm">
+  <figure>
+    <img src="{{ __livecodes_baseUrl__ }}assets/templates/daisyui-5.webp" />
+  </figure>
+  <div class="card-body">
+    <h2 class="card-title">DaisyUI 5.0</h2>
+    <p>Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus.</p>
+  </div>
+</div>
 
-data = load_data("https://raw.githubusercontent.com/mwaskom/seaborn-data/master/iris.csv")
-df = pd.read_csv(data)
-df = prepare_data(df)
+<!-- dropdown -->
+<details class="dropdown m-4">
+  <summary class="btn m-1">open/close dropdown</summary>
+  <ul class="dropdown-content menu z-[2] w-52 rounded-box bg-base-200 p-2">
+    <li><a>Item 1</a></li>
+    <li><a>Item 2</a></li>
+  </ul>
+</details>
 
-formatter = plt.FuncFormatter(lambda i, *args: df["species"].unique()[int(i)])
-fig = plt.figure(figsize=(6, 4))
-plt.scatter(df[df.columns[0]], df[df.columns[1]], c=df["species_id"])
-plt.colorbar(ticks=[0, 1, 2], format=formatter)
-plt.xlabel(df.columns[0])
-plt.ylabel(df.columns[1])
-plt.title("Iris dataset")
-plt.tight_layout()
+<!-- Open the modal using ID.showModal() method -->
+<button class="btn" onclick="my_modal_1.showModal()">open modal</button>
+<dialog id="my_modal_1" class="modal">
+  <form method="dialog" class="modal-box">
+    <p class="py-4">Press ESC key or click the button below to close</p>
+    <div class="modal-action">
+      <button class="btn">Close</button>
+    </div>
+  </form>
+</dialog>
 
-# render plots in a specific DOM element
-# plots = document.querySelector("#plots")
-# document.pyodideMplTarget = plots
+<!-- steps -->
+<ul class="steps my-4 w-full">
+  <li class="step step-primary">Register</li>
+  <li class="step step-primary">Choose plan</li>
+  <li class="step">Purchase</li>
+  <li class="step">Receive Product</li>
+</ul>
 
-plt.show()
+<!-- chat bubble -->
+<div class="chat chat-start m-4">
+  <div class="avatar chat-image">
+    <div class="w-10 rounded-full">
+      <img src="{{ __livecodes_baseUrl__ }}assets/templates/daisy-profile-picture.webp" />
+    </div>
+  </div>
+  <div class="chat-bubble">see all components <a class="link" target="_blank" href="https://daisyui.com/components">Here</a></div>
+</div>
+`.trimStart()},style:{language:"css",content:`
+@import "tailwindcss";
+@plugin "daisyui"{
+  themes: light --default, dark --prefersdark, abyss;
+}
 
-title = document.getElementById("title")
-name = "Python"
-title.innerHTML = f"Hello, {name}!"
 
-loading = document.getElementById("loading")
-loading.innerHTML = ""
+/**
+  A custom theme made with
+  https://daisyui.com/theme-generator/
+*/
 
-# avoid leaving figures open
-plt.close("all")
-`.trimStart()}};var $={name:"python",title:getTemplateName("templates.starter.python","Python Starter"),thumbnail:"assets/templates/python.svg",activeEditor:"script",markup:{language:"html",content:`
+@plugin "daisyui/theme" {
+  name: "purplewind";
+  default: false;
+  prefersdark: false;
+  color-scheme: "light";
+  --color-base-100: oklch(96% 0.016 293.756);
+  --color-base-200: oklch(94% 0.029 294.588);
+  --color-base-300: oklch(89% 0.057 293.283);
+  --color-base-content: oklch(38% 0.189 293.745);
+  --color-primary: oklch(82% 0.12 346.018);
+  --color-primary-content: oklch(28% 0.109 3.907);
+  --color-secondary: oklch(82% 0.119 306.383);
+  --color-secondary-content: oklch(29% 0.149 302.717);
+  --color-accent: oklch(80% 0.105 251.813);
+  --color-accent-content: oklch(28% 0.091 267.935);
+  --color-neutral: oklch(38% 0.189 293.745);
+  --color-neutral-content: oklch(96% 0.016 293.756);
+  --color-info: oklch(54% 0.245 262.881);
+  --color-info-content: oklch(97% 0.014 254.604);
+  --color-success: oklch(60% 0.118 184.704);
+  --color-success-content: oklch(98% 0.014 180.72);
+  --color-warning: oklch(68% 0.162 75.834);
+  --color-warning-content: oklch(98% 0.026 102.212);
+  --color-error: oklch(58% 0.253 17.585);
+  --color-error-content: oklch(96% 0.015 12.422);
+  --radius-selector: 0.25rem;
+  --radius-field: 0.25rem;
+  --radius-box: 0.5rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 2px;
+  --depth: 1;
+  --noise: 1;
+}
+`.trimStart()},script:{language:"javascript",content:""},processors:["tailwindcss"]};var E={name:"diagrams",title:getTemplateName("templates.starter.diagrams","Diagrams Starter"),thumbnail:"assets/templates/diagrams.svg",activeEditor:"markup",markup:{language:"diagrams",contentUrl:"{{ __livecodes_baseUrl__ }}assets/templates/diagrams-starter.html"},style:{language:"css",content:`
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.container div {
+  width: 100%;
+  text-align: center;
+}
+
+.container img {
+  width: 80%;
+  max-width: 600px;
+}
+
+.container h3:not(:nth-child(1)) {
+  margin-top: 3em;
+}
+`.trimStart()},script:{language:"javascript",content:""},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var q={name:"fennel",title:getTemplateName("templates.starter.fennel","Fennel Starter"),thumbnail:"assets/templates/fennel.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
-  <h1 id="header">Hello, World!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/python.svg" />
-  <p>You clicked <span id="counter">0</span> times.</p>
+  <h1>Hello, <span id="title">World</span>!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/fennel.svg" />
+  <p id="counter">You clicked 0 times.</p>
   <button id="counter-button">Click me</button>
 </div>
 `.trimStart()},style:{language:"css",content:`
@@ -912,237 +1045,390 @@ plt.close("all")
 .logo {
   width: 150px;
 }
-`.trimStart()},script:{language:"python",content:`
-from browser import document
-import time
-
-title = 'Python'
-document['header'].html = f"Hello, {title}!"
+`.trimStart()},script:{language:"fennel",content:`
+(global js (require :js))
+(global window js.global)
+(global document window.document)
+(tset (document:getElementById :title) :innerHTML :Fennel)
+(global Counter {:count 0})
+(fn Counter.new [self o]
+  (set-forcibly! o (or o {}))
+  (setmetatable o self)
+  (set self.__index self)
+  o)
+(fn Counter.increment [self] (set self.count (+ self.count 1)))
+(fn Counter.show [self]
+  (let [counter-el (document:getElementById :counter)]
+    (set counter-el.innerHTML (: "You clicked %d times." :format self.count))))
+(global counter (Counter:new nil))
+(global button (document:querySelector "#counter-button"))
+(button:addEventListener :click (fn [] (counter:increment) (counter:show)))
+`.trimStart()}};var L=["esm.sh","skypack","esm.run","jsdelivr.esm","fastly.jsdelivr.esm","gcore.jsdelivr.esm","testingcf.jsdelivr.esm","jsdelivr.b-cdn.esm","jspm"],B=["jsdelivr","fastly.jsdelivr","unpkg","gcore.jsdelivr","testingcf.jsdelivr","jsdelivr.b-cdn","npmcdn"],M=["jsdelivr.gh","fastly.jsdelivr.gh","statically","gcore.jsdelivr.gh","testingcf.jsdelivr.gh","jsdelivr.b-cdn.gh"],r={getModuleUrl:(e,{isModule:s=!0,defaultCDN:i="esm.sh",external:o}={})=>{e=e.replace(/#nobundle/g,"");let a=n=>!o||!n.includes("https://esm.sh")?n:n.includes("?")?`${n}&external=${o}`:`${n}?external=${o}`,l=$(e,s,i);return l?a(l):s?a("https://esm.sh/"+e):"https://cdn.jsdelivr.net/npm/"+e},getUrl:(e,s)=>e.startsWith("http")||e.startsWith("data:")?e:$(e,!1,s||qt())||e,cdnLists:{npm:B,module:L,gh:M},checkCDNs:async(e,s)=>{let i=[s,...r.cdnLists.npm].filter(Boolean);for(let o of i)try{if((await fetch(r.getUrl(e,o),{method:"HEAD"})).ok)return o}catch{}return r.cdnLists.npm[0]}},qt=()=>{if(globalThis.appCDN)return globalThis.appCDN;try{return new URL(location.href).searchParams.get("appCDN")||r.cdnLists.npm[0]}catch{return r.cdnLists.npm[0]}},$=(e,s,i)=>{let o=s&&e.startsWith("unpkg:")?"?module":"";e.startsWith("gh:")?e=e.replace("gh",M[0]):e.includes(":")||(e=(i||(s?L[0]:B[0]))+":"+e);for(let a of $t){let[l,n]=a;if(l.test(e))return e.replace(l,n)+o}return null},$t=[[/^(esm\.sh:)(.+)/i,"https://esm.sh/$2"],[/^(npm:)(.+)/i,"https://esm.sh/$2"],[/^(node:)(.+)/i,"https://esm.sh/$2"],[/^(jsr:)(.+)/i,"https://esm.sh/jsr/$2"],[/^(pr:)(.+)/i,"https://esm.sh/pr/$2"],[/^(pkg\.pr\.new:)(.+)/i,"https://esm.sh/pkg.pr.new/$2"],[/^(skypack:)(.+)/i,"https://cdn.skypack.dev/$2"],[/^(jsdelivr:)(.+)/i,"https://cdn.jsdelivr.net/npm/$2"],[/^(fastly\.jsdelivr:)(.+)/i,"https://fastly.jsdelivr.net/npm/$2"],[/^(gcore\.jsdelivr:)(.+)/i,"https://gcore.jsdelivr.net/npm/$2"],[/^(testingcf\.jsdelivr:)(.+)/i,"https://testingcf.jsdelivr.net/npm/$2"],[/^(jsdelivr\.b-cdn:)(.+)/i,"https://jsdelivr.b-cdn.net/npm/$2"],[/^(jsdelivr\.gh:)(.+)/i,"https://cdn.jsdelivr.net/gh/$2"],[/^(fastly\.jsdelivr\.gh:)(.+)/i,"https://fastly.jsdelivr.net/gh/$2"],[/^(gcore\.jsdelivr\.gh:)(.+)/i,"https://gcore.jsdelivr.net/gh/$2"],[/^(testingcf\.jsdelivr\.gh:)(.+)/i,"https://testingcf.jsdelivr.net/gh/$2"],[/^(jsdelivr\.b-cdn\.gh:)(.+)/i,"https://jsdelivr.b-cdn.net/gh/$2"],[/^(statically:)(.+)/i,"https://cdn.statically.io/gh/$2"],[/^(esm\.run:)(.+)/i,"https://esm.run/$2"],[/^(jsdelivr\.esm:)(.+)/i,"https://cdn.jsdelivr.net/npm/$2/+esm"],[/^(fastly\.jsdelivr\.esm:)(.+)/i,"https://fastly.jsdelivr.net/npm/$2/+esm"],[/^(gcore\.jsdelivr\.esm:)(.+)/i,"https://gcore.jsdelivr.net/npm/$2/+esm"],[/^(testingcf\.jsdelivr\.esm:)(.+)/i,"https://testingcf.jsdelivr.net/npm/$2/+esm"],[/^(jsdelivr\.b-cdn\.esm:)(.+)/i,"https://jsdelivr.b-cdn.net/npm/$2/+esm"],[/^(jspm:)(.+)/i,"https://jspm.dev/$2"],[/^(esbuild:)(.+)/i,"https://esbuild.vercel.app/$2"],[/^(bundle\.run:)(.+)/i,"https://bundle.run/$2"],[/^(unpkg:)(.+)/i,"https://unpkg.com/$2"],[/^(npmcdn:)(.+)/i,"https://npmcdn.com/$2"],[/^(bundlejs:)(.+)/i,"https://deno.bundlejs.com/?file&q=$2"],[/^(bundle:)(.+)/i,"https://deno.bundlejs.com/?file&q=$2"],[/^(deno:)(.+)/i,"https://deno.bundlejs.com/?file&q=https://deno.land/x/$2/mod.ts"],[/^(https:\/\/deno\.land\/.+)/i,"https://deno.bundlejs.com/?file&q=$1"],[/^(github:|https:\/\/github\.com\/)(.[^\/]+?)\/(.[^\/]+?)\/(?!releases\/)(?:(?:blob|raw)\/)?(.+?\/.+)/i,"https://deno.bundlejs.com/?file&q=https://cdn.jsdelivr.net/gh/$2/$3@$4"],[/^(gist\.github:)(.+?\/[0-9a-f]+\/raw\/(?:[0-9a-f]+\/)?.+)$/i,"https://gist.githack.com/$2"],[/^(gitlab:|https:\/\/gitlab\.com\/)([^\/]+.*\/[^\/]+)\/(?:raw|blob)\/(.+?)(?:\?.*)?$/i,"https://deno.bundlejs.com/?file&q=https://gl.githack.com/$2/raw/$3"],[/^(bitbucket:|https:\/\/bitbucket\.org\/)([^\/]+\/[^\/]+)\/(?:raw|src)\/(.+?)(?:\?.*)?$/i,"https://deno.bundlejs.com/?file&q=https://bb.githack.com/$2/raw/$3"],[/^(bitbucket:)snippets\/([^\/]+\/[^\/]+)\/revisions\/([^\/\#\?]+)(?:\?[^#]*)?(?:\#file-(.+?))$/i,"https://bb.githack.com/!api/2.0/snippets/$2/$3/files/$4"],[/^(bitbucket:)snippets\/([^\/]+\/[^\/\#\?]+)(?:\?[^#]*)?(?:\#file-(.+?))$/i,"https://bb.githack.com/!api/2.0/snippets/$2/HEAD/files/$3"],[/^(bitbucket:)\!api\/2.0\/snippets\/([^\/]+\/[^\/]+\/[^\/]+)\/files\/(.+?)(?:\?.*)?$/i,"https://bb.githack.com/!api/2.0/snippets/$2/files/$3"],[/^(api\.bitbucket:)2.0\/snippets\/([^\/]+\/[^\/]+\/[^\/]+)\/files\/(.+?)(?:\?.*)?$/i,"https://bb.githack.com/!api/2.0/snippets/$2/files/$3"],[/^(rawgit:)(.+?\/[0-9a-f]+\/raw\/(?:[0-9a-f]+\/)?.+)$/i,"https://gist.githack.com/$2"],[/^(rawgit:|https:\/\/raw\.githubusercontent\.com)(\/[^\/]+\/[^\/]+|[0-9A-Za-z-]+\/[0-9a-f]+\/raw)\/(.+)/i,"https://deno.bundlejs.com/?file&q=https://raw.githack.com/$2/$3"]];var{getUrl:Lt,getModuleUrl:te}=r;var c=Lt("gh:live-codes/gleam-precompiled@v0.5.0/");var p=c+"build/packages/plinth/src/plinth/",m=c+"build/dev/javascript/plinth/plinth/",P={name:"gleam",title:getTemplateName("templates.starter.gleam","Gleam Starter"),thumbnail:"assets/templates/gleam.svg",activeEditor:"script",markup:{language:"html",content:`
+<div class="container">
+  <h1 id="title">Hello, World!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/gleam.svg" />
+  <p>You clicked <span id="counter">0</span> times.</p>
+  <button id="counter-button">Click me</button>
+</div>
 
-counter = 0
-
-def increment(ev):
-    global counter
-    counter += 1
-    document['counter'].html = str(counter)
-
-document["counter-button"].bind("click", increment)
-
-# check console
-current_time = int(time.strftime('%H'))
-if current_time < 12 :
-      print('Good morning')
-elif 12 <= current_time < 18:
-      print('Good afternoon')
-else:
-      print('Good evening')
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var L={name:"react-native",title:getTemplateName("templates.starter.react-native","React Native Starter"),thumbnail:"assets/templates/react.svg",activeEditor:"script",markup:{language:"html",content:""},style:{language:"css",content:""},script:{language:"react-native",content:`
-import { useState } from "react";
-import { Button, Image, StyleSheet, Text, View } from "react-native";
+`.trimStart()},style:{language:"css",content:`
+.container,
+.container button {
+  text-align: center;
+  font: 1em sans-serif;
+}
+.logo {
+  width: 150px;
+}
+`.trimStart()},script:{language:"gleam",content:`
+import gleam/int
+import gleam/io
+import gleam/result
+import gleam/dynamic
+import plinth/browser/document
+import plinth/browser/element
+import plinth/browser/event
+// see docs for using custom modules:
+// https://livecodes.io/docs/languages/gleam
 
-const logoUri = \`data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z" /><circle cx="420.9" cy="296.5" r="45.7" /><path d="M520.5 78.1z" /></g></svg>\`;
+pub fn main() {
+  say_hello()
+  counter()
+}
 
-function Link(props) {
-  return (
-    <Text
-      {...props}
-      accessibilityRole="link"
-      style={StyleSheet.compose(styles.link, props.style)}
-    />
-  );
+fn say_hello() {
+  let greeting = hello("Gleam")
+  let assert Ok(title) = document.query_selector("#title")
+  element.set_inner_html(title, greeting)
+  io.println(cowsay(greeting))
 }
 
-function Counter(props) {
-  const [count, setCount] = useState(props.initialCount);
-  return (
-    <View>
-      <Text style={styles.text}>You clicked {count} times.</Text>
-      <Button onPress={() => setCount(count + 1)} title="Click me" />
-    </View>
-  );
+fn counter() {
+  document.add_event_listener("click", fn(ev) {
+    let target = dynamic.unsafe_coerce(event.target(ev))
+    case element.get_attribute(target, "id") {
+        Ok("counter-button") -> increment()
+        _ -> Nil
+    }
+  })
 }
 
-export default function App() {
-  return (
-    <View style={styles.app}>
-      <View style={styles.header}>
-        <Image
-          accessibilityLabel="React logo"
-          source={{ uri: logoUri }}
-          resizeMode="contain"
-          style={styles.logo}
-        />
-        <Text style={styles.title}>React Native for Web</Text>
-      </View>
-      <Text style={styles.text}>
-        This is an example app built with{" "}
-        <Link href="https://necolas.github.io/react-native-web/">
-          React Native for Web
-        </Link>
-      </Text>
-      <Counter initialCount={0}></Counter>
-    </View>
-  );
+fn increment() {
+  let assert Ok(el) = document.query_selector("#counter")
+  let assert Ok(_) = el
+  |> element.inner_text
+  |> int.parse
+  |> result.map(fn(n) { n + 1 })
+  |> result.map(int.to_string)
+  |> result.map(element.set_inner_html(el, _))
+  Nil
 }
 
-const styles = StyleSheet.create({
-  app: {
-    marginHorizontal: "auto",
-    marginVertical: 20,
-    maxWidth: 500,
-  },
-  logo: {
-    height: 150,
-  },
-  header: {
-    padding: 20,
-  },
-  title: {
-    fontWeight: "bold",
-    fontSize: "1.5rem",
-    marginVertical: "0.5em",
-    textAlign: "center",
-  },
-  text: {
-    lineHeight: "1.5em",
-    fontSize: "1.125rem",
-    marginVertical: "0.5em",
-    textAlign: "center",
-  },
-  link: {
-    color: "#1B95E0",
-  },
-});
-`.trimStart()}};var q={name:"react",title:getTemplateName("templates.starter.react","React Starter"),thumbnail:"assets/templates/react.svg",activeEditor:"script",markup:{language:"html",content:""},style:{language:"css",content:`
+// custom module
+@external(javascript, "my_pkg/greet.js", "hello")
+pub fn hello(str: String) -> String
+
+// npm module
+@external(javascript, "npm:cowsay2", "say")
+pub fn cowsay(str: String) -> String
+`.trimStart()},customSettings:{imports:{"my_pkg/greet.js":c+"demo/greet.js"},gleam:{modules:{"plinth/browser/document":{srcUrl:p+"browser/document.gleam",compiledUrl:m+"browser/document.mjs"},"plinth/browser/element":{srcUrl:p+"browser/element.gleam",compiledUrl:m+"browser/element.mjs"},"plinth/browser/event":{srcUrl:p+"browser/event.gleam",compiledUrl:m+"browser/event.mjs"}}}}};var R={name:"go",title:getTemplateName("templates.starter.go","Go Starter"),thumbnail:"assets/templates/go.svg",activeEditor:"script",markup:{language:"html",content:`
+<div class="container">
+  <h1>Hello, <span id="title">World</span>!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/go.svg" />
+  <p>You clicked <span id="counter">0</span> times.</p>
+  <button id="counter-button">Click me</button>
+</div>
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
   font: 1em sans-serif;
 }
 .logo {
-  width: 150px;
+  width: 250px;
 }
-`.trimStart()},script:{language:"react",content:`
-import { useState } from "react";
+`.trimStart()},script:{language:"go",content:`
+package main
 
-function Counter(props) {
-  const [count, setCount] = useState(0);
-  return (
-    <div className="container">
-      <h1>Hello, {props.name}!</h1>
-      <img className="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/react.svg" />
-      <p>You clicked {count} times.</p>
-      <button onClick={() => setCount(count + 1)}>Click me</button>
-    </div>
-  );
+import (
+	"fmt"
+	"syscall/js"
+	"time"
+)
+
+func main() {
+	title := querySelector("#title")
+	title.Set("innerHTML", "Golang")
+
+	registerCounter()
+
+	// yes, you can use goroutines (check the console)
+	go greet()
+  fmt.Println("Hello!")
 }
 
-export default function App() {
-  return <Counter name="React" />;
+func querySelector(id string) js.Value {
+	return js.Global().Get("document").Call("querySelector", id)
 }
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var B={name:"markdown",title:getTemplateName("templates.starter.markdown","Markdown Starter"),thumbnail:"assets/templates/markdown.svg",activeEditor:"markup",markup:{language:"markdown",content:`
-# Project Title
 
-One Paragraph of project description goes here
+func registerCounter() {
+	btn := querySelector("#counter-button")
+	counter := querySelector("#counter")
+	count := 0
 
-## Getting Started
+	var cb js.Func
+	cb = js.FuncOf(func(this js.Value, args []js.Value) interface{} {
+		count += 1
+		counter.Set("innerHTML", count)
+		return nil
+	})
+	btn.Call("addEventListener", "click", cb)
+}
 
-These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
+func greet() {
+	if hours, _, _ := time.Now().Clock(); hours < 12 {
+		fmt.Println("Good morning")
+	} else if hours < 18 {
+		fmt.Println("Good afternoon")
+	} else {
+		fmt.Println("Good evening")
+	}
+}
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var N={name:"go-wasm",title:"Go (Wasm) Starter",thumbnail:"assets/templates/go.svg",activeEditor:"script",markup:{language:"html",content:`
+<div class="container">
+  <h1>Go WebAssembly Demo</h1>
+  <img class="logo" alt="Go logo" src="{{ __livecodes_baseUrl__ }}assets/templates/go.svg" />
+  
+  <div class="demo-section">
+    <h2>Interactive Counter</h2>
+    <p>Current count: <span id="counter">0</span></p>
+    <button id="increment-btn" disabled>Loading...</button>
+  </div>
 
-### Prerequisites
+  <div class="demo-section">
+    <h2>Stdin Input Demo</h2>
+    <p>Enter your name:</p>
+    <input type="text" id="name-input" placeholder="Your name" />
+    <button id="greet-btn" disabled>Loading...</button>
+    <p id="greeting"></p>
+  </div>
 
-What things you need to install the software and how to install them
 
-\`\`\`
-Give examples
-\`\`\`
+</div>
 
-### Installing
+<script>
+  addEventListener('load', async () => {
+    // Wait for Go WASM to load
+    await livecodes.goWasm.loaded;
+
+    const incrementBtn = document.querySelector("#increment-btn");
+    const greetBtn = document.querySelector("#greet-btn");
+
+    // Enable buttons and update text
+    incrementBtn.disabled = false;
+    incrementBtn.textContent = "Increment";
+    greetBtn.disabled = false;
+    greetBtn.textContent = "Greet";
+
+    // Counter demo
+    incrementBtn.onclick = async () => {
+      const currentCount = parseInt(document.querySelector("#counter").textContent);
+      
+      const {output, error} = await livecodes.goWasm.run(currentCount.toString());
+      if (error) {
+        console.error('Error:', error);
+      } else {
+        document.querySelector("#counter").textContent = output.trim();
+      }
+    };
 
-A step by step series of examples that tell you how to get a development env running
+    // Greeting demo
+    greetBtn.onclick = async () => {
+      const name = document.querySelector("#name-input").value;
+      if (!name) {
+        alert('Please enter your name');
+        return;
+      }
+      
+      const {output, error} = await livecodes.goWasm.run(name);
+      if (error) {
+        console.error('Error:', error);
+      } else {
+        document.querySelector("#greeting").textContent = output.trim();
+      }
+    };
 
-Say what the step will be
+  });
+<\/script>
+`.trimStart()},style:{language:"css",content:`
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
 
-\`\`\`
-Give the example
-\`\`\`
+.logo {
+  width: 150px;
+  display: block;
+  margin: 20px auto;
+}
 
-And repeat
+.demo-section {
+  background: #f5f5f5;
+  padding: 20px;
+  margin: 20px 0;
+  border-radius: 8px;
+  border-left: 4px solid #00add8;
+}
 
-\`\`\`
-until finished
-\`\`\`
+.demo-section h2 {
+  margin-top: 0;
+  color: #333;
+}
 
-End with an example of getting some data out of the system or using it for a little demo
+button {
+  background: #00add8;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  margin: 10px 5px;
+}
 
-## Running the tests
+button:hover:not(:disabled) {
+  background: #0099c7;
+}
 
-Explain how to run the automated tests for this system
+button:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
 
-### Break down into end to end tests
+input[type="text"], input[type="number"] {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 16px;
+  margin: 5px;
+  width: 200px;
+}
 
-Explain what these tests test and why
+#counter {
+  font-weight: bold;
+  color: #00add8;
+  font-size: 24px;
+}
 
-\`\`\`
-Give an example
-\`\`\`
-
-### And coding style tests
-
-Explain what these tests test and why
-
-\`\`\`
-Give an example
-\`\`\`
-
-## Deployment
-
-Add additional notes about how to deploy this on a live system
-
-## Built With
-
-* [Dropwizard](http://www.dropwizard.io/1.0.2/docs/) - The web framework used
-* [Maven](https://maven.apache.org/) - Dependency Management
-* [ROME](https://rometools.github.io/rome/) - Used to generate RSS Feeds
+#greeting, #result {
+  font-weight: bold;
+  color: #333;
+  margin-top: 10px;
+}
+`.trimStart()},script:{language:"go-wasm",content:`
+package main
 
-## Contributing
+import (
+    "bufio"
+    "fmt"
+    "os"
+    "strconv"
+    "strings"
+)
 
-Please read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us.
+func main() {
+    // Read input from stdin
+    scanner := bufio.NewScanner(os.Stdin)
+    
+    if scanner.Scan() {
+        input := strings.TrimSpace(scanner.Text())
+        
+        // Try to parse as number (for counter demo)
+        if count, err := strconv.Atoi(input); err == nil {
+            // Counter demo - increment and return the new number
+            newCount := count + 1
+            fmt.Println(newCount)
+            return
+        }
+        
+       
+        
+        // Greeting demo - treat as name
+        fmt.Printf("Hello, %s! Welcome to Go WebAssembly!\\n", input)
+        fmt.Println("This is running in your browser using Go compiled to WebAssembly.")
+    } else {
+        // No input provided
+        fmt.Println("Hello from Go WebAssembly!")
+        fmt.Println("This program demonstrates stdin handling in Go WASM.")
+    }
+}
+`.trimStart()}};var H={name:"imba",title:getTemplateName("templates.starter.imba","Imba Starter"),thumbnail:"assets/templates/imba.svg",activeEditor:"script",markup:{language:"html",content:""},style:{language:"css",content:""},script:{language:"imba",content:`
+tag app-counter
+	prop name = "Imba"
+	prop count = 0
 
-## Versioning
+	css self
+		text-align: center
+		font: 1em sans-serif
 
-We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/your/project/tags).
+	css .btn h:2em	w:10em	fs:1em
 
-## Authors
+	<self>
+		<h1> "Hello, {name}!"
+		<img[h:100px] alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/imba.svg">
+		<p> "You clicked {count} times."
+		<button.btn @click=count++> "Click me"
 
-* **Billie Thompson** - *Initial work* - [PurpleBooth](https://github.com/PurpleBooth)
+imba.mount <app-counter>
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var W={name:"java",title:getTemplateName("templates.starter.java","Java Starter"),thumbnail:"assets/templates/java.svg",activeEditor:"script",markup:{language:"html",content:`
+<div class="container">
+  <h1>Hello, <span id="name">World</span>!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/java.svg" />
+  <p>You clicked <span id="counter">0</span> times.</p>
+  <button id="counter-button" disabled>Loading...</button>
+</div>
+<script>
+  // set initial input
+  livecodes.java.input = "-1";
 
-See also the list of [contributors](https://github.com/your/project/contributors) who participated in this project.
+  addEventListener('load', async () => {
+    const button = document.querySelector("#counter-button");
 
-## License
+    // wait till loaded
+    await livecodes.java.loaded;
 
-This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
+    // get initial output
+    const initialOutput = livecodes.java.output;
+    update(initialOutput);
 
-## Acknowledgments
+    button.onclick = async () => {
+      button.disabled = true;
+      // run with new input
+      const {output, error, exitCode} = await livecodes.java.run(window.count);
+      update(output);
+    };
 
-* Hat tip to anyone whose code was used
-* Inspiration
-* etc
+    function update(output) {
+      const counter = document.querySelector("#counter");
+      const name = document.querySelector("#name");
 
+      const [title, count] = output.split('\\n');
 
-Source: https://gist.github.com/PurpleBooth/109311bb0361f32d87a2
+      if (parseInt(count) !== NaN) {
+        window.count = count;
+        counter.innerText = window.count;
+      }
+      if (title) {
+        name.innerText = title;
+      }
+      button.innerText = "Click me";
+      button.disabled = false;
+    }
+  });
+<\/script>
 `.trimStart()},style:{language:"css",content:`
-@import "github-markdown-css";
-
-body {
-  border: 1px solid #e1e4e8;
-  border-radius: 4px;
-  padding: 20px;
-  margin: 20px !important;
-}
-`.trimStart()},script:{language:"javascript",content:`document.body.classList.add('markdown-body');
-`},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var M={name:"rescript",title:getTemplateName("templates.starter.rescript","ReScript Starter"),thumbnail:"assets/templates/rescript.png",activeEditor:"script",markup:{language:"html",content:`<div id="app">Loading...</div>
-`},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -1151,51 +1437,54 @@ body {
 .logo {
   width: 150px;
 }
-`.trimStart()},script:{language:"rescript",content:`
-// import npm modules
-@module("canvas-confetti") external confetti: () => unit = "default"
-
-confetti()
-
-module App = {
-  @react.component
-  let make = (~name: string) => {
-    let title = "Hello, " ++ name ++ "!"
+`.trimStart()},script:{language:"java",content:`
+import java.io.BufferedReader;
+import java.io.IOException;
+import java.io.InputStreamReader;
 
-    let (count, setCount) = React.useState(_ => 0)
-    let onClick = _evt => {
-      if (mod(count + 1, 5) == 0) {
-        confetti()
-      }
-      setCount(_prev => _prev + 1)
-    }
+public class Main {
 
-    let times = switch count {
-    | 1 => "once"
-    | 2 => "twice"
-    | n => String.make(n) ++ " times"
-    }
+  public static void main(String[] args) throws IOException {
+    String title = "Java";
+    System.out.println(title);
 
-    <div className="container">
-      <h1> {title->React.string} </h1>
-      <img className="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/rescript.png" />
-      <p> {React.string("You clicked " ++ times)} </p>
-      <button onClick> {React.string("Click me")} </button>
-    </div>
+    BufferedReader reader = new BufferedReader(
+      new InputStreamReader(System.in)
+    );
+    int count = Integer.parseInt(reader.readLine());
+    count += 1;
+    System.out.println(count);
   }
 }
-
-switch ReactDOM.querySelector("#app") {
-| Some(rootElement) => {
-    let root = ReactDOM.Client.createRoot(rootElement)
-    ReactDOM.Client.Root.render(root, <App name="ReScript React" />)
-  }
-| None => () // do nothing
+`.trimStart()}};var I={name:"javascript",title:getTemplateName("templates.starter.javascript","JavaScript Starter"),thumbnail:"assets/templates/javascript.svg",activeEditor:"script",markup:{language:"html",content:`
+<div class="container">
+  <h1>Hello, <span id="title">World</span>!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/javascript.svg" />
+  <p>You clicked <span id="counter">0</span> times.</p>
+  <button id="counter-button">Click me</button>
+</div>
+`.trimStart()},style:{language:"css",content:`
+.container,
+.container button {
+  text-align: center;
+  font: 1em sans-serif;
+}
+.logo {
+  width: 150px;
 }
+`.trimStart()},script:{language:"javascript",content:`
+const title = document.querySelector("#title");
+const counter = document.querySelector("#counter");
+const button = document.querySelector("#counter-button");
 
-Console.log("Hello, ReScript!")
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var P={name:"reason",title:getTemplateName("templates.starter.reason","Reason Starter"),thumbnail:"assets/templates/reason.svg",activeEditor:"script",markup:{language:"html",content:`<div id="app">Loading...</div>
-`},style:{language:"css",content:`
+title.innerText = "JavaScript";
+let count = 0;
+
+button.addEventListener("click", () => {
+  count++;
+  counter.innerText = count;
+});
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var A={name:"jest-react",title:getTemplateName("templates.starter.jest-react","Jest/React Starter"),thumbnail:"assets/templates/jest.svg",activeEditor:"script",autotest:!0,markup:{language:"html",content:""},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -1204,143 +1493,86 @@ Console.log("Hello, ReScript!")
 .logo {
   width: 150px;
 }
-`.trimStart()},script:{language:"reason",content:`
-module App = {
-  [@react.component]
-  let make = (~name) => {
-    let title = "Hello, " ++ name ++ "!"
-
-    let (count, setCount) = React.useState(() => 0);
+.info {
+  color: #404040;
+  font-size: 0.9em;
+  margin: 2em;
+}
+`.trimStart()},script:{language:"jsx",content:`
+import { useState } from "react";
 
-    let times = switch (count) {
-    | 1 => "once"
-    | 2 => "twice"
-    | n => string_of_int(n) ++ " times"
-    };
+export const increment = (count) => (count ?? 0) + 1;
 
+function Counter(props) {
+  const [count, setCount] = useState(0);
+  return (
     <div className="container">
-      <h1> {React.string(title)} </h1>
-      <img className="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/reason.svg" />
-      <p> {React.string("You clicked " ++ times)} </p>
-      <button onClick={_ => setCount(_ => count + 1)}>
-        {React.string("Click me")}
-      </button>
+      <h1>Hello, {props.name}!</h1>
+      <img className="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/jest.svg" />
+      <p>You clicked {count} times.</p>
+      <button onClick={() => setCount(increment(count))}>Click me</button>
+      <p className="info">Run tests in the "Tests" panel below.</p>
     </div>
-  };
-};
-
-switch (ReactDOM.querySelector("#app")) {
-| Some(app) => ReactDOM.render(<App name="ReasonReact" />, app)
-| None => ()
+  );
 }
 
-Js.log("Hello, Reason!");
-`.trimStart()},customSettings:{imports:{react:"https://esm.sh/react@18.3.1","react/":"https://esm.sh/react@18.3.1/","react-dom":"https://esm.sh/react-dom@18.3.1"}}};var R={name:"ocaml",title:getTemplateName("templates.starter.ocaml","Ocaml Starter"),thumbnail:"assets/templates/ocaml.svg",activeEditor:"script",markup:{language:"html",content:`<div id="app">Loading...</div>
-`},style:{language:"css",content:`
-.container,
-.container button {
-  text-align: center;
-  font: 1em sans-serif;
+export default function App() {
+  return <Counter name="Jest with React" />;
 }
-.logo {
-  width: 250px;
+`.trimStart()},tests:{language:"tsx",content:`
+import { render, fireEvent, screen, cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { assert } from "chai";
+import App, { increment } from "./script";
+
+const renderComponent = () => {
+  cleanup();
+  render(<App />, {
+    container: document.querySelector('#app')
+  });
 }
-`.trimStart()},script:{language:"ocaml",content:`
-module App =
-  struct
-    let make ~name  =
-      let title = "Hello, " ^ name ^ "!" in
 
-      let (count,setCount) = React.useState ((fun _ -> 0) [@bs]) in
+beforeEach(renderComponent);
 
-      let times =
-        match count with
-        | 1 -> "once"
-        | 2 -> "twice"
-        | n -> (string_of_int n) ^ " times" in
+afterAll(renderComponent);
 
-      ((div ~className: "container"
-          ~children:[((h1 ~children: [React.string title] ()) [@JSX]);
-                    ((img ~className: "logo"
-                        ~alt: "logo"
-                        ~src: "{{ __livecodes_baseUrl__ }}assets/templates/ocaml.svg"
-                        ~children:[] ()) [@JSX]);
-                    ((p
-                        ~children:[React.string ("You clicked "
-                                                ^ times)] ()) [@JSX]);
-                    ((button
-                        ~onClick:((fun _ -> setCount ((fun _ -> count + 1) [@bs])) [@bs])
-                        ~children:[React.string "Click me"] ())
-                    [@JSX])] ()) [@JSX]) [@@react.component]
-  end
-
-let _ =
-  match ReactDOM.querySelector "#app" with
-  | ((Some (app)) [@explicit_arity]) ->
-      ReactDOM.render
-        ((App.createElement
-            ~name: "OCaml"
-            ~children:[] ()) [@JSX]) app
-  | None  -> ()
+describe("Increment", () => {
+  test("should increment count", () => {
+    expect(increment(3)).toBe(4);
+  });
 
-let _ = print_endline "Hello, OCaml!"
-`.trimStart()},customSettings:{imports:{react:"https://esm.sh/react@18.3.1","react/":"https://esm.sh/react@18.3.1/","react-dom":"https://esm.sh/react-dom@18.3.1"}}};var N={name:"riot",title:getTemplateName("templates.starter.riot","Riot.js Starter"),thumbnail:"assets/templates/riot.svg",activeEditor:"script",markup:{language:"html",content:`
-<counter title="Riot.js"></counter>
+  test("should return 1 if no count was supplied", () => {
+    assert.equal(increment(), 1);
+  });
+});
 
-<script>
-  livecodes.templateData = {
-    url: 'https://riot.js.org/'
-  }
-<\/script>
-`.trimStart()},style:{language:"css",content:""},script:{language:"riot",content:`
-<counter>
-  <div class="container">
-    <h1>Hello, { props.title }!</h1>
-    <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/riot.svg" />
-    <p>You clicked { state.count } times.</p>
-    <button onclick="{ increment }">Click me</button>
-    <div class="footer">
-      <a href="{ props.url }" target="_blank">Riot.js Website</a>
-    </div>
-  </div>
+describe("Page", () => {
+  test("Should display title", async () => {
+    expect(screen.getByText("Hello", { exact: false })).toHaveTextContent(
+      "Hello, Jest with React!"
+    );
+  });
 
-  <style>
-    .container,
-    .container button {
-      text-align: center;
-      font: 1em sans-serif;
-    }
-    .logo {
-      width: 150px;
-    }
-    .footer {
-      font: 0.8em sans-serif;
-      margin: 1.5em;
-    }
-  </style>
+  test("Should display logo", async () => {
+    expect(document.querySelector('.logo').src).toContain('jest.svg');
+  });
 
-  <script>
-    export default {
-      onBeforeMount(props, state) {
-        this.state = {
-          count: 0,
-        };
-      },
-      increment(e) {
-        e.preventDefault();
-        this.update({
-          count: this.state.count + 1,
-        });
-      },
-    };
-  <\/script>
-</counter>
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var H={name:"ruby",title:getTemplateName("templates.starter.ruby","Ruby Starter"),thumbnail:"assets/templates/ruby.svg",activeEditor:"script",markup:{language:"html",content:`
+  test("Should increment counter on button click", async () => {
+    await fireEvent.click(screen.getByText("Click me"));
+    await fireEvent.click(screen.getByText("Click me"));
+    await fireEvent.click(screen.getByText("Click me"));
+    expect(screen.getByText("You clicked", { exact: false })).toHaveTextContent(
+      "You clicked 3 times."
+    );
+  });
+});
+`.trimStart()},tools:{enabled:"all",active:"tests",status:"open"}};var D={name:"jest",title:getTemplateName("templates.starter.jest","Jest Starter"),thumbnail:"assets/templates/jest.svg",autotest:!0,activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/ruby.svg" />
-  <p id="counter">You clicked 0 times.</p>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/jest.svg" />
+  <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
+  <p class="info">Run tests in the "Tests" panel below.</p>
 </div>
 `.trimStart()},style:{language:"css",content:`
 .container,
@@ -1351,38 +1583,83 @@ let _ = print_endline "Hello, OCaml!"
 .logo {
   width: 150px;
 }
-`.trimStart()},script:{language:"ruby",content:`
-require "date"
-require "native"
+.info {
+  color: #404040;
+  font-size: 0.9em;
+  margin: 2em;
+}
+`.trimStart()},script:{language:"javascript",content:`
+export class Counter {
+  count;
+  constructor() {
+    this.count = 0;
+  }
+  increment() {
+    this.count += 1;
+  }
+  getValue() {
+    return this.count;
+  }
+}
 
-title = "Ruby"
-$$.document.querySelector("#title").innerHTML = title
+const title = document.querySelector("#title");
+const count = document.querySelector("#counter");
+const button = document.querySelector("#counter-button");
 
-$counter = 0
-$counter_element = $$.document.querySelector "#counter"
+title.innerText = "Jest";
+const counter = new Counter();
+button.addEventListener(
+  "click",
+  () => {
+    counter.increment();
+    count.innerText = counter.getValue();
+  },
+  false
+);
+`.trimStart()},tests:{language:"tsx",content:`
+import { fireEvent, screen } from "@testing-library/dom";
+import "@testing-library/jest-dom";
+import { assert } from "chai";
+import { Counter } from "./script";
 
-def increment
-    $counter += 1
-    $counter_element.innerHTML = "You clicked %d times." % [$counter]
-end
+describe("Counter Class", () => {
+  test("Should initialize count with zero", () => {
+    const counter = new Counter();
+    expect(counter.getValue()).toBe(0);
+  });
 
-button = $$.document.querySelector "button"
-button.onclick = -> {increment}
+  test("Should increment", () => {
+    const counter = new Counter();
+    counter.increment();
+    counter.increment();
+    counter.increment();
+    assert.equal(counter.getValue(), 3);
+  });})
 
-# check console
-current_time = Time.now.hour
-msg = Date.today.strftime "happy %A!"
-if current_time < 12
-    puts "Good morning, " + msg
-elsif current_time < 18
-    puts "Good afternoon, " + msg
-else
-    puts "Good evening, " + msg
-end
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var W={name:"scheme",title:getTemplateName("templates.starter.scheme","Scheme Starter"),thumbnail:"assets/templates/scheme.svg",activeEditor:"script",markup:{language:"html",content:`
+describe("Page", () => {
+  test("Should display title", async () => {
+    expect(screen.getByText("Hello", { exact: false })).toHaveTextContent(
+      "Hello, Jest!"
+    );
+  });
+
+  test("Should display logo", async () => {
+    expect(document.querySelector('.logo').src).toContain('jest.svg');
+  });
+
+  test("Should increment counter on button click", async () => {
+    fireEvent.click(screen.getByText("Click me"));
+    fireEvent.click(screen.getByText("Click me"));
+    fireEvent.click(screen.getByText("Click me"));
+    expect(screen.getByText("You clicked", { exact: false })).toHaveTextContent(
+      "You clicked 3 times."
+    );
+  });
+});
+`.trimStart()},tools:{enabled:"all",active:"tests",status:"open"}};var O={name:"jquery",title:getTemplateName("templates.starter.jquery","jQuery Starter"),thumbnail:"assets/templates/jquery.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/scheme.svg" />
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/jquery.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
@@ -1393,308 +1670,261 @@ end
   font: 1em sans-serif;
 }
 .logo {
-  width: 150px;
+  width: 300px;
 }
-`.trimStart()},script:{language:"scheme",content:`
-(let ((title "Scheme"))
-  (set-content! "#title" title))
+`.trimStart()},script:{language:"javascript",content:`
+import $ from "jquery";
 
-(let ((counter 0))
-  (add-handler! "#counter-button" "click"
-    (lambda (ev)
-      (set! counter (+ counter 1))
-      (set-content! "#counter" (number->string counter)))))
+$("#title").text('jQuery');
 
-; check console
-(let ((time-now (date-hour (current-date))))
-  (console-log
-    (cond ((< time-now 12) "Good morning")
-          ((< time-now 18) "Good afternoon")
-          (else "Good evening"))))
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var O={name:"solid",title:getTemplateName("templates.starter.solid","Solid Starter"),thumbnail:"assets/templates/solid.svg",activeEditor:"script",markup:{language:"html",content:""},style:{language:"css",content:`
-.container,
-.container button {
-  text-align: center;
-  font: 1em sans-serif;
-}
-.logo {
-  width: 150px;
-}
-`.trimStart()},script:{language:"solid.tsx",content:`
-import { createSignal } from "solid-js";
+let count = 0;
+$("#counter-button").click(() => {
+  count += 1;
+  $("#counter").text(count);
+});
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var Y={name:"julia",title:getTemplateName("templates.starter.julia","Julia Starter"),thumbnail:"assets/templates/julia.svg",activeEditor:"script",markup:{language:"html",content:`
+<div class="container">
+  <h1>Hello, <span id="name">World</span>!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/julia.svg" />
+  <p>You clicked <span id="counter">0</span> times.</p>
+  <button id="counter-button" disabled>Loading...</button>
+</div>
 
-function Counter(props: { name: string }) {
-  const [count, setCount] = createSignal(0);
-  const increment = () => setCount(count() + 1);
-  return (
-    <div class="container">
-      <h1>Hello, {props.name}!</h1>
-      <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/solid.svg" />
-      <p>You clicked {count()} times.</p>
-      <button onClick={increment}>Click me</button>
-    </div>
-  );
-}
+<script>
+  // set initial input
+  livecodes.julia.input = "";
 
-export default function App() {
-  return <Counter name="Solid" />;
-}
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var I={name:"sql",title:getTemplateName("templates.starter.sql","SQL Starter"),thumbnail:"assets/templates/sqlite.svg",activeEditor:"script",markup:{language:"html",content:`
-<div id="output">
-  <details open>
-    <summary>Tables</summary>
-    <div id="tables"></div>
-  </details>
-  <details open>
-    <summary>Result</summary>
-    <pre><code id="result"></code></pre>
-  </details>
-  <details open>
-    <summary>Result as objects</summary>
-    <pre><code id="obj-result"></code></pre>
-  </details>
-</div>
+  addEventListener('load', async () => {
+    const button = document.querySelector("#counter-button");
 
-<script>
-  livecodes.sql.render('#tables');
+    // wait till loaded
+    await livecodes.julia.loaded;
 
-  livecodes.sql.getResult().then((result) => {
-    console.log(result)
-    document.querySelector('#result').innerHTML =  JSON.stringify(result, null, 2);
-  }).catch(console.error);
+    // get initial output
+    const initialOutput = livecodes.julia.output;
+    update(initialOutput);
 
+    button.innerText = "Click me";
+    button.disabled = false;
+    button.onclick = async () => {
+      // run with new input
+      const output = await livecodes.julia.run(window.count);
+      update(output);
+    };
 
-  livecodes.sql.getResultAsObjects().then((results) => {
-    results.forEach(console.table);
-    document.querySelector('#obj-result').innerHTML = JSON.stringify(results, null, 2);
-  }).catch(console.error);
+    function parseOutput(output) {
+      return output.replace(/"/g, '').split('\\n');
+    }
+
+    function update(output) {
+      const counter = document.querySelector("#counter");
+      const name = document.querySelector("#name");
+
+      const [title, count] = parseOutput(output);
+
+      if (parseInt(count) !== NaN) {
+        window.count = count;
+        counter.innerText = window.count;
+      }
+      if (title) {
+        name.innerText = title;
+      }
+    }
+  });
 <\/script>
 `.trimStart()},style:{language:"css",content:`
-#output {
-  color: #3d3d3d;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+.container,
+.container button {
+  text-align: center;
+  font: 1em sans-serif;
 }
-
-#output summary {
-  cursor: pointer;
+.logo {
+  width: 150px;
 }
+`.trimStart()},script:{language:"julia",content:`
+function increment(x)
+    if x == ""
+        return 0
+    else
+        num = parse(Int, x)
+        num + 1
+    end
+end
 
-#output table {
-  border: 1px solid #ddd;
-  border-collapse: separate;
-  border-radius: 4px;
-  border-spacing: 0;
-  font-size: 0.9em;
-  margin: 1em;
-  width: 95%;
-}
+function getTitle()
+    "Julia"
+end
 
-#output th,
-#output td {
-  padding: 0.5em;
-}
+function formatOutput(args...)
+    join(map(x -> string(x), args), "\\n")
+end
 
-#output tr:nth-child(odd) {
-  background-color: #f2f2f2;
+formatOutput(getTitle(), increment(livecodesInput))
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var z={name:"knockout",title:getTemplateName("templates.starter.knockout","Knockout Starter"),thumbnail:"assets/templates/knockout.svg",activeEditor:"script",markup:{language:"html",content:`
+<div class="container">
+  <h1>Hello, <span data-bind="text: title">World</span>!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/knockout.svg" />
+  <p>You clicked <span data-bind="text: numberOfClicks">0</span> times.</p>
+  <button data-bind="click: registerClick">Click me</button>
+</div>
+`.trimStart()},style:{language:"css",content:`
+.container,
+.container button {
+  text-align: center;
+  font: 1em sans-serif;
+}
+.logo {
+  width: 250px;
 }
+`.trimStart()},script:{language:"javascript",content:`
+import ko from "knockout";
 
-#output pre {
-  background-color: #fafafa;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  box-sizing: border-box;
-  display: inline-block;
-  margin: 1em;
-  min-width: 95%;
-  padding: 1em;
+class ClickCounterViewModel {
+  constructor() {
+    this.title = 'Knockout';
+    this.numberOfClicks = ko.observable(0);
+
+    this.registerClick = function () {
+      this.numberOfClicks(this.numberOfClicks() + 1);
+    };
+  }
 }
-`.trimStart()},script:{language:"sql",content:`
--- based on https://stackoverflow.com/q/7745609
 
-CREATE TABLE IF NOT EXISTS quotes (
-  id int NOT NULL,
-  rev int NOT NULL,
-  quote varchar(200) NOT NULL,
-  PRIMARY KEY (id, rev)
-);
+ko.applyBindings(new ClickCounterViewModel());
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var G={name:"lit",title:getTemplateName("templates.starter.lit","Lit Starter"),thumbnail:"assets/templates/lit.svg",activeEditor:"script",markup:{language:"html",content:`
+<my-counter name="Lit"></my-counter>
+`.trimStart()},style:{language:"css",content:""},script:{language:"typescript",content:`
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { SignalWatcher, signal } from "@lit-labs/preact-signals";
 
-INSERT INTO quotes (id, rev, quote) VALUES
-  ('1', '1', 'Simplicity is the ultimate sophistication. \u2013 Leonardo da Vinci'),
-  ('2', '1', 'Change the world by being yourself. \u2013 Amy Poehler'),
-  ('1', '2', 'Every moment is a fresh beginning. \u2013 T.S Eliot'),
-  ('1', '3', 'Whatever you do, do it well. \u2013 Walt Disney');
+@customElement("my-counter")
+export class SignalExample extends SignalWatcher(LitElement) {
+  @property()
+  name = "World";
 
-SELECT a.id, a.rev, a.quote
-FROM quotes a
-INNER JOIN (
-    SELECT id, MAX(rev) rev
-    FROM quotes
-    GROUP BY id
-) b ON a.id = b.id AND a.rev = b.rev;
+  count = signal(0);
 
-SELECT a.*
-FROM quotes a
-LEFT OUTER JOIN quotes b
-    ON a.id = b.id AND a.rev < b.rev
-WHERE b.id IS NULL;
+  private _onClick() {
+    this.count.value = this.count.value + 1;
+  }
 
-SELECT a.id, a.rev, a.quote
-  FROM (SELECT id, rev, quote,
-               ROW_NUMBER() OVER (PARTITION BY id ORDER BY rev DESC) rank
-          FROM quotes) a
-  WHERE a.rank = 1;
-`.trimStart()}};var D={name:"stencil",title:getTemplateName("templates.starter.stencil","Stencil Starter"),thumbnail:"assets/templates/stencil.png",activeEditor:"script",markup:{language:"html",content:`<my-app title="Stencil"></my-app>
-`},style:{language:"css",content:""},script:{language:"stencil",content:`
-import { Component, Prop, h, State } from "@stencil/core";
+  render() {
+    return html\`
+      <h1>Hello, \${this.name}!</h1>
+      <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/lit.svg" />
+      <p>You clicked \${this.count.value} times.</p>
+      <button @click=\${this._onClick}>Click me</button>
+    \`;
+  }
 
-@Component({
-  tag: "my-app",
-  styles: \`
-    my-app,
-    button {
-      text-align: center;
+  static styles = css\`
+    :host {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    :host, button {
       font: 1em sans-serif;
     }
     .logo {
       width: 150px;
     }
-  \`,
-})
-export class App {
-  @Prop() title: string;
-  @State() count = 0;
+  \`;
+}
+`.trimStart()},customSettings:{typescript:{experimentalDecorators:!0,useDefineForClassFields:!1}}};var V={name:"livescript",title:getTemplateName("templates.starter.livescript","LiveScript Starter"),thumbnail:"assets/templates/livescript.svg",activeEditor:"script",markup:{language:"html",content:`
+<div class="container">
+  <h1>Hello, <span id="title">World</span>!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/livescript.svg" />
+  <p>You clicked <span id="counter">0</span> times.</p>
+  <button id="counter-button">Click me</button>
+</div>
+`.trimStart()},style:{language:"css",content:`
+.container,
+.container button {
+  text-align: center;
+  font: 1em sans-serif;
+}
+.logo {
+  width: 150px;
+}
+`.trimStart()},script:{language:"livescript",content:`
+{ capitalize, join, map, words } = require 'prelude-ls'
 
-  increment = () => {
-    this.count += 1;
-  };
+title = 'live script'
+|> words
+|> map capitalize
+|> join ''
 
-  render() {
-    return (
-      <div class="container">
-        <h1>Hello, {this.title}!</h1>
-        <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/stencil.png" />
-        <p>You clicked {this.count} times.</p>
-        <button onClick={this.increment}>Click me</button>
-      </div>
-    );
-  }
-}
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var Y={name:"svelte",title:getTemplateName("templates.starter.svelte","Svelte Starter"),thumbnail:"assets/templates/svelte.svg",activeEditor:"script",markup:{language:"svelte",content:`
-<script>
-import Counter from "./Component.svelte";
-<\/script>
+(document.getElementById \\title).innerText = title
 
-<Counter title="Svelte" />
-`.trimStart()},style:{language:"css",content:""},script:{language:"svelte",content:`
-<script>
-  let { title = "World" } = $props();
-  let counter = $state(0);
-  function increment() {
-    counter += 1;
-  }
-<\/script>
+increment = (count) -> -> count += 1
+counter = increment 0
 
-<style>
-  .container,
-  .container button {
-    text-align: center;
-    font: 1em sans-serif;
-  }
-  .logo {
-    width: 150px;
-  }
-</style>
+counter-element = document.getElementById \\counter
+button = document.getElementById \\counter-button
 
+button.addEventListener \\click,
+  -> counter-element.innerText = counter!
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var X={name:"lua",title:getTemplateName("templates.starter.lua","Lua Starter"),thumbnail:"assets/templates/lua.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
-  <h1>Hello, {title}!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/svelte.svg" />
-  <p>You clicked {counter} times.</p>
-  <button on:click={increment}>Click me</button>
-</div>
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var A={name:"tailwindcss",title:getTemplateName("templates.starter.tailwindcss","Tailwind CSS Starter"),thumbnail:"assets/templates/tailwindcss.svg",activeEditor:"markup",markup:{language:"html",content:`
-<div class="relative grid min-h-screen grid-cols-[1fr_2.5rem_auto_2.5rem_1fr] grid-rows-[1fr_1px_auto_1px_1fr] bg-white [--pattern-fg:var(--color-gray-950)]/5 dark:bg-gray-950 dark:[--pattern-fg:var(--color-white)]/10">
-  <div class="col-start-3 row-start-3 flex max-w-lg flex-col bg-gray-100 p-2 dark:bg-white/10">
-    <div class="rounded-xl bg-white p-10 text-sm/7 text-gray-700 dark:bg-gray-950 dark:text-gray-300">
-      <img src="{{ __livecodes_baseUrl__ }}assets/templates/tailwind-play.svg" class="mb-11.5 h-6 dark:hidden" alt="Tailwind Play" />
-      <img src="{{ __livecodes_baseUrl__ }}assets/templates/tailwind-play-dark.svg" class="mb-11.5 h-6 not-dark:hidden" alt="Tailwind Play" />
-      <div class="space-y-6">
-        <p>A template based on <a href="https://play.tailwindcss.com/" class="text-cyan-600 hover:text-cyan-700" target="_blank">Tailwind CSS playground</a>, including support for things like:</p>
-        <ul class="space-y-3">
-          <li class="flex items-center">
-            <svg class="size-5.5 shrink-0" fill="none" stroke-linecap="square">
-              <circle cx="11" cy="11" r="11" class="fill-sky-400/25" />
-              <circle cx="11" cy="11" r="10.5" class="stroke-sky-400/25" />
-              <path d="M8 11.5L10.5 14L14 8" class="stroke-sky-800 dark:stroke-sky-300" />
-            </svg>
-            <p class="ml-3">
-              Customizing your theme with
-              <code class="font-mono font-medium text-gray-950 dark:text-white">@theme</code>
-            </p>
-          </li>
-          <li class="flex items-center">
-            <svg class="size-5.5 shrink-0" fill="none" stroke-linecap="square">
-              <circle cx="11" cy="11" r="11" class="fill-sky-400/25" />
-              <circle cx="11" cy="11" r="10.5" class="stroke-sky-400/25" />
-              <path d="M8 11.5L10.5 14L14 8" class="stroke-sky-800 dark:stroke-sky-300" />
-            </svg>
-            <p class="ml-3">
-              Adding custom utilities with
-              <code class="font-mono font-medium text-gray-950 dark:text-white">@utility</code>
-            </p>
-          </li>
-          <li class="flex items-center">
-            <svg class="size-5.5 shrink-0" fill="none" stroke-linecap="square">
-              <circle cx="11" cy="11" r="11" class="fill-sky-400/25" />
-              <circle cx="11" cy="11" r="10.5" class="stroke-sky-400/25" />
-              <path d="M8 11.5L10.5 14L14 8" class="stroke-sky-800 dark:stroke-sky-300" />
-            </svg>
-            <p class="ml-3">
-              Adding custom variants with
-              <code class="font-mono font-medium text-gray-950 dark:text-white">@variant</code>
-            </p>
-          </li>
-          <li class="flex items-center">
-            <svg class="size-5.5 shrink-0" fill="none" stroke-linecap="square">
-              <circle cx="11" cy="11" r="11" class="fill-sky-400/25" />
-              <circle cx="11" cy="11" r="10.5" class="stroke-sky-400/25" />
-              <path d="M8 11.5L10.5 14L14 8" class="stroke-sky-800 dark:stroke-sky-300" />
-            </svg>
-            <p class="ml-3">Code completion with instant preview</p>
-          </li>
-          <li class="flex items-center">
-            <svg class="size-5.5 shrink-0" fill="none" stroke-linecap="square">
-              <circle cx="11" cy="11" r="11" class="fill-sky-400/25" />
-              <circle cx="11" cy="11" r="10.5" class="stroke-sky-400/25" />
-              <path d="M8 11.5L10.5 14L14 8" class="stroke-sky-800 dark:stroke-sky-300" />
-            </svg>
-            <p class="ml-3">Viewing generated CSS code (in <code class="text-sm font-bold text-gray-900">Compiled</code> pane below)</p>
-          </li>
-        </ul>
-        <p>Perfect for learning how the framework works, prototyping a new idea, or creating a demo to share online.</p>
-      </div>
-      <hr class="my-6 w-full border-(--pattern-fg)" />
-      <p class="mb-3">Want to dig deeper into Tailwind?</p>
-      <p class="font-semibold">
-        <a href="https://tailwindcss.com/docs" class="text-gray-950 underline decoration-sky-400 underline-offset-3 hover:decoration-2 dark:text-white">Read the docs &rarr;</a>
-      </p>
-    </div>
-  </div>
-  <div class="relative -right-px col-start-2 row-span-full row-start-1 border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed"></div>
-  <div class="relative -left-px col-start-4 row-span-full row-start-1 border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed"></div>
-  <div class="relative -bottom-px col-span-full col-start-1 row-start-2 h-px bg-(--pattern-fg)"></div>
-  <div class="relative -top-px col-span-full col-start-1 row-start-4 h-px bg-(--pattern-fg)"></div>
+  <h1>Hello, <span id="title">World</span>!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/lua.svg" />
+  <p id="counter">You clicked 0 times.</p>
+  <button id="counter-button">Click me</button>
 </div>
 `.trimStart()},style:{language:"css",content:`
-@import "tailwindcss";
-
-@theme {
-  /* ... */
+.container,
+.container button {
+  text-align: center;
+  font: 1em sans-serif;
+}
+.logo {
+  width: 150px;
 }
-`.trimStart()},script:{language:"javascript",content:""},processors:["tailwindcss"]};var z={name:"typescript",title:getTemplateName("templates.starter.typescript","TypeScript Starter"),thumbnail:"assets/templates/typescript.svg",activeEditor:"script",markup:{language:"html",content:`
+`.trimStart()},script:{language:"lua",content:`
+js = require "js"
+window = js.global
+document = window.document
+
+document:getElementById("title").innerHTML = "Lua"
+
+Counter = {count = 0}
+function Counter:new (o)
+  o = o or {}
+  setmetatable(o, self)
+  self.__index = self
+  return o
+end
+function Counter:increment ()
+  self.count = self.count + 1
+end
+function Counter:show ()
+  local counter_el = document:getElementById("counter")
+  counter_el.innerHTML = ("You clicked %d times."):format(self.count)
+end
+
+counter = Counter:new(nil)
+button = document:querySelector("#counter-button")
+button:addEventListener("click", function()
+  counter:increment()
+  counter:show()
+end)
+
+-- check console
+time = os.date("*t").hour
+if time < 12 then
+  print ("Good morning")
+elseif time >= 12 and time < 18 then
+  print ("Good afternoon")
+else
+  print ("Good evening")
+end
+`.trimStart()}};var F={name:"lua-wasm",title:getTemplateName("templates.starter.lua-wasm","Lua (Wasm) Starter"),thumbnail:"assets/templates/lua.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/typescript.svg" />
-  <p>You clicked <span id="counter">0</span> times.</p>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/lua.svg" />
+  <p id="counter">You clicked 0 times.</p>
   <button id="counter-button">Click me</button>
 </div>
 `.trimStart()},style:{language:"css",content:`
@@ -1706,544 +1936,257 @@ import Counter from "./Component.svelte";
 .logo {
   width: 150px;
 }
-`.trimStart()},script:{language:"typescript",content:`
-class Counter {
-  private count: number;
-  constructor() {
-    this.count = 0;
-  }
-  increment() {
-    this.count += 1;
-  }
-  getValue() {
-    return this.count;
-  }
-}
-
-const title = document.querySelector<HTMLElement>("#title")!;
-const count = document.querySelector<HTMLElement>("#counter")!;
-const button = document.querySelector<HTMLElement>("#counter-button")!;
-
-title.innerText = "TypeScript";
-const counter = new Counter();
-button.addEventListener(
-  "click",
-  () => {
-    counter.increment();
-    count.innerText = String(counter.getValue());
-  },
-  false
-);
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var G={name:"vue",title:getTemplateName("templates.starter.vue","Vue SFC Starter"),thumbnail:"assets/templates/vue.svg",activeEditor:"script",markup:{language:"vue",content:`
-<script setup lang="tsx">
-import Counter from './Component.vue';
-<\/script>
+`.trimStart()},script:{language:"lua-wasm",content:`
+document = window.document
+document:getElementById("title").innerHTML = "Lua"
 
-<template>
-  <Counter name="Vue" />
-</template>
-`.trimStart()},style:{language:"css",content:""},script:{language:"vue",content:`
-<script setup lang="tsx">
-  import { ref } from 'vue';
+Counter = {count = 0}
+function Counter:new (o)
+  o = o or {}
+  setmetatable(o, self)
+  self.__index = self
+  return o
+end
+function Counter:increment ()
+  self.count = self.count + 1
+end
+function Counter:show ()
+  local counter_el = document:getElementById("counter")
+  counter_el.innerHTML = ("You clicked %d times."):format(self.count)
+end
 
-  interface Props {
-    name?: string
-  }
-  const props = defineProps<Props>();
-  const count = ref(0);
-  const align = 'center';
+counter = Counter:new(nil)
+button = document:querySelector("#counter-button")
+button:addEventListener("click", function()
+  counter:increment()
+  counter:show()
+end)
 
-  // define inline component
-  function Greeting(props: Props) {
-    return <h1>Hello, { props.name || 'World' }!</h1>
+-- check console
+time = os.date("*t").hour
+if time < 12 then
+  print ("Good morning")
+elseif time >= 12 and time < 18 then
+  print ("Good afternoon")
+else
+  print ("Good evening")
+end
+`.trimStart()}};var J={name:"malina",title:getTemplateName("templates.starter.malina","Malina.js Starter"),thumbnail:"assets/templates/malina.svg",activeEditor:"script",markup:{language:"html",content:""},style:{language:"css",content:""},script:{language:"malina",content:`
+<script>
+  let title = "Malina.js";
+  let counter = 0;
+  function increment() {
+    counter += 1;
   }
 <\/script>
 
-<template>
-  <div class="container">
-    <Greeting :name="props.name" />
-    <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/vue.svg" />
-    <p>You clicked {{ count }} times.</p>
-    <button @click="count++">Click me</button>
-  </div>
-</template>
-
-<style scoped>
+<style>
   .container,
   .container button {
-    text-align: v-bind("align");
+    text-align: center;
     font: 1em sans-serif;
   }
   .logo {
     width: 150px;
   }
 </style>
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var V={name:"vue2",title:getTemplateName("templates.starter.vue2","Vue 2 Starter"),thumbnail:"assets/templates/vue.svg",activeEditor:"script",markup:{language:"html",content:`
-<div id="app">
-  <h1>Hello, Vue!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/vue.svg" />
-  <p>You clicked {{ counter }} times.</p>
-  <button @click="increment()">Click me</button>
-</div>
-`.trimStart()},style:{language:"css",content:`
-#app,
-#app button {
-  text-align: center;
-  font: 1em sans-serif;
-}
-.logo {
-  width: 150px;
-}
-`.trimStart()},script:{language:"javascript",content:`
-new Vue({
-  el: "#app",
-  data: {
-    counter: 0,
-  },
-  methods: {
-    increment() {
-      this.counter += 1;
-    },
-  },
-});
-`.trimStart()},stylesheets:[],scripts:["{{ __CDN_URL__ }}vue@2"],cssPreset:"",imports:{},types:{}};var X={name:"wat",title:getTemplateName("templates.starter.wat","WebAssembly Text Starter"),thumbnail:"assets/templates/webassembly.svg",activeEditor:"script",markup:{language:"html",content:`
-<div class="container">
-  <h1>Hello, <span id="title">World</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/webassembly.svg" />
-  <p>You clicked <span id="counter">0</span> times.</p>
-  <button id="counter-button">Click me</button>
+
+<div class="container">
+  <h1>Hello, {title}!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/malina.svg" />
+  <p>You clicked {counter} times.</p>
+  <button @click={increment}>Click me</button>
 </div>
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var Z={name:"markdown",title:getTemplateName("templates.starter.markdown","Markdown Starter"),thumbnail:"assets/templates/markdown.svg",activeEditor:"markup",markup:{language:"markdown",content:`
+# Project Title
 
-<script>
-  (async () => {
-    const importObject = {
-      title: {
-        change: changeTitle,
-      },
-    };
+One Paragraph of project description goes here
 
-    // The \`loadWasm\` method of \`livecodes\` global object
-    // optionally takes an import object and
-    // returns a promise which resolves to an object
-    // exposing the compiled wasm module and wasm binary
-    const { wasmModule, binary } = await livecodes.loadWasm(importObject);
-    const { memory, setTitle, increment } = wasmModule.exports;
+## Getting Started
 
-    function changeTitle(offset, length) {
-      const bytes = new Uint8Array(memory.buffer, offset, length);
-      const title = new TextDecoder("utf8").decode(bytes);
-      document.querySelector("#title").innerText = title;
-    }
-    setTitle();
+These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
 
-    const counter = document.querySelector("#counter");
-    const button = document.querySelector("#counter-button");
-    let count = 0;
+### Prerequisites
 
-    button.addEventListener(
-      "click",
-      () => {
-        count = increment(count);
-        counter.innerText = count;
-      },
-      false
-    );
-  })();
-<\/script>
-`.trimStart()},style:{language:"css",content:`
-.container,
-.container button {
-  text-align: center;
-  font: 1em sans-serif;
-}
-.logo {
-  width: 150px;
-}
-`.trimStart()},script:{language:"wat",content:`
-(module
-  (import "title" "change" (func $changeTitle (param i32) (param i32)))
-  (export "memory" (memory $0))
-  (export "setTitle" (func $setTitle))
-  (export "increment" (func $increment))
-  (memory $0 1)
-  (data 0 (i32.const 0) "WebAssembly Text")
-  (func $setTitle
-    (call $changeTitle (i32.const 0) (i32.const 16))
-  )
-  (func $increment (param $0 i32) (result i32)
-    (i32.add (local.get $0) (i32.const 1))
-  )
-)
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var F={name:"malina",title:getTemplateName("templates.starter.malina","Malina.js Starter"),thumbnail:"assets/templates/malina.svg",activeEditor:"script",markup:{language:"html",content:""},style:{language:"css",content:""},script:{language:"malina",content:`
-<script>
-  let title = "Malina.js";
-  let counter = 0;
-  function increment() {
-    counter += 1;
-  }
-<\/script>
+What things you need to install the software and how to install them
 
-<style>
-  .container,
-  .container button {
-    text-align: center;
-    font: 1em sans-serif;
-  }
-  .logo {
-    width: 150px;
-  }
-</style>
+\`\`\`
+Give examples
+\`\`\`
 
-<div class="container">
-  <h1>Hello, {title}!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/malina.svg" />
-  <p>You clicked {counter} times.</p>
-  <button @click={increment}>Click me</button>
-</div>
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var J={name:"commonlisp",title:getTemplateName("templates.starter.commonlisp","Common Lisp Starter"),thumbnail:"assets/templates/commonlisp.svg",activeEditor:"script",markup:{language:"html",content:`
-<div class="container">
-  <h1 id="title">Hello, World!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/commonlisp.svg" />
-  <p>You clicked <span id="counter">0</span> times.</p>
-  <button id="counter-button">Click me</button>
-</div>
-`.trimStart()},style:{language:"css",content:`
-.container,
-.container button {
-  text-align: center;
-  font: 1em sans-serif;
-}
-.logo {
-  width: 150px;
-}
-`.trimStart()},script:{language:"commonlisp",content:`
-(defun set-attribute (&key selector attribute value)
-  (let ((node
-         (#j:document:querySelector selector)))
-    (setf (jscl::oget node attribute) value)
-    node))
+### Installing
 
-(let ((title "Common Lisp"))
-  (set-attribute :selector "#title" :attribute "innerHTML"
-      :value (format nil "Hello, ~A!" title)))
+A step by step series of examples that tell you how to get a development env running
 
-(let ((counter 0))
-  (set-attribute :selector "#counter-button" :attribute "onclick"
-    :value #'(lambda (ev)
-              (setf counter (+ counter 1))
-              (set-attribute :selector "#counter" :attribute "innerHTML"
-               :value counter))))
+Say what the step will be
 
-(#j:console:clear)
-(write "Hello, Common Lisp!")
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var Z={name:"cpp",title:getTemplateName("templates.starter.cpp","C++ Starter"),thumbnail:"assets/templates/cpp.svg",activeEditor:"script",markup:{language:"html",content:`
-<div class="container">
-  <h1>Hello, <span id="name">World</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/cpp.svg" />
-  <p>You clicked <span id="counter">0</span> times.</p>
-  <button id="counter-button">Click me</button>
-</div>
+\`\`\`
+Give the example
+\`\`\`
 
-<script>
-  // set initial input
-  livecodes.cpp.input = "-1";
+And repeat
 
-  addEventListener('load', async () => {
-    const button = document.querySelector("#counter-button");
+\`\`\`
+until finished
+\`\`\`
 
-    // wait till loaded
-    await livecodes.cpp.loaded;
+End with an example of getting some data out of the system or using it for a little demo
 
-    // get initial output
-    const initialOutput = livecodes.cpp.output;
-    update(initialOutput);
+## Running the tests
 
-    button.onclick = async () => {
-      // run with new input
-      const {output, error, exitCode} = await livecodes.cpp.run(window.count);
-      update(output);
-    };
+Explain how to run the automated tests for this system
 
-    function update(output) {
-      const counter = document.querySelector("#counter");
-      const name = document.querySelector("#name");
+### Break down into end to end tests
 
-      const [title, count] = output.split('\\n');
+Explain what these tests test and why
 
-      if (parseInt(count) !== NaN) {
-        window.count = count;
-        counter.innerText = window.count;
-      }
-      if (title) {
-        name.innerText = title;
-      }
-    }
-  });
-<\/script>
-`.trimStart()},style:{language:"css",content:`
-.container,
-.container button {
-  text-align: center;
-  font: 1em sans-serif;
-}
-.logo {
-  width: 150px;
-}
-`.trimStart()},script:{language:"cpp",content:`
-#include <iostream>
-using namespace std;
+\`\`\`
+Give an example
+\`\`\`
 
-int main() {
-    char title[] = "C++";
-    cout << title << endl;
+### And coding style tests
 
-    int count;
-    cin >> count;
-    count += 1;
-    cout << count << endl;
+Explain what these tests test and why
 
-    return 0;
-}
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var K={name:"julia",title:getTemplateName("templates.starter.julia","Julia Starter"),thumbnail:"assets/templates/julia.svg",activeEditor:"script",markup:{language:"html",content:`
-<div class="container">
-  <h1>Hello, <span id="name">World</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/julia.svg" />
-  <p>You clicked <span id="counter">0</span> times.</p>
-  <button id="counter-button" disabled>Loading...</button>
-</div>
+\`\`\`
+Give an example
+\`\`\`
 
-<script>
-  // set initial input
-  livecodes.julia.input = "";
+## Deployment
 
-  addEventListener('load', async () => {
-    const button = document.querySelector("#counter-button");
+Add additional notes about how to deploy this on a live system
 
-    // wait till loaded
-    await livecodes.julia.loaded;
+## Built With
 
-    // get initial output
-    const initialOutput = livecodes.julia.output;
-    update(initialOutput);
+* [Dropwizard](http://www.dropwizard.io/1.0.2/docs/) - The web framework used
+* [Maven](https://maven.apache.org/) - Dependency Management
+* [ROME](https://rometools.github.io/rome/) - Used to generate RSS Feeds
 
-    button.innerText = "Click me";
-    button.disabled = false;
-    button.onclick = async () => {
-      // run with new input
-      const output = await livecodes.julia.run(window.count);
-      update(output);
-    };
+## Contributing
 
-    function parseOutput(output) {
-      return output.replace(/"/g, '').split('\\n');
-    }
+Please read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us.
 
-    function update(output) {
-      const counter = document.querySelector("#counter");
-      const name = document.querySelector("#name");
+## Versioning
 
-      const [title, count] = parseOutput(output);
+We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/your/project/tags).
 
-      if (parseInt(count) !== NaN) {
-        window.count = count;
-        counter.innerText = window.count;
-      }
-      if (title) {
-        name.innerText = title;
-      }
-    }
-  });
-<\/script>
-`.trimStart()},style:{language:"css",content:`
-.container,
-.container button {
-  text-align: center;
-  font: 1em sans-serif;
-}
-.logo {
-  width: 150px;
-}
-`.trimStart()},script:{language:"julia",content:`
-function increment(x)
-    if x == ""
-        return 0
-    else
-        num = parse(Int, x)
-        num + 1
-    end
-end
+## Authors
 
-function getTitle()
-    "Julia"
-end
+* **Billie Thompson** - *Initial work* - [PurpleBooth](https://github.com/PurpleBooth)
 
-function formatOutput(args...)
-    join(map(x -> string(x), args), "\\n")
-end
+See also the list of [contributors](https://github.com/your/project/contributors) who participated in this project.
 
-formatOutput(getTitle(), increment(livecodesInput))
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var Q={name:"cpp-wasm",aliases:["clang"],title:"C++ (Wasm) Starter",thumbnail:"assets/templates/cpp.svg",activeEditor:"script",markup:{language:"html",content:`
-<div class="container">
-  <h1>Hello, <span id="name">World</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/cpp.svg" />
-  <p>You clicked <span id="counter">0</span> times.</p>
-  <button id="counter-button" disabled>Loading...</button>
-</div>
+## License
 
-<script>
-  // set initial input
-  livecodes.cpp.input = "-1";
+This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
 
-  addEventListener('load', async () => {
-    const button = document.querySelector("#counter-button");
+## Acknowledgments
 
-    // wait till loaded
-    await livecodes.cpp.loaded;
+* Hat tip to anyone whose code was used
+* Inspiration
+* etc
 
-    // get initial output
-    const initialOutput = livecodes.cpp.output;
-    update(initialOutput);
 
-    button.onclick = async () => {
-      button.disabled = true;
-      // run with new input
-      const {output, error, exitCode} = await livecodes.cpp.run(window.count);
-      update(output);
-    };
+Source: https://gist.github.com/PurpleBooth/109311bb0361f32d87a2
+`.trimStart()},style:{language:"css",content:`
+@import "github-markdown-css";
 
-    function update(output) {
-      const counter = document.querySelector("#counter");
-      const name = document.querySelector("#name");
+body {
+  border: 1px solid #e1e4e8;
+  border-radius: 4px;
+  padding: 20px;
+  margin: 20px !important;
+}
+`.trimStart()},script:{language:"javascript",content:`document.body.classList.add('markdown-body');
+`},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var K={name:"mdx",title:getTemplateName("templates.starter.mdx","MDX Starter"),thumbnail:"assets/templates/mdx.svg",activeEditor:"markup",markup:{language:"mdx",content:`
+import { Greeting, Counter } from './script';
 
-      const [title, count] = output.split('\\n');
+<Greeting name="MDX" />
 
-      if (parseInt(count) !== NaN) {
-        window.count = count;
-        counter.innerText = window.count;
-      }
-      if (title) {
-        name.innerText = title;
-      }
-      button.innerText = "Click me";
-      button.disabled = false;
-    }
-  });
-<\/script>
+![MDX Logo]({{ __livecodes_baseUrl__ }}assets/templates/mdx.svg)
+
+<Counter />
 `.trimStart()},style:{language:"css",content:`
-.container,
-.container button {
+body,
+body button {
   text-align: center;
   font: 1em sans-serif;
 }
-.logo {
+img {
   width: 150px;
 }
-`.trimStart()},script:{language:"cpp-wasm",content:`
-#include <iostream>
-using namespace std;
-
-int main() {
-    char title[] = "C++";
-    cout << title << endl;
+`.trimStart()},script:{language:"jsx",content:`
+import { useState } from "react";
 
-    int count;
-    cin >> count;
-    count += 1;
-    cout << count << endl;
+export const Greeting = (props) => <h1>Hello, {props.name || "World"}!</h1>;
 
-    return 0;
+export function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <p>You clicked {count} times.</p>
+      <button onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  );
 }
-`.trimStart()}};var tt={name:"tcl",title:getTemplateName("templates.starter.tcl","Tcl Starter"),thumbnail:"assets/templates/tcl.svg",activeEditor:"script",markup:{language:"html",content:`
-<div class="container">
-  <h1>Hello, <span id="name">World</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/tcl.svg" />
-  <p>You clicked <span id="counter">0</span> times.</p>
-  <button id="counter-button" disabled>Loading...</button>
-</div>
-
-<script>
-  // set input
-  livecodes.tcl.input = "-1";
-
-  addEventListener("load", async () => {
-    const button = document.querySelector("#counter-button");
-    // wait till loaded
-    await livecodes.tcl.loaded;
-    button.innerText = "Click me";
-    button.disabled = false;
-
-    button.onclick = async () => {
-      const {output, error} = await livecodes.tcl.run();
-    };
-  });
-<\/script>
-`.trimStart()},style:{language:"css",content:`
+`.trimStart()}};var Q={name:"ocaml",title:getTemplateName("templates.starter.ocaml","Ocaml Starter"),thumbnail:"assets/templates/ocaml.svg",activeEditor:"script",markup:{language:"html",content:`<div id="app">Loading...</div>
+`},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
   font: 1em sans-serif;
 }
 .logo {
-  width: 150px;
+  width: 250px;
 }
-`.trimStart()},script:{language:"tcl",content:`
-set title "Tcl"
-::wacl::dom attr "#name" innerText $title
+`.trimStart()},script:{language:"ocaml",content:`
+module App =
+  struct
+    let make ~name  =
+      let title = "Hello, " ^ name ^ "!" in
 
-set input [gets stdin]
-if {[info exists count]} {
-  incr count
-} else {
-  set count [expr $input + 1]
-}
-::wacl::dom attr "#counter" innerText $count
-puts $count
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var et={name:"prolog",title:getTemplateName("templates.starter.prolog","Prolog Starter"),thumbnail:"assets/templates/tau-prolog.svg",activeEditor:"script",markup:{language:"html",content:`
-<div class="container">
-  <h1>Hello, <span id="title">World</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/tau-prolog.svg" title="Tau Prolog" />
-	<form id="query-form" onsubmit="runQuery(); return false;">
-		<input type="text" id="query" value="father(X, jack)." placeholder="Enter a query" />
-		<input type="submit" value="Run query" id="button" />
-		<pre id="result"></pre>
-	</form>
-</div>
+      let (count,setCount) = React.useState ((fun _ -> 0) [@bs]) in
 
-<script>
-  async function getTitle() {
-    const session = await livecodes.prolog.createSession();
-    session.query('title(X).');
-    session.answer(function(answer) {
-      document.getElementById("title").innerText = answer.lookup('X');
-    });
-  }
+      let times =
+        match count with
+        | 1 -> "once"
+        | 2 -> "twice"
+        | n -> (string_of_int n) ^ " times" in
 
-  async function runQuery() {
-    const query = document.getElementById("query").value;
-    const result = document.getElementById("result");
+      ((div ~className: "container"
+          ~children:[((h1 ~children: [React.string title] ()) [@JSX]);
+                    ((img ~className: "logo"
+                        ~alt: "logo"
+                        ~src: "{{ __livecodes_baseUrl__ }}assets/templates/ocaml.svg"
+                        ~children:[] ()) [@JSX]);
+                    ((p
+                        ~children:[React.string ("You clicked "
+                                                ^ times)] ()) [@JSX]);
+                    ((button
+                        ~onClick:((fun _ -> setCount ((fun _ -> count + 1) [@bs])) [@bs])
+                        ~children:[React.string "Click me"] ())
+                    [@JSX])] ()) [@JSX]) [@@react.component]
+  end
 
-    const session = await livecodes.prolog.createSession({limit: 1000});
-    session.promiseQuery(query).then(async () => {
-      result.innerText = "";
-      for await (let answer of session.promiseAnswers()) {
-        if(pl.type.is_substitution(answer)) {
-          console.log(session.format_answer(answer));
-          result.innerText += session.format_answer(answer) + '\\n';
-        }
-      }
-      if (result.innerText == "") {
-        result.innerText = "false.";
-      }
-      result.classList.remove('error');
-    }).catch((err) => {
-      result.innerText = err;
-      result.classList.add('error');
-    })
-  }
+let _ =
+  match ReactDOM.querySelector "#app" with
+  | ((Some (app)) [@explicit_arity]) ->
+      ReactDOM.render
+        ((App.createElement
+            ~name: "OCaml"
+            ~children:[] ()) [@JSX]) app
+  | None  -> ()
 
-  getTitle();
-  runQuery();
-<\/script>
+let _ = print_endline "Hello, OCaml!"
+`.trimStart()},customSettings:{imports:{react:"https://esm.sh/react@18.3.1","react/":"https://esm.sh/react@18.3.1/","react-dom":"https://esm.sh/react-dom@18.3.1"}}};var tt={name:"perl",title:getTemplateName("templates.starter.perl","Perl Starter"),thumbnail:"assets/templates/perl.svg",activeEditor:"script",markup:{language:"html",content:`
+<div class="container">
+  <h1>Hello, <span id="title">World</span>!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/perl.svg" />
+  <p>You clicked <span id="counter">0</span> times.</p>
+  <button id="counter-button">Click me</button>
+</div>
 `.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
@@ -2253,345 +2196,246 @@ puts $count
 .logo {
   width: 150px;
 }
-#query {
-  width: 20em;
-}
-#result {
-  background-color: #fafafa;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  box-sizing: border-box;
-  color: #3d3d3d;
-  margin: 1em;
-  padding: 1em;
-  text-align: left;
-}
-#result.error {
-  color: red;
-}`.trimStart()},script:{language:"prolog",content:`
-title('Prolog').
+`.trimStart()},script:{language:"perl",content:`
+use strict;
 
-male(john).
-male(oliver).
-male(ali).
-male(james).
-male(jack).
-male(harry).
-female(helen).
-female(sophie).
-female(mary).
-female(sue).
+my $title = 'Perl';
+JS::inline('document.getElementById("title").innerHTML') = $title;
 
-parent(john, mary).
-parent(john, sue).
-parent(helen, mary).
-parent(helen, sue).
-parent(oliver, james).
-parent(sophie, james).
-parent(mary, jack).
-parent(ali, jack).
-parent(sue, harry).
-parent(james, harry).
+{
+package Counter;
+  sub new {
+    my $class = shift;
+    my $self = {count => 0};
+    return bless $self, $class;
+  }
+  sub count {
+    my $self = shift;
+    return $self->{count};
+  }
+  sub increment {
+    my $self = shift;
+    $self->{count}++;
+  }
+}
 
-father(X, Y):- male(X),
-    parent(X, Y).
+my $counter = Counter->new;
 
-mother(X, Y):- female(X),
-    parent(X, Y).
+sub onClick {
+    $counter->increment;
+    JS::inline('document.getElementById("counter").innerHTML') =
+    $counter->count;
+}
 
-grandfather(X, Y):- male(X),
-    parent(X, Z),
-    parent(Z, Y).
+JS::inline('document.getElementById("counter-button").onclick') = \\&onClick;
 
-grandmother(X, Y):- female(X),
-    parent(X, Z),
-    parent(Z, Y).
+# check console
+my ($sec,$min,$hour) = localtime(time);
+if ($hour < 12) {
+  print "Good morning";
+} elsif ($hour >= 12 && $hour < 18) {
+  print "Good afternoon";
+} else {
+  print "Good evening";
+}
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var et={name:"phaser",title:"Phaser Starter",thumbnail:"assets/templates/phaser.png",activeEditor:"script",markup:{language:"html",content:`
+<div id="app">
+  <div id="game-container"></div>
+</div>
+`.trimStart()},style:{language:"css",content:`
+body {
+  margin: 0;
+  padding: 0;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #000000;
+}
 
-sister(X, Y):- female(X),
-    father(F, Y),
-    father(F, X),
-    X \\= Y.
-sister(X, Y):- female(X),
-    mother(M, Y),
-    mother(M, X),
-    X \\= Y.
+#app {
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+`.trimStart()},script:{language:"javascript",content:`
+// based on https://github.com/phaserjs/template-vite
+// and https://phaser.io/sandbox/XyqPcjNr
 
-brother(X, Y):- male(X),
-    father(F, Y),
-    father(F, X),
-    X \\= Y.
-brother(X, Y):- male(X),
-    mother(M, Y),
-    mother(M, X),
-    X \\= Y.
+import Phaser from "phaser";
 
-uncle(X, Y):- parent(Z, Y),
-    brother(Z, X).
+// learn about adding assets in livecodes
+// https://livecodes.io/docs/features/assets
 
-aunt(X, Y):- parent(Z, Y),
-    sister(Z, X).
+class Boot extends Phaser.Scene {
+  constructor() {
+    super("Boot");
+  }
 
-ancestor(X, Y):- parent(X, Y).
-ancestor(X, Y):- parent(X, Z),
-    ancestor(Z, Y).
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var st={name:"clio",title:getTemplateName("templates.starter.clio","Clio Starter"),thumbnail:"assets/templates/clio.png",activeEditor:"script",markup:{language:"html",content:`
-<div class="container">
-  <h1 id="title">Hello, World!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/clio.png" />
-  <p>You clicked <span id="counter">0</span> times.</p>
-  <button id="counter-button" disabled>Loading...</button>
-</div>
-`.trimStart()},style:{language:"css",content:`
-.container,
-.container button {
-  text-align: center;
-  font: 1em sans-serif;
-}
-.logo {
-  width: 150px;
+  preload() {
+    //  The Boot Scene is typically used to load in any assets you require for your Preloader, such as a game logo or background.
+    //  The smaller the file size of the assets, the better, as the Boot Scene itself has no preloader.
+    this.load.image("background", "https://cdn.jsdelivr.net/gh/phaserjs/template-vite@main/public/assets/bg.png");
+  }
+
+  create() {
+    this.scene.start("Preloader");
+  }
 }
-`.trimStart()},script:{language:"clio",content:`
-fn capitalize str:
-  (str.charAt 0 -> .toUpperCase) + (str.slice 1 -> .toLowerCase)
 
-fn greet name:
-  f"Hello, {name}!"
+class Preloader extends Phaser.Scene {
+  constructor() {
+    super("Preloader");
+  }
 
-fn setTitle name:
-  title = document.querySelector "#title"
-  title.innerText = name -> capitalize -> greet
+  init() {
+    //  We loaded this image in our Boot Scene, so we can display it here
+    this.add.image(512, 384, "background");
 
-fn increment value:
-  (Number value) + 1
+    //  A simple progress bar. This is the outline of the bar.
+    this.add.rectangle(512, 384, 468, 32).setStrokeStyle(1, 0xffffff);
 
-fn activateBtn btn:
-  btn.disabled = false
-  btn.innerText = "Click me"
-  btn
+    //  This is the progress bar itself. It will increase in size from the left based on the % of progress.
+    const bar = this.add.rectangle(512 - 230, 384, 4, 28, 0xffffff);
 
-fn onBtnClick:
-  counter = document.querySelector "#counter"
-  counter.innerText = increment counter.innerText
+    //  Use the 'progress' event emitted by the LoaderPlugin to update the loading bar
+    this.load.on("progress", (progress) => {
+      //  Update the progress bar (our bar is 464px wide, so 100% = 464px)
+      bar.width = 4 + 460 * progress;
+    });
+  }
 
-export fn main argv:
-  setTitle "clio"
-  document.querySelector "#counter-button"
-    -> activateBtn
-    -> .addEventListener "click" onBtnClick
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var ot={name:"diagrams",title:getTemplateName("templates.starter.diagrams","Diagrams Starter"),thumbnail:"assets/templates/diagrams.svg",activeEditor:"markup",markup:{language:"diagrams",contentUrl:"{{ __livecodes_baseUrl__ }}assets/templates/diagrams-starter.html"},style:{language:"css",content:`
-.container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
+  preload() {
+    //  Load the assets for the game - Replace with your own assets
+    this.load.setBaseURL("https://labs.phaser.io");
 
-.container div {
-  width: 100%;
-  text-align: center;
-}
+    this.load.image("sky", "assets/skies/space3.png");
+    this.load.image("logo", "assets/sprites/phaser3-logo.png");
+    this.load.image("red", "assets/particles/red.png");
+  }
 
-.container img {
-  width: 80%;
-  max-width: 600px;
-}
+  create() {
+    //  When all the assets have loaded, it's often worth creating global objects here that the rest of the game can use.
+    //  For example, you can define global animations here, so we can use them in other scenes.
 
-.container h3:not(:nth-child(1)) {
-  margin-top: 3em;
+    //  Move to the MainMenu. You could also swap this for a Scene Transition, such as a camera fade.
+    this.scene.start("MainMenu");
+  }
 }
-`.trimStart()},script:{language:"javascript",content:""},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var nt={name:"imba",title:getTemplateName("templates.starter.imba","Imba Starter"),thumbnail:"assets/templates/imba.svg",activeEditor:"script",markup:{language:"html",content:""},style:{language:"css",content:""},script:{language:"imba",content:`
-tag app-counter
-	prop name = "Imba"
-	prop count = 0
 
-	css self
-		text-align: center
-		font: 1em sans-serif
+class MainMenu extends Phaser.Scene {
+  constructor() {
+    super("MainMenu");
+  }
 
-	css .btn h:2em	w:10em	fs:1em
+  create() {
+    this.add.image(512, 384, "background");
 
-	<self>
-		<h1> "Hello, {name}!"
-		<img[h:100px] alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/imba.svg">
-		<p> "You clicked {count} times."
-		<button.btn @click=count++> "Click me"
+    this.add.image(512, 300, "logo");
 
-imba.mount <app-counter>
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var rt={name:"jest",title:getTemplateName("templates.starter.jest","Jest Starter"),thumbnail:"assets/templates/jest.svg",autotest:!0,activeEditor:"script",markup:{language:"html",content:`
-<div class="container">
-  <h1>Hello, <span id="title">World</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/jest.svg" />
-  <p>You clicked <span id="counter">0</span> times.</p>
-  <button id="counter-button">Click me</button>
-  <p class="info">Run tests in the "Tests" panel below.</p>
-</div>
-`.trimStart()},style:{language:"css",content:`
-.container,
-.container button {
-  text-align: center;
-  font: 1em sans-serif;
-}
-.logo {
-  width: 150px;
-}
-.info {
-  color: #404040;
-  font-size: 0.9em;
-  margin: 2em;
-}
-`.trimStart()},script:{language:"javascript",content:`
-export class Counter {
-  count;
-  constructor() {
-    this.count = 0;
-  }
-  increment() {
-    this.count += 1;
-  }
-  getValue() {
-    return this.count;
+    this.add
+      .text(512, 460, "Main Menu", {
+        fontFamily: "Arial Black",
+        fontSize: 38,
+        color: "#ffffff",
+        stroke: "#000000",
+        strokeThickness: 8,
+        align: "center",
+      })
+      .setOrigin(0.5);
+
+    this.input.once("pointerdown", () => {
+      this.scene.start("Game");
+    });
   }
 }
 
-const title = document.querySelector("#title");
-const count = document.querySelector("#counter");
-const button = document.querySelector("#counter-button");
-
-title.innerText = "Jest";
-const counter = new Counter();
-button.addEventListener(
-  "click",
-  () => {
-    counter.increment();
-    count.innerText = counter.getValue();
-  },
-  false
-);
-`.trimStart()},tests:{language:"tsx",content:`
-import { fireEvent, screen } from "@testing-library/dom";
-import "@testing-library/jest-dom";
-import { assert } from "chai";
-import { Counter } from "./script";
-
-describe("Counter Class", () => {
-  test("Should initialize count with zero", () => {
-    const counter = new Counter();
-    expect(counter.getValue()).toBe(0);
-  });
-
-  test("Should increment", () => {
-    const counter = new Counter();
-    counter.increment();
-    counter.increment();
-    counter.increment();
-    assert.equal(counter.getValue(), 3);
-  });})
-
-describe("Page", () => {
-  test("Should display title", async () => {
-    expect(screen.getByText("Hello", { exact: false })).toHaveTextContent(
-      "Hello, Jest!"
-    );
-  });
+class Game extends Phaser.Scene {
+  constructor() {
+    super("Game");
+  }
 
-  test("Should display logo", async () => {
-    expect(document.querySelector('.logo').src).toContain('jest.svg');
-  });
+  create() {
+    const sky = this.add.image(512, 384, "sky");
+    sky.setScale(1.3);
 
-  test("Should increment counter on button click", async () => {
-    fireEvent.click(screen.getByText("Click me"));
-    fireEvent.click(screen.getByText("Click me"));
-    fireEvent.click(screen.getByText("Click me"));
-    expect(screen.getByText("You clicked", { exact: false })).toHaveTextContent(
-      "You clicked 3 times."
-    );
-  });
-});
-`.trimStart()},tools:{enabled:"all",active:"tests",status:"open"}};var at={name:"jest-react",title:getTemplateName("templates.starter.jest-react","Jest/React Starter"),thumbnail:"assets/templates/jest.svg",activeEditor:"script",autotest:!0,markup:{language:"html",content:""},style:{language:"css",content:`
-.container,
-.container button {
-  text-align: center;
-  font: 1em sans-serif;
-}
-.logo {
-  width: 150px;
-}
-.info {
-  color: #404040;
-  font-size: 0.9em;
-  margin: 2em;
-}
-`.trimStart()},script:{language:"jsx",content:`
-import { useState } from "react";
+    const particles = this.add.particles(0, 0, "red", {
+      speed: 100,
+      scale: { start: 1, end: 0 },
+      blendMode: "ADD",
+    });
 
-export const increment = (count) => (count ?? 0) + 1;
+    const logo = this.physics.add.image(400, 100, "logo");
 
-function Counter(props) {
-  const [count, setCount] = useState(0);
-  return (
-    <div className="container">
-      <h1>Hello, {props.name}!</h1>
-      <img className="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/jest.svg" />
-      <p>You clicked {count} times.</p>
-      <button onClick={() => setCount(increment(count))}>Click me</button>
-      <p className="info">Run tests in the "Tests" panel below.</p>
-    </div>
-  );
-}
+    logo.setVelocity(100, 200);
+    logo.setBounce(1, 1);
+    logo.setCollideWorldBounds(true);
 
-export default function App() {
-  return <Counter name="Jest with React" />;
-}
-`.trimStart()},tests:{language:"tsx",content:`
-import { render, fireEvent, screen, cleanup } from "@testing-library/react";
-import "@testing-library/jest-dom";
-import { assert } from "chai";
-import App, { increment } from "./script";
+    particles.startFollow(logo);
 
-const renderComponent = () => {
-  cleanup();
-  render(<App />, {
-    container: document.querySelector('#app')
-  });
+    this.input.once("pointerdown", () => {
+      this.scene.start("GameOver");
+    });
+  }
 }
 
-beforeEach(renderComponent);
+class GameOver extends Phaser.Scene {
+  constructor() {
+    super("GameOver");
+  }
 
-afterAll(renderComponent);
+  create() {
+    this.cameras.main.setBackgroundColor(0xff0000);
 
-describe("Increment", () => {
-  test("should increment count", () => {
-    expect(increment(3)).toBe(4);
-  });
+    this.add.image(512, 384, "background").setAlpha(0.5);
 
-  test("should return 1 if no count was supplied", () => {
-    assert.equal(increment(), 1);
-  });
-});
+    this.add
+      .text(512, 384, "Game Over", {
+        fontFamily: "Arial Black",
+        fontSize: 64,
+        color: "#ffffff",
+        stroke: "#000000",
+        strokeThickness: 8,
+        align: "center",
+      })
+      .setOrigin(0.5);
 
-describe("Page", () => {
-  test("Should display title", async () => {
-    expect(screen.getByText("Hello", { exact: false })).toHaveTextContent(
-      "Hello, Jest with React!"
-    );
-  });
+    this.input.once("pointerdown", () => {
+      this.scene.start("MainMenu");
+    });
+  }
+}
 
-  test("Should display logo", async () => {
-    expect(document.querySelector('.logo').src).toContain('jest.svg');
-  });
+//  Find out more information about the Game Config at:
+//  https://newdocs.phaser.io/docs/3.70.0/Phaser.Types.Core.GameConfig
+/**
+ * @type {Phaser.Types.Core.GameConfig}
+ */
+const config = {
+  type: Phaser.AUTO,
+  width: 1024,
+  height: 768,
+  parent: "game-container",
+  backgroundColor: "#028af8",
+  scale: {
+    mode: Phaser.Scale.FIT,
+    autoCenter: Phaser.Scale.CENTER_BOTH,
+  },
+    physics: {
+    default: 'arcade',
+    arcade: {
+      gravity: { y: 200 },
+    },
+  },
+  scene: [Boot, Preloader, MainMenu, Game, GameOver],
+  autoFocus: false,
+};
 
-  test("Should increment counter on button click", async () => {
-    await fireEvent.click(screen.getByText("Click me"));
-    await fireEvent.click(screen.getByText("Click me"));
-    await fireEvent.click(screen.getByText("Click me"));
-    expect(screen.getByText("You clicked", { exact: false })).toHaveTextContent(
-      "You clicked 3 times."
-    );
-  });
-});
-`.trimStart()},tools:{enabled:"all",active:"tests",status:"open"}};var it={name:"javascript",title:getTemplateName("templates.starter.javascript","JavaScript Starter"),thumbnail:"assets/templates/javascript.svg",activeEditor:"script",markup:{language:"html",content:`
+export default new Phaser.Game(config);
+`.trimStart()}};var st={name:"php",title:getTemplateName("templates.starter.php","PHP Starter"),thumbnail:"assets/templates/php.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
-  <h1>Hello, <span id="title">World</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/javascript.svg" />
+  <h1>Hello, <span id="title">world</span>!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/php.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
@@ -2604,181 +2448,158 @@ describe("Page", () => {
 .logo {
   width: 150px;
 }
-`.trimStart()},script:{language:"javascript",content:`
-const title = document.querySelector("#title");
-const counter = document.querySelector("#counter");
-const button = document.querySelector("#counter-button");
-
-title.innerText = "JavaScript";
-let count = 0;
-
-button.addEventListener("click", () => {
-  count++;
-  counter.innerText = count;
-});
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var lt={name:"r",title:getTemplateName("templates.starter.r","R Starter"),thumbnail:"assets/templates/r.svg",activeEditor:"script",markup:{language:"html",content:`
-<div id="output">Loading...</div>
+`.trimStart()},script:{language:"php",content:`
+<?php
+$title = 'PHP';
+$document->getElementById('title')->innerText = $title;
 
-<script>
-  // livecodes.r.config = {
-  //   container: '#output',
-  //   canvasHeight: 309,
-  //   canvasWidth: 500,
-  //   canvasPointSize: 12,
-  //   canvasBackground: 'transparent',
-  // };
-<\/script>
-`.trimStart()},style:{language:"css",content:""},script:{language:"r",content:`
-head(iris)
+$count = 0;
 
-PW <- iris$Petal.Width
-PL <- iris$Petal.Length
-species <- iris$Species
-speciesID <- as.numeric(iris$Species)
-
-fit <- lm(PW ~ PL)
-summary(fit)
-
-plot(PL, PW,
-     pch = speciesID,
-     col = speciesID,
-     main = "Petal Width vs Length",
-     xlab = "Petal Length",
-     ylab = "Petal Width")
-legend("topleft",
-       levels(species),
-       pch = 1:3,
-       col = 1:3)
-
-
-## This will take some time to load the packages
-
-# library(dplyr)
-# library(ggplot2)
-
-# head(diamonds)
-
-# diamonds %>%
-#   filter(depth > 60) %>%
-#   group_by(cut) %>%
-#   summarize(mean_price = mean(price)) %>%
-#   ggplot(aes(x = cut, y = mean_price, fill = cut)) +
-#       geom_bar(stat = "identity")
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var ct={name:"civet",title:getTemplateName("templates.starter.civet","Civet Starter"),thumbnail:"assets/templates/civet.png",activeEditor:"script",markup:{language:"html",content:`
-<div class="container">
-  <h1>Hello, <span id="title">World</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/civet.png" />
-  <p>You clicked <span id="counter">0</span> times.</p>
-  <button id="counter-button">Click me</button>
-</div>
+$document
+  ->getElementById('counter-button')
+  ->addEventListener('click', function () use (&$count, $document) {
+    $count += 1;
+    $document->getElementById('counter')->innerText = $count;
+    echo "count: $count";
+  });
+`.trimStart()}};var ot={name:"php-wasm",title:getTemplateName("templates.starter.php-wasm","PHP (Wasm) Starter"),thumbnail:"assets/templates/php.svg",activeEditor:"script",markup:{language:"html",content:`
+<p>
+  <h1>Hello, <span id="title">world</span>!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/php.svg" />
+</p>
 `.trimStart()},style:{language:"css",content:`
-.container,
-.container button {
+body {
   text-align: center;
   font: 1em sans-serif;
 }
 .logo {
   width: 150px;
 }
-`.trimStart()},script:{language:"civet",content:`
-titleElement := document.getElementById 'title'
-counterElement := document.getElementById 'counter'
-button := document.getElementById 'counter-button'
+`.trimStart()},script:{language:"php-wasm",content:`
+<?php
+$title = "PHP";
+vrzno_eval('document.getElementById("title").innerText = "' . $title . '"');
 
-title := 'Civet'
-titleElement.innerText = title
+$time = date("H");
+if ($time < 12) {
+  $greeting = "Good morning!";
+} elseif ($time < 17) {
+  $greeting = "Good afternoon!";
+} elseif ($time < 20) {
+  $greeting = "Good evening!";
+} else {
+  $greeting = "Good night!";
+}
 
-counter := (count: number) => => count += 1
-increment := counter 0
-function handleClick: void counterElement.innerText = increment()
+$date = date("l jS \\of F, Y");
 
-button.addEventListener 'click', handleClick
-`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var pt={name:"fennel",title:getTemplateName("templates.starter.fennel","Fennel Starter"),thumbnail:"assets/templates/fennel.svg",activeEditor:"script",markup:{language:"html",content:`
-<div class="container">
-  <h1>Hello, <span id="title">World</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/fennel.svg" />
-  <p id="counter">You clicked 0 times.</p>
-  <button id="counter-button">Click me</button>
+echo $greeting . "<br>Today is:<br>" . $date;
+`.trimStart()}};var nt={name:"postgresql",title:getTemplateName("templates.starter.postgresql","PostgreSQL Starter"),thumbnail:"assets/templates/postgresql.svg",activeEditor:"script",markup:{language:"html",content:`
+<div id="output">
+  <details open>
+    <summary>Tables</summary>
+    <div id="tables"></div>
+  </details>
+  <details open>
+    <summary>Result</summary>
+    <pre><code id="result"></code></pre>
+  </details>
+  <details open>
+    <summary>Result as objects</summary>
+    <pre><code id="obj-result"></code></pre>
+  </details>
 </div>
+
+<script>
+  livecodes.sql.render('#tables');
+
+  livecodes.sql.getResult().then((result) => {
+    console.log(result)
+    document.querySelector('#result').innerHTML =  JSON.stringify(result, null, 2);
+  }).catch(console.error);
+
+
+  livecodes.sql.getResultAsObjects().then((results) => {
+    results.forEach(console.table);
+    document.querySelector('#obj-result').innerHTML = JSON.stringify(results, null, 2);
+  }).catch(console.error);
+<\/script>
 `.trimStart()},style:{language:"css",content:`
-.container,
-.container button {
-  text-align: center;
-  font: 1em sans-serif;
+#output {
+  color: #3d3d3d;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
-.logo {
-  width: 150px;
+
+#output summary {
+  cursor: pointer;
 }
-`.trimStart()},script:{language:"fennel",content:`
-(global js (require :js))
-(global window js.global)
-(global document window.document)
-(tset (document:getElementById :title) :innerHTML :Fennel)
-(global Counter {:count 0})
-(fn Counter.new [self o]
-  (set-forcibly! o (or o {}))
-  (setmetatable o self)
-  (set self.__index self)
-  o)
-(fn Counter.increment [self] (set self.count (+ self.count 1)))
-(fn Counter.show [self]
-  (let [counter-el (document:getElementById :counter)]
-    (set counter-el.innerHTML (: "You clicked %d times." :format self.count))))
-(global counter (Counter:new nil))
-(global button (document:querySelector "#counter-button"))
-(button:addEventListener :click (fn [] (counter:increment) (counter:show)))
-`.trimStart()}};var mt={name:"teal",title:getTemplateName("templates.starter.teal","Teal Starter"),thumbnail:"assets/templates/teal.png",activeEditor:"script",markup:{language:"html",content:`
-<div class="container">
-  <h1>Hello, <span id="title">World</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/teal.png" />
-  <p id="counter">You clicked 0 times.</p>
-  <button id="counter-button">Click me</button>
-</div>
-`.trimStart()},style:{language:"css",content:`
-.container,
-.container button {
-  text-align: center;
-  font: 1em sans-serif;
+
+#output table {
+  border: 1px solid #ddd;
+  border-collapse: separate;
+  border-radius: 4px;
+  border-spacing: 0;
+  font-size: 0.9em;
+  margin: 1em;
+  width: 95%;
 }
-.logo {
-  width: 150px;
+
+#output th,
+#output td {
+  padding: 0.5em;
 }
-`.trimStart()},script:{language:"teal",content:`
-global record Js
-  record global
-    record document
-      querySelector: function(self: document, string): Element
-    end
-  end
-end
 
-global record Element
-  innerHTML: string
-  addEventListener: function(self: Element, string, function): nil
-end
+#output tr:nth-child(odd) {
+  background-color: #f2f2f2;
+}
 
-global js: Js = require "js"
-global window = js.global
-global document = window.document
+#output pre {
+  background-color: #fafafa;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-sizing: border-box;
+  display: inline-block;
+  margin: 1em;
+  min-width: 95%;
+  padding: 1em;
+}
+`.trimStart()},script:{language:"postgresql",content:`
+-- based on https://stackoverflow.com/q/7745609
 
-global title = document:querySelector("#title")
-global button = document:querySelector("#counter-button")
-global counter_el = document:querySelector("#counter")
+CREATE TABLE IF NOT EXISTS quotes (
+  id int NOT NULL,
+  rev int NOT NULL,
+  quote varchar(200) NOT NULL,
+  PRIMARY KEY (id, rev)
+);
 
-title.innerHTML = "Teal"
+INSERT INTO quotes (id, rev, quote) VALUES
+  ('1', '1', 'Simplicity is the ultimate sophistication. \u2013 Leonardo da Vinci'),
+  ('2', '1', 'Change the world by being yourself. \u2013 Amy Poehler'),
+  ('1', '2', 'Every moment is a fresh beginning. \u2013 T.S Eliot'),
+  ('1', '3', 'Whatever you do, do it well. \u2013 Walt Disney');
 
-global count = 0
-global function increment (current: integer): integer
-  return current + 1
-end
+SELECT a.id, a.rev, a.quote
+FROM quotes a
+INNER JOIN (
+    SELECT id, MAX(rev) rev
+    FROM quotes
+    GROUP BY id
+) b ON a.id = b.id AND a.rev = b.rev;
 
-button:addEventListener("click", function()
-  count = increment(count)
-  counter_el.innerHTML = ("You clicked %d times."):format(count)
-end)
-`.trimStart()}};var dt={name:"clojurescript",title:getTemplateName("templates.starter.clojurescript","ClojureScript Starter"),thumbnail:"assets/templates/cljs.svg",activeEditor:"script",markup:{language:"html",content:`
-<div id="app">Loading...</div>
-`.trimStart()},style:{language:"css",content:`
+SELECT a.*
+FROM quotes a
+LEFT OUTER JOIN quotes b
+    ON a.id = b.id AND a.rev < b.rev
+WHERE b.id IS NULL;
+
+SELECT a.id, a.rev, a.quote
+  FROM (SELECT id, rev, quote,
+               ROW_NUMBER() OVER (PARTITION BY id ORDER BY rev DESC) rank
+          FROM quotes) a
+  WHERE a.rank = 1;
+`.trimStart()}};var rt={name:"preact",title:getTemplateName("templates.starter.preact","Preact Starter"),thumbnail:"assets/templates/preact.svg",activeEditor:"script",markup:{language:"html",content:`<div id="app"></div>
+`},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -2787,42 +2608,70 @@ end)
 .logo {
   width: 150px;
 }
-`.trimStart()},script:{language:"clojurescript",content:`
-(ns react.component
-  (:require
-    ;; you may use npm packages
-    ["canvas-confetti$default" :as confetti]
-    ["react$default" :as React]
-    ["react" :refer [useState]]
-    ["react-dom/client" :refer [createRoot]]))
+`.trimStart()},script:{language:"jsx",content:`
+/** @jsx h */
+import { h, render } from 'preact';
+import { useSignal } from "@preact/signals";
 
-(defn Counter [^:js {:keys [name]}]
-  (let [[counter setCount] (useState 0)]
-    #jsx [:div
-            {:className "container"}
-            [:h1 (str "Hello, " name "!")]
-            [:img
-              {:className "logo"
-              :alt "logo"
-              :src "{{ __livecodes_baseUrl__ }}assets/templates/cljs.svg"}]
-            [:p "You clicked " counter " times."]
-            [:button
-              {:onClick (fn []
-                          (if (= (mod counter 3) 0) (confetti))
-                          (setCount (inc counter)))}
-              "Click me"]]))
+function App(props) {
+  const count = useSignal(0);
+  return (
+    <div class="container">
+      <h1>Hello, {props.name}!</h1>
+      <img className="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/preact.svg" />
+      <p>You clicked {count} times.</p>
+      <button onClick={() => count.value++}>Click me</button>
+    </div>
+  );
+}
 
-(def title "ClojureScript")
-(print (str "Hello, " title "!"))
-(defonce root (createRoot (js/document.querySelector "#app")))
-(.render root #jsx [Counter #js {:name title}])
-`.trimStart()}};var ut={name:"ruby-wasm",title:getTemplateName("templates.starter.ruby-wasm","Ruby (Wasm) Starter"),thumbnail:"assets/templates/ruby.svg",activeEditor:"script",markup:{language:"html",content:`
+render(<App name="Preact" />, document.body);
+`.trimStart()}};var at={name:"prolog",title:getTemplateName("templates.starter.prolog","Prolog Starter"),thumbnail:"assets/templates/tau-prolog.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/ruby.svg" />
-  <p id="counter">You clicked 0 times.</p>
-  <button id="counter-button">Click me</button>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/tau-prolog.svg" title="Tau Prolog" />
+	<form id="query-form" onsubmit="runQuery(); return false;">
+		<input type="text" id="query" value="father(X, jack)." placeholder="Enter a query" />
+		<input type="submit" value="Run query" id="button" />
+		<pre id="result"></pre>
+	</form>
 </div>
+
+<script>
+  async function getTitle() {
+    const session = await livecodes.prolog.createSession();
+    session.query('title(X).');
+    session.answer(function(answer) {
+      document.getElementById("title").innerText = answer.lookup('X');
+    });
+  }
+
+  async function runQuery() {
+    const query = document.getElementById("query").value;
+    const result = document.getElementById("result");
+
+    const session = await livecodes.prolog.createSession({limit: 1000});
+    session.promiseQuery(query).then(async () => {
+      result.innerText = "";
+      for await (let answer of session.promiseAnswers()) {
+        if(pl.type.is_substitution(answer)) {
+          console.log(session.format_answer(answer));
+          result.innerText += session.format_answer(answer) + '\\n';
+        }
+      }
+      if (result.innerText == "") {
+        result.innerText = "false.";
+      }
+      result.classList.remove('error');
+    }).catch((err) => {
+      result.innerText = err;
+      result.classList.add('error');
+    })
+  }
+
+  getTitle();
+  runQuery();
+<\/script>
 `.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
@@ -2832,39 +2681,92 @@ end)
 .logo {
   width: 150px;
 }
-`.trimStart()},script:{language:"ruby-wasm",content:`
-require "js"
-require "date"
+#query {
+  width: 20em;
+}
+#result {
+  background-color: #fafafa;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: #3d3d3d;
+  margin: 1em;
+  padding: 1em;
+  text-align: left;
+}
+#result.error {
+  color: red;
+}`.trimStart()},script:{language:"prolog",content:`
+title('Prolog').
 
-document = JS.global[:document]
+male(john).
+male(oliver).
+male(ali).
+male(james).
+male(jack).
+male(harry).
+female(helen).
+female(sophie).
+female(mary).
+female(sue).
 
-title = "Ruby"
-document.querySelector("#title")[:innerHTML] = title
+parent(john, mary).
+parent(john, sue).
+parent(helen, mary).
+parent(helen, sue).
+parent(oliver, james).
+parent(sophie, james).
+parent(mary, jack).
+parent(ali, jack).
+parent(sue, harry).
+parent(james, harry).
 
-counter = 0
+father(X, Y):- male(X),
+    parent(X, Y).
 
-button = document.querySelector "button"
-button.addEventListener "click" do |e|
-    counter += 1
-    counter_element = document.querySelector "#counter"
-    counter_element[:innerHTML] = "You clicked %d times." % [counter]
-end
+mother(X, Y):- female(X),
+    parent(X, Y).
 
-# check console
-current_time = Time.now.hour
-msg = Date.today.strftime "happy %A!"
-if current_time < 12
-    puts "Good morning, " + msg
-elsif current_time < 18
-    puts "Good afternoon, " + msg
-else
-    puts "Good evening, " + msg
-end
-`.trimStart()}};var gt={name:"lua-wasm",title:getTemplateName("templates.starter.lua-wasm","Lua (Wasm) Starter"),thumbnail:"assets/templates/lua.svg",activeEditor:"script",markup:{language:"html",content:`
+grandfather(X, Y):- male(X),
+    parent(X, Z),
+    parent(Z, Y).
+
+grandmother(X, Y):- female(X),
+    parent(X, Z),
+    parent(Z, Y).
+
+sister(X, Y):- female(X),
+    father(F, Y),
+    father(F, X),
+    X \\= Y.
+sister(X, Y):- female(X),
+    mother(M, Y),
+    mother(M, X),
+    X \\= Y.
+
+brother(X, Y):- male(X),
+    father(F, Y),
+    father(F, X),
+    X \\= Y.
+brother(X, Y):- male(X),
+    mother(M, Y),
+    mother(M, X),
+    X \\= Y.
+
+uncle(X, Y):- parent(Z, Y),
+    brother(Z, X).
+
+aunt(X, Y):- parent(Z, Y),
+    sister(Z, X).
+
+ancestor(X, Y):- parent(X, Y).
+ancestor(X, Y):- parent(X, Z),
+    ancestor(Z, Y).
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var it={name:"python",title:getTemplateName("templates.starter.python","Python Starter"),thumbnail:"assets/templates/python.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
-  <h1>Hello, <span id="title">World</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/lua.svg" />
-  <p id="counter">You clicked 0 times.</p>
+  <h1 id="header">Hello, World!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/python.svg" />
+  <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
 `.trimStart()},style:{language:"css",content:`
@@ -2876,512 +2778,511 @@ end
 .logo {
   width: 150px;
 }
-`.trimStart()},script:{language:"lua-wasm",content:`
-document = window.document
-document:getElementById("title").innerHTML = "Lua"
+`.trimStart()},script:{language:"python",content:`
+from browser import document
+import time
 
-Counter = {count = 0}
-function Counter:new (o)
-  o = o or {}
-  setmetatable(o, self)
-  self.__index = self
-  return o
-end
-function Counter:increment ()
-  self.count = self.count + 1
-end
-function Counter:show ()
-  local counter_el = document:getElementById("counter")
-  counter_el.innerHTML = ("You clicked %d times."):format(self.count)
-end
+title = 'Python'
+document['header'].html = f"Hello, {title}!"
 
-counter = Counter:new(nil)
-button = document:querySelector("#counter-button")
-button:addEventListener("click", function()
-  counter:increment()
-  counter:show()
-end)
+counter = 0
 
--- check console
-time = os.date("*t").hour
-if time < 12 then
-  print ("Good morning")
-elseif time >= 12 and time < 18 then
-  print ("Good afternoon")
-else
-  print ("Good evening")
-end
-`.trimStart()}};var ht={name:"php-wasm",title:getTemplateName("templates.starter.php-wasm","PHP (Wasm) Starter"),thumbnail:"assets/templates/php.svg",activeEditor:"script",markup:{language:"html",content:`
-<p>
-  <h1>Hello, <span id="title">world</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/php.svg" />
-</p>
-`.trimStart()},style:{language:"css",content:`
-body {
+def increment(ev):
+    global counter
+    counter += 1
+    document['counter'].html = str(counter)
+
+document["counter-button"].bind("click", increment)
+
+# check console
+current_time = int(time.strftime('%H'))
+if current_time < 12 :
+      print('Good morning')
+elif 12 <= current_time < 18:
+      print('Good afternoon')
+else:
+      print('Good evening')
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var lt={name:"python-wasm",aliases:["pyodide"],title:"Python (Wasm) Starter",thumbnail:"assets/templates/python.svg",activeEditor:"script",markup:{language:"html",content:`
+<h1 id="title">Hello, World!</h1>
+<div id="loading">Loading...</div>
+<div id="plots"></div>
+`.trimStart()},style:{language:"css",content:`h1 {
   text-align: center;
-  font: 1em sans-serif;
-}
-.logo {
-  width: 150px;
 }
-`.trimStart()},script:{language:"php-wasm",content:`
-<?php
-$title = "PHP";
-vrzno_eval('document.getElementById("title").innerText = "' . $title . '"');
+`.trimStart()},script:{language:"python-wasm",content:`
+from js import document, XMLHttpRequest
+import pandas as pd
+import matplotlib.pyplot as plt
+from io import StringIO
 
-$time = date("H");
-if ($time < 12) {
-  $greeting = "Good morning!";
-} elseif ($time < 17) {
-  $greeting = "Good afternoon!";
-} elseif ($time < 20) {
-  $greeting = "Good evening!";
-} else {
-  $greeting = "Good night!";
-}
 
-$date = date("l jS \\of F, Y");
+def load_data(url):
+  req = XMLHttpRequest.new()
+  req.open("GET", url, False)
+  req.send()
+  res = req.response
+  return StringIO(f"""{res}""")
 
-echo $greeting . "<br>Today is:<br>" . $date;
-`.trimStart()}};var bt={name:"lit",title:getTemplateName("templates.starter.lit","Lit Starter"),thumbnail:"assets/templates/lit.svg",activeEditor:"script",markup:{language:"html",content:`
-<my-counter name="Lit"></my-counter>
-`.trimStart()},style:{language:"css",content:""},script:{language:"typescript",content:`
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { SignalWatcher, signal } from "@lit-labs/preact-signals";
 
-@customElement("my-counter")
-export class SignalExample extends SignalWatcher(LitElement) {
-  @property()
-  name = "World";
+def prepare_data(dataframe):
+  def add_species_id(x):
+    if x == "setosa":
+      return 0
+    elif x == "versicolor":
+      return 1
+    return 2
 
-  count = signal(0);
+  df = dataframe.copy()
+  df["species_id"] = df["species"].apply(add_species_id)
+  return df
 
-  private _onClick() {
-    this.count.value = this.count.value + 1;
-  }
 
-  render() {
-    return html\`
-      <h1>Hello, \${this.name}!</h1>
-      <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/lit.svg" />
-      <p>You clicked \${this.count.value} times.</p>
-      <button @click=\${this._onClick}>Click me</button>
-    \`;
-  }
+data = load_data("https://raw.githubusercontent.com/mwaskom/seaborn-data/master/iris.csv")
+df = pd.read_csv(data)
+df = prepare_data(df)
 
-  static styles = css\`
-    :host {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-    :host, button {
-      font: 1em sans-serif;
-    }
-    .logo {
-      width: 150px;
-    }
-  \`;
-}
-`.trimStart()},customSettings:{typescript:{experimentalDecorators:!0,useDefineForClassFields:!1}}};var ft={name:"postgresql",title:getTemplateName("templates.starter.postgresql","PostgreSQL Starter"),thumbnail:"assets/templates/postgresql.svg",activeEditor:"script",markup:{language:"html",content:`
-<div id="output">
-  <details open>
-    <summary>Tables</summary>
-    <div id="tables"></div>
-  </details>
-  <details open>
-    <summary>Result</summary>
-    <pre><code id="result"></code></pre>
-  </details>
-  <details open>
-    <summary>Result as objects</summary>
-    <pre><code id="obj-result"></code></pre>
-  </details>
-</div>
+formatter = plt.FuncFormatter(lambda i, *args: df["species"].unique()[int(i)])
+fig = plt.figure(figsize=(6, 4))
+plt.scatter(df[df.columns[0]], df[df.columns[1]], c=df["species_id"])
+plt.colorbar(ticks=[0, 1, 2], format=formatter)
+plt.xlabel(df.columns[0])
+plt.ylabel(df.columns[1])
+plt.title("Iris dataset")
+plt.tight_layout()
 
-<script>
-  livecodes.sql.render('#tables');
+# render plots in a specific DOM element
+# plots = document.querySelector("#plots")
+# document.pyodideMplTarget = plots
 
-  livecodes.sql.getResult().then((result) => {
-    console.log(result)
-    document.querySelector('#result').innerHTML =  JSON.stringify(result, null, 2);
-  }).catch(console.error);
+plt.show()
 
+title = document.getElementById("title")
+name = "Python"
+title.innerHTML = f"Hello, {name}!"
 
-  livecodes.sql.getResultAsObjects().then((results) => {
-    results.forEach(console.table);
-    document.querySelector('#obj-result').innerHTML = JSON.stringify(results, null, 2);
-  }).catch(console.error);
-<\/script>
-`.trimStart()},style:{language:"css",content:`
-#output {
-  color: #3d3d3d;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-}
+loading = document.getElementById("loading")
+loading.innerHTML = ""
 
-#output summary {
-  cursor: pointer;
-}
+# avoid leaving figures open
+plt.close("all")
+`.trimStart()}};var ct={name:"r",title:getTemplateName("templates.starter.r","R Starter"),thumbnail:"assets/templates/r.svg",activeEditor:"script",markup:{language:"html",content:`
+<div id="output">Loading...</div>
 
-#output table {
-  border: 1px solid #ddd;
-  border-collapse: separate;
-  border-radius: 4px;
-  border-spacing: 0;
-  font-size: 0.9em;
-  margin: 1em;
-  width: 95%;
-}
+<script>
+  // livecodes.r.config = {
+  //   container: '#output',
+  //   canvasHeight: 309,
+  //   canvasWidth: 500,
+  //   canvasPointSize: 12,
+  //   canvasBackground: 'transparent',
+  // };
+<\/script>
+`.trimStart()},style:{language:"css",content:""},script:{language:"r",content:`
+head(iris)
 
-#output th,
-#output td {
-  padding: 0.5em;
-}
+PW <- iris$Petal.Width
+PL <- iris$Petal.Length
+species <- iris$Species
+speciesID <- as.numeric(iris$Species)
 
-#output tr:nth-child(odd) {
-  background-color: #f2f2f2;
-}
+fit <- lm(PW ~ PL)
+summary(fit)
 
-#output pre {
-  background-color: #fafafa;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  box-sizing: border-box;
-  display: inline-block;
-  margin: 1em;
-  min-width: 95%;
-  padding: 1em;
-}
-`.trimStart()},script:{language:"postgresql",content:`
--- based on https://stackoverflow.com/q/7745609
+plot(PL, PW,
+     pch = speciesID,
+     col = speciesID,
+     main = "Petal Width vs Length",
+     xlab = "Petal Length",
+     ylab = "Petal Width")
+legend("topleft",
+       levels(species),
+       pch = 1:3,
+       col = 1:3)
 
-CREATE TABLE IF NOT EXISTS quotes (
-  id int NOT NULL,
-  rev int NOT NULL,
-  quote varchar(200) NOT NULL,
-  PRIMARY KEY (id, rev)
-);
 
-INSERT INTO quotes (id, rev, quote) VALUES
-  ('1', '1', 'Simplicity is the ultimate sophistication. \u2013 Leonardo da Vinci'),
-  ('2', '1', 'Change the world by being yourself. \u2013 Amy Poehler'),
-  ('1', '2', 'Every moment is a fresh beginning. \u2013 T.S Eliot'),
-  ('1', '3', 'Whatever you do, do it well. \u2013 Walt Disney');
+## This will take some time to load the packages
 
-SELECT a.id, a.rev, a.quote
-FROM quotes a
-INNER JOIN (
-    SELECT id, MAX(rev) rev
-    FROM quotes
-    GROUP BY id
-) b ON a.id = b.id AND a.rev = b.rev;
+# library(dplyr)
+# library(ggplot2)
 
-SELECT a.*
-FROM quotes a
-LEFT OUTER JOIN quotes b
-    ON a.id = b.id AND a.rev < b.rev
-WHERE b.id IS NULL;
+# head(diamonds)
 
-SELECT a.id, a.rev, a.quote
-  FROM (SELECT id, rev, quote,
-               ROW_NUMBER() OVER (PARTITION BY id ORDER BY rev DESC) rank
-          FROM quotes) a
-  WHERE a.rank = 1;
-`.trimStart()}};var yt=["esm.sh","skypack","esm.run","jsdelivr.esm","fastly.jsdelivr.esm","gcore.jsdelivr.esm","testingcf.jsdelivr.esm","jsdelivr.b-cdn.esm","jspm"],xt=["jsdelivr","fastly.jsdelivr","unpkg","gcore.jsdelivr","testingcf.jsdelivr","jsdelivr.b-cdn","npmcdn"],wt=["jsdelivr.gh","fastly.jsdelivr.gh","statically","gcore.jsdelivr.gh","testingcf.jsdelivr.gh","jsdelivr.b-cdn.gh"],r={getModuleUrl:(e,{isModule:s=!0,defaultCDN:i="esm.sh",external:o}={})=>{e=e.replace(/#nobundle/g,"");let a=n=>!o||!n.includes("https://esm.sh")?n:n.includes("?")?`${n}&external=${o}`:`${n}?external=${o}`,l=vt(e,s,i);return l?a(l):s?a("https://esm.sh/"+e):"https://cdn.jsdelivr.net/npm/"+e},getUrl:(e,s)=>e.startsWith("http")||e.startsWith("data:")?e:vt(e,!1,s||Et())||e,cdnLists:{npm:xt,module:yt,gh:wt},checkCDNs:async(e,s)=>{let i=[s,...r.cdnLists.npm].filter(Boolean);for(let o of i)try{if((await fetch(r.getUrl(e,o),{method:"HEAD"})).ok)return o}catch{}return r.cdnLists.npm[0]}},Et=()=>{if(globalThis.appCDN)return globalThis.appCDN;try{return new URL(location.href).searchParams.get("appCDN")||r.cdnLists.npm[0]}catch{return r.cdnLists.npm[0]}},vt=(e,s,i)=>{let o=s&&e.startsWith("unpkg:")?"?module":"";e.startsWith("gh:")?e=e.replace("gh",wt[0]):e.includes(":")||(e=(i||(s?yt[0]:xt[0]))+":"+e);for(let a of $t){let[l,n]=a;if(l.test(e))return e.replace(l,n)+o}return null},$t=[[/^(esm\.sh:)(.+)/i,"https://esm.sh/$2"],[/^(npm:)(.+)/i,"https://esm.sh/$2"],[/^(node:)(.+)/i,"https://esm.sh/$2"],[/^(jsr:)(.+)/i,"https://esm.sh/jsr/$2"],[/^(skypack:)(.+)/i,"https://cdn.skypack.dev/$2"],[/^(jsdelivr:)(.+)/i,"https://cdn.jsdelivr.net/npm/$2"],[/^(fastly\.jsdelivr:)(.+)/i,"https://fastly.jsdelivr.net/npm/$2"],[/^(gcore\.jsdelivr:)(.+)/i,"https://gcore.jsdelivr.net/npm/$2"],[/^(testingcf\.jsdelivr:)(.+)/i,"https://testingcf.jsdelivr.net/npm/$2"],[/^(jsdelivr\.b-cdn:)(.+)/i,"https://jsdelivr.b-cdn.net/npm/$2"],[/^(jsdelivr\.gh:)(.+)/i,"https://cdn.jsdelivr.net/gh/$2"],[/^(fastly\.jsdelivr\.gh:)(.+)/i,"https://fastly.jsdelivr.net/gh/$2"],[/^(gcore\.jsdelivr\.gh:)(.+)/i,"https://gcore.jsdelivr.net/gh/$2"],[/^(testingcf\.jsdelivr\.gh:)(.+)/i,"https://testingcf.jsdelivr.net/gh/$2"],[/^(jsdelivr\.b-cdn\.gh:)(.+)/i,"https://jsdelivr.b-cdn.net/gh/$2"],[/^(statically:)(.+)/i,"https://cdn.statically.io/gh/$2"],[/^(esm\.run:)(.+)/i,"https://esm.run/$2"],[/^(jsdelivr\.esm:)(.+)/i,"https://cdn.jsdelivr.net/npm/$2/+esm"],[/^(fastly\.jsdelivr\.esm:)(.+)/i,"https://fastly.jsdelivr.net/npm/$2/+esm"],[/^(gcore\.jsdelivr\.esm:)(.+)/i,"https://gcore.jsdelivr.net/npm/$2/+esm"],[/^(testingcf\.jsdelivr\.esm:)(.+)/i,"https://testingcf.jsdelivr.net/npm/$2/+esm"],[/^(jsdelivr\.b-cdn\.esm:)(.+)/i,"https://jsdelivr.b-cdn.net/npm/$2/+esm"],[/^(jspm:)(.+)/i,"https://jspm.dev/$2"],[/^(esbuild:)(.+)/i,"https://esbuild.vercel.app/$2"],[/^(bundle\.run:)(.+)/i,"https://bundle.run/$2"],[/^(unpkg:)(.+)/i,"https://unpkg.com/$2"],[/^(npmcdn:)(.+)/i,"https://npmcdn.com/$2"],[/^(bundlejs:)(.+)/i,"https://deno.bundlejs.com/?file&q=$2"],[/^(bundle:)(.+)/i,"https://deno.bundlejs.com/?file&q=$2"],[/^(deno:)(.+)/i,"https://deno.bundlejs.com/?file&q=https://deno.land/x/$2/mod.ts"],[/^(https:\/\/deno\.land\/.+)/i,"https://deno.bundlejs.com/?file&q=$1"],[/^(github:|https:\/\/github\.com\/)(.[^\/]+?)\/(.[^\/]+?)\/(?!releases\/)(?:(?:blob|raw)\/)?(.+?\/.+)/i,"https://deno.bundlejs.com/?file&q=https://cdn.jsdelivr.net/gh/$2/$3@$4"],[/^(gist\.github:)(.+?\/[0-9a-f]+\/raw\/(?:[0-9a-f]+\/)?.+)$/i,"https://gist.githack.com/$2"],[/^(gitlab:|https:\/\/gitlab\.com\/)([^\/]+.*\/[^\/]+)\/(?:raw|blob)\/(.+?)(?:\?.*)?$/i,"https://deno.bundlejs.com/?file&q=https://gl.githack.com/$2/raw/$3"],[/^(bitbucket:|https:\/\/bitbucket\.org\/)([^\/]+\/[^\/]+)\/(?:raw|src)\/(.+?)(?:\?.*)?$/i,"https://deno.bundlejs.com/?file&q=https://bb.githack.com/$2/raw/$3"],[/^(bitbucket:)snippets\/([^\/]+\/[^\/]+)\/revisions\/([^\/\#\?]+)(?:\?[^#]*)?(?:\#file-(.+?))$/i,"https://bb.githack.com/!api/2.0/snippets/$2/$3/files/$4"],[/^(bitbucket:)snippets\/([^\/]+\/[^\/\#\?]+)(?:\?[^#]*)?(?:\#file-(.+?))$/i,"https://bb.githack.com/!api/2.0/snippets/$2/HEAD/files/$3"],[/^(bitbucket:)\!api\/2.0\/snippets\/([^\/]+\/[^\/]+\/[^\/]+)\/files\/(.+?)(?:\?.*)?$/i,"https://bb.githack.com/!api/2.0/snippets/$2/files/$3"],[/^(api\.bitbucket:)2.0\/snippets\/([^\/]+\/[^\/]+\/[^\/]+)\/files\/(.+?)(?:\?.*)?$/i,"https://bb.githack.com/!api/2.0/snippets/$2/files/$3"],[/^(rawgit:)(.+?\/[0-9a-f]+\/raw\/(?:[0-9a-f]+\/)?.+)$/i,"https://gist.githack.com/$2"],[/^(rawgit:|https:\/\/raw\.githubusercontent\.com)(\/[^\/]+\/[^\/]+|[0-9A-Za-z-]+\/[0-9a-f]+\/raw)\/(.+)/i,"https://deno.bundlejs.com/?file&q=https://raw.githack.com/$2/$3"]];var{getUrl:Lt,getModuleUrl:Oe}=r;var c=Lt("gh:live-codes/gleam-precompiled@v0.5.0/");var p=c+"build/packages/plinth/src/plinth/",m=c+"build/dev/javascript/plinth/plinth/",St={name:"gleam",title:getTemplateName("templates.starter.gleam","Gleam Starter"),thumbnail:"assets/templates/gleam.svg",activeEditor:"script",markup:{language:"html",content:`
-<div class="container">
-  <h1 id="title">Hello, World!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/gleam.svg" />
-  <p>You clicked <span id="counter">0</span> times.</p>
-  <button id="counter-button">Click me</button>
-</div>
+# diamonds %>%
+#   filter(depth > 60) %>%
+#   group_by(cut) %>%
+#   summarize(mean_price = mean(price)) %>%
+#   ggplot(aes(x = cut, y = mean_price, fill = cut)) +
+#       geom_bar(stat = "identity")
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var pt={name:"react-native",title:getTemplateName("templates.starter.react-native","React Native Starter"),thumbnail:"assets/templates/react.svg",activeEditor:"script",markup:{language:"html",content:""},style:{language:"css",content:""},script:{language:"react-native",content:`
+import { useState } from "react";
+import { Button, Image, StyleSheet, Text, View } from "react-native";
 
-`.trimStart()},style:{language:"css",content:`
-.container,
-.container button {
-  text-align: center;
-  font: 1em sans-serif;
-}
-.logo {
-  width: 150px;
+const logoUri = \`data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z" /><circle cx="420.9" cy="296.5" r="45.7" /><path d="M520.5 78.1z" /></g></svg>\`;
+
+function Link(props) {
+  return (
+    <Text
+      {...props}
+      accessibilityRole="link"
+      style={StyleSheet.compose(styles.link, props.style)}
+    />
+  );
 }
-`.trimStart()},script:{language:"gleam",content:`
-import gleam/int
-import gleam/io
-import gleam/result
-import gleam/dynamic
-import plinth/browser/document
-import plinth/browser/element
-import plinth/browser/event
-// see docs for using custom modules:
-// https://livecodes.io/docs/languages/gleam
 
-pub fn main() {
-  say_hello()
-  counter()
+function Counter(props) {
+  const [count, setCount] = useState(props.initialCount);
+  return (
+    <View>
+      <Text style={styles.text}>You clicked {count} times.</Text>
+      <Button onPress={() => setCount(count + 1)} title="Click me" />
+    </View>
+  );
 }
 
-fn say_hello() {
-  let greeting = hello("Gleam")
-  let assert Ok(title) = document.query_selector("#title")
-  element.set_inner_html(title, greeting)
-  io.println(cowsay(greeting))
+export default function App() {
+  return (
+    <View style={styles.app}>
+      <View style={styles.header}>
+        <Image
+          accessibilityLabel="React logo"
+          source={{ uri: logoUri }}
+          resizeMode="contain"
+          style={styles.logo}
+        />
+        <Text style={styles.title}>React Native for Web</Text>
+      </View>
+      <Text style={styles.text}>
+        This is an example app built with{" "}
+        <Link href="https://necolas.github.io/react-native-web/">
+          React Native for Web
+        </Link>
+      </Text>
+      <Counter initialCount={0}></Counter>
+    </View>
+  );
 }
 
-fn counter() {
-  document.add_event_listener("click", fn(ev) {
-    let target = dynamic.unsafe_coerce(event.target(ev))
-    case element.get_attribute(target, "id") {
-        Ok("counter-button") -> increment()
-        _ -> Nil
-    }
-  })
+const styles = StyleSheet.create({
+  app: {
+    marginHorizontal: "auto",
+    marginVertical: 20,
+    maxWidth: 500,
+  },
+  logo: {
+    height: 150,
+  },
+  header: {
+    padding: 20,
+  },
+  title: {
+    fontWeight: "bold",
+    fontSize: "1.5rem",
+    marginVertical: "0.5em",
+    textAlign: "center",
+  },
+  text: {
+    lineHeight: "1.5em",
+    fontSize: "1.125rem",
+    marginVertical: "0.5em",
+    textAlign: "center",
+  },
+  link: {
+    color: "#1B95E0",
+  },
+});
+`.trimStart()}};var mt={name:"react",title:getTemplateName("templates.starter.react","React Starter"),thumbnail:"assets/templates/react.svg",activeEditor:"script",markup:{language:"html",content:""},style:{language:"css",content:`
+.container,
+.container button {
+  text-align: center;
+  font: 1em sans-serif;
 }
-
-fn increment() {
-  let assert Ok(el) = document.query_selector("#counter")
-  let assert Ok(_) = el
-  |> element.inner_text
-  |> int.parse
-  |> result.map(fn(n) { n + 1 })
-  |> result.map(int.to_string)
-  |> result.map(element.set_inner_html(el, _))
-  Nil
+.logo {
+  width: 150px;
 }
+`.trimStart()},script:{language:"react",content:`
+import { useState } from "react";
 
-// custom module
-@external(javascript, "my_pkg/greet.js", "hello")
-pub fn hello(str: String) -> String
-
-// npm module
-@external(javascript, "npm:cowsay2", "say")
-pub fn cowsay(str: String) -> String
-`.trimStart()},customSettings:{imports:{"my_pkg/greet.js":c+"demo/greet.js"},gleam:{modules:{"plinth/browser/document":{srcUrl:p+"browser/document.gleam",compiledUrl:m+"browser/document.mjs"},"plinth/browser/element":{srcUrl:p+"browser/element.gleam",compiledUrl:m+"browser/element.mjs"},"plinth/browser/event":{srcUrl:p+"browser/event.gleam",compiledUrl:m+"browser/event.mjs"}}}}};var kt={name:"phaser",title:"Phaser Starter",thumbnail:"assets/templates/phaser.png",activeEditor:"script",markup:{language:"html",content:`
-<div id="app">
-  <div id="game-container"></div>
-</div>
-`.trimStart()},style:{language:"css",content:`
-body {
-  margin: 0;
-  padding: 0;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #000000;
+function Counter(props) {
+  const [count, setCount] = useState(0);
+  return (
+    <div className="container">
+      <h1>Hello, {props.name}!</h1>
+      <img className="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/react.svg" />
+      <p>You clicked {count} times.</p>
+      <button onClick={() => setCount(count + 1)}>Click me</button>
+    </div>
+  );
 }
 
-#app {
-  width: 100%;
-  height: 100vh;
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+export default function App() {
+  return <Counter name="React" />;
 }
-`.trimStart()},script:{language:"javascript",content:`
-// based on https://github.com/phaserjs/template-vite
-// and https://phaser.io/sandbox/XyqPcjNr
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var dt={name:"reason",title:getTemplateName("templates.starter.reason","Reason Starter"),thumbnail:"assets/templates/reason.svg",activeEditor:"script",markup:{language:"html",content:`<div id="app">Loading...</div>
+`},style:{language:"css",content:`
+.container,
+.container button {
+  text-align: center;
+  font: 1em sans-serif;
+}
+.logo {
+  width: 150px;
+}
+`.trimStart()},script:{language:"reason",content:`
+module App = {
+  [@react.component]
+  let make = (~name) => {
+    let title = "Hello, " ++ name ++ "!"
 
-import Phaser from "phaser";
+    let (count, setCount) = React.useState(() => 0);
 
-// learn about adding assets in livecodes
-// https://livecodes.io/docs/features/assets
+    let times = switch (count) {
+    | 1 => "once"
+    | 2 => "twice"
+    | n => string_of_int(n) ++ " times"
+    };
 
-class Boot extends Phaser.Scene {
-  constructor() {
-    super("Boot");
-  }
+    <div className="container">
+      <h1> {React.string(title)} </h1>
+      <img className="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/reason.svg" />
+      <p> {React.string("You clicked " ++ times)} </p>
+      <button onClick={_ => setCount(_ => count + 1)}>
+        {React.string("Click me")}
+      </button>
+    </div>
+  };
+};
 
-  preload() {
-    //  The Boot Scene is typically used to load in any assets you require for your Preloader, such as a game logo or background.
-    //  The smaller the file size of the assets, the better, as the Boot Scene itself has no preloader.
-    this.load.image("background", "https://cdn.jsdelivr.net/gh/phaserjs/template-vite@main/public/assets/bg.png");
-  }
+switch (ReactDOM.querySelector("#app")) {
+| Some(app) => ReactDOM.render(<App name="ReasonReact" />, app)
+| None => ()
+}
 
-  create() {
-    this.scene.start("Preloader");
-  }
+Js.log("Hello, Reason!");
+`.trimStart()},customSettings:{imports:{react:"https://esm.sh/react@18.3.1","react/":"https://esm.sh/react@18.3.1/","react-dom":"https://esm.sh/react-dom@18.3.1"}}};var ut={name:"rescript",title:getTemplateName("templates.starter.rescript","ReScript Starter"),thumbnail:"assets/templates/rescript.png",activeEditor:"script",markup:{language:"html",content:`<div id="app">Loading...</div>
+`},style:{language:"css",content:`
+.container,
+.container button {
+  text-align: center;
+  font: 1em sans-serif;
+}
+.logo {
+  width: 150px;
 }
+`.trimStart()},script:{language:"rescript",content:`
+// import npm modules
+@module("canvas-confetti") external confetti: () => unit = "default"
 
-class Preloader extends Phaser.Scene {
-  constructor() {
-    super("Preloader");
-  }
+confetti()
 
-  init() {
-    //  We loaded this image in our Boot Scene, so we can display it here
-    this.add.image(512, 384, "background");
+module App = {
+  @react.component
+  let make = (~name: string) => {
+    let title = "Hello, " ++ name ++ "!"
 
-    //  A simple progress bar. This is the outline of the bar.
-    this.add.rectangle(512, 384, 468, 32).setStrokeStyle(1, 0xffffff);
+    let (count, setCount) = React.useState(_ => 0)
+    let onClick = _evt => {
+      if (mod(count + 1, 5) == 0) {
+        confetti()
+      }
+      setCount(_prev => _prev + 1)
+    }
 
-    //  This is the progress bar itself. It will increase in size from the left based on the % of progress.
-    const bar = this.add.rectangle(512 - 230, 384, 4, 28, 0xffffff);
+    let times = switch count {
+    | 1 => "once"
+    | 2 => "twice"
+    | n => String.make(n) ++ " times"
+    }
 
-    //  Use the 'progress' event emitted by the LoaderPlugin to update the loading bar
-    this.load.on("progress", (progress) => {
-      //  Update the progress bar (our bar is 464px wide, so 100% = 464px)
-      bar.width = 4 + 460 * progress;
-    });
+    <div className="container">
+      <h1> {title->React.string} </h1>
+      <img className="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/rescript.png" />
+      <p> {React.string("You clicked " ++ times)} </p>
+      <button onClick> {React.string("Click me")} </button>
+    </div>
   }
+}
 
-  preload() {
-    //  Load the assets for the game - Replace with your own assets
-    this.load.setBaseURL("https://labs.phaser.io");
-
-    this.load.image("sky", "assets/skies/space3.png");
-    this.load.image("logo", "assets/sprites/phaser3-logo.png");
-    this.load.image("red", "assets/particles/red.png");
+switch ReactDOM.querySelector("#app") {
+| Some(rootElement) => {
+    let root = ReactDOM.Client.createRoot(rootElement)
+    ReactDOM.Client.Root.render(root, <App name="ReScript React" />)
   }
+| None => () // do nothing
+}
 
-  create() {
-    //  When all the assets have loaded, it's often worth creating global objects here that the rest of the game can use.
-    //  For example, you can define global animations here, so we can use them in other scenes.
+Console.log("Hello, ReScript!")
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var gt={name:"riot",title:getTemplateName("templates.starter.riot","Riot.js Starter"),thumbnail:"assets/templates/riot.svg",activeEditor:"script",markup:{language:"html",content:`
+<counter title="Riot.js"></counter>
 
-    //  Move to the MainMenu. You could also swap this for a Scene Transition, such as a camera fade.
-    this.scene.start("MainMenu");
+<script>
+  livecodes.templateData = {
+    url: 'https://riot.js.org/'
   }
-}
+<\/script>
+`.trimStart()},style:{language:"css",content:""},script:{language:"riot",content:`
+<counter>
+  <div class="container">
+    <h1>Hello, { props.title }!</h1>
+    <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/riot.svg" />
+    <p>You clicked { state.count } times.</p>
+    <button onclick="{ increment }">Click me</button>
+    <div class="footer">
+      <a href="{ props.url }" target="_blank">Riot.js Website</a>
+    </div>
+  </div>
 
-class MainMenu extends Phaser.Scene {
-  constructor() {
-    super("MainMenu");
-  }
-
-  create() {
-    this.add.image(512, 384, "background");
-
-    this.add.image(512, 300, "logo");
-
-    this.add
-      .text(512, 460, "Main Menu", {
-        fontFamily: "Arial Black",
-        fontSize: 38,
-        color: "#ffffff",
-        stroke: "#000000",
-        strokeThickness: 8,
-        align: "center",
-      })
-      .setOrigin(0.5);
+  <style>
+    .container,
+    .container button {
+      text-align: center;
+      font: 1em sans-serif;
+    }
+    .logo {
+      width: 150px;
+    }
+    .footer {
+      font: 0.8em sans-serif;
+      margin: 1.5em;
+    }
+  </style>
 
-    this.input.once("pointerdown", () => {
-      this.scene.start("Game");
-    });
-  }
+  <script>
+    export default {
+      onBeforeMount(props, state) {
+        this.state = {
+          count: 0,
+        };
+      },
+      increment(e) {
+        e.preventDefault();
+        this.update({
+          count: this.state.count + 1,
+        });
+      },
+    };
+  <\/script>
+</counter>
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var ht={name:"ruby",title:getTemplateName("templates.starter.ruby","Ruby Starter"),thumbnail:"assets/templates/ruby.svg",activeEditor:"script",markup:{language:"html",content:`
+<div class="container">
+  <h1>Hello, <span id="title">World</span>!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/ruby.svg" />
+  <p id="counter">You clicked 0 times.</p>
+  <button id="counter-button">Click me</button>
+</div>
+`.trimStart()},style:{language:"css",content:`
+.container,
+.container button {
+  text-align: center;
+  font: 1em sans-serif;
 }
+.logo {
+  width: 150px;
+}
+`.trimStart()},script:{language:"ruby",content:`
+require "date"
+require "native"
 
-class Game extends Phaser.Scene {
-  constructor() {
-    super("Game");
-  }
-
-  create() {
-    const sky = this.add.image(512, 384, "sky");
-    sky.setScale(1.3);
-
-    const particles = this.add.particles(0, 0, "red", {
-      speed: 100,
-      scale: { start: 1, end: 0 },
-      blendMode: "ADD",
-    });
+title = "Ruby"
+$$.document.querySelector("#title").innerHTML = title
 
-    const logo = this.physics.add.image(400, 100, "logo");
+$counter = 0
+$counter_element = $$.document.querySelector "#counter"
 
-    logo.setVelocity(100, 200);
-    logo.setBounce(1, 1);
-    logo.setCollideWorldBounds(true);
+def increment
+    $counter += 1
+    $counter_element.innerHTML = "You clicked %d times." % [$counter]
+end
 
-    particles.startFollow(logo);
+button = $$.document.querySelector "button"
+button.onclick = -> {increment}
 
-    this.input.once("pointerdown", () => {
-      this.scene.start("GameOver");
-    });
-  }
+# check console
+current_time = Time.now.hour
+msg = Date.today.strftime "happy %A!"
+if current_time < 12
+    puts "Good morning, " + msg
+elsif current_time < 18
+    puts "Good afternoon, " + msg
+else
+    puts "Good evening, " + msg
+end
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var bt={name:"ruby-wasm",title:getTemplateName("templates.starter.ruby-wasm","Ruby (Wasm) Starter"),thumbnail:"assets/templates/ruby.svg",activeEditor:"script",markup:{language:"html",content:`
+<div class="container">
+  <h1>Hello, <span id="title">World</span>!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/ruby.svg" />
+  <p id="counter">You clicked 0 times.</p>
+  <button id="counter-button">Click me</button>
+</div>
+`.trimStart()},style:{language:"css",content:`
+.container,
+.container button {
+  text-align: center;
+  font: 1em sans-serif;
 }
+.logo {
+  width: 150px;
+}
+`.trimStart()},script:{language:"ruby-wasm",content:`
+require "js"
+require "date"
 
-class GameOver extends Phaser.Scene {
-  constructor() {
-    super("GameOver");
-  }
-
-  create() {
-    this.cameras.main.setBackgroundColor(0xff0000);
-
-    this.add.image(512, 384, "background").setAlpha(0.5);
+document = JS.global[:document]
 
-    this.add
-      .text(512, 384, "Game Over", {
-        fontFamily: "Arial Black",
-        fontSize: 64,
-        color: "#ffffff",
-        stroke: "#000000",
-        strokeThickness: 8,
-        align: "center",
-      })
-      .setOrigin(0.5);
+title = "Ruby"
+document.querySelector("#title")[:innerHTML] = title
 
-    this.input.once("pointerdown", () => {
-      this.scene.start("MainMenu");
-    });
-  }
-}
+counter = 0
 
-//  Find out more information about the Game Config at:
-//  https://newdocs.phaser.io/docs/3.70.0/Phaser.Types.Core.GameConfig
-/**
- * @type {Phaser.Types.Core.GameConfig}
- */
-const config = {
-  type: Phaser.AUTO,
-  width: 1024,
-  height: 768,
-  parent: "game-container",
-  backgroundColor: "#028af8",
-  scale: {
-    mode: Phaser.Scale.FIT,
-    autoCenter: Phaser.Scale.CENTER_BOTH,
-  },
-    physics: {
-    default: 'arcade',
-    arcade: {
-      gravity: { y: 200 },
-    },
-  },
-  scene: [Boot, Preloader, MainMenu, Game, GameOver],
-  autoFocus: false,
-};
+button = document.querySelector "button"
+button.addEventListener "click" do |e|
+    counter += 1
+    counter_element = document.querySelector "#counter"
+    counter_element[:innerHTML] = "You clicked %d times." % [counter]
+end
 
-export default new Phaser.Game(config);
-`.trimStart()}};var _t={name:"d3",title:"D3 Starter",thumbnail:"assets/templates/d3.svg",activeEditor:"script",markup:{language:"html",content:`<div id="chart">Loading...</div>
-`},style:{language:"css",content:`
-.bar {
-  fill: steelblue;
+# check console
+current_time = Time.now.hour
+msg = Date.today.strftime "happy %A!"
+if current_time < 12
+    puts "Good morning, " + msg
+elsif current_time < 18
+    puts "Good afternoon, " + msg
+else
+    puts "Good evening, " + msg
+end
+`.trimStart()}};var ft={name:"scheme",title:getTemplateName("templates.starter.scheme","Scheme Starter"),thumbnail:"assets/templates/scheme.svg",activeEditor:"script",markup:{language:"html",content:`
+<div class="container">
+  <h1>Hello, <span id="title">World</span>!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/scheme.svg" />
+  <p>You clicked <span id="counter">0</span> times.</p>
+  <button id="counter-button">Click me</button>
+</div>
+`.trimStart()},style:{language:"css",content:`
+.container,
+.container button {
+  text-align: center;
+  font: 1em sans-serif;
 }
-
-.bar:hover {
-  fill: orange;
+.logo {
+  width: 150px;
 }
-`.trimStart()},script:{language:"javascript",content:`
-import * as d3 from "d3";
-
-const data = [150, 230, 180, 90];
+`.trimStart()},script:{language:"scheme",content:`
+(let ((title "Scheme"))
+  (set-content! "#title" title))
 
-const svg = d3
-  .select("#chart")
-  .html('')
-  .append("svg")
-  .attr("width", 300)
-  .attr("height", 200);
+(let ((counter 0))
+  (add-handler! "#counter-button" "click"
+    (lambda (ev)
+      (set! counter (+ counter 1))
+      (set-content! "#counter" (number->string counter)))))
 
-svg
-  .selectAll(".bar")
-  .data(data)
-  .enter()
-  .append("rect")
-  .attr("class", "bar")
-  .attr("width", (d) => d)
-  .attr("height", 40)
-  .attr("y", (d, i) => i * 50 + 10)
-  .attr("x", 10);
-`.trimStart()}};var t="https://cdn.jsdelivr.net/npm/@hatemhosny/shadcdn@0.0.14/build/",jt={name:"shadcn-ui",title:getTemplateName("templates.starter.shadcnui","shadcn/ui Starter"),thumbnail:"assets/templates/shadcn-ui.svg",activeEditor:"script",markup:{language:"html",content:`
+; check console
+(let ((time-now (date-hour (current-date))))
+  (console-log
+    (cond ((< time-now 12) "Good morning")
+          ((< time-now 18) "Good afternoon")
+          (else "Good evening"))))
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var t="https://cdn.jsdelivr.net/npm/@hatemhosny/shadcdn@0.0.14/build/",vt={name:"shadcn-ui",title:getTemplateName("templates.starter.shadcnui","shadcn/ui Starter"),thumbnail:"assets/templates/shadcn-ui.svg",activeEditor:"script",markup:{language:"html",content:`
 <link rel="stylesheet" href="${t}shadcdn.css">
 <link rel="stylesheet" href="${t}themes.css">
 `.trimStart()},style:{language:"css",content:`
@@ -3508,194 +3409,386 @@ function LoginForm({
     </div>
   );
 }
-`.trimStart()},processors:["tailwindcss"],imports:{},types:{},customSettings:{imports:{react:"https://esm.sh/react","react/":"https://esm.sh/react/","react-dom":"https://esm.sh/react-dom","react-dom/":"https://esm.sh/react-dom/","@":`${t}shadcdn.js`,"@/lib/utils":`${t}shadcdn.js`,"@/components/ui/accordion":`${t}shadcdn.js`,"@/components/ui/alert-dialog":`${t}shadcdn.js`,"@/components/ui/alert":`${t}shadcdn.js`,"@/components/ui/aspect-ratio":`${t}shadcdn.js`,"@/components/ui/avatar":`${t}shadcdn.js`,"@/components/ui/badge":`${t}shadcdn.js`,"@/components/ui/button":`${t}shadcdn.js`,"@/components/ui/calendar":`${t}shadcdn.js`,"@/components/ui/card":`${t}shadcdn.js`,"@/components/ui/checkbox":`${t}shadcdn.js`,"@/components/ui/collapsible":`${t}shadcdn.js`,"@/components/ui/command":`${t}shadcdn.js`,"@/components/ui/context-menu":`${t}shadcdn.js`,"@/components/ui/dialog":`${t}shadcdn.js`,"@/components/ui/dropdown-menu":`${t}shadcdn.js`,"@/components/ui/form":`${t}shadcdn.js`,"@/components/ui/hover-card":`${t}shadcdn.js`,"@/components/ui/input":`${t}shadcdn.js`,"@/components/ui/label":`${t}shadcdn.js`,"@/components/ui/menubar":`${t}shadcdn.js`,"@/components/ui/navigation-menu":`${t}shadcdn.js`,"@/components/ui/popover":`${t}shadcdn.js`,"@/components/ui/progress":`${t}shadcdn.js`,"@/components/ui/radio-group":`${t}shadcdn.js`,"@/components/ui/scroll-area":`${t}shadcdn.js`,"@/components/ui/select":`${t}shadcdn.js`,"@/components/ui/separator":`${t}shadcdn.js`,"@/components/ui/sheet":`${t}shadcdn.js`,"@/components/ui/skeleton":`${t}shadcdn.js`,"@/components/ui/slider":`${t}shadcdn.js`,"@/components/ui/switch":`${t}shadcdn.js`,"@/components/ui/table":`${t}shadcdn.js`,"@/components/ui/tabs":`${t}shadcdn.js`,"@/components/ui/textarea":`${t}shadcdn.js`,"@/components/ui/toast":`${t}shadcdn.js`,"@/components/ui/toaster":`${t}shadcdn.js`,"@/components/ui/toggle":`${t}shadcdn.js`,"@/components/ui/tooltip":`${t}shadcdn.js`,"@/components/ui/use-toast":`${t}shadcdn.js`,"@/components/ui/resizable":`${t}shadcdn.js`,"@/components/ui/input-otp":`${t}shadcdn.js`,"@/components/ui/breadcrumb":`${t}shadcdn.js`,"@/components/ui/toggle-group":`${t}shadcdn.js`,"@/components/ui/sonner":`${t}shadcdn.js`,"@/components/ui/pagination":`${t}shadcdn.js`,"@/components/ui/drawer":`${t}shadcdn.js`,"@/components/ui/carousel":`${t}shadcdn.js`,"@/components/ui/sidebar":`${t}shadcdn.js`,"@/components/ui/chart":`${t}shadcdn.js`},types:{"@/components":`${t}shadcdn.d.ts`,"@/utils":`${t}shadcdn.d.ts`}}};var Tt={name:"daisyui",title:getTemplateName("templates.starter.daisyui","daisyUI Starter"),thumbnail:"assets/templates/daisyui.svg",activeEditor:"markup",markup:{language:"html",content:`
-<!-- based on https://daisyui.com/tailwindplay/ -->
-
-<!-- buttons -->
-<div class="p-4">
-  <button class="btn btn-primary">primary</button>
-  <button class="btn btn-secondary">secondary</button>
-  <button class="btn btn-accent">accent</button>
-</div>
+`.trimStart()},processors:["tailwindcss"],imports:{},types:{},customSettings:{imports:{react:"https://esm.sh/react","react/":"https://esm.sh/react/","react-dom":"https://esm.sh/react-dom","react-dom/":"https://esm.sh/react-dom/","@":`${t}shadcdn.js`,"@/lib/utils":`${t}shadcdn.js`,"@/components/ui/accordion":`${t}shadcdn.js`,"@/components/ui/alert-dialog":`${t}shadcdn.js`,"@/components/ui/alert":`${t}shadcdn.js`,"@/components/ui/aspect-ratio":`${t}shadcdn.js`,"@/components/ui/avatar":`${t}shadcdn.js`,"@/components/ui/badge":`${t}shadcdn.js`,"@/components/ui/button":`${t}shadcdn.js`,"@/components/ui/calendar":`${t}shadcdn.js`,"@/components/ui/card":`${t}shadcdn.js`,"@/components/ui/checkbox":`${t}shadcdn.js`,"@/components/ui/collapsible":`${t}shadcdn.js`,"@/components/ui/command":`${t}shadcdn.js`,"@/components/ui/context-menu":`${t}shadcdn.js`,"@/components/ui/dialog":`${t}shadcdn.js`,"@/components/ui/dropdown-menu":`${t}shadcdn.js`,"@/components/ui/form":`${t}shadcdn.js`,"@/components/ui/hover-card":`${t}shadcdn.js`,"@/components/ui/input":`${t}shadcdn.js`,"@/components/ui/label":`${t}shadcdn.js`,"@/components/ui/menubar":`${t}shadcdn.js`,"@/components/ui/navigation-menu":`${t}shadcdn.js`,"@/components/ui/popover":`${t}shadcdn.js`,"@/components/ui/progress":`${t}shadcdn.js`,"@/components/ui/radio-group":`${t}shadcdn.js`,"@/components/ui/scroll-area":`${t}shadcdn.js`,"@/components/ui/select":`${t}shadcdn.js`,"@/components/ui/separator":`${t}shadcdn.js`,"@/components/ui/sheet":`${t}shadcdn.js`,"@/components/ui/skeleton":`${t}shadcdn.js`,"@/components/ui/slider":`${t}shadcdn.js`,"@/components/ui/switch":`${t}shadcdn.js`,"@/components/ui/table":`${t}shadcdn.js`,"@/components/ui/tabs":`${t}shadcdn.js`,"@/components/ui/textarea":`${t}shadcdn.js`,"@/components/ui/toast":`${t}shadcdn.js`,"@/components/ui/toaster":`${t}shadcdn.js`,"@/components/ui/toggle":`${t}shadcdn.js`,"@/components/ui/tooltip":`${t}shadcdn.js`,"@/components/ui/use-toast":`${t}shadcdn.js`,"@/components/ui/resizable":`${t}shadcdn.js`,"@/components/ui/input-otp":`${t}shadcdn.js`,"@/components/ui/breadcrumb":`${t}shadcdn.js`,"@/components/ui/toggle-group":`${t}shadcdn.js`,"@/components/ui/sonner":`${t}shadcdn.js`,"@/components/ui/pagination":`${t}shadcdn.js`,"@/components/ui/drawer":`${t}shadcdn.js`,"@/components/ui/carousel":`${t}shadcdn.js`,"@/components/ui/sidebar":`${t}shadcdn.js`,"@/components/ui/chart":`${t}shadcdn.js`},types:{"@/components":`${t}shadcdn.d.ts`,"@/utils":`${t}shadcdn.d.ts`}}};var yt={name:"solid",title:getTemplateName("templates.starter.solid","Solid Starter"),thumbnail:"assets/templates/solid.svg",activeEditor:"script",markup:{language:"html",content:""},style:{language:"css",content:`
+.container,
+.container button {
+  text-align: center;
+  font: 1em sans-serif;
+}
+.logo {
+  width: 150px;
+}
+`.trimStart()},script:{language:"solid.tsx",content:`
+import { createSignal } from "solid-js";
 
-<!-- same buttons with another theme! -->
-<div class="p-4" data-theme="abyss">
-  <button class="btn btn-primary">Primary</button>
-  <button class="btn btn-secondary">Secondary</button>
-  <button class="btn btn-accent">Accent</button>
-</div>
-<div class="p-4" data-theme="purplewind">
-  <button class="btn btn-primary">Primary</button>
-  <button class="btn btn-secondary">Secondary</button>
-  <button class="btn btn-accent">Accent</button>
-</div>
+function Counter(props: { name: string }) {
+  const [count, setCount] = createSignal(0);
+  const increment = () => setCount(count() + 1);
+  return (
+    <div class="container">
+      <h1>Hello, {props.name}!</h1>
+      <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/solid.svg" />
+      <p>You clicked {count()} times.</p>
+      <button onClick={increment}>Click me</button>
+    </div>
+  );
+}
 
-<!-- tab -->
-<div class="tabs tabs-lift p-4">
-  <button class="tab">Tab 1</button>
-  <button class="tab tab-active">Tab 2</button>
-  <button class="tab">Tab 3</button>
-  <button class="tab"></button>
+export default function App() {
+  return <Counter name="Solid" />;
+}
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var xt={name:"sql",title:getTemplateName("templates.starter.sql","SQL Starter"),thumbnail:"assets/templates/sqlite.svg",activeEditor:"script",markup:{language:"html",content:`
+<div id="output">
+  <details open>
+    <summary>Tables</summary>
+    <div id="tables"></div>
+  </details>
+  <details open>
+    <summary>Result</summary>
+    <pre><code id="result"></code></pre>
+  </details>
+  <details open>
+    <summary>Result as objects</summary>
+    <pre><code id="obj-result"></code></pre>
+  </details>
 </div>
 
-<!-- toggle, checkbox, radio -->
-<div class="p-4">
-  <input type="checkbox" class="toggle" />
-  <input type="checkbox" class="toggle toggle-primary" />
-  <input type="checkbox" class="toggle toggle-secondary" />
-  <input type="checkbox" class="toggle toggle-accent" />
-  <br/>
-  <input type="checkbox" class="checkbox" />
-  <input type="checkbox" class="checkbox-primary checkbox" />
-  <input type="checkbox" class="checkbox-secondary checkbox" />
-  <input type="checkbox" class="checkbox-accent checkbox" />
-  <br/>
-  <input type="radio" name="radio" class="radio" />
-  <input type="radio" name="radio" class="radio-primary radio" />
-  <input type="radio" name="radio" class="radio-secondary radio" />
-  <input type="radio" name="radio" class="radio-accent radio" />
-</div>
+<script>
+  livecodes.sql.render('#tables');
 
-<!-- card -->
-<div class="card m-4 w-80 shadow-sm">
-  <figure>
-    <img src="{{ __livecodes_baseUrl__ }}assets/templates/daisyui-5.webp" />
-  </figure>
-  <div class="card-body">
-    <h2 class="card-title">DaisyUI 5.0</h2>
-    <p>Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus.</p>
-  </div>
-</div>
+  livecodes.sql.getResult().then((result) => {
+    console.log(result)
+    document.querySelector('#result').innerHTML =  JSON.stringify(result, null, 2);
+  }).catch(console.error);
 
-<!-- dropdown -->
-<details class="dropdown m-4">
-  <summary class="btn m-1">open/close dropdown</summary>
-  <ul class="dropdown-content menu z-[2] w-52 rounded-box bg-base-200 p-2">
-    <li><a>Item 1</a></li>
-    <li><a>Item 2</a></li>
-  </ul>
-</details>
 
-<!-- Open the modal using ID.showModal() method -->
-<button class="btn" onclick="my_modal_1.showModal()">open modal</button>
-<dialog id="my_modal_1" class="modal">
-  <form method="dialog" class="modal-box">
-    <p class="py-4">Press ESC key or click the button below to close</p>
-    <div class="modal-action">
-      <button class="btn">Close</button>
-    </div>
-  </form>
-</dialog>
+  livecodes.sql.getResultAsObjects().then((results) => {
+    results.forEach(console.table);
+    document.querySelector('#obj-result').innerHTML = JSON.stringify(results, null, 2);
+  }).catch(console.error);
+<\/script>
+`.trimStart()},style:{language:"css",content:`
+#output {
+  color: #3d3d3d;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
 
-<!-- steps -->
-<ul class="steps my-4 w-full">
-  <li class="step step-primary">Register</li>
-  <li class="step step-primary">Choose plan</li>
-  <li class="step">Purchase</li>
-  <li class="step">Receive Product</li>
-</ul>
+#output summary {
+  cursor: pointer;
+}
 
-<!-- chat bubble -->
-<div class="chat chat-start m-4">
-  <div class="avatar chat-image">
-    <div class="w-10 rounded-full">
-      <img src="{{ __livecodes_baseUrl__ }}assets/templates/daisy-profile-picture.webp" />
+#output table {
+  border: 1px solid #ddd;
+  border-collapse: separate;
+  border-radius: 4px;
+  border-spacing: 0;
+  font-size: 0.9em;
+  margin: 1em;
+  width: 95%;
+}
+
+#output th,
+#output td {
+  padding: 0.5em;
+}
+
+#output tr:nth-child(odd) {
+  background-color: #f2f2f2;
+}
+
+#output pre {
+  background-color: #fafafa;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-sizing: border-box;
+  display: inline-block;
+  margin: 1em;
+  min-width: 95%;
+  padding: 1em;
+}
+`.trimStart()},script:{language:"sql",content:`
+-- based on https://stackoverflow.com/q/7745609
+
+CREATE TABLE IF NOT EXISTS quotes (
+  id int NOT NULL,
+  rev int NOT NULL,
+  quote varchar(200) NOT NULL,
+  PRIMARY KEY (id, rev)
+);
+
+INSERT INTO quotes (id, rev, quote) VALUES
+  ('1', '1', 'Simplicity is the ultimate sophistication. \u2013 Leonardo da Vinci'),
+  ('2', '1', 'Change the world by being yourself. \u2013 Amy Poehler'),
+  ('1', '2', 'Every moment is a fresh beginning. \u2013 T.S Eliot'),
+  ('1', '3', 'Whatever you do, do it well. \u2013 Walt Disney');
+
+SELECT a.id, a.rev, a.quote
+FROM quotes a
+INNER JOIN (
+    SELECT id, MAX(rev) rev
+    FROM quotes
+    GROUP BY id
+) b ON a.id = b.id AND a.rev = b.rev;
+
+SELECT a.*
+FROM quotes a
+LEFT OUTER JOIN quotes b
+    ON a.id = b.id AND a.rev < b.rev
+WHERE b.id IS NULL;
+
+SELECT a.id, a.rev, a.quote
+  FROM (SELECT id, rev, quote,
+               ROW_NUMBER() OVER (PARTITION BY id ORDER BY rev DESC) rank
+          FROM quotes) a
+  WHERE a.rank = 1;
+`.trimStart()}};var wt={name:"stencil",title:getTemplateName("templates.starter.stencil","Stencil Starter"),thumbnail:"assets/templates/stencil.png",activeEditor:"script",markup:{language:"html",content:`<my-app title="Stencil"></my-app>
+`},style:{language:"css",content:""},script:{language:"stencil",content:`
+import { Component, Prop, h, State } from "@stencil/core";
+
+@Component({
+  tag: "my-app",
+  styles: \`
+    my-app,
+    button {
+      text-align: center;
+      font: 1em sans-serif;
+    }
+    .logo {
+      width: 150px;
+    }
+  \`,
+})
+export class App {
+  @Prop() title: string;
+  @State() count = 0;
+
+  increment = () => {
+    this.count += 1;
+  };
+
+  render() {
+    return (
+      <div class="container">
+        <h1>Hello, {this.title}!</h1>
+        <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/stencil.png" />
+        <p>You clicked {this.count} times.</p>
+        <button onClick={this.increment}>Click me</button>
+      </div>
+    );
+  }
+}
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var St={name:"svelte",title:getTemplateName("templates.starter.svelte","Svelte Starter"),thumbnail:"assets/templates/svelte.svg",activeEditor:"script",markup:{language:"svelte",content:`
+<script>
+import Counter from "./Component.svelte";
+<\/script>
+
+<Counter title="Svelte" />
+`.trimStart()},style:{language:"css",content:""},script:{language:"svelte",content:`
+<script>
+  let { title = "World" } = $props();
+  let counter = $state(0);
+  function increment() {
+    counter += 1;
+  }
+<\/script>
+
+<style>
+  .container,
+  .container button {
+    text-align: center;
+    font: 1em sans-serif;
+  }
+  .logo {
+    width: 150px;
+  }
+</style>
+
+<div class="container">
+  <h1>Hello, {title}!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/svelte.svg" />
+  <p>You clicked {counter} times.</p>
+  <button on:click={increment}>Click me</button>
+</div>
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var kt={name:"tailwindcss",title:getTemplateName("templates.starter.tailwindcss","Tailwind CSS Starter"),thumbnail:"assets/templates/tailwindcss.svg",activeEditor:"markup",markup:{language:"html",content:`
+<div class="relative grid min-h-screen grid-cols-[1fr_2.5rem_auto_2.5rem_1fr] grid-rows-[1fr_1px_auto_1px_1fr] bg-white [--pattern-fg:var(--color-gray-950)]/5 dark:bg-gray-950 dark:[--pattern-fg:var(--color-white)]/10">
+  <div class="col-start-3 row-start-3 flex max-w-lg flex-col bg-gray-100 p-2 dark:bg-white/10">
+    <div class="rounded-xl bg-white p-10 text-sm/7 text-gray-700 dark:bg-gray-950 dark:text-gray-300">
+      <img src="{{ __livecodes_baseUrl__ }}assets/templates/tailwind-play.svg" class="mb-11.5 h-6 dark:hidden" alt="Tailwind Play" />
+      <img src="{{ __livecodes_baseUrl__ }}assets/templates/tailwind-play-dark.svg" class="mb-11.5 h-6 not-dark:hidden" alt="Tailwind Play" />
+      <div class="space-y-6">
+        <p>A template based on <a href="https://play.tailwindcss.com/" class="text-cyan-600 hover:text-cyan-700" target="_blank">Tailwind CSS playground</a>, including support for things like:</p>
+        <ul class="space-y-3">
+          <li class="flex items-center">
+            <svg class="size-5.5 shrink-0" fill="none" stroke-linecap="square">
+              <circle cx="11" cy="11" r="11" class="fill-sky-400/25" />
+              <circle cx="11" cy="11" r="10.5" class="stroke-sky-400/25" />
+              <path d="M8 11.5L10.5 14L14 8" class="stroke-sky-800 dark:stroke-sky-300" />
+            </svg>
+            <p class="ml-3">
+              Customizing your theme with
+              <code class="font-mono font-medium text-gray-950 dark:text-white">@theme</code>
+            </p>
+          </li>
+          <li class="flex items-center">
+            <svg class="size-5.5 shrink-0" fill="none" stroke-linecap="square">
+              <circle cx="11" cy="11" r="11" class="fill-sky-400/25" />
+              <circle cx="11" cy="11" r="10.5" class="stroke-sky-400/25" />
+              <path d="M8 11.5L10.5 14L14 8" class="stroke-sky-800 dark:stroke-sky-300" />
+            </svg>
+            <p class="ml-3">
+              Adding custom utilities with
+              <code class="font-mono font-medium text-gray-950 dark:text-white">@utility</code>
+            </p>
+          </li>
+          <li class="flex items-center">
+            <svg class="size-5.5 shrink-0" fill="none" stroke-linecap="square">
+              <circle cx="11" cy="11" r="11" class="fill-sky-400/25" />
+              <circle cx="11" cy="11" r="10.5" class="stroke-sky-400/25" />
+              <path d="M8 11.5L10.5 14L14 8" class="stroke-sky-800 dark:stroke-sky-300" />
+            </svg>
+            <p class="ml-3">
+              Adding custom variants with
+              <code class="font-mono font-medium text-gray-950 dark:text-white">@variant</code>
+            </p>
+          </li>
+          <li class="flex items-center">
+            <svg class="size-5.5 shrink-0" fill="none" stroke-linecap="square">
+              <circle cx="11" cy="11" r="11" class="fill-sky-400/25" />
+              <circle cx="11" cy="11" r="10.5" class="stroke-sky-400/25" />
+              <path d="M8 11.5L10.5 14L14 8" class="stroke-sky-800 dark:stroke-sky-300" />
+            </svg>
+            <p class="ml-3">Code completion with instant preview</p>
+          </li>
+          <li class="flex items-center">
+            <svg class="size-5.5 shrink-0" fill="none" stroke-linecap="square">
+              <circle cx="11" cy="11" r="11" class="fill-sky-400/25" />
+              <circle cx="11" cy="11" r="10.5" class="stroke-sky-400/25" />
+              <path d="M8 11.5L10.5 14L14 8" class="stroke-sky-800 dark:stroke-sky-300" />
+            </svg>
+            <p class="ml-3">Viewing generated CSS code (in <code class="text-sm font-bold text-gray-900">Compiled</code> pane below)</p>
+          </li>
+        </ul>
+        <p>Perfect for learning how the framework works, prototyping a new idea, or creating a demo to share online.</p>
+      </div>
+      <hr class="my-6 w-full border-(--pattern-fg)" />
+      <p class="mb-3">Want to dig deeper into Tailwind?</p>
+      <p class="font-semibold">
+        <a href="https://tailwindcss.com/docs" class="text-gray-950 underline decoration-sky-400 underline-offset-3 hover:decoration-2 dark:text-white">Read the docs &rarr;</a>
+      </p>
     </div>
   </div>
-  <div class="chat-bubble">see all components <a class="link" target="_blank" href="https://daisyui.com/components">Here</a></div>
+  <div class="relative -right-px col-start-2 row-span-full row-start-1 border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed"></div>
+  <div class="relative -left-px col-start-4 row-span-full row-start-1 border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed"></div>
+  <div class="relative -bottom-px col-span-full col-start-1 row-start-2 h-px bg-(--pattern-fg)"></div>
+  <div class="relative -top-px col-span-full col-start-1 row-start-4 h-px bg-(--pattern-fg)"></div>
 </div>
 `.trimStart()},style:{language:"css",content:`
 @import "tailwindcss";
-@plugin "daisyui"{
-  themes: light --default, dark --prefersdark, abyss;
-}
-
-
-/**
-  A custom theme made with
-  https://daisyui.com/theme-generator/
-*/
 
-@plugin "daisyui/theme" {
-  name: "purplewind";
-  default: false;
-  prefersdark: false;
-  color-scheme: "light";
-  --color-base-100: oklch(96% 0.016 293.756);
-  --color-base-200: oklch(94% 0.029 294.588);
-  --color-base-300: oklch(89% 0.057 293.283);
-  --color-base-content: oklch(38% 0.189 293.745);
-  --color-primary: oklch(82% 0.12 346.018);
-  --color-primary-content: oklch(28% 0.109 3.907);
-  --color-secondary: oklch(82% 0.119 306.383);
-  --color-secondary-content: oklch(29% 0.149 302.717);
-  --color-accent: oklch(80% 0.105 251.813);
-  --color-accent-content: oklch(28% 0.091 267.935);
-  --color-neutral: oklch(38% 0.189 293.745);
-  --color-neutral-content: oklch(96% 0.016 293.756);
-  --color-info: oklch(54% 0.245 262.881);
-  --color-info-content: oklch(97% 0.014 254.604);
-  --color-success: oklch(60% 0.118 184.704);
-  --color-success-content: oklch(98% 0.014 180.72);
-  --color-warning: oklch(68% 0.162 75.834);
-  --color-warning-content: oklch(98% 0.026 102.212);
-  --color-error: oklch(58% 0.253 17.585);
-  --color-error-content: oklch(96% 0.015 12.422);
-  --radius-selector: 0.25rem;
-  --radius-field: 0.25rem;
-  --radius-box: 0.5rem;
-  --size-selector: 0.25rem;
-  --size-field: 0.25rem;
-  --border: 2px;
-  --depth: 1;
-  --noise: 1;
+@theme {
+  /* ... */
 }
-`.trimStart()},script:{language:"javascript",content:""},processors:["tailwindcss"]};var Ct={name:"java",title:getTemplateName("templates.starter.java","Java Starter"),thumbnail:"assets/templates/java.svg",activeEditor:"script",markup:{language:"html",content:`
+`.trimStart()},script:{language:"javascript",content:""},processors:["tailwindcss"]};var _t={name:"tcl",title:getTemplateName("templates.starter.tcl","Tcl Starter"),thumbnail:"assets/templates/tcl.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="name">World</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/java.svg" />
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/tcl.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button" disabled>Loading...</button>
 </div>
+
 <script>
-  // set initial input
-  livecodes.java.input = "-1";
+  // set input
+  livecodes.tcl.input = "-1";
 
-  addEventListener('load', async () => {
+  addEventListener("load", async () => {
     const button = document.querySelector("#counter-button");
-
     // wait till loaded
-    await livecodes.java.loaded;
+    await livecodes.tcl.loaded;
+    button.innerText = "Click me";
+    button.disabled = false;
+
+    button.onclick = async () => {
+      const {output, error} = await livecodes.tcl.run();
+    };
+  });
+<\/script>
+`.trimStart()},style:{language:"css",content:`
+.container,
+.container button {
+  text-align: center;
+  font: 1em sans-serif;
+}
+.logo {
+  width: 150px;
+}
+`.trimStart()},script:{language:"tcl",content:`
+set title "Tcl"
+::wacl::dom attr "#name" innerText $title
+
+set input [gets stdin]
+if {[info exists count]} {
+  incr count
+} else {
+  set count [expr $input + 1]
+}
+::wacl::dom attr "#counter" innerText $count
+puts $count
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var jt={name:"teal",title:getTemplateName("templates.starter.teal","Teal Starter"),thumbnail:"assets/templates/teal.png",activeEditor:"script",markup:{language:"html",content:`
+<div class="container">
+  <h1>Hello, <span id="title">World</span>!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/teal.png" />
+  <p id="counter">You clicked 0 times.</p>
+  <button id="counter-button">Click me</button>
+</div>
+`.trimStart()},style:{language:"css",content:`
+.container,
+.container button {
+  text-align: center;
+  font: 1em sans-serif;
+}
+.logo {
+  width: 150px;
+}
+`.trimStart()},script:{language:"teal",content:`
+global record Js
+  record global
+    record document
+      querySelector: function(self: document, string): Element
+    end
+  end
+end
+
+global record Element
+  innerHTML: string
+  addEventListener: function(self: Element, string, function): nil
+end
 
-    // get initial output
-    const initialOutput = livecodes.java.output;
-    update(initialOutput);
+global js: Js = require "js"
+global window = js.global
+global document = window.document
 
-    button.onclick = async () => {
-      button.disabled = true;
-      // run with new input
-      const {output, error, exitCode} = await livecodes.java.run(window.count);
-      update(output);
-    };
+global title = document:querySelector("#title")
+global button = document:querySelector("#counter-button")
+global counter_el = document:querySelector("#counter")
 
-    function update(output) {
-      const counter = document.querySelector("#counter");
-      const name = document.querySelector("#name");
+title.innerHTML = "Teal"
 
-      const [title, count] = output.split('\\n');
+global count = 0
+global function increment (current: integer): integer
+  return current + 1
+end
 
-      if (parseInt(count) !== NaN) {
-        window.count = count;
-        counter.innerText = window.count;
-      }
-      if (title) {
-        name.innerText = title;
-      }
-      button.innerText = "Click me";
-      button.disabled = false;
-    }
-  });
-<\/script>
+button:addEventListener("click", function()
+  count = increment(count)
+  counter_el.innerHTML = ("You clicked %d times."):format(count)
+end)
+`.trimStart()}};var Tt={name:"typescript",title:getTemplateName("templates.starter.typescript","TypeScript Starter"),thumbnail:"assets/templates/typescript.svg",activeEditor:"script",markup:{language:"html",content:`
+<div class="container">
+  <h1>Hello, <span id="title">World</span>!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/typescript.svg" />
+  <p>You clicked <span id="counter">0</span> times.</p>
+  <button id="counter-button">Click me</button>
+</div>
 `.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
@@ -3705,71 +3798,149 @@ function LoginForm({
 .logo {
   width: 150px;
 }
-`.trimStart()},script:{language:"java",content:`
-import java.io.BufferedReader;
-import java.io.IOException;
-import java.io.InputStreamReader;
+`.trimStart()},script:{language:"typescript",content:`
+class Counter {
+  private count: number;
+  constructor() {
+    this.count = 0;
+  }
+  increment() {
+    this.count += 1;
+  }
+  getValue() {
+    return this.count;
+  }
+}
 
-public class Main {
+const title = document.querySelector<HTMLElement>("#title")!;
+const count = document.querySelector<HTMLElement>("#counter")!;
+const button = document.querySelector<HTMLElement>("#counter-button")!;
 
-  public static void main(String[] args) throws IOException {
-    String title = "Java";
-    System.out.println(title);
+title.innerText = "TypeScript";
+const counter = new Counter();
+button.addEventListener(
+  "click",
+  () => {
+    counter.increment();
+    count.innerText = String(counter.getValue());
+  },
+  false
+);
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var Ct={name:"vue",title:getTemplateName("templates.starter.vue","Vue SFC Starter"),thumbnail:"assets/templates/vue.svg",activeEditor:"script",markup:{language:"vue",content:`
+<script setup lang="tsx">
+import Counter from './Component.vue';
+<\/script>
 
-    BufferedReader reader = new BufferedReader(
-      new InputStreamReader(System.in)
-    );
-    int count = Integer.parseInt(reader.readLine());
-    count += 1;
-    System.out.println(count);
+<template>
+  <Counter name="Vue" />
+</template>
+`.trimStart()},style:{language:"css",content:""},script:{language:"vue",content:`
+<script setup lang="tsx">
+  import { ref } from 'vue';
+
+  interface Props {
+    name?: string
+  }
+  const props = defineProps<Props>();
+  const count = ref(0);
+  const align = 'center';
+
+  // define inline component
+  function Greeting(props: Props) {
+    return <h1>Hello, { props.name || 'World' }!</h1>
+  }
+<\/script>
+
+<template>
+  <div class="container">
+    <Greeting :name="props.name" />
+    <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/vue.svg" />
+    <p>You clicked {{ count }} times.</p>
+    <button @click="count++">Click me</button>
+  </div>
+</template>
+
+<style scoped>
+  .container,
+  .container button {
+    text-align: v-bind("align");
+    font: 1em sans-serif;
+  }
+  .logo {
+    width: 150px;
   }
+</style>
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var Ut={name:"vue2",title:getTemplateName("templates.starter.vue2","Vue 2 Starter"),thumbnail:"assets/templates/vue.svg",activeEditor:"script",markup:{language:"html",content:`
+<div id="app">
+  <h1>Hello, Vue!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/vue.svg" />
+  <p>You clicked {{ counter }} times.</p>
+  <button @click="increment()">Click me</button>
+</div>
+`.trimStart()},style:{language:"css",content:`
+#app,
+#app button {
+  text-align: center;
+  font: 1em sans-serif;
+}
+.logo {
+  width: 150px;
 }
-`.trimStart()}};var Ut={name:"csharp-wasm",title:"C# (Wasm) Starter",thumbnail:"assets/templates/csharp.svg",activeEditor:"script",markup:{language:"html",content:`
+`.trimStart()},script:{language:"javascript",content:`
+new Vue({
+  el: "#app",
+  data: {
+    counter: 0,
+  },
+  methods: {
+    increment() {
+      this.counter += 1;
+    },
+  },
+});
+`.trimStart()},stylesheets:[],scripts:["{{ __CDN_URL__ }}vue@2"],cssPreset:"",imports:{},types:{}};var Et={name:"wat",title:getTemplateName("templates.starter.wat","WebAssembly Text Starter"),thumbnail:"assets/templates/webassembly.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
-  <h1>Hello, <span id="name">World</span>!</h1>
-  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/csharp.svg" />
+  <h1>Hello, <span id="title">World</span>!</h1>
+  <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/webassembly.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
-  <button id="counter-button" disabled>Loading...</button>
+  <button id="counter-button">Click me</button>
 </div>
 
 <script>
-  // set initial input
-  livecodes.csharp.input = "-1";
-
-  addEventListener('load', async () => {
-    const button = document.querySelector("#counter-button");
-
-    // wait till loaded
-    await livecodes.csharp.loaded;
-
-    // get initial output
-    const initialOutput = livecodes.csharp.output;
-    update(initialOutput);
-
-    button.onclick = async () => {
-      button.disabled = true;
-      // run with new input
-      const {output, error, exitCode} = await livecodes.csharp.run(window.count);
-      update(output);
+  (async () => {
+    const importObject = {
+      title: {
+        change: changeTitle,
+      },
     };
 
-    function update(output) {
-      const counter = document.querySelector("#counter");
-      const name = document.querySelector("#name");
-
-      const [title, count] = output.split('\\n');
+    // The \`loadWasm\` method of \`livecodes\` global object
+    // optionally takes an import object and
+    // returns a promise which resolves to an object
+    // exposing the compiled wasm module and wasm binary
+    const { wasmModule, binary } = await livecodes.loadWasm(importObject);
+    const { memory, setTitle, increment } = wasmModule.exports;
 
-      if (parseInt(count) !== NaN) {
-        window.count = count;
-        counter.innerText = window.count;
-      }
-      if (title) {
-        name.innerText = title;
-      }
-      button.innerText = "Click me";
-      button.disabled = false;
+    function changeTitle(offset, length) {
+      const bytes = new Uint8Array(memory.buffer, offset, length);
+      const title = new TextDecoder("utf8").decode(bytes);
+      document.querySelector("#title").innerText = title;
     }
-  });
+    setTitle();
+
+    const counter = document.querySelector("#counter");
+    const button = document.querySelector("#counter-button");
+    let count = 0;
+
+    button.addEventListener(
+      "click",
+      () => {
+        count = increment(count);
+        counter.innerText = count;
+      },
+      false
+    );
+  })();
 <\/script>
 `.trimStart()},style:{language:"css",content:`
 .container,
@@ -3780,20 +3951,19 @@ public class Main {
 .logo {
   width: 150px;
 }
-`.trimStart()},script:{language:"csharp-wasm",content:`
-using System;
-
-class Program
-{
-    static void Main()
-    {
-        string title = "C#";
-        Console.WriteLine(title);
-
-        string input = Console.ReadLine();
-        int count = int.Parse(input);
-        count += 1;
-        Console.WriteLine(count);
-    }
-}
-`.trimStart()}};var co=[b,it,z,q,L,G,d,U,Y,O,bt,D,j,A,jt,Tt,v,g,N,F,w,h,S,rt,at,_t,kt,V,y,k,ct,st,nt,M,P,R,$,E,lt,H,ut,x,C,ht,Z,Q,Ct,Ut,T,_,gt,mt,pt,K,W,J,dt,St,tt,B,u,X,I,ft,et,f,ot];export{co as starterTemplates};
+`.trimStart()},script:{language:"wat",content:`
+(module
+  (import "title" "change" (func $changeTitle (param i32) (param i32)))
+  (export "memory" (memory $0))
+  (export "setTitle" (func $setTitle))
+  (export "increment" (func $increment))
+  (memory $0 1)
+  (data 0 (i32.const 0) "WebAssembly Text")
+  (func $setTitle
+    (call $changeTitle (i32.const 0) (i32.const 16))
+  )
+  (func $increment (param $0 i32) (result i32)
+    (i32.add (local.get $0) (i32.const 1))
+  )
+)
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var uo=[b,I,Tt,mt,pt,Ct,d,rt,St,yt,G,wt,K,kt,vt,U,v,g,gt,J,O,h,z,D,A,C,et,Ut,S,V,y,x,H,ut,dt,Q,it,lt,ct,ht,bt,R,N,st,ot,_,j,W,T,tt,X,F,jt,q,Y,ft,k,w,P,_t,Z,u,Et,xt,nt,at,f,E];export{uo as starterTemplates};
diff --git a/package-lock.json b/package-lock.json
index 74f1dc6bee..52fe28cb88 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -58,6 +58,8 @@
         "comlink": "4.4.1",
         "conventional-changelog": "3.1.25",
         "cross-env": "7.0.3",
+        "decompress": "4.2.1",
+        "decompress-tarbz2": "4.1.1",
         "dts-bundle": "0.7.3",
         "esbuild": "0.20.2",
         "esbuild-plugin-minify-html": "0.1.2",
@@ -5360,6 +5362,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/basic-auth": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
@@ -5403,6 +5426,17 @@
         "file-uri-to-path": "1.0.0"
       }
     },
+    "node_modules/bl": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.3.tgz",
+      "integrity": "sha512-pvcNpa0UU69UT341rO6AYy4FVAIkUHuZXRIWbq+zHnsVcRzDDjIAhGuuYoi0d//cwIwtt4pkpKycWEfjdV+vww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readable-stream": "^2.3.5",
+        "safe-buffer": "^5.1.1"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -5494,6 +5528,66 @@
         "node-int64": "^0.4.0"
       }
     },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "node_modules/buffer-alloc": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/buffer-alloc/-/buffer-alloc-1.2.0.tgz",
+      "integrity": "sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-alloc-unsafe": "^1.1.0",
+        "buffer-fill": "^1.0.0"
+      }
+    },
+    "node_modules/buffer-alloc-unsafe": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz",
+      "integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/buffer-fill": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz",
+      "integrity": "sha512-T7zexNBwiiaCOGDg9xNX9PBmjrubblRkENuptryuI64URkXDFum9il/JGL8Lm8wYfAXpredVXXZz7eMHilimiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/buffer-from": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
@@ -5800,16 +5894,47 @@
       }
     },
     "node_modules/call-bind": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
-      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
         "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
         "get-intrinsic": "^1.2.4",
-        "set-function-length": "^1.2.1"
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -7146,6 +7271,196 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/decompress": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/decompress/-/decompress-4.2.1.tgz",
+      "integrity": "sha512-e48kc2IjU+2Zw8cTb6VZcJQ3lgVbS4uuB1TfCHbiZIP/haNXm+SVyhu+87jts5/3ROpd82GSVCoNs/z8l4ZOaQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "decompress-tar": "^4.0.0",
+        "decompress-tarbz2": "^4.0.0",
+        "decompress-targz": "^4.0.0",
+        "decompress-unzip": "^4.0.1",
+        "graceful-fs": "^4.1.10",
+        "make-dir": "^1.0.0",
+        "pify": "^2.3.0",
+        "strip-dirs": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/decompress-tar": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/decompress-tar/-/decompress-tar-4.1.1.tgz",
+      "integrity": "sha512-JdJMaCrGpB5fESVyxwpCx4Jdj2AagLmv3y58Qy4GE6HMVjWz1FeVQk1Ct4Kye7PftcdOo/7U7UKzYBJgqnGeUQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "file-type": "^5.2.0",
+        "is-stream": "^1.1.0",
+        "tar-stream": "^1.5.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/decompress-tar/node_modules/is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/decompress-tarbz2": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/decompress-tarbz2/-/decompress-tarbz2-4.1.1.tgz",
+      "integrity": "sha512-s88xLzf1r81ICXLAVQVzaN6ZmX4A6U4z2nMbOwobxkLoIIfjVMBg7TeguTUXkKeXni795B6y5rnvDw7rxhAq9A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "decompress-tar": "^4.1.0",
+        "file-type": "^6.1.0",
+        "is-stream": "^1.1.0",
+        "seek-bzip": "^1.0.5",
+        "unbzip2-stream": "^1.0.9"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/decompress-tarbz2/node_modules/file-type": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/file-type/-/file-type-6.2.0.tgz",
+      "integrity": "sha512-YPcTBDV+2Tm0VqjybVd32MHdlEGAtuxS3VAYsumFokDSMG+ROT5wawGlnHDoz7bfMcMDt9hxuXvXwoKUx2fkOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/decompress-tarbz2/node_modules/is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/decompress-targz": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/decompress-targz/-/decompress-targz-4.1.1.tgz",
+      "integrity": "sha512-4z81Znfr6chWnRDNfFNqLwPvm4db3WuZkqV+UgXQzSngG3CEKdBkw5jrv3axjjL96glyiiKjsxJG3X6WBZwX3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "decompress-tar": "^4.1.1",
+        "file-type": "^5.2.0",
+        "is-stream": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/decompress-targz/node_modules/is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/decompress-unzip": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/decompress-unzip/-/decompress-unzip-4.0.1.tgz",
+      "integrity": "sha512-1fqeluvxgnn86MOh66u8FjbtJpAFv5wgCT9Iw8rcBqQcCo5tO8eiJw7NNTrvt9n4CRBVq7CstiS922oPgyGLrw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "file-type": "^3.8.0",
+        "get-stream": "^2.2.0",
+        "pify": "^2.3.0",
+        "yauzl": "^2.4.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/decompress-unzip/node_modules/file-type": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/file-type/-/file-type-3.9.0.tgz",
+      "integrity": "sha512-RLoqTXE8/vPmMuTI88DAzhMYC99I8BWv7zYP4A1puo5HIjEJ5EX48ighy4ZyKMG9EDXxBgW6e++cn7d1xuFghA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/decompress-unzip/node_modules/get-stream": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-2.3.1.tgz",
+      "integrity": "sha512-AUGhbbemXxrZJRD5cDvKtQxLuYaIbNtDTK8YqupCI393Q2KSTreEsLUN3ZxAWFGiKTzL6nKuzfcIvieflUX9qA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4.0.1",
+        "pinkie-promise": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/decompress-unzip/node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/decompress/node_modules/make-dir": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
+      "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/decompress/node_modules/make-dir/node_modules/pify": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+      "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/decompress/node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/dedent": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.5.3.tgz",
@@ -7484,6 +7799,21 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -7534,6 +7864,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/end-of-stream": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -7616,13 +7956,11 @@
       }
     },
     "node_modules/es-define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
-      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
       "dev": true,
-      "dependencies": {
-        "get-intrinsic": "^1.2.4"
-      },
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       }
@@ -7643,10 +7981,11 @@
       "dev": true
     },
     "node_modules/es-object-atoms": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
-      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0"
       },
@@ -8929,6 +9268,16 @@
         "bser": "2.1.1"
       }
     },
+    "node_modules/fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pend": "~1.2.0"
+      }
+    },
     "node_modules/figures": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
@@ -8956,6 +9305,16 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-type": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/file-type/-/file-type-5.2.0.tgz",
+      "integrity": "sha512-Iq1nJ6D2+yIO4c8HHg4fyVb8mAJieo1Oloy1mLLaB2PvezNedhBVm+QU7g0qM42aiMbRXTxKKwGD17rjKNJYVQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -9158,12 +9517,19 @@
       }
     },
     "node_modules/for-each": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
-      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "is-callable": "^1.1.3"
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/for-in": {
@@ -9328,6 +9694,13 @@
       ],
       "peer": true
     },
+    "node_modules/fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/fs-extra": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
@@ -9415,16 +9788,22 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
-      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
         "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
         "function-bind": "^1.1.2",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3",
-        "hasown": "^2.0.0"
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -9472,6 +9851,20 @@
         "node": ">=10"
       }
     },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/get-stdin": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-9.0.0.tgz",
@@ -9808,12 +10201,13 @@
       "dev": true
     },
     "node_modules/gopd": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
-      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
       "dev": true,
-      "dependencies": {
-        "get-intrinsic": "^1.1.3"
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -9918,10 +10312,11 @@
       }
     },
     "node_modules/has-symbols": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -10186,6 +10581,27 @@
       "resolved": "https://registry.npmjs.org/idb/-/idb-3.0.2.tgz",
       "integrity": "sha512-+FLa/0sTXqyux0o6C+i2lOR0VoS60LU/jzUo5xjfY6+7sEEgy4Gz1O7yFBXvjd7N0NyIGWIRg8DcQSLEG+VSPw=="
     },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -10571,6 +10987,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-natural-number": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-natural-number/-/is-natural-number-4.0.1.tgz",
+      "integrity": "sha512-Y4LTamMe0DDQIIAlaer9eKebAlDSV6huy+TWhJVPlzZh2o4tRP5SQWFlLn5N0To4mDD22/qdOq+veo1cSISLgQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-negative-zero": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
@@ -10737,12 +11160,13 @@
       }
     },
     "node_modules/is-typed-array": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz",
-      "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==",
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "which-typed-array": "^1.1.14"
+        "which-typed-array": "^1.1.16"
       },
       "engines": {
         "node": ">= 0.4"
@@ -13809,6 +14233,16 @@
         "node": ">= 12"
       }
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/mathml-tag-names": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
@@ -15550,6 +15984,13 @@
         "through": "~2.3"
       }
     },
+    "node_modules/pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -17017,6 +17458,20 @@
         "node": ">=v12.22.7"
       }
     },
+    "node_modules/seek-bzip": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/seek-bzip/-/seek-bzip-1.0.6.tgz",
+      "integrity": "sha512-e1QtP3YL5tWww8uKaOCQ18UxIT2laNBXHjV/S2WYCiK4udiv8lkG89KRIoCjUagnAmCBurjF4zEVX2ByBbnCjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^2.8.1"
+      },
+      "bin": {
+        "seek-bunzip": "bin/seek-bunzip",
+        "seek-table": "bin/seek-bzip-table"
+      }
+    },
     "node_modules/selenium-webdriver": {
       "version": "4.0.0-rc-1",
       "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-4.0.0-rc-1.tgz",
@@ -17924,6 +18379,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/strip-dirs": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/strip-dirs/-/strip-dirs-2.1.0.tgz",
+      "integrity": "sha512-JOCxOeKLm2CAS73y/U4ZeZPTkE+gNVCzKt7Eox84Iej1LT/2pTWYpZKJuxwQpvX1LiZb1xokNR7RLfuBAa7T3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-natural-number": "^4.0.1"
+      }
+    },
     "node_modules/strip-final-newline": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
@@ -18605,6 +19070,25 @@
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "dev": true
     },
+    "node_modules/tar-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.6.2.tgz",
+      "integrity": "sha512-rzS0heiNf8Xn7/mpdSVVSMAWAoy9bfb1WOTYC78Z0UQKeKa/CWS8FOq0lKGNa8DWKAn9gxjCvMLYc5PGXYlK2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bl": "^1.0.0",
+        "buffer-alloc": "^1.2.0",
+        "end-of-stream": "^1.0.0",
+        "fs-constants": "^1.0.0",
+        "readable-stream": "^2.3.0",
+        "to-buffer": "^1.1.1",
+        "xtend": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/teeny-request": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/teeny-request/-/teeny-request-7.1.1.tgz",
@@ -18692,6 +19176,49 @@
       "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==",
       "dev": true
     },
+    "node_modules/to-buffer": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/to-buffer/-/to-buffer-1.2.1.tgz",
+      "integrity": "sha512-tB82LpAIWjhLYbqjx3X4zEeHN6M8CiuOEy2JY8SEQVdYRe3CCHOFaqrBW1doLDrfpWhplcW7BL+bO3/6S3pcDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "isarray": "^2.0.5",
+        "safe-buffer": "^5.2.1",
+        "typed-array-buffer": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/to-buffer/node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/to-buffer/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -19009,14 +19536,15 @@
       }
     },
     "node_modules/typed-array-buffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz",
-      "integrity": "sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bound": "^1.0.3",
         "es-errors": "^1.3.0",
-        "is-typed-array": "^1.1.13"
+        "is-typed-array": "^1.1.14"
       },
       "engines": {
         "node": ">= 0.4"
@@ -19201,6 +19729,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/unbzip2-stream": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz",
+      "integrity": "sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer": "^5.2.1",
+        "through": "^2.3.8"
+      }
+    },
     "node_modules/undefsafe": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
@@ -19604,15 +20143,18 @@
       "peer": true
     },
     "node_modules/which-typed-array": {
-      "version": "1.1.15",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
-      "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
+      "integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.7",
-        "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
         "has-tostringtag": "^1.0.2"
       },
       "engines": {
@@ -19792,6 +20334,17 @@
         "node": ">=10"
       }
     },
+    "node_modules/yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    },
     "node_modules/yjs": {
       "version": "13.5.40",
       "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.5.40.tgz",
@@ -23760,6 +24313,12 @@
         }
       }
     },
+    "base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "dev": true
+    },
     "basic-auth": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
@@ -23797,6 +24356,16 @@
         "file-uri-to-path": "1.0.0"
       }
     },
+    "bl": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.3.tgz",
+      "integrity": "sha512-pvcNpa0UU69UT341rO6AYy4FVAIkUHuZXRIWbq+zHnsVcRzDDjIAhGuuYoi0d//cwIwtt4pkpKycWEfjdV+vww==",
+      "dev": true,
+      "requires": {
+        "readable-stream": "^2.3.5",
+        "safe-buffer": "^5.1.1"
+      }
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -23861,6 +24430,44 @@
         "node-int64": "^0.4.0"
       }
     },
+    "buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "dev": true,
+      "requires": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "buffer-alloc": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/buffer-alloc/-/buffer-alloc-1.2.0.tgz",
+      "integrity": "sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==",
+      "dev": true,
+      "requires": {
+        "buffer-alloc-unsafe": "^1.1.0",
+        "buffer-fill": "^1.0.0"
+      }
+    },
+    "buffer-alloc-unsafe": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz",
+      "integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==",
+      "dev": true
+    },
+    "buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "dev": true
+    },
+    "buffer-fill": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz",
+      "integrity": "sha512-T7zexNBwiiaCOGDg9xNX9PBmjrubblRkENuptryuI64URkXDFum9il/JGL8Lm8wYfAXpredVXXZz7eMHilimiQ==",
+      "dev": true
+    },
     "buffer-from": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
@@ -24092,16 +24699,35 @@
       }
     },
     "call-bind": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
-      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
       "dev": true,
       "requires": {
+        "call-bind-apply-helpers": "^1.0.0",
         "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
         "get-intrinsic": "^1.2.4",
-        "set-function-length": "^1.2.1"
+        "set-function-length": "^1.2.2"
+      }
+    },
+    "call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "requires": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      }
+    },
+    "call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "requires": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
       }
     },
     "callsites": {
@@ -25128,6 +25754,148 @@
       "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
       "dev": true
     },
+    "decompress": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/decompress/-/decompress-4.2.1.tgz",
+      "integrity": "sha512-e48kc2IjU+2Zw8cTb6VZcJQ3lgVbS4uuB1TfCHbiZIP/haNXm+SVyhu+87jts5/3ROpd82GSVCoNs/z8l4ZOaQ==",
+      "dev": true,
+      "requires": {
+        "decompress-tar": "^4.0.0",
+        "decompress-tarbz2": "^4.0.0",
+        "decompress-targz": "^4.0.0",
+        "decompress-unzip": "^4.0.1",
+        "graceful-fs": "^4.1.10",
+        "make-dir": "^1.0.0",
+        "pify": "^2.3.0",
+        "strip-dirs": "^2.0.0"
+      },
+      "dependencies": {
+        "make-dir": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
+          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
+          "dev": true,
+          "requires": {
+            "pify": "^3.0.0"
+          },
+          "dependencies": {
+            "pify": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+              "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
+              "dev": true
+            }
+          }
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+          "dev": true
+        }
+      }
+    },
+    "decompress-tar": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/decompress-tar/-/decompress-tar-4.1.1.tgz",
+      "integrity": "sha512-JdJMaCrGpB5fESVyxwpCx4Jdj2AagLmv3y58Qy4GE6HMVjWz1FeVQk1Ct4Kye7PftcdOo/7U7UKzYBJgqnGeUQ==",
+      "dev": true,
+      "requires": {
+        "file-type": "^5.2.0",
+        "is-stream": "^1.1.0",
+        "tar-stream": "^1.5.2"
+      },
+      "dependencies": {
+        "is-stream": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+          "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
+          "dev": true
+        }
+      }
+    },
+    "decompress-tarbz2": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/decompress-tarbz2/-/decompress-tarbz2-4.1.1.tgz",
+      "integrity": "sha512-s88xLzf1r81ICXLAVQVzaN6ZmX4A6U4z2nMbOwobxkLoIIfjVMBg7TeguTUXkKeXni795B6y5rnvDw7rxhAq9A==",
+      "dev": true,
+      "requires": {
+        "decompress-tar": "^4.1.0",
+        "file-type": "^6.1.0",
+        "is-stream": "^1.1.0",
+        "seek-bzip": "^1.0.5",
+        "unbzip2-stream": "^1.0.9"
+      },
+      "dependencies": {
+        "file-type": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/file-type/-/file-type-6.2.0.tgz",
+          "integrity": "sha512-YPcTBDV+2Tm0VqjybVd32MHdlEGAtuxS3VAYsumFokDSMG+ROT5wawGlnHDoz7bfMcMDt9hxuXvXwoKUx2fkOg==",
+          "dev": true
+        },
+        "is-stream": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+          "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
+          "dev": true
+        }
+      }
+    },
+    "decompress-targz": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/decompress-targz/-/decompress-targz-4.1.1.tgz",
+      "integrity": "sha512-4z81Znfr6chWnRDNfFNqLwPvm4db3WuZkqV+UgXQzSngG3CEKdBkw5jrv3axjjL96glyiiKjsxJG3X6WBZwX3w==",
+      "dev": true,
+      "requires": {
+        "decompress-tar": "^4.1.1",
+        "file-type": "^5.2.0",
+        "is-stream": "^1.1.0"
+      },
+      "dependencies": {
+        "is-stream": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+          "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
+          "dev": true
+        }
+      }
+    },
+    "decompress-unzip": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/decompress-unzip/-/decompress-unzip-4.0.1.tgz",
+      "integrity": "sha512-1fqeluvxgnn86MOh66u8FjbtJpAFv5wgCT9Iw8rcBqQcCo5tO8eiJw7NNTrvt9n4CRBVq7CstiS922oPgyGLrw==",
+      "dev": true,
+      "requires": {
+        "file-type": "^3.8.0",
+        "get-stream": "^2.2.0",
+        "pify": "^2.3.0",
+        "yauzl": "^2.4.2"
+      },
+      "dependencies": {
+        "file-type": {
+          "version": "3.9.0",
+          "resolved": "https://registry.npmjs.org/file-type/-/file-type-3.9.0.tgz",
+          "integrity": "sha512-RLoqTXE8/vPmMuTI88DAzhMYC99I8BWv7zYP4A1puo5HIjEJ5EX48ighy4ZyKMG9EDXxBgW6e++cn7d1xuFghA==",
+          "dev": true
+        },
+        "get-stream": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-2.3.1.tgz",
+          "integrity": "sha512-AUGhbbemXxrZJRD5cDvKtQxLuYaIbNtDTK8YqupCI393Q2KSTreEsLUN3ZxAWFGiKTzL6nKuzfcIvieflUX9qA==",
+          "dev": true,
+          "requires": {
+            "object-assign": "^4.0.1",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+          "dev": true
+        }
+      }
+    },
     "dedent": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.5.3.tgz",
@@ -25382,6 +26150,17 @@
         }
       }
     },
+    "dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "requires": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      }
+    },
     "duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -25423,6 +26202,15 @@
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
       "dev": true
     },
+    "end-of-stream": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+      "dev": true,
+      "requires": {
+        "once": "^1.4.0"
+      }
+    },
     "entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -25493,13 +26281,10 @@
       }
     },
     "es-define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
-      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
-      "dev": true,
-      "requires": {
-        "get-intrinsic": "^1.2.4"
-      }
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true
     },
     "es-errors": {
       "version": "1.3.0",
@@ -25514,9 +26299,9 @@
       "dev": true
     },
     "es-object-atoms": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
-      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
       "dev": true,
       "requires": {
         "es-errors": "^1.3.0"
@@ -26485,6 +27270,15 @@
         "bser": "2.1.1"
       }
     },
+    "fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
+      "dev": true,
+      "requires": {
+        "pend": "~1.2.0"
+      }
+    },
     "figures": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
@@ -26503,6 +27297,12 @@
         "flat-cache": "^3.0.4"
       }
     },
+    "file-type": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/file-type/-/file-type-5.2.0.tgz",
+      "integrity": "sha512-Iq1nJ6D2+yIO4c8HHg4fyVb8mAJieo1Oloy1mLLaB2PvezNedhBVm+QU7g0qM42aiMbRXTxKKwGD17rjKNJYVQ==",
+      "dev": true
+    },
     "file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -26662,12 +27462,12 @@
       "dev": true
     },
     "for-each": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
-      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
       "dev": true,
       "requires": {
-        "is-callable": "^1.1.3"
+        "is-callable": "^1.2.7"
       }
     },
     "for-in": {
@@ -26780,6 +27580,12 @@
       "dev": true,
       "peer": true
     },
+    "fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "dev": true
+    },
     "fs-extra": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
@@ -26839,16 +27645,21 @@
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
     },
     "get-intrinsic": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
-      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
       "dev": true,
       "requires": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
         "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
         "function-bind": "^1.1.2",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3",
-        "hasown": "^2.0.0"
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
       }
     },
     "get-package-type": {
@@ -26880,6 +27691,16 @@
         }
       }
     },
+    "get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "requires": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      }
+    },
     "get-stdin": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-9.0.0.tgz",
@@ -27125,13 +27946,10 @@
       "dev": true
     },
     "gopd": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
-      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dev": true,
-      "requires": {
-        "get-intrinsic": "^1.1.3"
-      }
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true
     },
     "graceful-fs": {
       "version": "4.2.11",
@@ -27200,9 +28018,9 @@
       "dev": true
     },
     "has-symbols": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
       "dev": true
     },
     "has-tostringtag": {
@@ -27396,6 +28214,12 @@
       "resolved": "https://registry.npmjs.org/idb/-/idb-3.0.2.tgz",
       "integrity": "sha512-+FLa/0sTXqyux0o6C+i2lOR0VoS60LU/jzUo5xjfY6+7sEEgy4Gz1O7yFBXvjd7N0NyIGWIRg8DcQSLEG+VSPw=="
     },
+    "ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "dev": true
+    },
     "ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -27673,6 +28497,12 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-natural-number": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-natural-number/-/is-natural-number-4.0.1.tgz",
+      "integrity": "sha512-Y4LTamMe0DDQIIAlaer9eKebAlDSV6huy+TWhJVPlzZh2o4tRP5SQWFlLn5N0To4mDD22/qdOq+veo1cSISLgQ==",
+      "dev": true
+    },
     "is-negative-zero": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
@@ -27779,12 +28609,12 @@
       }
     },
     "is-typed-array": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz",
-      "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==",
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
       "dev": true,
       "requires": {
-        "which-typed-array": "^1.1.14"
+        "which-typed-array": "^1.1.16"
       }
     },
     "is-typedarray": {
@@ -30131,6 +30961,12 @@
       "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==",
       "dev": true
     },
+    "math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true
+    },
     "mathml-tag-names": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
@@ -31435,6 +32271,12 @@
         "through": "~2.3"
       }
     },
+    "pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
+      "dev": true
+    },
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -32480,6 +33322,15 @@
         "xmlchars": "^2.2.0"
       }
     },
+    "seek-bzip": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/seek-bzip/-/seek-bzip-1.0.6.tgz",
+      "integrity": "sha512-e1QtP3YL5tWww8uKaOCQ18UxIT2laNBXHjV/S2WYCiK4udiv8lkG89KRIoCjUagnAmCBurjF4zEVX2ByBbnCjQ==",
+      "dev": true,
+      "requires": {
+        "commander": "^2.8.1"
+      }
+    },
     "selenium-webdriver": {
       "version": "4.0.0-rc-1",
       "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-4.0.0-rc-1.tgz",
@@ -33217,6 +34068,15 @@
       "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
       "dev": true
     },
+    "strip-dirs": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/strip-dirs/-/strip-dirs-2.1.0.tgz",
+      "integrity": "sha512-JOCxOeKLm2CAS73y/U4ZeZPTkE+gNVCzKt7Eox84Iej1LT/2pTWYpZKJuxwQpvX1LiZb1xokNR7RLfuBAa7T3g==",
+      "dev": true,
+      "requires": {
+        "is-natural-number": "^4.0.1"
+      }
+    },
     "strip-final-newline": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
@@ -33736,6 +34596,21 @@
         }
       }
     },
+    "tar-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.6.2.tgz",
+      "integrity": "sha512-rzS0heiNf8Xn7/mpdSVVSMAWAoy9bfb1WOTYC78Z0UQKeKa/CWS8FOq0lKGNa8DWKAn9gxjCvMLYc5PGXYlK2A==",
+      "dev": true,
+      "requires": {
+        "bl": "^1.0.0",
+        "buffer-alloc": "^1.2.0",
+        "end-of-stream": "^1.0.0",
+        "fs-constants": "^1.0.0",
+        "readable-stream": "^2.3.0",
+        "to-buffer": "^1.1.1",
+        "xtend": "^4.0.0"
+      }
+    },
     "teeny-request": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/teeny-request/-/teeny-request-7.1.1.tgz",
@@ -33810,6 +34685,31 @@
       "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==",
       "dev": true
     },
+    "to-buffer": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/to-buffer/-/to-buffer-1.2.1.tgz",
+      "integrity": "sha512-tB82LpAIWjhLYbqjx3X4zEeHN6M8CiuOEy2JY8SEQVdYRe3CCHOFaqrBW1doLDrfpWhplcW7BL+bO3/6S3pcDQ==",
+      "dev": true,
+      "requires": {
+        "isarray": "^2.0.5",
+        "safe-buffer": "^5.2.1",
+        "typed-array-buffer": "^1.0.3"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+          "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+          "dev": true
+        },
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+          "dev": true
+        }
+      }
+    },
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -34021,14 +34921,14 @@
       "dev": true
     },
     "typed-array-buffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz",
-      "integrity": "sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.7",
+        "call-bound": "^1.0.3",
         "es-errors": "^1.3.0",
-        "is-typed-array": "^1.1.13"
+        "is-typed-array": "^1.1.14"
       }
     },
     "typed-array-byte-length": {
@@ -34158,6 +35058,16 @@
         "which-boxed-primitive": "^1.0.2"
       }
     },
+    "unbzip2-stream": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz",
+      "integrity": "sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==",
+      "dev": true,
+      "requires": {
+        "buffer": "^5.2.1",
+        "through": "^2.3.8"
+      }
+    },
     "undefsafe": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
@@ -34477,15 +35387,17 @@
       "peer": true
     },
     "which-typed-array": {
-      "version": "1.1.15",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
-      "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
+      "integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
       "dev": true,
       "requires": {
         "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.7",
-        "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
         "has-tostringtag": "^1.0.2"
       }
     },
@@ -34608,6 +35520,16 @@
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
       "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="
     },
+    "yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
+      "dev": true,
+      "requires": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    },
     "yjs": {
       "version": "13.5.40",
       "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.5.40.tgz",
diff --git a/package.json b/package.json
index 3ba5a73613..e40a4ce3c1 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,8 @@
     "build:docs": "cd docs && npm run build",
     "build:storybook": "cd storybook && npm run build",
     "copy:assets": "recursive-delete build/livecodes/assets && mkdirp build/livecodes/assets && recursive-copy src/livecodes/assets build/livecodes/assets",
+    "copy:modules": "recursive-delete build/modules && mkdirp .cache/modules && mkdirp build/modules && recursive-copy .cache/modules build/modules",
+    "download-modules": "node ./scripts/download-modules.js",
     "typedocs": "run-s typedocs:*",
     "typedocs:livecodes": "typedoc src/livecodes/main.ts src/livecodes/app.ts src/livecodes/embed.ts src/livecodes/_modules.ts --out build/typedocs/livecodes --exclude **/*.spec.ts --excludeExternals",
     "typedocs:sdk": "typedoc src/sdk/livecodes.ts --out build/typedocs/sdk --exclude **/*.spec.ts --excludeExternals",
@@ -119,6 +121,8 @@
     "comlink": "4.4.1",
     "conventional-changelog": "3.1.25",
     "cross-env": "7.0.3",
+    "decompress": "4.2.1",
+    "decompress-tarbz2": "4.1.1",
     "dts-bundle": "0.7.3",
     "esbuild": "0.20.2",
     "esbuild-plugin-minify-html": "0.1.2",
@@ -156,15 +160,32 @@
     "singleQuote": true,
     "trailingComma": "all",
     "printWidth": 100,
-    "plugins": ["prettier-plugin-organize-imports"]
+    "plugins": [
+      "prettier-plugin-organize-imports"
+    ]
   },
   "jest": {
     "preset": "ts-jest",
     "testEnvironment": "jsdom",
-    "setupFiles": ["<rootDir>/.jest/setup.ts"],
-    "testPathIgnorePatterns": ["/node_modules/", "/build/", "/src/modules/"],
-    "collectCoverageFrom": ["src/**/*.ts", "!**/build/**", "!**/vendor/**", "!src/modules/**"],
-    "coverageReporters": ["json", "html", "lcov"],
+    "setupFiles": [
+      "<rootDir>/.jest/setup.ts"
+    ],
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/build/",
+      "/src/modules/"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.ts",
+      "!**/build/**",
+      "!**/vendor/**",
+      "!src/modules/**"
+    ],
+    "coverageReporters": [
+      "json",
+      "html",
+      "lcov"
+    ],
     "resolveJsonModule": true
   }
 }
diff --git a/scripts/build.js b/scripts/build.js
index 13058760d2..2f941158a8 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -36,7 +36,7 @@ const copyFile = async (filePath, outputName, replace) => {
   fs.writeFileSync(dist, minified, 'utf8');
 };
 
-const addBaseUrl = (content) => {
+const addBaseUrl = (/** @type {string} */ content) => {
   let baseUrl = process.env.BASE_URL;
   if (baseUrl && baseUrl !== '/') {
     if (!baseUrl.startsWith('/') && !baseUrl.startsWith('http')) {
@@ -50,6 +50,14 @@ const addBaseUrl = (content) => {
   return content;
 };
 
+const useSelfHostedURL = (/** @type {string} */ content) => {
+  if (!process.env.HOST_NAME) return content;
+  const hostname = process.env.HOST_NAME;
+  const port = Number(process.env.PORT) || 443;
+  const appUrl = `https://${hostname}${port !== 443 ? ':' + port : ''}`;
+  return content.replaceAll('https://livecodes.io', `${appUrl}`);
+};
+
 const prepareDir = async () => {
   mkdir(outDir);
   mkdir(outDir + '/livecodes/');
@@ -65,9 +73,18 @@ const prepareDir = async () => {
     copyFile('src/netlify.toml', 'netlify.toml'),
     copyFile('src/favicon.ico', 'favicon.ico'),
     copyFile('src/404.html', '404.html', addBaseUrl),
-    copyFile('src/index.html', 'index.html'),
+    copyFile('src/index.html', 'index.html', useSelfHostedURL),
     copyFile('src/livecodes/html/app-base.html', 'app.html'),
   ]);
+  await fs.promises
+    .readFile(path.resolve(root, 'src/livecodes/assets/site.webmanifest'), 'utf8')
+    .then((siteWebManifest) =>
+      fs.promises.writeFile(
+        path.resolve(outDir, 'livecodes/assets/site.webmanifest'),
+        useSelfHostedURL(siteWebManifest),
+        'utf8',
+      ),
+    );
 };
 
 /** @type {Partial<esbuild.BuildOptions>} */
@@ -215,6 +232,7 @@ const iifeBuild = () =>
       'languages/java/lang-java-script.ts',
       'languages/cpp/lang-cpp-script.ts',
       'languages/cpp-wasm/lang-cpp-wasm-script.ts',
+      'languages/go-wasm/lang-go-wasm-script.ts',
       'languages/csharp-wasm/lang-csharp-wasm-script.ts',
       'languages/dot/lang-dot-compiler.ts',
       'languages/ejs/lang-ejs-compiler.ts',
diff --git a/scripts/download-modules.js b/scripts/download-modules.js
new file mode 100644
index 0000000000..e828e668fb
--- /dev/null
+++ b/scripts/download-modules.js
@@ -0,0 +1,358 @@
+const decompress = require('decompress');
+const decompressTarbz = require('decompress-tarbz2');
+const fs = require('fs');
+const path = require('path');
+const stream = require('stream');
+const sdkPkg = require('../src/sdk/package.sdk.json');
+
+const cacheDir = '.cache/';
+const modulesDir = cacheDir + '/modules/';
+const srcVendorsModule = 'src/livecodes/vendors.ts';
+const cacheVendorsModule = cacheDir + 'vendors.js';
+
+const transformVendorsModule = (/** @type {string} */ content) =>
+  'const modulesService = { getUrl: (mod) => mod };\n' +
+  content.replace('import', '// import').replace('process.env.SDK_VERSION', `"${sdkPkg.version}"`);
+
+const downloadModules = async ({ dryRun = false } = {}) => {
+  const srcVendorsContent = fs.readFileSync(srcVendorsModule, 'utf-8');
+  const cacheVendorsContent = fs.existsSync(cacheVendorsModule)
+    ? fs.readFileSync(cacheVendorsModule, 'utf-8')
+    : '';
+
+  const transformedSrcContent = transformVendorsModule(srcVendorsContent);
+  if (transformedSrcContent === cacheVendorsContent) return;
+
+  console.log(`Downloading modules...`);
+
+  /** @type {string[]} */
+  const modules = [];
+  /** @type {string[]} */
+  const baseUrls = [];
+  /** @type {string[]} */
+  const fontStylSheets = [];
+  /** @type {Array<{module: string; url: string}>} */
+  const moduleUrls = [];
+  /** @type {Array<{module: string; url: string; error: string}>} */
+  const failedModuleUrls = [];
+  let pyodideBaseUrl = '';
+
+  const downloadQueue = createAsyncQueue(10);
+
+  fs.mkdirSync(modulesDir, { recursive: true });
+
+  const vendorModulesContent = transformVendorsModule(fs.readFileSync(srcVendorsModule, 'utf8'));
+  fs.writeFileSync(cacheVendorsModule, vendorModulesContent, 'utf8');
+  const vendorUrls = require('../' + cacheVendorsModule);
+
+  // modules vs baseUrls
+  for (const [key, value] of Object.entries(vendorUrls)) {
+    if (key.includes('BaseUrl') || key.includes('codeMirrorBasePath')) {
+      baseUrls.push(value);
+    } else {
+      modules.push(value);
+    }
+    if (
+      value.includes('https://fonts.googleapis.com/') ||
+      value.includes('https://fonts.cdnfonts.com/css')
+    ) {
+      fontStylSheets.push(value);
+    }
+  }
+
+  // get modules from baseUrls
+  await Promise.all(
+    baseUrls.map(async (baseUrl) => {
+      if (baseUrl.includes('@seth0x41/doppio')) {
+        baseUrl = baseUrl.replace('https://unpkg.com/', '').replace('unpkg:', '');
+      }
+      if (baseUrl.includes('pyodide')) {
+        pyodideBaseUrl = baseUrl;
+      }
+      if (baseUrl.startsWith('https://')) return;
+
+      const mod = getModuleName(baseUrl);
+      const type = baseUrl.startsWith('gh:') ? 'gh' : 'npm';
+      const modInfoUrl = `https://data.jsdelivr.com/v1/package/${type}/${mod}/flat`;
+      const response = await fetch(modInfoUrl);
+      if (!response.ok) {
+        console.warn(`Failed to fetch module info for ${mod}: ${response.status}`);
+        return;
+      }
+      const modInfo = await response.json();
+      const files = modInfo.files;
+      if (Array.isArray(files)) {
+        for (const file of files) {
+          if ((mod + file.name).includes(baseUrl) && !shouldExclude(mod + file.name)) {
+            modules.push(mod + file.name);
+          }
+        }
+      } else if (type === 'gh') {
+        // use GitHub API when jsDelivr errors: Package size exceeded the configured limit of 50 MB (e.g. opal).
+        const [repo, version] = mod.split('@');
+        const filesUrl = `https://api.github.com/repos/${repo}/git/trees/${version}?recursive=1`;
+        const response = await fetch(filesUrl);
+        if (!response.ok) {
+          console.warn(`Failed to fetch repo info for ${repo}: ${response.status}`);
+          return;
+        }
+        const repoInfo = await response.json();
+        const files = repoInfo.tree;
+        if (Array.isArray(files)) {
+          const basePath = baseUrl.split(mod + '/')[1];
+          for (const file of files) {
+            if (
+              file.type === 'blob' &&
+              file.path.includes(basePath) &&
+              !shouldExclude(mod + '/' + file.path)
+            ) {
+              modules.push('gh:' + mod + '/' + file.path);
+            }
+          }
+        }
+      }
+    }),
+  );
+
+  // get moduleUrls
+  for (const module of modules) {
+    if (module.startsWith('http')) {
+      moduleUrls.push({ module, url: module });
+    } else if (module.startsWith('gh:')) {
+      moduleUrls.push({
+        module,
+        url: `https://cdn.jsdelivr.net/gh/${module.replace('gh:', '')}`,
+      });
+    } else {
+      // use unpkg - no restriction on file types (e.g. jar)
+      moduleUrls.push({ module, url: `https://unpkg.com/${module}` });
+    }
+  }
+
+  // download modules
+  const download = (
+    /** @type {Array<{module: string; url: string}>} */ moduleUrls,
+    isRetry = false,
+  ) => {
+    for (const { module, url } of moduleUrls) {
+      const fullPath =
+        modulesDir + module.replaceAll('https://', '').replaceAll(':', '_').replaceAll('?', '_');
+      const dirPath = path.dirname(fullPath);
+      if (fs.existsSync(fullPath)) continue;
+
+      let text = '';
+      if (dryRun) {
+        text = url;
+        fs.mkdirSync(dirPath, { recursive: true });
+        fs.writeFileSync(fullPath, text);
+      } else {
+        downloadQueue.add(() =>
+          fetchAndSaveFile(url, fullPath).then(async (result) => {
+            if (result instanceof Error) {
+              if (isRetry) {
+                failedModuleUrls.push({ module, url, error: result.message });
+                console.error(`Failed to download module (${module}): ${result.message}`);
+                return;
+              }
+              download([{ module, url }], true);
+              return;
+            }
+            const urlPattern = /https:\/\/[^'"\)]*/g;
+
+            if (fullPath.includes('fonts.googleapis.com/css')) {
+              const content = fs.readFileSync(fullPath, 'utf8');
+              const fontUrls = Array.from(content.matchAll(new RegExp(urlPattern))).flat();
+              for (const fontUrl of fontUrls) {
+                const fontPath = fontUrl.replace('https://', modulesDir);
+                await fetchAndSaveFile(fontUrl, fontPath);
+              }
+              const patched = content.replaceAll(
+                'https://fonts.gstatic.com/',
+                '../fonts.gstatic.com/',
+              );
+              fs.writeFileSync(fullPath, patched);
+            }
+            if (fullPath.includes('fonts.cdnfonts.com/css')) {
+              const content = fs.readFileSync(fullPath, 'utf8');
+              const fontUrls = Array.from(content.matchAll(new RegExp(urlPattern))).flat();
+              for (const fontUrl of fontUrls) {
+                const fontPath = fontUrl.replace('https://', modulesDir);
+                await fetchAndSaveFile(fontUrl, fontPath);
+              }
+              const patched = content.replaceAll('https://fonts.cdnfonts.com/', '../');
+              fs.writeFileSync(fullPath, patched);
+            }
+          }),
+        );
+      }
+    }
+  };
+  download(moduleUrls);
+
+  // download Pyodide
+  if (pyodideBaseUrl) {
+    const pyodideVersion = pyodideBaseUrl.split('/v')[1].split('/')[0] || '0.28.0';
+    const pyodideFiles = [
+      `pyodide-${pyodideVersion}.tar.bz2`,
+      `pyodide-core-${pyodideVersion}.tar.bz2`,
+      `static-libraries-${pyodideVersion}.tar.bz2`,
+      `xbuildenv-${pyodideVersion}.tar.bz2`,
+    ];
+    fs.mkdirSync(`${cacheDir}pyodide/v${pyodideVersion}`, { recursive: true });
+    pyodideFiles.forEach((file) => {
+      const downloadPath = `${cacheDir}pyodide/v${pyodideVersion}/${file}`;
+      const url = `https://github.com/pyodide/pyodide/releases/download/${pyodideVersion}/${file}`;
+      if (!fs.existsSync(downloadPath)) {
+        downloadQueue.add(() =>
+          fetchAndSaveFile(url, downloadPath).then((result) => {
+            if (result instanceof Error) {
+              failedModuleUrls.push({ module: file, url, error: result.message });
+              console.error(`Failed to download module (${file}): ${result.message}`);
+              return;
+            }
+            return decompress(downloadPath, `${modulesDir}pyodide/v${pyodideVersion}/full`, {
+              plugins: [decompressTarbz()],
+              map: (file) => {
+                file.path = file.path.split('/').slice(1).join('/');
+                return file;
+              },
+            });
+          }),
+        );
+      }
+    });
+  }
+
+  downloadQueue.onFinish(() => {
+    // log
+    console.log(`Modules downloaded to: ${modulesDir}`);
+    if (failedModuleUrls.length) {
+      console.log(`Failed to download ${failedModuleUrls.length} modules.`);
+    }
+  });
+};
+
+// utils
+/**
+ * @param {string} module
+ */
+function getModuleName(module) {
+  if (module.startsWith('gh:')) {
+    return module.replace('gh:', '').split('/').slice(0, 2).join('/');
+  }
+  const parts = module.split('/');
+  if (parts[0].startsWith('@')) {
+    return parts[0] + '/' + parts[1];
+  } else {
+    return parts[0];
+  }
+}
+/**
+ * @param {string} module
+ */
+function shouldExclude(module) {
+  const includePackages = ['@live-codes/browser-compilers'];
+  const excludeExtensions = ['.map', '.md', '.d.ts', 'package.json', 'package-lock.json'];
+  for (const pkg of includePackages) {
+    if (module.includes(pkg)) return false;
+  }
+  for (const extension of excludeExtensions) {
+    if (module.endsWith(extension)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * @param {string | URL | Request} url
+ * @param {any} filePath
+ */
+async function fetchAndSaveFile(url, filePath) {
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    if (!response.body) {
+      throw new Error('Response body is empty.');
+    }
+    fs.mkdirSync(path.dirname(filePath), { recursive: true });
+    const writer = fs.createWriteStream(filePath);
+    // @ts-ignore
+    const readableStream = stream.Readable.fromWeb(response.body);
+    readableStream.pipe(writer);
+    return /** @type {Promise<void>} */ (
+      new Promise((resolve, reject) => {
+        writer.on('finish', resolve);
+        writer.on('error', reject);
+      })
+    );
+  } catch (error) {
+    console.error(`Error downloading file (${url}): ${error.message}`);
+    return error;
+  }
+}
+
+const createAsyncQueue = (concurrency = 1) => {
+  /** @typedef {(() => Promise<unknown> | unknown) | Promise<unknown>} Task */
+
+  /** @type {Task[]} */
+  const queue = [];
+  /** @type {Array<() => unknown>} */
+  const subscribers = [];
+  let running = 0;
+
+  const add = (/** @type {Task} */ task) => {
+    queue.push(task);
+    processQueue();
+  };
+
+  const processQueue = async () => {
+    if (running >= concurrency || queue.length === 0) {
+      await runSubscribers();
+      return;
+    }
+
+    running++;
+    const task = queue.shift();
+
+    try {
+      if (typeof task === 'function') {
+        await task();
+      } else if (typeof task === 'object' && 'then' in task) {
+        await task;
+      }
+    } catch (error) {
+      console.error('Task failed:', error);
+    } finally {
+      running--;
+      processQueue();
+    }
+  };
+
+  const runSubscribers = async () => {
+    if (queue.length === 0 && running === 0 && subscribers.length > 0) {
+      const cb = subscribers.shift();
+      if (typeof cb === 'function') {
+        await cb();
+      }
+      await runSubscribers();
+    }
+  };
+
+  const onFinish = (/** @type {() => unknown} */ cb) => {
+    subscribers.push(cb);
+  };
+
+  return {
+    add,
+    onFinish,
+  };
+};
+
+module.exports = { downloadModules };
+
+if (require.main === module) {
+  downloadModules({ dryRun: process.argv.includes('--dry-run') });
+}
diff --git a/scripts/utils.js b/scripts/utils.js
index 52fa646cf8..74091a6ec0 100644
--- a/scripts/utils.js
+++ b/scripts/utils.js
@@ -72,6 +72,7 @@ const getVars = (/** @type {boolean} */ devMode) => {
   const selfHostedSandboxHostName = process.env.SANDBOX_HOST_NAME || 'localhost';
   const selfHostedSandboxPort = Number(process.env.SANDBOX_PORT) || 8090;
   const firebaseConfig = process.env.FIREBASE_CONFIG || 'null';
+  const localModules = String(process.env.LOCAL_MODULES) === 'true';
   return {
     appVersion,
     sdkVersion,
@@ -86,6 +87,7 @@ const getVars = (/** @type {boolean} */ devMode) => {
     firebaseConfig,
     selfHostedSandboxHostName,
     selfHostedSandboxPort,
+    localModules,
   };
 };
 
@@ -104,6 +106,7 @@ const getEnvVars = (/** @type {boolean} */ devMode) => {
     firebaseConfig,
     selfHostedSandboxHostName,
     selfHostedSandboxPort,
+    localModules,
   } = getVars(devMode);
   return {
     'process.env.VERSION': `"${appVersion || ''}"`,
@@ -119,8 +122,16 @@ const getEnvVars = (/** @type {boolean} */ devMode) => {
     'process.env.SANDBOX_HOST_NAME': `"${selfHostedSandboxHostName}"`,
     'process.env.SANDBOX_PORT': `"${selfHostedSandboxPort}"`,
     'process.env.FIREBASE_CONFIG': `"${firebaseConfig}"`,
+    'process.env.LOCAL_MODULES': `"${localModules}"`,
     define: 'undefined', // prevent using AMD (e.g. in lz-string),
   };
 };
 
-module.exports = { arrToObj, mkdir, uint8arrayToString, iife, getFileNames, getEnvVars };
+module.exports = {
+  arrToObj,
+  mkdir,
+  uint8arrayToString,
+  iife,
+  getFileNames,
+  getEnvVars,
+};
diff --git a/server/src/app.ts b/server/src/app.ts
index ba6c6b8f94..f4ac9eab5b 100644
--- a/server/src/app.ts
+++ b/server/src/app.ts
@@ -40,7 +40,7 @@ app.use(
     setHeaders(res) {
       // match headers in: src/_headers
       const reqPath = res.req.path;
-      if (reqPath.startsWith('/assets/')) {
+      if (reqPath.startsWith('/modules/')) {
         res.set('Cache-Control', 'public, max-age=31536000, s-maxage=31536000, immutable');
       }
       if (reqPath.startsWith('/livecodes/')) {
diff --git a/server/src/broadcast/index.ts b/server/src/broadcast/index.ts
index ae46f28602..c2a30c59d2 100644
--- a/server/src/broadcast/index.ts
+++ b/server/src/broadcast/index.ts
@@ -106,7 +106,7 @@ export const broadcast = ({
     });
   });
 
-  app.get('/channels/:id', (req, res) => {
+  app.get('/channels/:id', async (req, res) => {
     const channel = req.params.id;
     if (channels[channel]) {
       channels[channel].lastAccessed = Date.now();
@@ -114,9 +114,9 @@ export const broadcast = ({
       const views = ['index', 'code', 'result'] as const;
       const view = req.query.view;
       const file = views.find((v) => v === view) || (hasData ? 'index' : 'result');
-      const fileContent = fs
-        .readFileSync(path.join(broadcastDir, `/${file}.html`), 'utf-8')
-        .replaceAll('{{AppUrl}}', appUrl);
+      const fileContent = (
+        await fs.promises.readFile(path.join(broadcastDir, `/${file}.html`), 'utf-8')
+      ).replaceAll('{{AppUrl}}', appUrl);
       res.status(200).send(fileContent);
     } else {
       res.status(404).send('Channel not found!');
diff --git a/server/src/sandbox.ts b/server/src/sandbox.ts
index 553f1c5251..c252ff3e7f 100644
--- a/server/src/sandbox.ts
+++ b/server/src/sandbox.ts
@@ -5,7 +5,7 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { dirname } from './utils.ts';
 
-export const sandbox = ({ hostname, port }: { hostname: string; port: number }) => {
+export const sandbox = async ({ hostname, port }: { hostname: string; port: number }) => {
   const app = express();
 
   app.use(cors());
@@ -13,11 +13,12 @@ export const sandbox = ({ hostname, port }: { hostname: string; port: number })
 
   const sandboxDir = path.resolve(dirname, 'sandbox');
   let sandboxVersionDir = path.resolve(sandboxDir, 'v8');
-  fs.readdirSync(sandboxDir).forEach((v) => {
-    if (fs.statSync(path.resolve(sandboxDir, v)).isDirectory()) {
+  const dirs = await fs.promises.readdir(sandboxDir);
+  for (const v of dirs) {
+    if ((await fs.promises.stat(path.resolve(sandboxDir, v))).isDirectory()) {
       sandboxVersionDir = path.resolve(sandboxDir, v);
     }
-  });
+  }
 
   app.use('/', (req, res) => {
     if (req.path === '/') {
@@ -32,11 +33,8 @@ export const sandbox = ({ hostname, port }: { hostname: string; port: number })
         : req.path;
     res.set('Content-Type', 'text/html');
     const filePath = path.resolve(dirname, 'sandbox' + reqPath);
-    if (fs.existsSync(filePath)) {
-      res.status(200).sendFile(filePath);
-      return;
-    }
-    res.status(404).sendFile(path.resolve(sandboxVersionDir, 'index.html'));
+    const onError = () => res.status(404).sendFile(path.resolve(sandboxVersionDir, 'index.html'));
+    res.status(200).sendFile(filePath, onError);
   });
 
   app.listen(port, () => {
diff --git a/server/src/utils.ts b/server/src/utils.ts
index 1bc567acae..890cd399fc 100644
--- a/server/src/utils.ts
+++ b/server/src/utils.ts
@@ -10,7 +10,7 @@ const getDirname = (metaUrl: string) => path.dirname(fileURLToPath(metaUrl));
 export const dirname = getDirname(import.meta.url);
 export const appDir = path.resolve(dirname, '../../build/');
 
-const getFileContent = async (fullUrl: string) => {
+const getFileContent = (fullUrl: string): Promise<string> => {
   let pathname: string;
   try {
     const url = new URL(fullUrl);
@@ -21,11 +21,10 @@ const getFileContent = async (fullUrl: string) => {
   if (!pathname.trim()) {
     pathname = 'index.html';
   }
-  let filePath = path.resolve(appDir, pathname);
-  if (!fs.existsSync(filePath)) {
-    filePath = path.resolve(appDir, '404.html');
-  }
-  return fs.promises.readFile(filePath, 'utf8');
+  const filePath = path.resolve(appDir, pathname);
+  return fs.promises
+    .readFile(filePath, 'utf8')
+    .catch(() => fs.promises.readFile(path.resolve(appDir, '404.html'), 'utf8'));
 };
 
 const convertToWebRequest = (req: express.Request) => {
diff --git a/src/404.html b/src/404.html
index 562664a1b0..0ec7ea8735 100644
--- a/src/404.html
+++ b/src/404.html
@@ -142,9 +142,8 @@
     <div id="footer">
       <div class="title">LiveCodes</div>
       <div class="links">
-        <a href="/docs">Home</a>
         <a href="/">App</a>
-        <a href="/docs/overview">Docs</a>
+        <a href="/docs">Docs</a>
         <a href="https://github.com/live-codes/livecodes">GitHub</a>
       </div>
     </div>
diff --git a/src/_headers b/src/_headers
index d466dc3a5d..48b82f66a0 100644
--- a/src/_headers
+++ b/src/_headers
@@ -1,7 +1,7 @@
-/assets/*
+/livecodes/*
   cache-control: public, max-age=31536000, s-maxage=31536000, immutable
 
-/livecodes/*
+/modules/*
   cache-control: public, max-age=31536000, s-maxage=31536000, immutable
 
 /livecodes/:file.map
diff --git a/src/livecodes/UI/command-menu-actions.ts b/src/livecodes/UI/command-menu-actions.ts
index d42de5ca55..708f5ba1f7 100644
--- a/src/livecodes/UI/command-menu-actions.ts
+++ b/src/livecodes/UI/command-menu-actions.ts
@@ -298,6 +298,7 @@ export const getCommandMenuActions = ({
         'ruby',
         'ruby-wasm',
         'go',
+        'go-wasm',
         'php',
         'php-wasm',
         'cpp',
diff --git a/src/livecodes/compiler/compile-blocks.ts b/src/livecodes/compiler/compile-blocks.ts
index 1d6a379b5d..085af05734 100644
--- a/src/livecodes/compiler/compile-blocks.ts
+++ b/src/livecodes/compiler/compile-blocks.ts
@@ -88,6 +88,9 @@ const postProcess = async (content: string, config: Config, language: LanguageOr
   }
 
   for (const processor of window.deps.processors) {
+    // do not place compiled css for tailwind and similar in style blocks
+    if (['tailwindcss', 'unocss', 'windicss'].includes(processor.name)) continue;
+
     if (
       (processorIsEnabled(processor.name, config) &&
         processorIsActivated(processor.name, config) &&
diff --git a/src/livecodes/compiler/compile.worker.ts b/src/livecodes/compiler/compile.worker.ts
index 34180d33f4..93f4547494 100644
--- a/src/livecodes/compiler/compile.worker.ts
+++ b/src/livecodes/compiler/compile.worker.ts
@@ -9,8 +9,9 @@ import type {
   EditorLibrary,
   Language,
 } from '../models';
+import { getAppCDN, modulesService } from '../services';
 import { doOnce, getErrorMessage, objectFilter } from '../utils/utils';
-import { codeMirrorBaseUrl, comlinkBaseUrl, vendorsBaseUrl } from '../vendors';
+import { codeMirrorBasePath, comlinkBaseUrl, vendorsBaseUrl } from '../vendors';
 import { getAllCompilers } from './get-all-compilers';
 import type { CompilerMessage, CompilerMessageEvent, LanguageOrProcessor } from './models';
 declare const importScripts: (...args: string[]) => void;
@@ -276,7 +277,7 @@ const initCodemirrorTS = doOnce(async () => {
   await loadTypeScript();
   importScripts(comlinkBaseUrl + 'umd/comlink.js');
   importScripts(typescriptVfsUrl);
-  importScripts(codeMirrorBaseUrl + 'codemirror-ts.worker.js');
+  importScripts(modulesService.getUrl(codeMirrorBasePath, getAppCDN()) + 'codemirror-ts.worker.js');
   const { createWorker } = worker.CodemirrorTsWorker;
   const { createDefaultMapFromCDN, createSystem, createVirtualTypeScriptEnvironment } =
     worker.typescriptVFS;
diff --git a/src/livecodes/config/__tests__/build-config.spec.ts b/src/livecodes/config/__tests__/build-config.spec.ts
index ecc620b698..db6f2ea8c9 100644
--- a/src/livecodes/config/__tests__/build-config.spec.ts
+++ b/src/livecodes/config/__tests__/build-config.spec.ts
@@ -504,4 +504,13 @@ describe('loadParamConfig', () => {
     });
     expect(output.customSettings).toEqual({ template: { prerender: false } });
   });
+
+  test('?markup.hideTitle=true&script.title=App.jsx', () => {
+    const output: Partial<Config> = loadParamConfig(defaultConfig, {
+      'markup.hideTitle': true,
+      'script.title': 'App.jsx',
+    });
+    expect(output.markup?.hideTitle).toEqual(true);
+    expect(output.script?.title).toEqual('App.jsx');
+  });
 });
diff --git a/src/livecodes/config/__tests__/validate-config.spec.ts b/src/livecodes/config/__tests__/validate-config.spec.ts
index 55a5ddd798..957cfd7775 100644
--- a/src/livecodes/config/__tests__/validate-config.spec.ts
+++ b/src/livecodes/config/__tests__/validate-config.spec.ts
@@ -157,7 +157,7 @@ describe('validateConfig', () => {
       script: { invalid: 'hi' },
     } as any;
 
-    const correctConfig = {};
+    const correctConfig = { script: { language: 'javascript' } };
     expect(validateConfig(testConfig)).toEqual(correctConfig);
   });
 
diff --git a/src/livecodes/config/build-config.ts b/src/livecodes/config/build-config.ts
index 6bb5ea7d56..0d3eae9776 100644
--- a/src/livecodes/config/build-config.ts
+++ b/src/livecodes/config/build-config.ts
@@ -365,10 +365,21 @@ export const loadParamConfig = (config: Config, params: UrlQueryParams): Partial
     }
   }
 
+  // ?markup.hideTitle=true&script.title=App.jsx
   // ?customSettings.template.prerender=false
   Object.keys(params).forEach((k) => {
-    if (!k.startsWith('customSettings.')) return;
-    addProp(paramsConfig, k, (params as any)[k]);
+    if (
+      k.startsWith('markup.') ||
+      k.startsWith('style.') ||
+      k.startsWith('script.') ||
+      k.startsWith('tests.') ||
+      k.startsWith('customSettings.') ||
+      k.startsWith('imports.') ||
+      k.startsWith('types.') ||
+      k.startsWith('tools.')
+    ) {
+      addProp(paramsConfig, k, (params as any)[k]);
+    }
   });
 
   return paramsConfig;
diff --git a/src/livecodes/config/validate-config.ts b/src/livecodes/config/validate-config.ts
index 88eebbdf79..33bf2d9b3c 100644
--- a/src/livecodes/config/validate-config.ts
+++ b/src/livecodes/config/validate-config.ts
@@ -43,18 +43,6 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
   const editorIds: EditorId[] = ['markup', 'style', 'script'];
   const zoomLevels: Array<Config['zoom']> = [1, 0.5, 0.25];
 
-  const isEditor = (x: any) =>
-    is(x, 'object') &&
-    (is(x.language, 'string') ||
-      is(x.title, 'string') ||
-      is(x.content, 'string') ||
-      is(x.contentUrl, 'string') ||
-      is(x.hiddenContent, 'string') ||
-      is(x.hiddenContentUrl, 'string') ||
-      is(x.foldedLines, 'array', 'object') ||
-      is(x.order, 'number') ||
-      is(x.selector, 'string'));
-
   const isFoldedLines = (x: any) => is(x, 'object') && (is(x.from, 'number') || is(x.to, 'number'));
 
   const fixSfcLanguage = (lang: Language, editorId: EditorId) =>
@@ -150,13 +138,13 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
     ...(is(config.languages, 'array', 'string')
       ? { languages: removeDuplicates(config.languages) }
       : {}),
-    ...(isEditor(config.markup)
+    ...(is(config.markup, 'object')
       ? { markup: validateEditorProps(config.markup as Editor, 'markup') }
       : {}),
-    ...(isEditor(config.style)
+    ...(is(config.style, 'object')
       ? { style: validateEditorProps(config.style as Editor, 'style') }
       : {}),
-    ...(isEditor(config.script)
+    ...(is(config.script, 'object')
       ? { script: validateEditorProps(config.script as Editor, 'script') }
       : {}),
     ...(is(config.tools, 'object')
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index c9d9898714..e4fc99c32c 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -99,6 +99,7 @@ import type {
   CustomEditors,
   CustomSettings,
   Editor,
+  EditorConfig,
   EditorId,
   EditorLanguages,
   EditorOptions,
@@ -209,6 +210,7 @@ let compiler: Await<ReturnType<typeof getCompiler>>;
 let formatter: Formatter;
 let editors: Editors;
 let customEditors: CustomEditors;
+let currentEditorConfig: EditorConfig;
 let toolsPane: ToolsPane | undefined;
 export let authService: ReturnType<typeof createAuthService> | undefined;
 let editorLanguages: EditorLanguages | undefined;
@@ -527,6 +529,8 @@ const createEditors = async (config: Config) => {
   const styleEditor = await createEditor(styleOptions);
   const scriptEditor = await createEditor(scriptOptions);
 
+  currentEditorConfig = { ...getEditorConfig(config), ...getFormatterConfig(config) };
+
   setEditorTitle('markup', markupOptions.language);
   setEditorTitle('style', styleOptions.language);
   setEditorTitle('script', scriptOptions.language);
@@ -1428,8 +1432,8 @@ const loadConfig = async (
   changingContent = false;
 };
 
-const applyConfig = async (newConfig: Partial<Config>, reload = false) => {
-  const currentConfig = getConfig();
+const applyConfig = async (newConfig: Partial<Config>, reload = false, oldConfig?: Config) => {
+  const currentConfig = oldConfig || getConfig();
   const combinedConfig: Config = { ...currentConfig, ...newConfig };
   if (reload) {
     await updateEditors(editors, getConfig());
@@ -1514,24 +1518,20 @@ const applyConfig = async (newConfig: Partial<Config>, reload = false) => {
     });
   }
 
-  let shouldReloadEditors = false;
   const editorConfig = {
     ...getEditorConfig(newConfig as Config),
     ...getFormatterConfig(newConfig as Config),
   };
-  const hasEditorConfig = Object.values(editorConfig).some((value) => value != null);
-  if (hasEditorConfig) {
-    const currentEditorConfig = {
-      ...getEditorConfig(currentConfig),
-      ...getFormatterConfig(currentConfig),
-    };
-    for (const key in editorConfig) {
-      if ((editorConfig as any)[key] !== (currentEditorConfig as any)[key]) {
-        shouldReloadEditors = true;
-        break;
-      }
+
+  const hasEditorConfig = Object.keys(editorConfig).some((k) => k in newConfig);
+  let shouldReloadEditors = (() => {
+    if (newConfig.editor != null && !(newConfig.editor in editors.markup)) return true;
+    if (newConfig.mode != null) {
+      if (newConfig.mode !== 'result' && editors.markup.isFake) return true;
+      if (newConfig.mode !== 'codeblock' && editors.markup.codejar) return true;
     }
-  }
+    return false;
+  })();
   if ('configureTailwindcss' in editors.markup) {
     if (newConfig.processors?.includes('tailwindcss')) {
       editors.markup.configureTailwindcss?.(true);
@@ -1546,6 +1546,12 @@ const applyConfig = async (newConfig: Partial<Config>, reload = false) => {
   }
   if (shouldReloadEditors) {
     await reloadEditors(combinedConfig);
+  } else if (hasEditorConfig) {
+    currentEditorConfig = {
+      ...getEditorConfig(combinedConfig),
+      ...getFormatterConfig(combinedConfig),
+    };
+    getAllEditors().forEach((editor) => editor.changeSettings(currentEditorConfig));
   }
 
   parent.dispatchEvent(new Event(customEvents.ready));
@@ -1963,11 +1969,12 @@ const loadSelectedScreen = () => {
   return false;
 };
 
-const getAllEditors = (): CodeEditor[] => [
-  ...Object.values(editors),
-  ...[toolsPane?.console?.getEditor?.()],
-  ...[toolsPane?.compiled?.getEditor?.()],
-];
+const getAllEditors = (): CodeEditor[] =>
+  [
+    ...Object.values(editors),
+    toolsPane?.console?.getEditor?.(),
+    toolsPane?.compiled?.getEditor?.(),
+  ].filter((x) => x != null);
 
 const setTheme = (theme: Theme, editorTheme: Config['editorTheme']) => {
   const themes = ['light', 'dark'];
@@ -5534,14 +5541,6 @@ const createApi = (): API => {
     const shouldRun =
       newConfig.mode != null && newConfig.mode !== 'editor' && newConfig.mode !== 'codeblock';
     const shouldReloadCompiler = shouldRun && compiler.isFake;
-    const shouldReloadCodeEditors = (() => {
-      if (newConfig.editor != null && !(newConfig.editor in editors.markup)) return true;
-      if (newConfig.mode != null) {
-        if (newConfig.mode !== 'result' && editors.markup.isFake) return true;
-        if (newConfig.mode !== 'codeblock' && editors.markup.codejar) return true;
-      }
-      return false;
-    })();
     const isContentOnlyChange = compareObjects(
       newConfig,
       currentConfig as Record<string, any>,
@@ -5566,10 +5565,7 @@ const createApi = (): API => {
     if (shouldReloadCompiler) {
       await reloadCompiler(newAppConfig);
     }
-    if (shouldReloadCodeEditors) {
-      await createEditors(newAppConfig);
-    }
-    await applyConfig(newConfig, /* reload = */ true);
+    await applyConfig(newConfig, /* reload = */ true, currentConfig);
     const content = getContentConfig(newConfig as Config);
     const hasContent = Object.values(content).some((value) => value != null);
     if (hasContent) {
diff --git a/src/livecodes/editor/codemirror/codemirror.ts b/src/livecodes/editor/codemirror/codemirror.ts
index 199efa8e0b..2a525f7721 100644
--- a/src/livecodes/editor/codemirror/codemirror.ts
+++ b/src/livecodes/editor/codemirror/codemirror.ts
@@ -41,12 +41,15 @@ import type {
   Language,
   Theme,
 } from '../../models';
+import { getAppCDN, modulesService } from '../../services';
 import { ctrl, debounce, getRandomString } from '../../utils/utils';
-import { codeMirrorBaseUrl, comlinkBaseUrl } from '../../vendors';
+import { codeMirrorBasePath, comlinkBaseUrl } from '../../vendors';
 import { getEditorTheme } from '../themes';
 import { codemirrorThemes, customThemes } from './codemirror-themes';
 import { editorLanguages } from './editor-languages';
 
+const codeMirrorBaseUrl = modulesService.getUrl(codeMirrorBasePath, getAppCDN());
+
 export type CodeiumEditor = Pick<CodeEditor, 'getLanguage' | 'getValue'> & {
   editorId: EditorOptions['editorId'];
 };
diff --git a/src/livecodes/editor/codemirror/editor-languages.ts b/src/livecodes/editor/codemirror/editor-languages.ts
index 1b7e807037..6640fd453c 100644
--- a/src/livecodes/editor/codemirror/editor-languages.ts
+++ b/src/livecodes/editor/codemirror/editor-languages.ts
@@ -12,11 +12,13 @@ import { javascript } from '@codemirror/lang-javascript';
 import { json } from '@codemirror/lang-json';
 
 import type { Language } from '../../models';
-import { codeMirrorBaseUrl } from '../../vendors';
+import { getAppCDN, modulesService } from '../../services';
+import { codeMirrorBasePath } from '../../vendors';
 
 const legacy = (parser: StreamParser<unknown>) =>
   new LanguageSupport(StreamLanguage.define(parser));
 
+const codeMirrorBaseUrl = modulesService.getUrl(codeMirrorBasePath, getAppCDN());
 const getPath = (mod: string) => codeMirrorBaseUrl + mod;
 
 const moduleUrls = {
diff --git a/src/livecodes/editor/fonts.ts b/src/livecodes/editor/fonts.ts
index d5bdd7f612..d161468621 100644
--- a/src/livecodes/editor/fonts.ts
+++ b/src/livecodes/editor/fonts.ts
@@ -1,36 +1,36 @@
 import {
-  fontAnonymousProUrl,
-  fontAstigmataUrl,
-  fontCascadiaCodeUrl,
+  fontAnonymousProBaseUrl,
+  fontAstigmataBaseUrl,
+  fontCascadiaCodeBaseUrl,
   fontCodeNewRomanUrl,
-  fontComicMonoUrl,
-  fontCourierPrimeUrl,
+  fontComicMonoBaseUrl,
+  fontCourierPrimeBaseUrl,
   fontDECTerminalModernUrl,
-  fontDejaVuMonoUrl,
-  fontFantasqueUrl,
-  fontFiraCodeUrl,
+  fontDejaVuMonoBaseUrl,
+  fontFantasqueBaseUrl,
+  fontFiraCodeBaseUrl,
   fontFixedsysUrl,
-  fontHackUrl,
-  fontHermitUrl,
+  fontHackBaseUrl,
+  fontHermitBaseUrl,
   fontIBMPlexMonoUrl,
   fontInconsolataUrl,
-  fontIosevkaUrl,
-  fontJetbrainsMonoUrl,
+  fontIosevkaBaseUrl,
+  fontJetbrainsMonoBaseUrl,
   fontMenloUrl,
   fontMonaspaceBaseUrl,
   fontMonofurUrl,
-  fontMonoidUrl,
+  fontMonoidBaseUrl,
   fontNotoUrl,
   fontNovaMonoUrl,
-  fontOpenDyslexicUrl,
+  fontOpenDyslexicBaseUrl,
   fontProFontWindowsUrl,
-  fontRobotoMonoUrl,
+  fontRobotoMonoBaseUrl,
   fontSFMonoUrl,
-  fontSourceCodeProUrl,
-  fontSpaceMonoUrl,
+  fontSourceCodeProBaseUrl,
+  fontSpaceMonoBaseUrl,
   fontSudoVarUrl,
-  fontUbuntuMonoUrl,
-  fontVictorMonoUrl,
+  fontUbuntuMonoBaseUrl,
+  fontVictorMonoBaseUrl,
 } from '../vendors';
 
 export interface Font {
@@ -44,17 +44,17 @@ export const fonts: Font[] = [
   {
     id: 'anonymous-pro',
     name: 'Anonymous Pro',
-    url: fontAnonymousProUrl,
+    url: fontAnonymousProBaseUrl + 'index.css',
   },
   {
     id: 'astigmata',
     name: 'Astigmata',
-    url: fontAstigmataUrl,
+    url: fontAstigmataBaseUrl + 'index.css',
   },
   {
     id: 'cascadia-code',
     name: 'Cascadia Code',
-    url: fontCascadiaCodeUrl,
+    url: fontCascadiaCodeBaseUrl + 'index.css',
   },
   {
     id: 'comic-mono',
@@ -64,12 +64,12 @@ export const fonts: Font[] = [
   {
     id: 'comic-mono',
     name: 'Comic Mono',
-    url: fontComicMonoUrl,
+    url: fontComicMonoBaseUrl + 'index.css',
   },
   {
     id: 'courier-prime',
     name: 'Courier Prime',
-    url: fontCourierPrimeUrl,
+    url: fontCourierPrimeBaseUrl + 'index.css',
   },
   {
     id: 'dec-terminal-modern',
@@ -79,18 +79,18 @@ export const fonts: Font[] = [
   {
     id: 'dejavu-mono',
     name: 'DejaVu Mono',
-    url: fontDejaVuMonoUrl,
+    url: fontDejaVuMonoBaseUrl + 'index.css',
   },
   {
     id: 'fantasque-sans-mono',
     name: 'TypoPRO Fantasque Sans Mono',
     label: 'Fantasque Sans Mono',
-    url: fontFantasqueUrl,
+    url: fontFantasqueBaseUrl + 'TypoPRO-FantasqueSansMono.css',
   },
   {
     id: 'fira-code',
     name: 'Fira Code',
-    url: fontFiraCodeUrl,
+    url: fontFiraCodeBaseUrl + 'fira_code.css',
   },
   {
     id: 'fixedsys',
@@ -101,12 +101,12 @@ export const fonts: Font[] = [
   {
     id: 'hack',
     name: 'Hack',
-    url: fontHackUrl,
+    url: fontHackBaseUrl + 'hack.css',
   },
   {
     id: 'hermit',
     name: 'Hermit',
-    url: fontHermitUrl,
+    url: fontHermitBaseUrl + 'index.css',
   },
   {
     id: 'ibm-plex-mono',
@@ -121,12 +121,12 @@ export const fonts: Font[] = [
   {
     id: 'iosevka',
     name: 'Iosevka',
-    url: fontIosevkaUrl,
+    url: fontIosevkaBaseUrl + 'index.css',
   },
   {
     id: 'jetbrains-mono',
     name: 'JetBrains Mono',
-    url: fontJetbrainsMonoUrl,
+    url: fontJetbrainsMonoBaseUrl + 'index.css',
   },
   {
     id: 'menlo',
@@ -167,7 +167,7 @@ export const fonts: Font[] = [
     id: 'monoid',
     name: 'TypoPRO Monoid',
     label: 'Monoid',
-    url: fontMonoidUrl,
+    url: fontMonoidBaseUrl + 'TypoPRO-Monoid.css',
   },
   {
     id: 'noto-sans-mono',
@@ -182,7 +182,7 @@ export const fonts: Font[] = [
   {
     id: 'opendyslexic',
     name: 'OpenDyslexic',
-    url: fontOpenDyslexicUrl,
+    url: fontOpenDyslexicBaseUrl + 'index.css',
   },
   {
     id: 'profontwindows',
@@ -193,7 +193,7 @@ export const fonts: Font[] = [
   {
     id: 'roboto-mono',
     name: 'Roboto Mono',
-    url: fontRobotoMonoUrl,
+    url: fontRobotoMonoBaseUrl + 'index.css',
   },
   {
     id: 'sf-mono',
@@ -203,12 +203,12 @@ export const fonts: Font[] = [
   {
     id: 'source-code-pro',
     name: 'Source Code Pro',
-    url: fontSourceCodeProUrl,
+    url: fontSourceCodeProBaseUrl + 'index.css',
   },
   {
     id: 'space-mono',
     name: 'Space Mono',
-    url: fontSpaceMonoUrl,
+    url: fontSpaceMonoBaseUrl + 'index.css',
   },
   {
     id: 'sudo-var',
@@ -218,12 +218,12 @@ export const fonts: Font[] = [
   {
     id: 'ubuntu-mono',
     name: 'Ubuntu Mono',
-    url: fontUbuntuMonoUrl,
+    url: fontUbuntuMonoBaseUrl + 'index.css',
   },
   {
     id: 'victor-mono',
     name: 'Victor Mono',
-    url: fontVictorMonoUrl,
+    url: fontVictorMonoBaseUrl + 'index.css',
   },
 ];
 
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index 1442c170dc..30166fa82d 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -24,7 +24,7 @@ import {
   monacoBaseUrl,
   monacoEmacsUrl,
   monacoVimUrl,
-  monacoVolarUrl,
+  monacoVolarBaseUrl,
   vendorsBaseUrl,
 } from '../../vendors';
 import { getEditorTheme } from '../themes';
@@ -189,6 +189,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     glyphMargin: true,
     folding: false,
     lineDecorationsWidth: 0,
+    lineNumbers: 'off',
     lineNumbersMinChars: 0,
     scrollbar: {
       vertical: 'auto',
@@ -265,7 +266,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   const addVueSupport = async () => {
     if (vueRegistered) return;
     vueRegistered = true;
-    const { registerVue, registerHighlighter } = await import(monacoVolarUrl);
+    const { registerVue, registerHighlighter } = await import(monacoVolarBaseUrl + 'index.js');
     const tsCompilerOptions = { ...getCompilerOptions('vue'), jsx: 'preserve' };
     await registerVue({ editor, monaco, tsCompilerOptions, silent: true });
     shikiThemes = registerHighlighter(monaco);
diff --git a/src/livecodes/html/app.html b/src/livecodes/html/app.html
index b92bc6710c..e265916019 100644
--- a/src/livecodes/html/app.html
+++ b/src/livecodes/html/app.html
@@ -364,10 +364,7 @@
         </button>
       </div>
     </div>
-    <script
-      src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js"
-      crossorigin="anonymous"
-    ></script>
+    {{polyfillScript}}
     <script>
       window.appCDN = '{{appCDN}}';
     </script>
diff --git a/src/livecodes/html/language-info.html b/src/livecodes/html/language-info.html
index 940044e9ac..c990bac90d 100644
--- a/src/livecodes/html/language-info.html
+++ b/src/livecodes/html/language-info.html
@@ -534,6 +534,11 @@ <h3 data-i18n="language-info:go.name">Go</h3>
         >Learn X in Y minutes, where X=Go</a
       >
     </li>
+    <li>
+      <a href="{{DOCS_BASE_URL}}languages/go" target="_blank" rel="noopener"
+        >LiveCodes Documentations</a
+      >
+    </li>
     <li>
       <a href="?template=go" class="button" target="_parent" data-template="go"
         >Load starter template</a
@@ -541,6 +546,31 @@ <h3 data-i18n="language-info:go.name">Go</h3>
     </li>
   </ul>
 </section>
+<section data-lang="go-wasm">
+  <h3 data-i18n="language-info:goWasm.name">Go (Wasm)</h3>
+  <div data-i18n="language-info:goWasm.desc">
+    Go interpreter running on WebAssembly, using Yaegi
+  </div>
+  <ul data-i18n="language-info:goWasm.link" data-i18n-prop="innerHTML">
+    <li><a href="https://golang.org/" target="_blank" rel="noopener">Go official website</a></li>
+    <li><a href="https://yaegi.org/" target="_blank" rel="noopener">Yaegi</a></li>
+    <li>
+      <a href="https://learnxinyminutes.com/docs/go/" target="_blank" rel="noopener"
+        >Learn X in Y minutes, where X=Go</a
+      >
+    </li>
+    <li>
+      <a href="{{DOCS_BASE_URL}}languages/go-wasm" target="_blank" rel="noopener"
+        >LiveCodes Documentations</a
+      >
+    </li>
+    <li>
+      <a href="?template=go-wasm" class="button" target="_parent" data-template="go-wasm"
+        >Load starter template</a
+      >
+    </li>
+  </ul>
+</section>
 <section data-lang="haml">
   <h3 data-i18n="language-info:haml.name">Haml</h3>
   <div data-i18n="language-info:haml.desc">
diff --git a/src/livecodes/i18n/locales/ar/language-info.lokalise.json b/src/livecodes/i18n/locales/ar/language-info.lokalise.json
index 4b572acc34..7b5634a8e7 100644
--- a/src/livecodes/i18n/locales/ar/language-info.lokalise.json
+++ b/src/livecodes/i18n/locales/ar/language-info.lokalise.json
@@ -222,6 +222,15 @@
   "go.name": {
     "translation": "Go"
   },
+  "goWasm.desc": {
+    "translation": "مترجم Go يعمل على WebAssembly، باستخدام Yaegi"
+  },
+  "goWasm.link": {
+    "translation": "<tag-1><tag-2>اذهب إلى الموقع الرسمي</tag-2></tag-1> <tag-3><tag-4>يايجي</tag-4></tag-3> <tag-5> <tag-6>تعلم X في دقائق Y، حيث X = اذهب</tag-6> </tag-5> <tag-7> <tag-8>وثائق LiveCodes</tag-8> </tag-7> <tag-9> <tag-10>تحميل قالب البداية تحميل قالب البداية</tag-10> </tag-9>"
+  },
+  "goWasm.name": {
+    "translation": "Go (Wasm)"
+  },
   "haml.desc": {
     "translation": "مترجم Haml لقوالب العرض في جافا سكريبت على جانب العميل باستخدام clientside-haml-js."
   },
diff --git a/src/livecodes/i18n/locales/ar/language-info.ts b/src/livecodes/i18n/locales/ar/language-info.ts
index 706f696c6c..2326716de7 100644
--- a/src/livecodes/i18n/locales/ar/language-info.ts
+++ b/src/livecodes/i18n/locales/ar/language-info.ts
@@ -125,6 +125,11 @@ const languageInfo: I18nLangInfoTranslation = {
     link: '<1><2>موقع جو</2></1> <3><4>وثائق جو</4></3> <5> <6>مستودع GopherJS</6> </5> <7> <8>تعلم X في Y دقيقة، حيث X=Go</8> </7> <9><10>تحميل قالب البداية</10></9>',
     name: 'Go',
   },
+  goWasm: {
+    desc: 'مترجم Go يعمل على WebAssembly، باستخدام Yaegi',
+    link: '<1><2>اذهب إلى الموقع الرسمي</2></1> <3><4>يايجي</4></3> <5> <6>تعلم X في دقائق Y، حيث X = اذهب</6> </5> <7> <8>وثائق LiveCodes</8> </7> <9> <10>تحميل قالب البداية تحميل قالب البداية</10> </9>',
+    name: 'Go (Wasm)',
+  },
   haml: {
     desc: 'مترجم Haml لقوالب العرض في جافا سكريبت على جانب العميل باستخدام clientside-haml-js.',
     link: '<1><2>الموقع الرسمي لـ Haml</2></1> <3> <4>وثائق Haml</4> </3> <5> <6>مستودع GitHub لـ clientside-haml-js</6> </5> <7> <8>تعلم X في Y دقيقة، حيث X=haml</8> </7> <9> <10>وثائق LiveCodes</10> </9>',
diff --git a/src/livecodes/i18n/locales/ar/translation.lokalise.json b/src/livecodes/i18n/locales/ar/translation.lokalise.json
index 0145456d6a..b2887000d5 100644
--- a/src/livecodes/i18n/locales/ar/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/ar/translation.lokalise.json
@@ -1950,6 +1950,9 @@
   "templates.starter.cpp": {
     "translation": "قالب C++"
   },
+  "templates.starter.cpp-wasm": {
+    "translation": "قالب C++ (Wasm)"
+  },
   "templates.starter.daisyui": {
     "translation": "قالب daisyUI"
   },
@@ -1965,6 +1968,9 @@
   "templates.starter.go": {
     "translation": "قالب Go"
   },
+  "templates.starter.go-wasm": {
+    "translation": "قالب Go (Wasm)"
+  },
   "templates.starter.heading": {
     "translation": "قوالب البداية"
   },
diff --git a/src/livecodes/i18n/locales/ar/translation.ts b/src/livecodes/i18n/locales/ar/translation.ts
index 4d6465c08b..fc62be86ff 100644
--- a/src/livecodes/i18n/locales/ar/translation.ts
+++ b/src/livecodes/i18n/locales/ar/translation.ts
@@ -989,11 +989,13 @@ const translation: I18nTranslation = {
       coffeescript: 'قالب CoffeeScript',
       commonlisp: 'قالب Common Lisp',
       cpp: 'قالب C++',
+      'cpp-wasm': 'قالب C++ (Wasm)',
       daisyui: 'قالب daisyUI',
       diagrams: 'قالب الرسوم البيانية',
       fennel: 'قالب Fennel',
       gleam: 'قالب Gleam',
       go: 'قالب Go',
+      'go-wasm': 'قالب Go (Wasm)',
       heading: 'قوالب البداية',
       imba: 'قالب Imba',
       java: 'قالب Java',
diff --git a/src/livecodes/i18n/locales/de/language-info.lokalise.json b/src/livecodes/i18n/locales/de/language-info.lokalise.json
index 955b04645a..b9160550d2 100644
--- a/src/livecodes/i18n/locales/de/language-info.lokalise.json
+++ b/src/livecodes/i18n/locales/de/language-info.lokalise.json
@@ -222,6 +222,15 @@
   "go.name": {
     "translation": "Go"
   },
+  "goWasm.desc": {
+    "translation": "Go-Interpreter, der auf WebAssembly läuft, unter Verwendung von Yaegi"
+  },
+  "goWasm.link": {
+    "translation": "<tag-1><tag-2>Go offizielle Website</tag-2></tag-1> <tag-3><tag-4>Yaegi</tag-4></tag-3> <tag-5> <tag-6>Lerne X in Y Minuten, wobei X=Go</tag-6> </tag-5> <tag-7> <tag-8>LiveCodes Dokumentationen</tag-8> </tag-7> <tag-9> <tag-10>Lade Startvorlage</tag-10> </tag-9>"
+  },
+  "goWasm.name": {
+    "translation": "Go (Wasm)"
+  },
   "haml.desc": {
     "translation": "Haml-Compiler für clientseitige JavaScript-View-Templates unter Verwendung von clientside-haml-js."
   },
diff --git a/src/livecodes/i18n/locales/de/language-info.ts b/src/livecodes/i18n/locales/de/language-info.ts
index 65309a94da..6e1402c08a 100644
--- a/src/livecodes/i18n/locales/de/language-info.ts
+++ b/src/livecodes/i18n/locales/de/language-info.ts
@@ -128,6 +128,11 @@ const languageInfo: I18nLangInfoTranslation = {
     link: '<1><2>Go Website</2></1> <3><4>Go Dokumentation</4></3> <5> <6>GopherJS Repository</6> </5> <7> <8>Lerne X in Y Minuten, wobei X=Go</8> </7> <9><10>Starter-Vorlage laden</10></9>',
     name: 'Go',
   },
+  goWasm: {
+    desc: 'Go-Interpreter, der auf WebAssembly läuft, unter Verwendung von Yaegi',
+    link: '<1><2>Go offizielle Website</2></1> <3><4>Yaegi</4></3> <5> <6>Lerne X in Y Minuten, wobei X=Go</6> </5> <7> <8>LiveCodes Dokumentationen</8> </7> <9> <10>Lade Startvorlage</10> </9>',
+    name: 'Go (Wasm)',
+  },
   haml: {
     desc: 'Haml-Compiler für clientseitige JavaScript-View-Templates unter Verwendung von clientside-haml-js.',
     link: '<1><2>Haml offizielle Website</2></1> <3> <4>Haml Dokumentation</4> </3> <5> <6>clientside-haml-js GitHub Repository</6> </5> <7> <8>Lerne X in Y Minuten, wobei X=haml</8> </7> <9> <10>LiveCodes Dokumentation</10> </9>',
diff --git a/src/livecodes/i18n/locales/de/translation.lokalise.json b/src/livecodes/i18n/locales/de/translation.lokalise.json
index 2832c23d75..1d05f2540e 100644
--- a/src/livecodes/i18n/locales/de/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/de/translation.lokalise.json
@@ -1950,6 +1950,9 @@
   "templates.starter.cpp": {
     "translation": "C++-Starter"
   },
+  "templates.starter.cpp-wasm": {
+    "translation": "C++ (Wasm)-Starter"
+  },
   "templates.starter.daisyui": {
     "translation": "daisyUI-Starter"
   },
@@ -1965,6 +1968,9 @@
   "templates.starter.go": {
     "translation": "Go-Starter"
   },
+  "templates.starter.go-wasm": {
+    "translation": "Go (Wasm)-Starter"
+  },
   "templates.starter.heading": {
     "translation": "Starter-Vorlagen"
   },
diff --git a/src/livecodes/i18n/locales/de/translation.ts b/src/livecodes/i18n/locales/de/translation.ts
index c12c3da4be..c8e50df7d8 100644
--- a/src/livecodes/i18n/locales/de/translation.ts
+++ b/src/livecodes/i18n/locales/de/translation.ts
@@ -991,11 +991,13 @@ const translation: I18nTranslation = {
       coffeescript: 'CoffeeScript-Starter',
       commonlisp: 'Common Lisp-Starter',
       cpp: 'C++-Starter',
+      'cpp-wasm': 'C++ (Wasm)-Starter',
       daisyui: 'daisyUI-Starter',
       diagrams: 'Diagramm-Starter',
       fennel: 'Fennel-Starter',
       gleam: 'Gleam-Starter',
       go: 'Go-Starter',
+      'go-wasm': 'Go (Wasm)-Starter',
       heading: 'Starter-Vorlagen',
       imba: 'Imba-Starter',
       java: 'Java-Starter',
diff --git a/src/livecodes/i18n/locales/en/language-info.lokalise.json b/src/livecodes/i18n/locales/en/language-info.lokalise.json
index bf064d71d7..d73b7f3b13 100644
--- a/src/livecodes/i18n/locales/en/language-info.lokalise.json
+++ b/src/livecodes/i18n/locales/en/language-info.lokalise.json
@@ -289,13 +289,25 @@
     "translation": "Here, it is compiled to JavaScript using GopherJS."
   },
   "go.link": {
-    "notes": "### <tag-1> ###\n<li  />\n\n### <tag-2> ###\n<a href=\"https://golang.org/\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-3> ###\n<li  />\n\n### <tag-4> ###\n<a href=\"https://golang.org/doc/\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-5> ###\n<li  />\n\n### <tag-6> ###\n<a href=\"https://github.com/gopherjs/gopherjs\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-7> ###\n<li  />\n\n### <tag-8> ###\n<a href=\"https://learnxinyminutes.com/docs/go/\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-9> ###\n<li  />\n\n### <tag-10> ###\n<a href=\"?template=go\" class=\"button\" target=\"_parent\" data-template=\"go\" />\n\n",
-    "translation": "<tag-1><tag-2>Go website</tag-2></tag-1> <tag-3><tag-4>Go documentation</tag-4></tag-3> <tag-5> <tag-6>GopherJS repo</tag-6> </tag-5> <tag-7> <tag-8>Learn X in Y minutes, where X=Go</tag-8> </tag-7> <tag-9> <tag-10>Load starter template</tag-10> </tag-9>"
+    "notes": "### <tag-1> ###\n<li  />\n\n### <tag-2> ###\n<a href=\"https://golang.org/\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-3> ###\n<li  />\n\n### <tag-4> ###\n<a href=\"https://golang.org/doc/\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-5> ###\n<li  />\n\n### <tag-6> ###\n<a href=\"https://github.com/gopherjs/gopherjs\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-7> ###\n<li  />\n\n### <tag-8> ###\n<a href=\"https://learnxinyminutes.com/docs/go/\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-9> ###\n<li  />\n\n### <tag-10> ###\n<a href=\"{{DOCS_BASE_URL}}languages/go\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-11> ###\n<li  />\n\n### <tag-12> ###\n<a href=\"?template=go\" class=\"button\" target=\"_parent\" data-template=\"go\" />\n\n",
+    "translation": "<tag-1><tag-2>Go website</tag-2></tag-1> <tag-3><tag-4>Go documentation</tag-4></tag-3> <tag-5> <tag-6>GopherJS repo</tag-6> </tag-5> <tag-7> <tag-8>Learn X in Y minutes, where X=Go</tag-8> </tag-7> <tag-9> <tag-10>LiveCodes Documentations</tag-10> </tag-9> <tag-11> <tag-12>Load starter template</tag-12> </tag-11>"
   },
   "go.name": {
     "notes": "",
     "translation": "Go"
   },
+  "goWasm.desc": {
+    "notes": "",
+    "translation": "Go interpreter running on WebAssembly, using Yaegi"
+  },
+  "goWasm.link": {
+    "notes": "### <tag-1> ###\n<li  />\n\n### <tag-2> ###\n<a href=\"https://golang.org/\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-3> ###\n<li  />\n\n### <tag-4> ###\n<a href=\"https://yaegi.org/\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-5> ###\n<li  />\n\n### <tag-6> ###\n<a href=\"https://learnxinyminutes.com/docs/go/\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-7> ###\n<li  />\n\n### <tag-8> ###\n<a href=\"{{DOCS_BASE_URL}}languages/go-wasm\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-9> ###\n<li  />\n\n### <tag-10> ###\n<a href=\"?template=go-wasm\" class=\"button\" target=\"_parent\" data-template=\"go-wasm\" />\n\n",
+    "translation": "<tag-1><tag-2>Go official website</tag-2></tag-1> <tag-3><tag-4>Yaegi</tag-4></tag-3> <tag-5> <tag-6>Learn X in Y minutes, where X=Go</tag-6> </tag-5> <tag-7> <tag-8>LiveCodes Documentations</tag-8> </tag-7> <tag-9> <tag-10>Load starter template</tag-10> </tag-9>"
+  },
+  "goWasm.name": {
+    "notes": "",
+    "translation": "Go (Wasm)"
+  },
   "haml.desc": {
     "notes": "",
     "translation": "Haml compiler for client side javascript view templates using clientside-haml-js."
diff --git a/src/livecodes/i18n/locales/en/language-info.ts b/src/livecodes/i18n/locales/en/language-info.ts
index 820583ea22..849bf97bb1 100644
--- a/src/livecodes/i18n/locales/en/language-info.ts
+++ b/src/livecodes/i18n/locales/en/language-info.ts
@@ -131,9 +131,14 @@ const languageInfo = {
     desc1:
       'Go (Golang) is an open source programming language that makes it easy to build simple, reliable, and efficient software.',
     desc2: 'Here, it is compiled to JavaScript using GopherJS.',
-    link: '<1><2>Go website</2></1> <3><4>Go documentation</4></3> <5> <6>GopherJS repo</6> </5> <7> <8>Learn X in Y minutes, where X=Go</8> </7> <9> <10>Load starter template</10> </9>',
+    link: '<1><2>Go website</2></1> <3><4>Go documentation</4></3> <5> <6>GopherJS repo</6> </5> <7> <8>Learn X in Y minutes, where X=Go</8> </7> <9> <10>LiveCodes Documentations</10> </9> <11> <12>Load starter template</12> </11>',
     name: 'Go',
   },
+  goWasm: {
+    desc: 'Go interpreter running on WebAssembly, using Yaegi',
+    link: '<1><2>Go official website</2></1> <3><4>Yaegi</4></3> <5> <6>Learn X in Y minutes, where X=Go</6> </5> <7> <8>LiveCodes Documentations</8> </7> <9> <10>Load starter template</10> </9>',
+    name: 'Go (Wasm)',
+  },
   haml: {
     desc: 'Haml compiler for client side javascript view templates using clientside-haml-js.',
     link: '<1><2>Haml official website</2></1> <3> <4>Haml documentation</4> </3> <5> <6>clientside-haml-js GitHub repo</6> </5> <7> <8>Learn X in Y minutes, where X=haml</8> </7> <9> <10>LiveCodes Documentations</10> </9>',
diff --git a/src/livecodes/i18n/locales/en/translation.lokalise.json b/src/livecodes/i18n/locales/en/translation.lokalise.json
index d6d83d19e2..83f8a79203 100644
--- a/src/livecodes/i18n/locales/en/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/en/translation.lokalise.json
@@ -2600,6 +2600,10 @@
     "notes": "",
     "translation": "C++ Starter"
   },
+  "templates.starter.cpp-wasm": {
+    "notes": "",
+    "translation": "C++ (Wasm) Starter"
+  },
   "templates.starter.daisyui": {
     "notes": "",
     "translation": "daisyUI Starter"
@@ -2620,6 +2624,10 @@
     "notes": "",
     "translation": "Go Starter"
   },
+  "templates.starter.go-wasm": {
+    "notes": "",
+    "translation": "Go (Wasm) Starter"
+  },
   "templates.starter.heading": {
     "notes": "",
     "translation": "Starter Templates"
diff --git a/src/livecodes/i18n/locales/en/translation.ts b/src/livecodes/i18n/locales/en/translation.ts
index 7346431e9b..9e7810b549 100644
--- a/src/livecodes/i18n/locales/en/translation.ts
+++ b/src/livecodes/i18n/locales/en/translation.ts
@@ -996,11 +996,13 @@ const translation = {
       coffeescript: 'CoffeeScript Starter',
       commonlisp: 'Common Lisp Starter',
       cpp: 'C++ Starter',
+      'cpp-wasm': 'C++ (Wasm) Starter',
       daisyui: 'daisyUI Starter',
       diagrams: 'Diagrams Starter',
       fennel: 'Fennel Starter',
       gleam: 'Gleam Starter',
       go: 'Go Starter',
+      'go-wasm': 'Go (Wasm) Starter',
       heading: 'Starter Templates',
       imba: 'Imba Starter',
       java: 'Java Starter',
diff --git a/src/livecodes/i18n/locales/es/language-info.lokalise.json b/src/livecodes/i18n/locales/es/language-info.lokalise.json
index fdd413f099..53dec063ad 100644
--- a/src/livecodes/i18n/locales/es/language-info.lokalise.json
+++ b/src/livecodes/i18n/locales/es/language-info.lokalise.json
@@ -222,6 +222,15 @@
   "go.name": {
     "translation": "Go"
   },
+  "goWasm.desc": {
+    "translation": "Intérprete Go ejecutándose en WebAssembly, usando Yaegi"
+  },
+  "goWasm.link": {
+    "translation": "<tag-1><tag-2>Go sitio web oficial</tag-2></tag-1> <tag-3><tag-4>Yaegi</tag-4></tag-3> <tag-5> <tag-6>Aprenda X en Y minutos, donde X=Go</tag-6> </tag-5> <tag-7> <tag-8>LiveCodes Documentations</tag-8> </tag-7> <tag-9> <tag-10>Cargar plantilla de inicio</tag-10> </tag-9>"
+  },
+  "goWasm.name": {
+    "translation": "Go (Wasm)"
+  },
   "haml.desc": {
     "translation": "Compilador Haml para plantillas de vista JavaScript del lado del cliente usando clientside-haml-js."
   },
diff --git a/src/livecodes/i18n/locales/es/language-info.ts b/src/livecodes/i18n/locales/es/language-info.ts
index 1914077a67..79238313ca 100644
--- a/src/livecodes/i18n/locales/es/language-info.ts
+++ b/src/livecodes/i18n/locales/es/language-info.ts
@@ -128,6 +128,11 @@ const languageInfo: I18nLangInfoTranslation = {
     link: '<1><2>Sitio web de Go</2></1> <3><4>Documentación de Go</4></3> <5> <6>Repositorio de GopherJS</6> </5> <7> <8>Aprende X en Y minutos, donde X=Go</8> </7> <9><10>Cargar plantilla inicial</10></9>',
     name: 'Go',
   },
+  goWasm: {
+    desc: 'Intérprete Go ejecutándose en WebAssembly, usando Yaegi',
+    link: '<1><2>Go sitio web oficial</2></1> <3><4>Yaegi</4></3> <5> <6>Aprenda X en Y minutos, donde X=Go</6> </5> <7> <8>LiveCodes Documentations</8> </7> <9> <10>Cargar plantilla de inicio</10> </9>',
+    name: 'Go (Wasm)',
+  },
   haml: {
     desc: 'Compilador Haml para plantillas de vista JavaScript del lado del cliente usando clientside-haml-js.',
     link: '<1><2>Sitio web oficial de Haml</2></1> <3> <4>Documentación de Haml</4> </3> <5> <6>Repositorio GitHub de clientside-haml-js</6> </5> <7> <8>Aprende X en Y minutos, donde X=haml</8> </7> <9> <10>Documentación de LiveCodes</10> </9>',
diff --git a/src/livecodes/i18n/locales/es/translation.lokalise.json b/src/livecodes/i18n/locales/es/translation.lokalise.json
index 8ad355d08a..fcff96d645 100644
--- a/src/livecodes/i18n/locales/es/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/es/translation.lokalise.json
@@ -1950,6 +1950,9 @@
   "templates.starter.cpp": {
     "translation": "Inicio C++"
   },
+  "templates.starter.cpp-wasm": {
+    "translation": "Inicio C++ (Wasm)"
+  },
   "templates.starter.daisyui": {
     "translation": "Inicio daisyUI"
   },
@@ -1965,6 +1968,9 @@
   "templates.starter.go": {
     "translation": "Inicio Go"
   },
+  "templates.starter.go-wasm": {
+    "translation": "Inicio Go (Wasm)"
+  },
   "templates.starter.heading": {
     "translation": "Plantillas de Inicio"
   },
diff --git a/src/livecodes/i18n/locales/es/translation.ts b/src/livecodes/i18n/locales/es/translation.ts
index ec6f69b986..4530743f01 100644
--- a/src/livecodes/i18n/locales/es/translation.ts
+++ b/src/livecodes/i18n/locales/es/translation.ts
@@ -989,11 +989,13 @@ const translation: I18nTranslation = {
       coffeescript: 'Inicio CoffeeScript',
       commonlisp: 'Inicio Common Lisp',
       cpp: 'Inicio C++',
+      'cpp-wasm': 'Inicio C++ (Wasm)',
       daisyui: 'Inicio daisyUI',
       diagrams: 'Inicio Diagramas',
       fennel: 'Inicio Fennel',
       gleam: 'Inicio Gleam',
       go: 'Inicio Go',
+      'go-wasm': 'Inicio Go (Wasm)',
       heading: 'Plantillas de Inicio',
       imba: 'Inicio Imba',
       java: 'Inicio Java',
diff --git a/src/livecodes/i18n/locales/fa/language-info.lokalise.json b/src/livecodes/i18n/locales/fa/language-info.lokalise.json
index 565b396ff4..6adf3cc2f7 100644
--- a/src/livecodes/i18n/locales/fa/language-info.lokalise.json
+++ b/src/livecodes/i18n/locales/fa/language-info.lokalise.json
@@ -222,6 +222,15 @@
   "go.name": {
     "translation": "Go"
   },
+  "goWasm.desc": {
+    "translation": "Go interpreter در حال اجرا در WebAssembly، با استفاده از Yaegi"
+  },
+  "goWasm.link": {
+    "translation": "<tag-1><tag-2>برو وب سایت رسمی</tag-2></tag-1> <tag-3><tag-4>یاگی</tag-4></tag-3> <tag-5> <tag-6>X را در دقیقه Y یاد بگیرید، جایی که X=Go</tag-6> </tag-5> <tag-7> <tag-8>مستندات LiveCodes</tag-8> </tag-7> <tag-9> <tag-10>قالب استارت را بارگذاری کنید</tag-10> </tag-9>"
+  },
+  "goWasm.name": {
+    "translation": "Go (Wasm)"
+  },
   "haml.desc": {
     "translation": "کامپایلر Haml برای قالب‌های نما جاوااسکریپت سمت کلاینت با استفاده از clientside-haml-js."
   },
diff --git a/src/livecodes/i18n/locales/fa/language-info.ts b/src/livecodes/i18n/locales/fa/language-info.ts
index 7aecddd0d2..a298caa32f 100644
--- a/src/livecodes/i18n/locales/fa/language-info.ts
+++ b/src/livecodes/i18n/locales/fa/language-info.ts
@@ -127,6 +127,11 @@ const languageInfo: I18nLangInfoTranslation = {
     link: '<1><2>وب‌سایت Go</2></1> <3><4>مستندات Go</4></3> <5> <6>مخزن GopherJS</6> </5> <7> <8>یادگیری X در Y دقیقه، جایی که X=Go</8> </7> <9> <10>بارگذاری قالب شروع کننده</10> </9>',
     name: 'Go',
   },
+  goWasm: {
+    desc: 'Go interpreter در حال اجرا در WebAssembly، با استفاده از Yaegi',
+    link: '<1><2>برو وب سایت رسمی</2></1> <3><4>یاگی</4></3> <5> <6>X را در دقیقه Y یاد بگیرید، جایی که X=Go</6> </5> <7> <8>مستندات LiveCodes</8> </7> <9> <10>قالب استارت را بارگذاری کنید</10> </9>',
+    name: 'Go (Wasm)',
+  },
   haml: {
     desc: 'کامپایلر Haml برای قالب‌های نما جاوااسکریپت سمت کلاینت با استفاده از clientside-haml-js.',
     link: '<1><2>وب‌سایت رسمی Haml</2></1> <3> <4>مستندات Haml</4> </3> <5> <6>مخزن GitHub clientside-haml-js</6> </5> <7> <8>یادگیری X در Y دقیقه، جایی که X=haml</8> </7> <9> <10>مستندات LiveCodes</10> </9>',
diff --git a/src/livecodes/i18n/locales/fa/translation.lokalise.json b/src/livecodes/i18n/locales/fa/translation.lokalise.json
index 6914086373..d869534f47 100644
--- a/src/livecodes/i18n/locales/fa/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/fa/translation.lokalise.json
@@ -1950,6 +1950,9 @@
   "templates.starter.cpp": {
     "translation": "شروع کننده C++"
   },
+  "templates.starter.cpp-wasm": {
+    "translation": "شروع کننده Go (Wasm)"
+  },
   "templates.starter.daisyui": {
     "translation": "شروع کننده daisyUI"
   },
@@ -1965,6 +1968,9 @@
   "templates.starter.go": {
     "translation": "شروع کننده Go"
   },
+  "templates.starter.go-wasm": {
+    "translation": "شروع کننده Go (Wasm)"
+  },
   "templates.starter.heading": {
     "translation": "قالب‌های شروع کننده"
   },
diff --git a/src/livecodes/i18n/locales/fa/translation.ts b/src/livecodes/i18n/locales/fa/translation.ts
index f8bba0f514..a5d0c93cc8 100644
--- a/src/livecodes/i18n/locales/fa/translation.ts
+++ b/src/livecodes/i18n/locales/fa/translation.ts
@@ -990,11 +990,13 @@ const translation: I18nTranslation = {
       coffeescript: 'شروع کننده CoffeeScript',
       commonlisp: 'شروع کننده Common Lisp',
       cpp: 'شروع کننده C++',
+      'cpp-wasm': 'شروع کننده Go (Wasm)',
       daisyui: 'شروع کننده daisyUI',
       diagrams: 'شروع کننده نمودارها',
       fennel: 'شروع کننده Fennel',
       gleam: 'شروع کننده Gleam',
       go: 'شروع کننده Go',
+      'go-wasm': 'شروع کننده Go (Wasm)',
       heading: 'قالب‌های شروع کننده',
       imba: 'شروع کننده Imba',
       java: 'شروع کننده جاوا',
diff --git a/src/livecodes/i18n/locales/fr/language-info.lokalise.json b/src/livecodes/i18n/locales/fr/language-info.lokalise.json
index 8784f5634b..487be6ec2d 100644
--- a/src/livecodes/i18n/locales/fr/language-info.lokalise.json
+++ b/src/livecodes/i18n/locales/fr/language-info.lokalise.json
@@ -222,6 +222,15 @@
   "go.name": {
     "translation": "Go"
   },
+  "goWasm.desc": {
+    "translation": "Interpréteur Go fonctionnant sur WebAssembly, utilisant Yaegi"
+  },
+  "goWasm.link": {
+    "translation": "<tag-1><tag-2>Site officiel de Go</tag-2></tag-1> <tag-3><tag-4>Yaegi</tag-4></tag-3> <tag-5> <tag-6>Apprendre X en Y minutes, où X=Go</tag-6> </tag-5> <tag-7> <tag-8>LiveCodes Documentations</tag-8> </tag-7> <tag-9> <tag-10>Charger un modèle de démarrage</tag-10> </tag-9>"
+  },
+  "goWasm.name": {
+    "translation": "Go (Wasm)"
+  },
   "haml.desc": {
     "translation": "Compilateur Haml pour les modèles de vue JavaScript côté client utilisant clientside-haml-js."
   },
diff --git a/src/livecodes/i18n/locales/fr/language-info.ts b/src/livecodes/i18n/locales/fr/language-info.ts
index 64c5cf3187..85f55ccc73 100644
--- a/src/livecodes/i18n/locales/fr/language-info.ts
+++ b/src/livecodes/i18n/locales/fr/language-info.ts
@@ -128,6 +128,11 @@ const languageInfo: I18nLangInfoTranslation = {
     link: '<1><2>Site web de Go</2></1> <3><4>Documentation de Go</4></3> <5> <6>Dépôt GopherJS</6> </5> <7> <8>Apprenez X en Y minutes, où X=Go</8> </7> <9><10>Charger le modèle de démarrage</10></9>',
     name: 'Go',
   },
+  goWasm: {
+    desc: 'Interpréteur Go fonctionnant sur WebAssembly, utilisant Yaegi',
+    link: '<1><2>Site officiel de Go</2></1> <3><4>Yaegi</4></3> <5> <6>Apprendre X en Y minutes, où X=Go</6> </5> <7> <8>LiveCodes Documentations</8> </7> <9> <10>Charger un modèle de démarrage</10> </9>',
+    name: 'Go (Wasm)',
+  },
   haml: {
     desc: 'Compilateur Haml pour les modèles de vue JavaScript côté client utilisant clientside-haml-js.',
     link: '<1><2>Site officiel de Haml</2></1> <3> <4>Documentation de Haml</4> </3> <5> <6>Dépôt GitHub de clientside-haml-js</6> </5> <7> <8>Apprenez X en Y minutes, où X=haml</8> </7> <9> <10>Documentation LiveCodes</10> </9>',
diff --git a/src/livecodes/i18n/locales/fr/translation.lokalise.json b/src/livecodes/i18n/locales/fr/translation.lokalise.json
index c9930fcf5f..448c55ba22 100644
--- a/src/livecodes/i18n/locales/fr/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/fr/translation.lokalise.json
@@ -1950,6 +1950,9 @@
   "templates.starter.cpp": {
     "translation": "Démarrage C++"
   },
+  "templates.starter.cpp-wasm": {
+    "translation": "Démarrage C++ (Wasm)"
+  },
   "templates.starter.daisyui": {
     "translation": "Démarrage daisyUI"
   },
@@ -1965,6 +1968,9 @@
   "templates.starter.go": {
     "translation": "Démarrage Go"
   },
+  "templates.starter.go-wasm": {
+    "translation": "Démarrage Go (Wasm)"
+  },
   "templates.starter.heading": {
     "translation": "Modèles de Démarrage"
   },
diff --git a/src/livecodes/i18n/locales/fr/translation.ts b/src/livecodes/i18n/locales/fr/translation.ts
index bf8b5614fb..4b02dcc1aa 100644
--- a/src/livecodes/i18n/locales/fr/translation.ts
+++ b/src/livecodes/i18n/locales/fr/translation.ts
@@ -991,11 +991,13 @@ const translation: I18nTranslation = {
       coffeescript: 'Démarrage CoffeeScript',
       commonlisp: 'Démarrage Common Lisp',
       cpp: 'Démarrage C++',
+      'cpp-wasm': 'Démarrage C++ (Wasm)',
       daisyui: 'Démarrage daisyUI',
       diagrams: 'Démarrage Diagrammes',
       fennel: 'Démarrage Fennel',
       gleam: 'Démarrage Gleam',
       go: 'Démarrage Go',
+      'go-wasm': 'Démarrage Go (Wasm)',
       heading: 'Modèles de Démarrage',
       imba: 'Démarrage Imba',
       java: 'Démarrage Java',
diff --git a/src/livecodes/i18n/locales/hi/language-info.lokalise.json b/src/livecodes/i18n/locales/hi/language-info.lokalise.json
index 06b89ff54e..5c4b26c454 100644
--- a/src/livecodes/i18n/locales/hi/language-info.lokalise.json
+++ b/src/livecodes/i18n/locales/hi/language-info.lokalise.json
@@ -222,6 +222,15 @@
   "go.name": {
     "translation": "Go"
   },
+  "goWasm.desc": {
+    "translation": "Yaegi का उपयोग करके WebAssembly पर चलने वाले दुभाषिया पर जाएं"
+  },
+  "goWasm.link": {
+    "translation": "<tag-1><tag-2>आधिकारिक वेबसाइट पर जाएं</tag-2></tag-1> <tag-3><tag-4>यागी</tag-4></tag-3> <tag-5> <tag-6>Y मिनट में X जानें, जहां X=Go</tag-6> </tag-5> <tag-7> <tag-8>लाइवकोड्स दस्तावेज़ीकरण</tag-8> </tag-7> <tag-9> <tag-10>स्टार्टर टेम्पलेट लोड करें</tag-10> </tag-9>"
+  },
+  "goWasm.name": {
+    "translation": "Go (Wasm)"
+  },
   "haml.desc": {
     "translation": "क्लाइंटसाइड-haml-js का उपयोग करके क्लाइंट साइड जावास्क्रिप्ट व्यू टेम्प्लेट्स के लिए Haml कंपाइलर।"
   },
diff --git a/src/livecodes/i18n/locales/hi/language-info.ts b/src/livecodes/i18n/locales/hi/language-info.ts
index 457d5f91e1..f829ebf33b 100644
--- a/src/livecodes/i18n/locales/hi/language-info.ts
+++ b/src/livecodes/i18n/locales/hi/language-info.ts
@@ -127,6 +127,11 @@ const languageInfo: I18nLangInfoTranslation = {
     link: '<1><2>Go वेबसाइट</2></1> <3><4>Go दस्तावेज़ीकरण</4></3> <5> <6>GopherJS रेपो</6> </5> <7> <8>X को Y मिनटों में सीखें, जहां X=Go</8> </7> <9><10>स्टार्टर टेम्पलेट लोड करें</10></9>',
     name: 'Go',
   },
+  goWasm: {
+    desc: 'Yaegi का उपयोग करके WebAssembly पर चलने वाले दुभाषिया पर जाएं',
+    link: '<1><2>आधिकारिक वेबसाइट पर जाएं</2></1> <3><4>यागी</4></3> <5> <6>Y मिनट में X जानें, जहां X=Go</6> </5> <7> <8>लाइवकोड्स दस्तावेज़ीकरण</8> </7> <9> <10>स्टार्टर टेम्पलेट लोड करें</10> </9>',
+    name: 'Go (Wasm)',
+  },
   haml: {
     desc: 'क्लाइंटसाइड-haml-js का उपयोग करके क्लाइंट साइड जावास्क्रिप्ट व्यू टेम्प्लेट्स के लिए Haml कंपाइलर।',
     link: '<1><2>Haml आधिकारिक वेबसाइट</2></1> <3> <4>Haml दस्तावेज़ीकरण</4> </3> <5> <6>clientside-haml-js GitHub रेपो</6> </5> <7> <8>X को Y मिनटों में सीखें, जहां X=haml</8> </7> <9> <10>LiveCodes दस्तावेज़ीकरण</10> </9>',
diff --git a/src/livecodes/i18n/locales/hi/translation.lokalise.json b/src/livecodes/i18n/locales/hi/translation.lokalise.json
index 721c9a91ca..5903fb36b4 100644
--- a/src/livecodes/i18n/locales/hi/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/hi/translation.lokalise.json
@@ -1950,6 +1950,9 @@
   "templates.starter.cpp": {
     "translation": "C++ स्टार्टर"
   },
+  "templates.starter.cpp-wasm": {
+    "translation": "C++ (Wasm) स्टार्टर"
+  },
   "templates.starter.daisyui": {
     "translation": "daisyUI स्टार्टर"
   },
@@ -1965,6 +1968,9 @@
   "templates.starter.go": {
     "translation": "Go स्टार्टर"
   },
+  "templates.starter.go-wasm": {
+    "translation": "Go (Wasm) स्टार्टर"
+  },
   "templates.starter.heading": {
     "translation": "स्टार्टर टेम्पलेट्स"
   },
diff --git a/src/livecodes/i18n/locales/hi/translation.ts b/src/livecodes/i18n/locales/hi/translation.ts
index 9411c5ed16..9da6a3082f 100644
--- a/src/livecodes/i18n/locales/hi/translation.ts
+++ b/src/livecodes/i18n/locales/hi/translation.ts
@@ -989,11 +989,13 @@ const translation: I18nTranslation = {
       coffeescript: 'CoffeeScript स्टार्टर',
       commonlisp: 'Common Lisp स्टार्टर',
       cpp: 'C++ स्टार्टर',
+      'cpp-wasm': 'C++ (Wasm) स्टार्टर',
       daisyui: 'daisyUI स्टार्टर',
       diagrams: 'आरेख स्टार्टर',
       fennel: 'Fennel स्टार्टर',
       gleam: 'Gleam स्टार्टर',
       go: 'Go स्टार्टर',
+      'go-wasm': 'Go (Wasm) स्टार्टर',
       heading: 'स्टार्टर टेम्पलेट्स',
       imba: 'Imba स्टार्टर',
       java: 'Java स्टार्टर',
diff --git a/src/livecodes/i18n/locales/it/language-info.lokalise.json b/src/livecodes/i18n/locales/it/language-info.lokalise.json
index 940742e123..3dbf79b54c 100644
--- a/src/livecodes/i18n/locales/it/language-info.lokalise.json
+++ b/src/livecodes/i18n/locales/it/language-info.lokalise.json
@@ -222,6 +222,15 @@
   "go.name": {
     "translation": "Go"
   },
+  "goWasm.desc": {
+    "translation": "Interprete Go in esecuzione su WebAssembly, utilizzando Yaegi"
+  },
+  "goWasm.link": {
+    "translation": "<tag-1><tag-2>Sito ufficiale di Go</tag-2></tag-1> <tag-3><tag-4>Yaegi</tag-4></tag-3> <tag-5> <tag-6>Imparare X in Y minuti, dove X=Go</tag-6> </tag-5> <tag-7> <tag-8>LiveCodes Documentations</tag-8> </tag-7> <tag-9> <tag-10>Caricare il modello di partenza</tag-10> </tag-9>"
+  },
+  "goWasm.name": {
+    "translation": "Go (Wasm)"
+  },
   "haml.desc": {
     "translation": "Compilatore Haml per template di vista JavaScript lato client utilizzando clientside-haml-js."
   },
diff --git a/src/livecodes/i18n/locales/it/language-info.ts b/src/livecodes/i18n/locales/it/language-info.ts
index cd6bb68c34..a174242cdb 100644
--- a/src/livecodes/i18n/locales/it/language-info.ts
+++ b/src/livecodes/i18n/locales/it/language-info.ts
@@ -127,6 +127,11 @@ const languageInfo: I18nLangInfoTranslation = {
     link: '<1><2>Sito web di Go</2></1> <3><4>Documentazione di Go</4></3> <5> <6>Repo di GopherJS</6> </5> <7> <8>Impara X in Y minuti, dove X=Go</8> </7> <9><10>Carica modello di partenza</10></9>',
     name: 'Go',
   },
+  goWasm: {
+    desc: 'Interprete Go in esecuzione su WebAssembly, utilizzando Yaegi',
+    link: '<1><2>Sito ufficiale di Go</2></1> <3><4>Yaegi</4></3> <5> <6>Imparare X in Y minuti, dove X=Go</6> </5> <7> <8>LiveCodes Documentations</8> </7> <9> <10>Caricare il modello di partenza</10> </9>',
+    name: 'Go (Wasm)',
+  },
   haml: {
     desc: 'Compilatore Haml per template di vista JavaScript lato client utilizzando clientside-haml-js.',
     link: '<1><2>Sito ufficiale di Haml</2></1> <3> <4>Documentazione di Haml</4> </3> <5> <6>Repository GitHub di clientside-haml-js</6> </5> <7> <8>Impara X in Y minuti, dove X=haml</8> </7> <9> <10>Documentazione LiveCodes</10> </9>',
diff --git a/src/livecodes/i18n/locales/it/translation.lokalise.json b/src/livecodes/i18n/locales/it/translation.lokalise.json
index 657f112407..aa2447dab8 100644
--- a/src/livecodes/i18n/locales/it/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/it/translation.lokalise.json
@@ -1950,6 +1950,9 @@
   "templates.starter.cpp": {
     "translation": "Starter C++"
   },
+  "templates.starter.cpp-wasm": {
+    "translation": "Starter C++ (Wasm)"
+  },
   "templates.starter.daisyui": {
     "translation": "Starter daisyUI"
   },
@@ -1965,6 +1968,9 @@
   "templates.starter.go": {
     "translation": "Starter Go"
   },
+  "templates.starter.go-wasm": {
+    "translation": "Starter Go (Wasm)"
+  },
   "templates.starter.heading": {
     "translation": "Modelli di Partenza"
   },
diff --git a/src/livecodes/i18n/locales/it/translation.ts b/src/livecodes/i18n/locales/it/translation.ts
index e6af58b806..e114e0149f 100644
--- a/src/livecodes/i18n/locales/it/translation.ts
+++ b/src/livecodes/i18n/locales/it/translation.ts
@@ -990,11 +990,13 @@ const translation: I18nTranslation = {
       coffeescript: 'Starter CoffeeScript',
       commonlisp: 'Starter Common Lisp',
       cpp: 'Starter C++',
+      'cpp-wasm': 'Starter C++ (Wasm)',
       daisyui: 'Starter daisyUI',
       diagrams: 'Starter Diagrammi',
       fennel: 'Starter Fennel',
       gleam: 'Starter Gleam',
       go: 'Starter Go',
+      'go-wasm': 'Starter Go (Wasm)',
       heading: 'Modelli di Partenza',
       imba: 'Starter Imba',
       java: 'Starter Java',
diff --git a/src/livecodes/i18n/locales/ja/language-info.lokalise.json b/src/livecodes/i18n/locales/ja/language-info.lokalise.json
index 66b7e00bd9..ecc5203a35 100644
--- a/src/livecodes/i18n/locales/ja/language-info.lokalise.json
+++ b/src/livecodes/i18n/locales/ja/language-info.lokalise.json
@@ -222,6 +222,15 @@
   "go.name": {
     "translation": "Go"
   },
+  "goWasm.desc": {
+    "translation": "WebAssembly上で動作するGoインタプリタ、Yaegiを使用"
+  },
+  "goWasm.link": {
+    "translation": "<tag-1><tag-2>囲碁公式サイト</tag-2></tag-1> <tag-3><tag-4>八重垣</tag-4></tag-3> <tag-5> <tag-6>XをY分で学ぶ、X=囲碁</tag-6> </tag-5> <tag-7> <tag-8>LiveCodesドキュメンテーション</tag-8> </tag-7> <tag-9> <tag-10>スターターテンプレートの読み込み</tag-10> </tag-9>"
+  },
+  "goWasm.name": {
+    "translation": "Go (Wasm)"
+  },
   "haml.desc": {
     "translation": "clientside-haml-js を使用したクライアントサイド JavaScript ビューテンプレート用の Haml コンパイラ。"
   },
diff --git a/src/livecodes/i18n/locales/ja/language-info.ts b/src/livecodes/i18n/locales/ja/language-info.ts
index d593748fc6..a2c7af56b1 100644
--- a/src/livecodes/i18n/locales/ja/language-info.ts
+++ b/src/livecodes/i18n/locales/ja/language-info.ts
@@ -127,6 +127,11 @@ const languageInfo: I18nLangInfoTranslation = {
     link: '<1><2>Go ウェブサイト</2></1> <3><4>Go ドキュメント</4></3> <5> <6>GopherJS リポジトリ</6> </5> <7> <8>X分でYを学ぶ、X=Go</8> </7> <9><10>スターターテンプレートを読み込む</10></9>',
     name: 'Go',
   },
+  goWasm: {
+    desc: 'WebAssembly上で動作するGoインタプリタ、Yaegiを使用',
+    link: '<1><2>囲碁公式サイト</2></1> <3><4>八重垣</4></3> <5> <6>XをY分で学ぶ、X=囲碁</6> </5> <7> <8>LiveCodesドキュメンテーション</8> </7> <9> <10>スターターテンプレートの読み込み</10> </9>',
+    name: 'Go (Wasm)',
+  },
   haml: {
     desc: 'clientside-haml-js を使用したクライアントサイド JavaScript ビューテンプレート用の Haml コンパイラ。',
     link: '<1><2>Haml 公式ウェブサイト</2></1> <3> <4>Haml ドキュメント</4> </3> <5> <6>clientside-haml-js GitHub リポジトリ</6> </5> <7> <8>X分でYを学ぶ、X=haml</8> </7> <9> <10>LiveCodes ドキュメント</10> </9>',
diff --git a/src/livecodes/i18n/locales/ja/translation.lokalise.json b/src/livecodes/i18n/locales/ja/translation.lokalise.json
index e6b88f2abf..af16dd574e 100644
--- a/src/livecodes/i18n/locales/ja/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/ja/translation.lokalise.json
@@ -1950,6 +1950,9 @@
   "templates.starter.cpp": {
     "translation": "C++スターター"
   },
+  "templates.starter.cpp-wasm": {
+    "translation": "C++（Wasm）スターター"
+  },
   "templates.starter.daisyui": {
     "translation": "daisyUIスターター"
   },
@@ -1965,6 +1968,9 @@
   "templates.starter.go": {
     "translation": "Goスターター"
   },
+  "templates.starter.go-wasm": {
+    "translation": "Go（Wasm）スターター"
+  },
   "templates.starter.heading": {
     "translation": "スターターテンプレート"
   },
diff --git a/src/livecodes/i18n/locales/ja/translation.ts b/src/livecodes/i18n/locales/ja/translation.ts
index 2ad602c9ab..2b90d5ba45 100644
--- a/src/livecodes/i18n/locales/ja/translation.ts
+++ b/src/livecodes/i18n/locales/ja/translation.ts
@@ -989,11 +989,13 @@ const translation: I18nTranslation = {
       coffeescript: 'CoffeeScriptスターター',
       commonlisp: 'Common Lispスターター',
       cpp: 'C++スターター',
+      'cpp-wasm': 'C++（Wasm）スターター',
       daisyui: 'daisyUIスターター',
       diagrams: 'ダイアグラムスターター',
       fennel: 'Fennelスターター',
       gleam: 'Gleamスターター',
       go: 'Goスターター',
+      'go-wasm': 'Go（Wasm）スターター',
       heading: 'スターターテンプレート',
       imba: 'Imbaスターター',
       java: 'Javaスターター',
diff --git a/src/livecodes/i18n/locales/pt/language-info.lokalise.json b/src/livecodes/i18n/locales/pt/language-info.lokalise.json
index 41d7a05153..1d9ef54339 100644
--- a/src/livecodes/i18n/locales/pt/language-info.lokalise.json
+++ b/src/livecodes/i18n/locales/pt/language-info.lokalise.json
@@ -222,6 +222,15 @@
   "go.name": {
     "translation": "Go"
   },
+  "goWasm.desc": {
+    "translation": "Intérprete Go em execução no WebAssembly, usando Yaegi"
+  },
+  "goWasm.link": {
+    "translation": "<tag-1><tag-2>Sítio Web oficial do Go</tag-2></tag-1> <tag-3><tag-4>Yaegi</tag-4></tag-3> <tag-5> <tag-6>Aprender X em Y minutos, em que X=Go</tag-6> </tag-5> <tag-7> <tag-8>Documentações LiveCodes</tag-8> </tag-7> <tag-9> <tag-10>Carregar modelo inicial</tag-10> </tag-9>"
+  },
+  "goWasm.name": {
+    "translation": "Go (Wasm)"
+  },
   "haml.desc": {
     "translation": "Compilador Haml para modelos de visualização JavaScript do lado do cliente usando clientside-haml-js."
   },
diff --git a/src/livecodes/i18n/locales/pt/language-info.ts b/src/livecodes/i18n/locales/pt/language-info.ts
index 1170313707..465969e0f3 100644
--- a/src/livecodes/i18n/locales/pt/language-info.ts
+++ b/src/livecodes/i18n/locales/pt/language-info.ts
@@ -127,6 +127,11 @@ const languageInfo: I18nLangInfoTranslation = {
     link: '<1><2>Site do Go</2></1> <3><4>Documentação do Go</4></3> <5> <6>Repositório do GopherJS</6> </5> <7> <8>Aprenda X em Y minutos, onde X=Go</8> </7> <9><10>Carregar modelo inicial</10></9>',
     name: 'Go',
   },
+  goWasm: {
+    desc: 'Intérprete Go em execução no WebAssembly, usando Yaegi',
+    link: '<1><2>Sítio Web oficial do Go</2></1> <3><4>Yaegi</4></3> <5> <6>Aprender X em Y minutos, em que X=Go</6> </5> <7> <8>Documentações LiveCodes</8> </7> <9> <10>Carregar modelo inicial</10> </9>',
+    name: 'Go (Wasm)',
+  },
   haml: {
     desc: 'Compilador Haml para modelos de visualização JavaScript do lado do cliente usando clientside-haml-js.',
     link: '<1><2>Site oficial do Haml</2></1> <3> <4>Documentação do Haml</4> </3> <5> <6>Repositório GitHub do clientside-haml-js</6> </5> <7> <8>Aprenda X em Y minutos, onde X=haml</8> </7> <9> <10>Documentação do LiveCodes</10> </9>',
diff --git a/src/livecodes/i18n/locales/pt/translation.lokalise.json b/src/livecodes/i18n/locales/pt/translation.lokalise.json
index 1be85db133..851a549b21 100644
--- a/src/livecodes/i18n/locales/pt/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/pt/translation.lokalise.json
@@ -1950,6 +1950,9 @@
   "templates.starter.cpp": {
     "translation": "Iniciante C++"
   },
+  "templates.starter.cpp-wasm": {
+    "translation": "Iniciante C++ (Wasm)"
+  },
   "templates.starter.daisyui": {
     "translation": "Iniciante daisyUI"
   },
@@ -1965,6 +1968,9 @@
   "templates.starter.go": {
     "translation": "Iniciante Go"
   },
+  "templates.starter.go-wasm": {
+    "translation": "Iniciante Go (Wasm)"
+  },
   "templates.starter.heading": {
     "translation": "Modelos Iniciantes"
   },
diff --git a/src/livecodes/i18n/locales/pt/translation.ts b/src/livecodes/i18n/locales/pt/translation.ts
index 7260f4e3c3..ded4a0be2f 100644
--- a/src/livecodes/i18n/locales/pt/translation.ts
+++ b/src/livecodes/i18n/locales/pt/translation.ts
@@ -990,11 +990,13 @@ const translation: I18nTranslation = {
       coffeescript: 'Iniciante CoffeeScript',
       commonlisp: 'Iniciante Common Lisp',
       cpp: 'Iniciante C++',
+      'cpp-wasm': 'Iniciante C++ (Wasm)',
       daisyui: 'Iniciante daisyUI',
       diagrams: 'Iniciante Diagrams',
       fennel: 'Iniciante Fennel',
       gleam: 'Iniciante Gleam',
       go: 'Iniciante Go',
+      'go-wasm': 'Iniciante Go (Wasm)',
       heading: 'Modelos Iniciantes',
       imba: 'Iniciante Imba',
       java: 'Iniciante Java',
diff --git a/src/livecodes/i18n/locales/ru/language-info.lokalise.json b/src/livecodes/i18n/locales/ru/language-info.lokalise.json
index a3852feaa0..c4786bc7d4 100644
--- a/src/livecodes/i18n/locales/ru/language-info.lokalise.json
+++ b/src/livecodes/i18n/locales/ru/language-info.lokalise.json
@@ -222,6 +222,15 @@
   "go.name": {
     "translation": "Go"
   },
+  "goWasm.desc": {
+    "translation": "Интерпретатор Go, работающий на WebAssembly, с использованием Yaegi"
+  },
+  "goWasm.link": {
+    "translation": "<tag-1><tag-2>Официальный сайт Go</tag-2></tag-1> <tag-3><tag-4>Yaegi</tag-4></tag-3> <tag-5> <tag-6>Узнайте X за Y минут, где X=Go</tag-6> </tag-5> <tag-7> <tag-8>Документация LiveCodes</tag-8> </tag-7> <tag-9> <tag-10>Загрузите стартовый шаблон</tag-10> </tag-9>"
+  },
+  "goWasm.name": {
+    "translation": "Go (Wasm)"
+  },
   "haml.desc": {
     "translation": "Компилятор Haml для клиентских шаблонов JavaScript с использованием clientside-haml-js."
   },
diff --git a/src/livecodes/i18n/locales/ru/language-info.ts b/src/livecodes/i18n/locales/ru/language-info.ts
index 3554d0a592..c25e54afcb 100644
--- a/src/livecodes/i18n/locales/ru/language-info.ts
+++ b/src/livecodes/i18n/locales/ru/language-info.ts
@@ -129,6 +129,11 @@ const languageInfo: I18nLangInfoTranslation = {
     link: '<1><2>Сайт Go</2></1> <3><4>Документация Go</4></3> <5> <6>Репозиторий GopherJS</6> </5> <7> <8>Изучите X за Y минут, где X=Go</8> </7> <9><10>Загрузить стартовый шаблон</10></9>',
     name: 'Go',
   },
+  goWasm: {
+    desc: 'Интерпретатор Go, работающий на WebAssembly, с использованием Yaegi',
+    link: '<1><2>Официальный сайт Go</2></1> <3><4>Yaegi</4></3> <5> <6>Узнайте X за Y минут, где X=Go</6> </5> <7> <8>Документация LiveCodes</8> </7> <9> <10>Загрузите стартовый шаблон</10> </9>',
+    name: 'Go (Wasm)',
+  },
   haml: {
     desc: 'Компилятор Haml для клиентских шаблонов JavaScript с использованием clientside-haml-js.',
     link: '<1><2>Официальный сайт Haml</2></1> <3> <4>Документация Haml</4> </3> <5> <6>GitHub-репозиторий clientside-haml-js</6> </5> <7> <8>Изучите X за Y минут, где X=haml</8> </7> <9> <10>Документация LiveCodes</10> </9>',
diff --git a/src/livecodes/i18n/locales/ru/translation.lokalise.json b/src/livecodes/i18n/locales/ru/translation.lokalise.json
index dece03eb6f..97c0d3a820 100644
--- a/src/livecodes/i18n/locales/ru/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/ru/translation.lokalise.json
@@ -1950,6 +1950,9 @@
   "templates.starter.cpp": {
     "translation": "Стартер C++"
   },
+  "templates.starter.cpp-wasm": {
+    "translation": "Стартер C++ (Wasm)"
+  },
   "templates.starter.daisyui": {
     "translation": "Стартер daisyUI"
   },
@@ -1965,6 +1968,9 @@
   "templates.starter.go": {
     "translation": "Стартер Go"
   },
+  "templates.starter.go-wasm": {
+    "translation": "Стартер Go (Wasm)"
+  },
   "templates.starter.heading": {
     "translation": "Стартовые шаблоны"
   },
diff --git a/src/livecodes/i18n/locales/ru/translation.ts b/src/livecodes/i18n/locales/ru/translation.ts
index b631cf88f0..ee01115053 100644
--- a/src/livecodes/i18n/locales/ru/translation.ts
+++ b/src/livecodes/i18n/locales/ru/translation.ts
@@ -989,11 +989,13 @@ const translation: I18nTranslation = {
       coffeescript: 'Стартер CoffeeScript',
       commonlisp: 'Стартер Common Lisp',
       cpp: 'Стартер C++',
+      'cpp-wasm': 'Стартер C++ (Wasm)',
       daisyui: 'Стартер daisyUI',
       diagrams: 'Стартер диаграмм',
       fennel: 'Стартер Fennel',
       gleam: 'Стартер Gleam',
       go: 'Стартер Go',
+      'go-wasm': 'Стартер Go (Wasm)',
       heading: 'Стартовые шаблоны',
       imba: 'Стартер Imba',
       java: 'Стартер Java',
diff --git a/src/livecodes/i18n/locales/ur/language-info.lokalise.json b/src/livecodes/i18n/locales/ur/language-info.lokalise.json
index 3126f5aa1b..08222d5590 100644
--- a/src/livecodes/i18n/locales/ur/language-info.lokalise.json
+++ b/src/livecodes/i18n/locales/ur/language-info.lokalise.json
@@ -222,6 +222,15 @@
   "go.name": {
     "translation": "گو"
   },
+  "goWasm.desc": {
+    "translation": "Yaegi کا استعمال کرتے ہوئے WebAssembly پر چلنے والے مترجم پر جائیں۔"
+  },
+  "goWasm.link": {
+    "translation": "<tag-1><tag-2>سرکاری ویب سائٹ پر جائیں</tag-2></tag-1> <tag-3><tag-4>یگی</tag-4></tag-3> <tag-5> <tag-6>Y منٹ میں X سیکھیں ، جہاں X = Go</tag-6> </tag-5> <tag-7> <tag-8>لائیو کوڈز دستاویزات</tag-8> </tag-7> <tag-9> <tag-10>لوڈ اسٹارٹر سانچہ</tag-10> </tag-9>"
+  },
+  "goWasm.name": {
+    "translation": "Go (Wasm)"
+  },
   "haml.desc": {
     "translation": "کلائنٹ سائیڈ جاوا اسکرپٹ ویو ٹیمپلیٹس کے لیے کلائنٹ سائیڈ-ہیمل-جے ایس کا استعمال کرتے ہوئے ہیمل کمپائلر۔"
   },
diff --git a/src/livecodes/i18n/locales/ur/language-info.ts b/src/livecodes/i18n/locales/ur/language-info.ts
index 9dc26e5bb9..d8d9f66514 100644
--- a/src/livecodes/i18n/locales/ur/language-info.ts
+++ b/src/livecodes/i18n/locales/ur/language-info.ts
@@ -128,6 +128,11 @@ const languageInfo: I18nLangInfoTranslation = {
     link: '<1><2>گو ویب سائٹ</2></1> <3><4>گو دستاویزات</4></3> <5> <6>گوفر جے ایس ریپو</6> </5> <7> <8>X کو Y منٹ میں سیکھیں، جہاں X=گو</8> </7> <9><10>ابتدائی سانچہ لوڈ کریں</10></9>',
     name: 'گو',
   },
+  goWasm: {
+    desc: 'Yaegi کا استعمال کرتے ہوئے WebAssembly پر چلنے والے مترجم پر جائیں۔',
+    link: '<1><2>سرکاری ویب سائٹ پر جائیں</2></1> <3><4>یگی</4></3> <5> <6>Y منٹ میں X سیکھیں ، جہاں X = Go</6> </5> <7> <8>لائیو کوڈز دستاویزات</8> </7> <9> <10>لوڈ اسٹارٹر سانچہ</10> </9>',
+    name: 'Go (Wasm)',
+  },
   haml: {
     desc: 'کلائنٹ سائیڈ جاوا اسکرپٹ ویو ٹیمپلیٹس کے لیے کلائنٹ سائیڈ-ہیمل-جے ایس کا استعمال کرتے ہوئے ہیمل کمپائلر۔',
     link: '<1><2>ہیمل کی سرکاری ویب سائٹ</2></1> <3> <4>ہیمل دستاویزات</4> </3> <5> <6>کلائنٹ سائیڈ-ہیمل-جے ایس گٹ ہب ریپو</6> </5> <7> <8>X کو Y منٹ میں سیکھیں، جہاں X=ہیمل</8> </7> <9> <10>لائیو کوڈز دستاویزات</10> </9>',
diff --git a/src/livecodes/i18n/locales/ur/translation.lokalise.json b/src/livecodes/i18n/locales/ur/translation.lokalise.json
index f72e40283a..c3c5d43461 100644
--- a/src/livecodes/i18n/locales/ur/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/ur/translation.lokalise.json
@@ -1950,6 +1950,9 @@
   "templates.starter.cpp": {
     "translation": "سی++ شروعاتی"
   },
+  "templates.starter.cpp-wasm": {
+    "translation": "سی++ (واسم) شروعاتی"
+  },
   "templates.starter.daisyui": {
     "translation": "daisyUI شروعاتی"
   },
@@ -1965,6 +1968,9 @@
   "templates.starter.go": {
     "translation": "گو شروعاتی"
   },
+  "templates.starter.go-wasm": {
+    "translation": "گو (واسم) شروعاتی"
+  },
   "templates.starter.heading": {
     "translation": "شروعاتی سانچے"
   },
diff --git a/src/livecodes/i18n/locales/ur/translation.ts b/src/livecodes/i18n/locales/ur/translation.ts
index 27a451cd4f..24aa686bdd 100644
--- a/src/livecodes/i18n/locales/ur/translation.ts
+++ b/src/livecodes/i18n/locales/ur/translation.ts
@@ -989,11 +989,13 @@ const translation: I18nTranslation = {
       coffeescript: 'کافی اسکرپٹ شروعاتی',
       commonlisp: 'کامن لسپ شروعاتی',
       cpp: 'سی++ شروعاتی',
+      'cpp-wasm': 'سی++ (واسم) شروعاتی',
       daisyui: 'daisyUI شروعاتی',
       diagrams: 'ڈایاگرامز شروعاتی',
       fennel: 'فینل شروعاتی',
       gleam: 'گلیم شروعاتی',
       go: 'گو شروعاتی',
+      'go-wasm': 'گو (واسم) شروعاتی',
       heading: 'شروعاتی سانچے',
       imba: 'امبا شروعاتی',
       java: 'جاوا شروعاتی',
diff --git a/src/livecodes/i18n/locales/zh-CN/language-info.lokalise.json b/src/livecodes/i18n/locales/zh-CN/language-info.lokalise.json
index e53ce3c702..3f1399c9d7 100644
--- a/src/livecodes/i18n/locales/zh-CN/language-info.lokalise.json
+++ b/src/livecodes/i18n/locales/zh-CN/language-info.lokalise.json
@@ -222,6 +222,15 @@
   "go.name": {
     "translation": "Go"
   },
+  "goWasm.desc": {
+    "translation": "使用 Yaegi 在 WebAssembly 上运行 Go 解释器"
+  },
+  "goWasm.link": {
+    "translation": "<tag-1><tag-2>围棋官方网站</tag-2></tag-1> <tag-3><tag-4>Yaegi</tag-4></tag-3> <tag-5> <tag-6>在 Y 分钟内学会 X，其中 X=Go</tag-6> </tag-5> <tag-7> <tag-8>LiveCodes 文档</tag-8> </tag-7> <tag-9> <tag-10>加载启动模板</tag-10> </tag-9>"
+  },
+  "goWasm.name": {
+    "translation": "Go (Wasm)"
+  },
   "haml.desc": {
     "translation": "使用 clientside-haml-js 的 Haml 编译器，用于编写客户端侧 JavaScript 视图模板。"
   },
diff --git a/src/livecodes/i18n/locales/zh-CN/language-info.ts b/src/livecodes/i18n/locales/zh-CN/language-info.ts
index c06b638aa9..a01bb4731e 100644
--- a/src/livecodes/i18n/locales/zh-CN/language-info.ts
+++ b/src/livecodes/i18n/locales/zh-CN/language-info.ts
@@ -124,6 +124,11 @@ const languageInfo: I18nLangInfoTranslation = {
     link: '<1><2>Go 官方网站</2></1> <3><4>Go 文档</4></3> <5> <6>GopherJS 仓库</6> </5> <7> <8>在 Y 分钟内学习 X，其中 X=Go</8> </7> <9><10>加载启动模板</10></9>',
     name: 'Go',
   },
+  goWasm: {
+    desc: '使用 Yaegi 在 WebAssembly 上运行 Go 解释器',
+    link: '<1><2>围棋官方网站</2></1> <3><4>Yaegi</4></3> <5> <6>在 Y 分钟内学会 X，其中 X=Go</6> </5> <7> <8>LiveCodes 文档</8> </7> <9> <10>加载启动模板</10> </9>',
+    name: 'Go (Wasm)',
+  },
   haml: {
     desc: '使用 clientside-haml-js 的 Haml 编译器，用于编写客户端侧 JavaScript 视图模板。',
     link: '<1><2>Haml 官网</2></1> <3> <4>Haml 文档</4> </3> <5> <6>clientside-haml-js GitHub 仓库</6> </5> <7> <8>在 Y 分钟内学习 X，其中 X=haml</8> </7> <9> <10>LiveCodes 文档</10> </9>',
diff --git a/src/livecodes/i18n/locales/zh-CN/translation.lokalise.json b/src/livecodes/i18n/locales/zh-CN/translation.lokalise.json
index 34d128b18c..b2e410b40f 100644
--- a/src/livecodes/i18n/locales/zh-CN/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/zh-CN/translation.lokalise.json
@@ -1950,6 +1950,9 @@
   "templates.starter.cpp": {
     "translation": "C++ 启动模板"
   },
+  "templates.starter.cpp-wasm": {
+    "translation": "C++（WASM）启动模板"
+  },
   "templates.starter.daisyui": {
     "translation": "daisyUI 启动模板"
   },
@@ -1965,6 +1968,9 @@
   "templates.starter.go": {
     "translation": "Go 启动模板"
   },
+  "templates.starter.go-wasm": {
+    "translation": "Go（WASM）启动模板"
+  },
   "templates.starter.heading": {
     "translation": "启动模板"
   },
diff --git a/src/livecodes/i18n/locales/zh-CN/translation.ts b/src/livecodes/i18n/locales/zh-CN/translation.ts
index e5b541584e..1185d6da5d 100644
--- a/src/livecodes/i18n/locales/zh-CN/translation.ts
+++ b/src/livecodes/i18n/locales/zh-CN/translation.ts
@@ -987,11 +987,13 @@ const translation: I18nTranslation = {
       coffeescript: 'CoffeeScript 启动模板',
       commonlisp: 'Common Lisp 启动模板',
       cpp: 'C++ 启动模板',
+      'cpp-wasm': 'C++（WASM）启动模板',
       daisyui: 'daisyUI 启动模板',
       diagrams: '图表启动模板',
       fennel: 'Fennel 启动模板',
       gleam: 'Gleam 启动模板',
       go: 'Go 启动模板',
+      'go-wasm': 'Go（WASM）启动模板',
       heading: '启动模板',
       imba: 'Imba 启动模板',
       java: 'Java 启动模板',
diff --git a/src/livecodes/languages/clojurescript/lang-clojurescript.ts b/src/livecodes/languages/clojurescript/lang-clojurescript.ts
index 60199edeee..6b438e8c5e 100644
--- a/src/livecodes/languages/clojurescript/lang-clojurescript.ts
+++ b/src/livecodes/languages/clojurescript/lang-clojurescript.ts
@@ -23,9 +23,9 @@ export const clojurescript: LanguageSpecs = {
     imports: {
       'cherry-cljs': cherryCljsBaseUrl + 'index.js',
       'cherry-cljs/cljs.core.js': cherryCljsBaseUrl + 'cljs.core.js',
-      'cherry-cljs/lib/clojure.string.js': 'lib/clojure.string.js',
-      'cherry-cljs/lib/clojure.set.js': 'lib/clojure.set.js',
-      'cherry-cljs/lib/clojure.walk.js': 'lib/clojure.walk.js',
+      'cherry-cljs/lib/clojure.string.js': cherryCljsBaseUrl + 'lib/clojure.string.js',
+      'cherry-cljs/lib/clojure.set.js': cherryCljsBaseUrl + 'lib/clojure.set.js',
+      'cherry-cljs/lib/clojure.walk.js': cherryCljsBaseUrl + 'lib/clojure.walk.js',
       'squint-cljs': squintCljsBaseUrl + 'index.js',
       'squint-cljs/core.js': squintCljsBaseUrl + 'core.js',
       'squint-cljs/string.js': squintCljsBaseUrl + 'string.js',
diff --git a/src/livecodes/languages/diagrams/lang-diagrams-compiler-esm.ts b/src/livecodes/languages/diagrams/lang-diagrams-compiler-esm.ts
index ff45f7120b..d27d3da78d 100644
--- a/src/livecodes/languages/diagrams/lang-diagrams-compiler-esm.ts
+++ b/src/livecodes/languages/diagrams/lang-diagrams-compiler-esm.ts
@@ -16,7 +16,7 @@ import {
   cytoscapeUrl,
   elkjsBaseUrl,
   graphreCdnUrl,
-  hpccJsCdnUrl,
+  hpccJsCdnBaseUrl,
   mermaidCdnUrl,
   nomnomlCdnUrl,
   pintoraUrl,
@@ -180,7 +180,7 @@ const compileGnuplot = async (code: string) => {
 const compileMermaid = async (code: string) => {
   let mermaid: any;
   const load = async () => {
-    mermaid = (await import(mermaidCdnUrl)).default;
+    mermaid = await loadScript(mermaidCdnUrl, 'mermaid');
     mermaid.initialize({
       startOnLoad: false,
     });
@@ -201,7 +201,7 @@ const compileMermaid = async (code: string) => {
 const compileGraphviz = async (code: string) => {
   let graphviz: any;
   const load = async () => {
-    const hpccWasm = await import(hpccJsCdnUrl);
+    const hpccWasm = await import(hpccJsCdnBaseUrl + 'index.js');
     graphviz = await hpccWasm.Graphviz.load();
   };
   const render = (src: string, script: HTMLScriptElement) => {
diff --git a/src/livecodes/languages/go-wasm/index.ts b/src/livecodes/languages/go-wasm/index.ts
new file mode 100644
index 0000000000..ef6da91230
--- /dev/null
+++ b/src/livecodes/languages/go-wasm/index.ts
@@ -0,0 +1 @@
+export * from './lang-go-wasm';
diff --git a/src/livecodes/languages/go-wasm/lang-go-wasm-script.ts b/src/livecodes/languages/go-wasm/lang-go-wasm-script.ts
new file mode 100644
index 0000000000..42641e491f
--- /dev/null
+++ b/src/livecodes/languages/go-wasm/lang-go-wasm-script.ts
@@ -0,0 +1,174 @@
+/* eslint-disable no-console */
+import { createWorkerFromContent } from '../../utils/utils';
+import { yaegiWasmBaseUrl } from '../../vendors';
+
+const workerSrc = `
+(async () => {
+  importScripts('${yaegiWasmBaseUrl}wasm_exec.js');
+
+  const wasmUrl = '${yaegiWasmBaseUrl}yaegi-browser.wasm';
+  const wasmResponse = await fetch(wasmUrl);
+
+  const initYaegi = async () => {
+    try {
+      let instance;
+      const go = new Go();
+      try {
+        const streaming = await WebAssembly.instantiateStreaming(wasmResponse.clone(), go.importObject);
+        instance = streaming.instance;
+      } catch {
+        const resp = await wasmResponse.clone();
+        if (!resp.ok)
+          throw new Error('Failed to fetch yaegi-browser.wasm: ' + resp.status);
+        const bytes = await resp.arrayBuffer();
+        const res = await WebAssembly.instantiate(bytes, go.importObject);
+        instance = res.instance;
+      }
+      go.run(instance);
+    } catch (err) {
+      console.error('Failed to load Yaegi:', err);
+      throw err;
+    }
+  };
+
+  addEventListener('message', async (e) => {
+    const runCode = async (code, input) => {
+      let output = null;
+      let error = null;
+      let exitCode = 0;
+
+      const originalConsoleLog = console.log;
+      const originalConsoleError = console.error;
+      let capturedOutput = '';
+      let capturedError = '';
+
+      try {
+        await initYaegi();
+
+        console.log = (...args) => {
+          capturedOutput += args.join(' ') + '\\n';
+        };
+
+        console.error = (...args) => {
+          capturedError += args.join(' ') + '\\n';
+        };
+
+        // Set up stdin if input is provided
+        if (input && globalThis.setStdin) {
+          globalThis.setStdin(input);
+        }
+
+        if (self.yaegi) {
+          try {
+            const result = await self.yaegi.eval(code);
+          } catch (err) {
+            console.error('Yaegi execution error:', err);
+            throw err;
+          }
+        } else {
+          throw new Error(
+            'Yaegi not found on window. Make sure yaegi-browser.wasm is loaded correctly.',
+          );
+        }
+
+        output = capturedOutput.trim();
+        if (capturedError) {
+          error = capturedError.trim();
+          exitCode = 1;
+        }
+      } catch (err) {
+        error = err.message || err.toString();
+        exitCode = 1;
+      } finally {
+        // Restore console functions
+        console.log = originalConsoleLog;
+        console.error = originalConsoleError;
+      }
+
+      return { input, output, error, exitCode };
+    };
+
+    const code = e.data.code;
+    const input = e.data.input;
+    const result = code.trim() ? await runCode(code, input) : {};
+    postMessage(result);
+  });
+
+  // Initialize Yaegi when worker starts
+  initYaegi()
+    .then(() => {
+      postMessage({ loaded: true });
+    })
+    .catch((err) => {
+      console.error('Failed to initialize Yaegi:', err);
+      postMessage({ error: err.message });
+    });
+})();
+`;
+
+livecodes.goWasm = livecodes.goWasm || {};
+
+livecodes.goWasm.worker = livecodes.goWasm.worker || createWorkerFromContent(workerSrc);
+const worker: Worker = livecodes.goWasm.worker;
+
+const initialized = new Promise<void>((resolve) => {
+  const onload = (e: MessageEvent) => {
+    console.log('Loading Yaegi WebAssembly...');
+    if (e.data.loaded) {
+      worker.removeEventListener('message', onload);
+      console.log('Yaegi WebAssembly loaded successfully.');
+      livecodes.goWasm.worker.loaded = true;
+      resolve();
+    }
+  };
+  if (!livecodes.goWasm.worker.loaded) {
+    worker.addEventListener('message', onload);
+  } else {
+    resolve();
+  }
+});
+
+livecodes.goWasm.run =
+  livecodes.goWasm.run ||
+  ((input: string) =>
+    new Promise((resolve) => {
+      let code = '';
+      livecodes.goWasm.input = input;
+      livecodes.goWasm.output = null;
+      const scripts = document.querySelectorAll('script[type="text/go-wasm"]');
+      scripts.forEach((script) => (code += (script.textContent ?? '') + '\n'));
+      worker.onmessage = function (e: MessageEvent) {
+        if (e.data.loaded) return;
+        const result = e.data;
+        if (result.error != null) {
+          console.error(result.error);
+        } else if (result.output != null) {
+          console.log(result.output);
+        }
+        livecodes.goWasm.input = result.input;
+        livecodes.goWasm.output = result.output;
+        livecodes.goWasm.error = result.error;
+        livecodes.goWasm.exitCode = result.exitCode;
+        livecodes.goWasm.ready = true;
+        resolve(result);
+      };
+
+      worker.postMessage({ code, input: `${String(input ?? '')}` });
+    }));
+
+livecodes.goWasm.loaded = new Promise<void>((resolve) => {
+  const i = setInterval(() => {
+    if (livecodes.goWasm.ready) {
+      clearInterval(i);
+      return resolve();
+    }
+  }, 50);
+});
+
+window.addEventListener('load', async () => {
+  livecodes.goWasm.ready = false;
+  parent.postMessage({ type: 'loading', payload: true }, '*');
+  await initialized;
+  await livecodes.goWasm.run(livecodes.goWasm.input);
+  parent.postMessage({ type: 'loading', payload: false }, '*');
+});
diff --git a/src/livecodes/languages/go-wasm/lang-go-wasm.ts b/src/livecodes/languages/go-wasm/lang-go-wasm.ts
new file mode 100644
index 0000000000..8f8fcb0291
--- /dev/null
+++ b/src/livecodes/languages/go-wasm/lang-go-wasm.ts
@@ -0,0 +1,19 @@
+import type { LanguageSpecs } from '../../models';
+import { go } from '../go/lang-go';
+
+export const goWasm: LanguageSpecs = {
+  name: 'go-wasm',
+  title: 'Go (Wasm)',
+  formatter: go.formatter,
+  compiler: {
+    factory: () => async (code) => code,
+    scripts: ({ baseUrl }) => [baseUrl + '{{hash:lang-go-wasm-script.js}}'],
+    liveReload: true,
+    scriptType: 'text/go-wasm',
+    compiledCodeLanguage: 'go',
+  },
+  extensions: ['wasm.go', 'go-wasm', 'gowasm'],
+  editor: 'script',
+  editorLanguage: 'go',
+  largeDownload: true,
+};
diff --git a/src/livecodes/languages/languages.ts b/src/livecodes/languages/languages.ts
index 9f318652af..54e3479030 100644
--- a/src/livecodes/languages/languages.ts
+++ b/src/livecodes/languages/languages.ts
@@ -23,6 +23,7 @@ import { fennel } from './fennel';
 import { flow } from './flow';
 import { gleam } from './gleam';
 import { go } from './go';
+import { goWasm } from './go-wasm';
 import { haml } from './haml';
 import { handlebars } from './handlebars';
 import { html } from './html';
@@ -142,6 +143,7 @@ export const languages: LanguageSpecs[] = [
   ruby,
   rubyWasm,
   go,
+  goWasm,
   php,
   phpWasm,
   cpp,
diff --git a/src/livecodes/languages/postgresql/lang-postgresql-compiler-esm.ts b/src/livecodes/languages/postgresql/lang-postgresql-compiler-esm.ts
index aacc74f089..baa85b387b 100644
--- a/src/livecodes/languages/postgresql/lang-postgresql-compiler-esm.ts
+++ b/src/livecodes/languages/postgresql/lang-postgresql-compiler-esm.ts
@@ -1,6 +1,6 @@
 import type { CompilerFunction } from '../../models';
 import { getLanguageCustomSettings, safeName } from '../../utils/utils';
-import { pgliteUrl } from '../../vendors';
+import { pgliteBaseUrl } from '../../vendors';
 
 declare global {
   interface Window {
@@ -11,7 +11,7 @@ declare global {
 
 export const pgSqlCompiler: CompilerFunction = async (code, { config }) => {
   if (!code.trim()) return '{ data: [] }';
-  window.PGlite = window.PGlite || (await import(pgliteUrl)).PGlite;
+  window.PGlite = window.PGlite || (await import(pgliteBaseUrl + 'index.js')).PGlite;
 
   const options = getLanguageCustomSettings('pgsql', config);
   const { dbName, scriptURLs, ...pgliteOptions } = options;
diff --git a/src/livecodes/languages/python-wasm/lang-python-wasm-script.ts b/src/livecodes/languages/python-wasm/lang-python-wasm-script.ts
index e0ec66b066..b4a378516b 100644
--- a/src/livecodes/languages/python-wasm/lang-python-wasm-script.ts
+++ b/src/livecodes/languages/python-wasm/lang-python-wasm-script.ts
@@ -1,5 +1,5 @@
 /* eslint-disable no-underscore-dangle */
-import { fontAwesomeUrl, pyodideBaseUrl } from '../../vendors';
+import { pyodideBaseUrl } from '../../vendors';
 
 declare const loadPyodide: any;
 
@@ -50,12 +50,6 @@ window.addEventListener('load', async () => {
   }
 
   async function prepareEnv() {
-    // needed for matplotlib icons
-    const stylesheet = document.createElement('link');
-    stylesheet.rel = 'stylesheet';
-    stylesheet.href = fontAwesomeUrl;
-    document.head.append(stylesheet);
-
     await pyodideReady;
     const patchInput = `
 from js import prompt
diff --git a/src/livecodes/languages/rescript/lang-rescript-compiler-esm.ts b/src/livecodes/languages/rescript/lang-rescript-compiler-esm.ts
index c12bf5243d..53170e41de 100644
--- a/src/livecodes/languages/rescript/lang-rescript-compiler-esm.ts
+++ b/src/livecodes/languages/rescript/lang-rescript-compiler-esm.ts
@@ -6,7 +6,10 @@ import {
   reasonReactUrl,
   reasonStdLibBaseUrl,
   requireUrl,
-  rescriptCdnBaseUrl,
+  rescriptCdnUrl1,
+  rescriptCdnUrl2,
+  rescriptCdnUrl3,
+  rescriptCdnUrl4,
   rescriptStdLibBaseUrl,
 } from '../../vendors';
 
@@ -57,12 +60,7 @@ const loadCompiler = async (language: Language) => {
       );
     } else {
       window.require(
-        [
-          rescriptCdnBaseUrl + 'compiler.js',
-          rescriptCdnBaseUrl + 'compiler-builtins/cmij.js',
-          rescriptCdnBaseUrl + '%40rescript/react/cmij.js',
-          rescriptCdnBaseUrl + '%40rescript/core/cmij.js',
-        ],
+        [rescriptCdnUrl1, rescriptCdnUrl2, rescriptCdnUrl3, rescriptCdnUrl4],
         () => {
           window.rescript_ocaml_compiler = window.rescript_compiler;
           window.rescript_compiler = undefined;
diff --git a/src/livecodes/languages/rescript/lang-rescript-formatter.ts b/src/livecodes/languages/rescript/lang-rescript-formatter.ts
index 6851d6cb7d..4036a7d642 100644
--- a/src/livecodes/languages/rescript/lang-rescript-formatter.ts
+++ b/src/livecodes/languages/rescript/lang-rescript-formatter.ts
@@ -1,12 +1,12 @@
 import type { LanguageFormatter } from '../../models';
 import { getAbsoluteUrl } from '../../utils';
-import { rescriptCdnBaseUrl } from '../../vendors';
+import { rescriptCdnUrl1 } from '../../vendors';
 
 declare const importScripts: any;
 
 const createRescriptFormatter: LanguageFormatter['factory'] = (baseUrl, language) => {
   if (!(self as any).rescript_compiler) {
-    importScripts(getAbsoluteUrl(rescriptCdnBaseUrl + 'compiler.js', baseUrl));
+    importScripts(getAbsoluteUrl(rescriptCdnUrl1, baseUrl));
   }
   const compiler = (self as any).rescript_compiler.make();
   compiler.setModuleSystem('es6');
diff --git a/src/livecodes/languages/tailwindcss/processor-tailwindcss-compiler.ts b/src/livecodes/languages/tailwindcss/processor-tailwindcss-compiler.ts
index 5c3a3b4575..d9bf67bf17 100644
--- a/src/livecodes/languages/tailwindcss/processor-tailwindcss-compiler.ts
+++ b/src/livecodes/languages/tailwindcss/processor-tailwindcss-compiler.ts
@@ -6,6 +6,7 @@ import { modulesService } from '../../services';
 import { getLanguageCustomSettings } from '../../utils/utils';
 import { tailwindcss3Url, tailwindcssBaseUrl, vendorsBaseUrl } from '../../vendors';
 import { lightningcssFeatures } from '../lightningcss/processor-lightningcss-compiler';
+import { addCodeInStyleBlocks } from './utils';
 
 declare const self: any;
 
@@ -186,21 +187,21 @@ self.createTailwindcssCompiler = (): CompilerFunction => {
       },
     });
 
-    return tailwind.generateStylesFromContent(code, [
-      `<template>${options.html}\n<script>${config.script.content}</script></template>`,
-    ]);
+    const html = `<template>${options.html}\n<script>${config.script.content}</script></template>`;
+    return tailwind.generateStylesFromContent(addCodeInStyleBlocks(code, html), [html]);
   };
 
   const tailwind4: CompilerFunction = async (code, { config, options }) => {
-    const prepareCode = (css: string) => {
+    const prepareCode = (css: string, html: string) => {
       let result = replaceStyleImports(css, [/tailwindcss/g]);
       if (!result.includes('@import')) {
         result = `@import "tailwindcss";${result}`;
       }
-      return result;
+      return addCodeInStyleBlocks(result, html);
     };
+
     const html = `<template>${options.html}\n<script>${config.script.content}</script></template>`;
-    const css = prepareCode(code);
+    const css = prepareCode(code, html);
     try {
       const compiler = await self.tailwindcss.compile(css, {
         base: '/',
diff --git a/src/livecodes/languages/tailwindcss/utils.ts b/src/livecodes/languages/tailwindcss/utils.ts
new file mode 100644
index 0000000000..ec39c53713
--- /dev/null
+++ b/src/livecodes/languages/tailwindcss/utils.ts
@@ -0,0 +1,13 @@
+export const addCodeInStyleBlocks = (css: string, html: string) => {
+  // from compiler/compile-blocks.ts#compileBlocks
+  const getBlockPattern = (el: 'style', langAttr = 'lang') =>
+    `(<${el}\\s*)(?:([\\s\\S]*?)${langAttr}\\s*=\\s*["']([A-Za-z0-9 _]*)["'])?((?:[^>]*)>)([\\s\\S]*?)(<\\/${el}>)`;
+  const pattern = getBlockPattern('style');
+  for (const arr of [...html.matchAll(new RegExp(pattern, 'g'))]) {
+    const content = arr[5];
+    if (content?.trim()) {
+      css += `\n${content}`;
+    }
+  }
+  return css;
+};
diff --git a/src/livecodes/languages/utils.ts b/src/livecodes/languages/utils.ts
index 903ca3aa17..beafe93f45 100644
--- a/src/livecodes/languages/utils.ts
+++ b/src/livecodes/languages/utils.ts
@@ -1,6 +1,6 @@
 import type { Compiler, Config, CustomSettings, Language, Processor } from '../models';
 import { getLanguageCustomSettings } from '../utils/utils';
-import { highlightjsUrl } from '../vendors';
+import { vendorsBaseUrl } from '../vendors';
 
 export const getLanguageByAlias = (alias: string = ''): Language | undefined => {
   if (!alias) return;
@@ -97,7 +97,8 @@ export const getCustomSettings = (
 
 export const detectLanguage = async (code: string, languages: Language[]) => {
   (window as any).HighlightJS =
-    (window as any).HighlightJS || (await import(highlightjsUrl)).default;
+    (window as any).HighlightJS ||
+    (await import(vendorsBaseUrl + 'highlight.js/highlight.js')).default;
   const result = (window as any).HighlightJS.highlightAuto(code, languages);
   return {
     language: result.language as Language,
diff --git a/src/livecodes/main.ts b/src/livecodes/main.ts
index b65d9c8f4a..d99136b19a 100644
--- a/src/livecodes/main.ts
+++ b/src/livecodes/main.ts
@@ -5,7 +5,7 @@ import appHTML from './html/app.html?raw';
 import type { API, CDN, Config, CustomEvents, EmbedOptions } from './models';
 import { modulesService } from './services/modules';
 import { isInIframe } from './utils/utils';
-import { codeMirrorBaseUrl, esModuleShimsPath } from './vendors';
+import { codeMirrorBasePath, esModuleShimsPath } from './vendors';
 
 export type { API, Config };
 
@@ -77,7 +77,7 @@ export const livecodes = (container: string, config: Partial<Config> = {}): Prom
 
     const loadApp = async () => {
       const appCDN = await modulesService.checkCDNs(esModuleShimsPath, params.get('appCDN') as CDN);
-
+      const codeMirrorBaseUrl = modulesService.getUrl(codeMirrorBasePath, appCDN as CDN);
       const supportsImportMaps = HTMLScriptElement.supports
         ? HTMLScriptElement.supports('importmap')
         : false;
@@ -104,6 +104,17 @@ export const livecodes = (container: string, config: Partial<Config> = {}): Prom
       import * as mod from '${baseUrl}{{hash:codemirror.js}}';
       window['${baseUrl}{{hash:codemirror.js}}'] = mod;
     </script>
+    `,
+          )
+          .replace(
+            /{{polyfillScript}}/g,
+            process.env.LOCAL_MODULES === 'true'
+              ? ''
+              : `
+    <script
+      src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js"
+      crossorigin="anonymous"
+    ></script>
     `,
           )
           .replace(/{{codemirrorCoreUrl}}/g, `${codeMirrorBaseUrl}codemirror-core.js`)
diff --git a/src/livecodes/services/modules.ts b/src/livecodes/services/modules.ts
index 5ec3f1d25a..54f5e57a74 100644
--- a/src/livecodes/services/modules.ts
+++ b/src/livecodes/services/modules.ts
@@ -1,6 +1,7 @@
 import type { CDN } from '../models';
 
 declare const globalThis: { appCDN: CDN };
+const localModules = process.env.LOCAL_MODULES === 'true';
 
 const moduleCDNs: CDN[] = [
   'esm.sh',
@@ -60,14 +61,16 @@ export const modulesService = {
   },
 
   getUrl: (path: string, cdn?: CDN) =>
-    path.startsWith('http') || path.startsWith('data:')
-      ? path
-      : getCdnUrl(path, false, cdn || getAppCDN()) || path,
+    path.startsWith('data:') ? path : getCdnUrl(path, false, cdn || getAppCDN()) || path,
 
   cdnLists: { npm: npmCDNs, module: moduleCDNs, gh: ghCDNs },
 
   checkCDNs: async (testModule: string, preferredCDN?: CDN) => {
-    const cdns: CDN[] = [preferredCDN, ...modulesService.cdnLists.npm].filter(Boolean) as CDN[];
+    const modulesBaseUrl = new URL('./modules/', location.href).href as CDN;
+    const localCDN = localModules ? modulesBaseUrl : undefined;
+    const cdns = [preferredCDN, localCDN, ...modulesService.cdnLists.npm].filter(
+      (x) => x != null,
+    ) as CDN[];
     for (const cdn of cdns) {
       try {
         const res = await fetch(modulesService.getUrl(testModule, cdn), {
@@ -94,6 +97,10 @@ export const getAppCDN = (): CDN => {
 };
 
 const getCdnUrl = (modName: string, isModule: boolean, defaultCDN?: CDN) => {
+  if (localModules && !isModule) {
+    return getLocalUrl(modName, defaultCDN);
+  }
+  if (modName.startsWith('data:')) return modName;
   const post = isModule && modName.startsWith('unpkg:') ? '?module' : '';
   if (modName.startsWith('gh:')) {
     modName = modName.replace('gh', ghCDNs[0]);
@@ -107,9 +114,23 @@ const getCdnUrl = (modName: string, isModule: boolean, defaultCDN?: CDN) => {
       return modName.replace(pattern, template) + post;
     }
   }
+  if (modName.startsWith('http')) return modName;
   return null;
 };
 
+const getLocalUrl = (modName: string, modulesBaseUrl = '/modules/') => {
+  modName = modName
+    .replace('https://unpkg.com/', '')
+    .replace('unpkg:', '')
+    .replaceAll('https://', '')
+    .replaceAll(':', '_')
+    .replaceAll('?', '_');
+  if (modName.includes('pyodide')) {
+    modName = modName.replace('cdn.jsdelivr.net/', '');
+  }
+  return `${modulesBaseUrl}${modName}`;
+};
+
 // based on https://github.com/neoascetic/rawgithack/blob/master/web/rawgithack.js
 const TEMPLATES: Array<[RegExp, string]> = [
   [/^(esm\.sh:)(.+)/i, 'https://esm.sh/$2'],
diff --git a/src/livecodes/styles/inc-menu.scss b/src/livecodes/styles/inc-menu.scss
index 98ecebe646..4b92adf7c2 100644
--- a/src/livecodes/styles/inc-menu.scss
+++ b/src/livecodes/styles/inc-menu.scss
@@ -570,7 +570,7 @@ i.arrow {
       width: var(--s16);
 
       &[for='theme-color-custom'] {
-        background: conic-gradient(in hsl longer hue, red 0 0);
+        background: conic-gradient(in hsl longer hue, red 0 100%);
         filter: contrast(0.5);
       }
 
diff --git a/src/livecodes/templates/starter/cpp-wasm-starter.ts b/src/livecodes/templates/starter/cpp-wasm-starter.ts
index 776e0e1cf8..8e54515005 100644
--- a/src/livecodes/templates/starter/cpp-wasm-starter.ts
+++ b/src/livecodes/templates/starter/cpp-wasm-starter.ts
@@ -3,7 +3,7 @@ import type { Template } from '../../models';
 export const cppWasmStarter: Template = {
   name: 'cpp-wasm',
   aliases: ['clang'],
-  title: 'C++ (Wasm) Starter',
+  title: window.deps.translateString('templates.starter.cpp-wasm', 'C++ (Wasm) Starter'),
   thumbnail: 'assets/templates/cpp.svg',
   activeEditor: 'script',
   markup: {
diff --git a/src/livecodes/templates/starter/go-wasm-starter.ts b/src/livecodes/templates/starter/go-wasm-starter.ts
new file mode 100644
index 0000000000..1952a33370
--- /dev/null
+++ b/src/livecodes/templates/starter/go-wasm-starter.ts
@@ -0,0 +1,177 @@
+import type { Template } from '../../models';
+
+export const goWasmStarter: Template = {
+  name: 'go-wasm',
+  title: window.deps.translateString('templates.starter.go-wasm', 'Go (Wasm) Starter'),
+  thumbnail: 'assets/templates/go.svg',
+  activeEditor: 'script',
+  markup: {
+    language: 'html',
+    content: `
+<div class="container">
+  <h1>Go (Wasm)</h1>
+  <img class="logo" alt="Go logo" src="{{ __livecodes_baseUrl__ }}assets/templates/go.svg" />
+
+  <div class="demo-section">
+    <h2>Interactive Counter</h2>
+    <p>Current count: <span id="counter">0</span></p>
+    <button id="increment-btn" disabled>Loading...</button>
+  </div>
+
+  <div class="demo-section">
+    <h2>Stdin Input Demo</h2>
+    <p>Enter your name:</p>
+    <input type="text" id="name-input" placeholder="Your name" />
+    <button id="greet-btn" disabled>Loading...</button>
+    <p id="greeting"></p>
+  </div>
+
+
+</div>
+
+<script>
+  addEventListener('load', async () => {
+    // Wait for Go WASM to load
+    await livecodes.goWasm.loaded;
+
+    const incrementBtn = document.querySelector("#increment-btn");
+    const greetBtn = document.querySelector("#greet-btn");
+
+    incrementBtn.disabled = false;
+    incrementBtn.textContent = "Increment";
+    greetBtn.disabled = false;
+    greetBtn.textContent = "Greet";
+
+    incrementBtn.onclick = async () => {
+      const currentCount = document.querySelector("#counter").textContent;
+      const {output, error} = await livecodes.goWasm.run(currentCount);
+      if (error) {
+        console.error('Error:', error);
+      } else {
+        document.querySelector("#counter").textContent = output;
+      }
+    };
+
+    greetBtn.onclick = async () => {
+      const name = document.querySelector("#name-input").value;
+      if (!name.trim()) {
+        alert('Please enter your name');
+        return;
+      }
+      const {output, error} = await livecodes.goWasm.run(name);
+      if (error) {
+        console.error('Error:', error);
+      } else {
+        document.querySelector("#greeting").textContent = output;
+      }
+    };
+
+  });
+</script>
+`.trimStart(),
+  },
+  style: {
+    language: 'css',
+    content: `
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.logo {
+  width: 150px;
+  display: block;
+  margin: 20px auto;
+}
+
+.demo-section {
+  background: #f5f5f5;
+  padding: 20px;
+  margin: 20px 0;
+  border-radius: 8px;
+  border-left: 4px solid #00add8;
+}
+
+.demo-section h2 {
+  margin-top: 0;
+  color: #333;
+}
+
+button {
+  background: #00add8;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  margin: 10px 5px;
+}
+
+button:hover:not(:disabled) {
+  background: #0099c7;
+}
+
+button:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
+
+input[type="text"], input[type="number"] {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 16px;
+  margin: 5px;
+  width: 200px;
+}
+
+#counter {
+  font-weight: bold;
+  color: #00add8;
+  font-size: 24px;
+}
+
+#greeting, #result {
+  font-weight: bold;
+  color: #333;
+  margin-top: 10px;
+}
+`.trimStart(),
+  },
+  script: {
+    language: 'go-wasm',
+    content: `
+package main
+
+import (
+	"bufio"
+	"fmt"
+	"os"
+	"strconv"
+	"strings"
+)
+
+func main() {
+	// Read input from stdin
+	scanner := bufio.NewScanner(os.Stdin)
+
+	if scanner.Scan() {
+		input := strings.TrimSpace(scanner.Text())
+
+		if count, err := strconv.Atoi(input); err == nil {
+			newCount := count + 1
+			fmt.Println(newCount)
+			return
+		}
+
+		fmt.Printf("Hello, %s!\\n", input)
+	} else {
+		fmt.Println("Hello from Go WebAssembly!")
+	}
+}
+`.trimStart(),
+  },
+};
diff --git a/src/livecodes/templates/starter/index.ts b/src/livecodes/templates/starter/index.ts
index 1075d26834..9f8a22eb10 100644
--- a/src/livecodes/templates/starter/index.ts
+++ b/src/livecodes/templates/starter/index.ts
@@ -21,6 +21,7 @@ import { diagramsStarter } from './diagrams-starter';
 import { fennelStarter } from './fennel-starter';
 import { gleamStarter } from './gleam-starter';
 import { goStarter } from './go-starter';
+import { goWasmStarter } from './go-wasm-starter';
 import { imbaStarter } from './imba-starter';
 import { javaStarter } from './java-starter';
 import { javascriptStarter } from './javascript-starter';
@@ -111,6 +112,7 @@ export const starterTemplates = [
   rubyStarter,
   rubyWasmStarter,
   goStarter,
+  goWasmStarter,
   phpStarter,
   phpWasmStarter,
   cppStarter,
diff --git a/src/livecodes/types/bundle-types.ts b/src/livecodes/types/bundle-types.ts
index 89da0f9284..bf03eaaa38 100644
--- a/src/livecodes/types/bundle-types.ts
+++ b/src/livecodes/types/bundle-types.ts
@@ -1,6 +1,6 @@
 // based on dts-bundle
 
-import { pathBrowserifyUrl } from '../vendors';
+import { vendorsBaseUrl } from '../vendors';
 
 // const dtsExp = /\.d\.ts$/;
 const bomOptExp = /^\uFEFF?/;
@@ -62,7 +62,7 @@ export interface BundleResult {
 }
 
 export async function bundle(options: Options): Promise<string> {
-  const path = await import(pathBrowserifyUrl);
+  const path = (await import(vendorsBaseUrl + 'path-browserify/path-browserify.js')).default;
   assert(typeof options === 'object' && options, 'options must be an object');
 
   // option parsing & validation
diff --git a/src/livecodes/utils/utils.ts b/src/livecodes/utils/utils.ts
index b22e84b73a..5ae0cc8929 100644
--- a/src/livecodes/utils/utils.ts
+++ b/src/livecodes/utils/utils.ts
@@ -623,21 +623,37 @@ export const isFocusable = /* @__PURE__ */ (item: any | null): boolean => {
  * whose values are different from the destination object.
  */
 export const compareObjects = /* @__PURE__ */ (
-  srcObj: Record<string, unknown>,
-  dstObj: Record<string, unknown>,
+  srcObj: Partial<Record<string, unknown>>,
+  dstObj: Partial<Record<string, unknown>>,
 ) => {
   const diff: string[] = [];
   for (const key of Object.keys(srcObj)) {
-    if (typeof srcObj[key] === 'function') {
+    const srcObjProp = srcObj[key];
+    const dstObjProp = dstObj[key];
+    if (typeof srcObjProp === 'function') {
       continue;
     } else if (!(key in dstObj)) {
       diff.push(key);
-    } else if (srcObj[key] !== null && typeof srcObj[key] === 'object') {
-      const objDiff = compareObjects(srcObj[key] as any, dstObj[key] as any).map(
-        (k) => `${key}.${k}`,
-      );
-      diff.push(...objDiff);
-    } else if (srcObj[key] !== dstObj[key]) {
+    } else if (srcObjProp !== null && typeof srcObjProp === 'object') {
+      if (!dstObjProp || typeof dstObjProp !== 'object') {
+        diff.push(key);
+      } else if (Array.isArray(srcObjProp)) {
+        if (!Array.isArray(dstObjProp)) {
+          diff.push(key);
+        } else if (srcObjProp.length !== dstObjProp.length) {
+          diff.push(key);
+        } else {
+          for (let i = 0; i < srcObjProp.length; i++) {
+            if (srcObjProp[i] !== dstObjProp[i]) {
+              diff.push(`${key}[${i}]`);
+            }
+          }
+        }
+      } else {
+        const objDiff = compareObjects(srcObjProp, dstObjProp).map((k) => `${key}.${k}`);
+        diff.push(...objDiff);
+      }
+    } else if (srcObjProp !== dstObjProp) {
       diff.push(key);
     }
   }
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 3ee6afdcfc..8f21222fc7 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -1,9 +1,17 @@
 import { modulesService } from './services/modules';
 
-const { getUrl, getModuleUrl } = modulesService;
+// - only use `getUrl` (not `getModuleUrl` or plain URLs) - except `es-module-shims` and `codeMirrorBasePath`
+// - only use `gh:` or `unpkg: prefixes if required
+// - always add full version and file extension
+// - minimize usage of baseUrls if possible
+// - if es module imports others, use baseUrl instead
+// - excluding `vendorsBaseUrl`, the file is sorted alphabetically
+// see scripts/download-modules.js
+
+const { getUrl } = modulesService;
 
 export const vendorsBaseUrl = // 'http://127.0.0.1:8081/';
-  /* @__PURE__ */ getUrl('@live-codes/browser-compilers@0.22.3/dist/');
+  /* @__PURE__ */ getUrl('@live-codes/browser-compilers@0.22.4/dist/');
 
 export const acornUrl = /* @__PURE__ */ getUrl('acorn@8.12.1/dist/acorn.js');
 
@@ -41,7 +49,7 @@ export const browserJestUrl = /* @__PURE__ */ getUrl(
 
 export const brythonBaseUrl = /* @__PURE__ */ getUrl('brython@3.12.4/');
 
-export const chaiUrl = /* @__PURE__ */ getModuleUrl('chai@5.1.2');
+export const chaiUrl = /* @__PURE__ */ getUrl('chai@5.2.1/chai.js');
 
 export const cherryCljsBaseUrl = /* @__PURE__ */ getUrl('cherry-cljs@0.2.19/');
 
@@ -85,7 +93,7 @@ export const codeiumProviderUrl = /* @__PURE__ */ getUrl(
   '@live-codes/monaco-codeium-provider@0.2.2/dist/index.js',
 );
 
-export const codeMirrorBaseUrl = /* @__PURE__ */ getUrl('@live-codes/codemirror@0.3.2/build/');
+export const codeMirrorBasePath = '@live-codes/codemirror@0.3.2/build/';
 
 export const coffeeScriptUrl = /* @__PURE__ */ getUrl(
   'coffeescript@2.7.0/lib/coffeescript-browser-compiler-legacy/coffeescript.js',
@@ -99,6 +107,8 @@ export const cppWasmBaseUrl = /* @__PURE__ */ getUrl('@chriskoch/cpp-wasm@1.0.2/
 
 export const csharpWasmBaseUrl = /* @__PURE__ */ getUrl('@seth0x41/csharp-wasm@1.0.3/');
 
+export const yaegiWasmBaseUrl = /* @__PURE__ */ getUrl('yaegi-wasm@1.0.2/src/');
+
 export const csstreeUrl = /* @__PURE__ */ getUrl('css-tree@2.3.1/dist/csstree.js');
 
 export const cytoscapeSvgUrl = /* @__PURE__ */ getUrl('cytoscape-svg@0.4.0/cytoscape-svg.js');
@@ -109,7 +119,7 @@ export const ddietrCmThemesBaseUrl = /* @__PURE__ */ getUrl(
   '@ddietr/codemirror-themes@1.4.2/dist/theme/',
 );
 
-export const doppioJvmBaseUrl = 'https://unpkg.com/@seth0x41/doppio@1.0.0/';
+export const doppioJvmBaseUrl = /* @__PURE__ */ getUrl('unpkg:@seth0x41/doppio@1.0.0/');
 
 export const dotUrl = /* @__PURE__ */ getUrl('dot@1.1.3/doT.js');
 
@@ -127,109 +137,111 @@ export const fflateUrl = /* @__PURE__ */ getUrl('fflate@0.8.1/esm/browser.js');
 
 export const flexSearchUrl = /* @__PURE__ */ getUrl('flexsearch@0.7.21/dist/flexsearch.bundle.js');
 
-export const fontAnonymousProUrl = /* @__PURE__ */ getUrl(
-  '@fontsource/anonymous-pro@4.5.9/index.css',
-);
+export const fontAnonymousProBaseUrl = /* @__PURE__ */ getUrl('@fontsource/anonymous-pro@4.5.9/');
 
-export const fontAstigmataUrl = /* @__PURE__ */ getUrl(
-  'gh:hatemhosny/astigmata-font@6d0ee00a07fb1932902f0b81a504d075d47bd52f/index.css',
+export const fontAstigmataBaseUrl = /* @__PURE__ */ getUrl(
+  'gh:hatemhosny/astigmata-font@6d0ee00a07fb1932902f0b81a504d075d47bd52f/',
 );
 
-export const fontAwesomeUrl = /* @__PURE__ */ getUrl('font-awesome@4.7.0/css/font-awesome.min.css');
+export const fontAwesomeBaseUrl = /* @__PURE__ */ getUrl('font-awesome@4.7.0/');
 
-export const fontCascadiaCodeUrl = /* @__PURE__ */ getUrl(
-  '@fontsource/cascadia-code@4.2.1/index.css',
-);
+export const fontCascadiaCodeBaseUrl = /* @__PURE__ */ getUrl('@fontsource/cascadia-code@4.2.1/');
 
 export const fontCodeNewRomanUrl = /* @__PURE__ */ getUrl(
-  'https://fonts.cdnfonts.com/css/code-new-roman-2',
+  'https://fonts.cdnfonts.com/css/code-new-roman-2?style.css',
 );
 
-export const fontComicMonoUrl = /* @__PURE__ */ getUrl('comic-mono@0.0.1/index.css');
+export const fontComicMonoBaseUrl = /* @__PURE__ */ getUrl('comic-mono@0.0.1/');
 
-export const fontCourierPrimeUrl = /* @__PURE__ */ getUrl(
-  '@fontsource/courier-prime@4.5.9/index.css',
-);
+export const fontCourierPrimeBaseUrl = /* @__PURE__ */ getUrl('@fontsource/courier-prime@4.5.9/');
 
 export const fontDECTerminalModernUrl = /* @__PURE__ */ getUrl(
-  'https://fonts.cdnfonts.com/css/dec-terminal-modern',
+  'https://fonts.cdnfonts.com/css/dec-terminal-modern?style.css',
 );
 
-export const fontDejaVuMonoUrl = /* @__PURE__ */ getUrl('@fontsource/dejavu-mono@4.5.4/index.css');
+export const fontDejaVuMonoBaseUrl = /* @__PURE__ */ getUrl('@fontsource/dejavu-mono@4.5.4/');
 
-export const fontFantasqueUrl = /* @__PURE__ */ getUrl(
-  '@typopro/web-fantasque-sans-mono@3.7.5/TypoPRO-FantasqueSansMono.css',
+export const fontFantasqueBaseUrl = /* @__PURE__ */ getUrl(
+  '@typopro/web-fantasque-sans-mono@3.7.5/',
 );
 
-export const fontFiraCodeUrl = /* @__PURE__ */ getUrl('firacode@6.2.0/distr/fira_code.css');
+export const fontFiraCodeBaseUrl = /* @__PURE__ */ getUrl('firacode@6.2.0/distr/');
 
-export const fontFixedsysUrl = /* @__PURE__ */ getUrl('https://fonts.cdnfonts.com/css/fixedsys-62');
+export const fontFixedsysUrl = /* @__PURE__ */ getUrl(
+  'https://fonts.cdnfonts.com/css/fixedsys-62?style.css',
+);
 
-export const fontHackUrl = /* @__PURE__ */ getUrl('hack-font@3.3.0/build/web/hack.css');
+export const fontHackBaseUrl = /* @__PURE__ */ getUrl('hack-font@3.3.0/build/web/');
 
-export const fontHermitUrl = /* @__PURE__ */ getUrl('typeface-hermit@0.0.44/index.css');
+export const fontHermitBaseUrl = /* @__PURE__ */ getUrl('typeface-hermit@0.0.44/');
 
 export const fontIBMPlexMonoUrl = /* @__PURE__ */ getUrl(
-  'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap',
+  'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap&style.css',
 );
 
 export const fontInconsolataUrl = /* @__PURE__ */ getUrl(
-  'https://fonts.googleapis.com/css2?family=Inconsolata&display=swap',
+  'https://fonts.googleapis.com/css2?family=Inconsolata&display=swap&style.css',
 );
 
 export const fontInterUrl = /* @__PURE__ */ getUrl(
-  'https://fonts.googleapis.com/css?family=Inter:300,400,500',
+  'https://fonts.googleapis.com/css?family=Inter:300,400,500&style.css',
 );
 
-export const fontIosevkaUrl = /* @__PURE__ */ getUrl('@fontsource/iosevka@4.5.4/index.css');
+export const fontIosevkaBaseUrl = /* @__PURE__ */ getUrl('@fontsource/iosevka@4.5.4/');
 
-export const fontJetbrainsMonoUrl = /* @__PURE__ */ getUrl(
-  '@fontsource/jetbrains-mono@4.5.11/index.css',
+export const fontJetbrainsMonoBaseUrl = /* @__PURE__ */ getUrl(
+  '@fontsource/jetbrains-mono@4.5.11/',
 );
 
 export const fontMaterialIconsUrl = /* @__PURE__ */ getUrl(
-  'https://fonts.googleapis.com/css?family=Material+Icons&display=swap',
+  'https://fonts.googleapis.com/css?family=Material+Icons&display=swap&style.css',
 );
 
-export const fontMenloUrl = /* @__PURE__ */ getUrl('https://fonts.cdnfonts.com/css/menlo');
+export const fontMenloUrl = /* @__PURE__ */ getUrl(
+  'https://fonts.cdnfonts.com/css/menlo?style.css',
+);
 
 export const fontMonaspaceBaseUrl = /* @__PURE__ */ getUrl('monaspace-font@0.0.2/');
 
-export const fontMonofurUrl = /* @__PURE__ */ getUrl('https://fonts.cdnfonts.com/css/monofur');
+export const fontMonofurUrl = /* @__PURE__ */ getUrl(
+  'https://fonts.cdnfonts.com/css/monofur?style.css',
+);
 
-export const fontMonoidUrl = /* @__PURE__ */ getUrl('@typopro/web-monoid@3.7.5/TypoPRO-Monoid.css');
+export const fontMonoidBaseUrl = /* @__PURE__ */ getUrl('@typopro/web-monoid@3.7.5/');
 
 export const fontNotoUrl = /* @__PURE__ */ getUrl(
-  'https://fonts.googleapis.com/css2?family=Noto+Sans+Mono&display=swap',
+  'https://fonts.googleapis.com/css2?family=Noto+Sans+Mono&display=swap&style.css',
 );
 
 export const fontNovaMonoUrl = /* @__PURE__ */ getUrl(
-  'https://fonts.googleapis.com/css2?family=Nova+Mono&display=swap',
+  'https://fonts.googleapis.com/css2?family=Nova+Mono&display=swap&style.css',
 );
 
-export const fontOpenDyslexicUrl = /* @__PURE__ */ getUrl(
-  '@fontsource/opendyslexic@4.5.4/index.css',
-);
+export const fontOpenDyslexicBaseUrl = /* @__PURE__ */ getUrl('@fontsource/opendyslexic@4.5.4/');
 
 export const fontProFontWindowsUrl = /* @__PURE__ */ getUrl(
-  'https://fonts.cdnfonts.com/css/profontwindows',
+  'https://fonts.cdnfonts.com/css/profontwindows?style.css',
 );
 
-export const fontRobotoMonoUrl = /* @__PURE__ */ getUrl('@fontsource/roboto-mono@4.5.8/index.css');
+export const fontRobotoMonoBaseUrl = /* @__PURE__ */ getUrl('@fontsource/roboto-mono@4.5.8/');
 
-export const fontSFMonoUrl = /* @__PURE__ */ getUrl('https://fonts.cdnfonts.com/css/sf-mono');
+export const fontSFMonoUrl = /* @__PURE__ */ getUrl(
+  'https://fonts.cdnfonts.com/css/sf-mono?style.css',
+);
 
-export const fontSourceCodeProUrl = /* @__PURE__ */ getUrl(
-  '@fontsource/source-code-pro@4.5.12/index.css',
+export const fontSourceCodeProBaseUrl = /* @__PURE__ */ getUrl(
+  '@fontsource/source-code-pro@4.5.12/',
 );
 
-export const fontSpaceMonoUrl = /* @__PURE__ */ getUrl('@fontsource/space-mono@4.5.10/index.css');
+export const fontSpaceMonoBaseUrl = /* @__PURE__ */ getUrl('@fontsource/space-mono@4.5.10/');
 
-export const fontSudoVarUrl = /* @__PURE__ */ getUrl('https://fonts.cdnfonts.com/css/sudo-var');
+export const fontSudoVarUrl = /* @__PURE__ */ getUrl(
+  'https://fonts.cdnfonts.com/css/sudo-var?style.css',
+);
 
-export const fontUbuntuMonoUrl = /* @__PURE__ */ getUrl('@fontsource/ubuntu-mono@4.5.11/index.css');
+export const fontUbuntuMonoBaseUrl = /* @__PURE__ */ getUrl('@fontsource/ubuntu-mono@4.5.11/');
 
-export const fontVictorMonoUrl = /* @__PURE__ */ getUrl('victormono@1.5.4/dist/index.css');
+export const fontVictorMonoBaseUrl = /* @__PURE__ */ getUrl('victormono@1.5.4/dist/');
 
 export const fscreenUrl = /* @__PURE__ */ getUrl('fscreen@1.2.0/dist/fscreen.esm.js');
 
@@ -245,9 +257,7 @@ export const graphreCdnUrl = /* @__PURE__ */ getUrl('graphre@0.1.3/dist/graphre.
 
 export const handlebarsBaseUrl = /* @__PURE__ */ getUrl('handlebars@4.7.8/dist/');
 
-export const highlightjsUrl = /* @__PURE__ */ getModuleUrl('highlight.js@11.11.1');
-
-export const hpccJsCdnUrl = /* @__PURE__ */ getUrl('@hpcc-js/wasm@2.13.0/dist/index.js');
+export const hpccJsCdnBaseUrl = /* @__PURE__ */ getUrl('@hpcc-js/wasm@2.13.0/dist/');
 
 export const htmlToImageUrl = /* @__PURE__ */ getUrl('html-to-image@1.11.11/dist/html-to-image.js');
 
@@ -283,11 +293,11 @@ export const lunaObjViewerStylesUrl = /* @__PURE__ */ getUrl(
   'luna-object-viewer@0.2.4/luna-object-viewer.css',
 );
 
-export const malinaBaseUrl = /* @__PURE__ */ getUrl(`malinajs@0.7.19/`);
+export const malinaBaseUrl = /* @__PURE__ */ getUrl('malinajs@0.7.19/');
 
 export const markedUrl = /* @__PURE__ */ getUrl('marked@13.0.2/marked.min.js');
 
-export const mermaidCdnUrl = /* @__PURE__ */ getUrl('mermaid@10.2.2/dist/mermaid.esm.mjs');
+export const mermaidCdnUrl = /* @__PURE__ */ getUrl('mermaid@10.2.2/dist/mermaid.min.js');
 
 export const metaPngUrl = /* @__PURE__ */ getUrl('meta-png@1.0.6/dist/meta-png.umd.js');
 
@@ -301,9 +311,7 @@ export const monacoThemesBaseUrl = /* @__PURE__ */ getUrl('monaco-themes@0.4.4/t
 
 export const monacoVimUrl = /* @__PURE__ */ getUrl('monaco-vim@0.4.1/dist/monaco-vim.js');
 
-export const monacoVolarUrl = /* @__PURE__ */ getUrl(
-  '@live-codes/monaco-volar@0.1.0/dist/index.js',
-);
+export const monacoVolarBaseUrl = /* @__PURE__ */ getUrl('@live-codes/monaco-volar@0.1.0/dist/');
 
 export const mustacheUrl = /* @__PURE__ */ getUrl('mustache@4.2.0/mustache.js');
 
@@ -315,13 +323,11 @@ export const normalizeCssUrl = /* @__PURE__ */ getUrl('normalize.css@8.0.1/norma
 
 export const nunjucksBaseUrl = /* @__PURE__ */ getUrl('nunjucks@3.2.4/browser/');
 
-export const opalBaseUrl = /* @__PURE__ */ getUrl('https://cdn.opalrb.com/opal/1.8.2/');
+export const opalBaseUrl = /* @__PURE__ */ getUrl('gh:opal/opal-cdn@v1.8.2/opal/1.8.2/');
 
 export const parinferUrl = /* @__PURE__ */ getUrl('parinfer@3.13.1/parinfer.js');
 
-export const pathBrowserifyUrl = /* @__PURE__ */ getModuleUrl('path-browserify@1.0.1');
-
-export const pgliteUrl = /* @__PURE__ */ getUrl('@electric-sql/pglite@0.1.5/dist/index.js');
+export const pgliteBaseUrl = /* @__PURE__ */ getUrl('@electric-sql/pglite@0.1.5/dist/');
 
 export const pintoraUrl = /* @__PURE__ */ getUrl(
   '@pintora/standalone@0.6.2/lib/pintora-standalone.umd.js',
@@ -352,7 +358,7 @@ export const prismThemesLaserWaveUrl = /* @__PURE__ */ getUrl(
 );
 
 export const pyodideBaseUrl = /* @__PURE__ */ getUrl(
-  'https://cdn.jsdelivr.net/pyodide/v0.25.1/full/',
+  'https://cdn.jsdelivr.net/pyodide/v0.28.0/full/',
 );
 
 export const qrcodeUrl = /* @__PURE__ */ getUrl('easyqrcodejs@4.6.1/dist/easy.qrcode.min.js');
@@ -381,7 +387,18 @@ export const reasonReactUrl = /* @__PURE__ */ getUrl(
 
 export const reasonStdLibBaseUrl = /* @__PURE__ */ getUrl('@rescript/std@9.1.3/lib/es6/');
 
-export const rescriptCdnBaseUrl = /* @__PURE__ */ getUrl('https://cdn.rescript-lang.org/v11.1.2/');
+export const rescriptCdnUrl1 = /* @__PURE__ */ getUrl(
+  'https://cdn.rescript-lang.org/v11.1.2/compiler.js',
+);
+export const rescriptCdnUrl2 = /* @__PURE__ */ getUrl(
+  'https://cdn.rescript-lang.org/v11.1.2/compiler-builtins/cmij.js',
+);
+export const rescriptCdnUrl3 = /* @__PURE__ */ getUrl(
+  'https://cdn.rescript-lang.org/v11.1.2/%40rescript/react/cmij.js',
+);
+export const rescriptCdnUrl4 = /* @__PURE__ */ getUrl(
+  'https://cdn.rescript-lang.org/v11.1.2/%40rescript/core/cmij.js',
+);
 
 export const rescriptStdLibBaseUrl = /* @__PURE__ */ getUrl('@rescript/std@11.1.2/lib/es6/');
 
@@ -435,19 +452,19 @@ export const tesseractUrl = /* @__PURE__ */ getUrl('tesseract.js@6.0.1/dist/tess
 
 export const twigUrl = /* @__PURE__ */ getUrl('twig@1.17.1/twig.min.js');
 
-export const typescriptUrl = /* @__PURE__ */ getUrl(`typescript@5.6.2/lib/typescript.js`);
+export const typescriptUrl = /* @__PURE__ */ getUrl('typescript@5.6.2/lib/typescript.js');
 
 export const typescriptVfsUrl = /* @__PURE__ */ getUrl('@typescript/vfs@1.5.3/dist/vfs.esm.js');
 
 export const uniterUrl = /* @__PURE__ */ getUrl('uniter@2.18.0/dist/uniter.js');
 
-export const vegaCdnUrl = /* @__PURE__ */ getUrl('vega@5.25.0/build/vega.js');
+export const vegaCdnUrl = /* @__PURE__ */ getUrl('vega@5.25.0/build/vega.min.js');
 
-export const vegaLiteCdnUrl = /* @__PURE__ */ getUrl('vega-lite@5.9.3/build/vega-lite.js');
+export const vegaLiteCdnUrl = /* @__PURE__ */ getUrl('vega-lite@5.9.3/build/vega-lite.min.js');
 
-export const vue3CdnUrl = /* @__PURE__ */ getUrl('vue@3');
+export const vue3CdnUrl = /* @__PURE__ */ getUrl('vue@3.5.17/dist/vue.global.prod.js');
 
-export const vue2CdnUrl = /* @__PURE__ */ getUrl('vue@2');
+export const vue2CdnUrl = /* @__PURE__ */ getUrl('vue@2.7.16/dist/vue.min.js');
 
 export const vueRuntimeUrl = /* @__PURE__ */ getUrl('vue@3/dist/vue.runtime.esm-browser.prod.js');
 
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index 50695a9bdd..adebd1a1ae 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -968,6 +968,8 @@ export type Language =
   | 'riotjs'
   | 'malina'
   | 'malinajs'
+  | 'ripple'
+  | 'ripplejs'
   | 'xht'
   | 'coffeescript'
   | 'coffee'
@@ -998,6 +1000,9 @@ export type Language =
   | 'rubywasm'
   | 'go'
   | 'golang'
+  | 'go-wasm'
+  | 'wasm.go'
+  | 'gowasm'
   | 'php'
   | 'php-wasm'
   | 'phpwasm'
@@ -1350,6 +1355,7 @@ export interface Compiler {
     | 'text/commonlisp'
     | 'text/tcl'
     | 'text/prolog'
+    | 'text/go-wasm'
     | 'application/json'
     | 'application/lua'
     | 'text/fennel'
@@ -1418,6 +1424,7 @@ export type TemplateName =
   | 'ruby'
   | 'ruby-wasm'
   | 'go'
+  | 'go-wasm'
   | 'php'
   | 'php-wasm'
   | 'cpp'
diff --git a/src/sdk/vue.ts b/src/sdk/vue.ts
index 312b7f98ce..18f767a3b9 100644
--- a/src/sdk/vue.ts
+++ b/src/sdk/vue.ts
@@ -125,7 +125,7 @@ const LiveCodes: LiveCodesComponent = {
         'div',
         {
           ref: containerRef,
-          'data-height': height,
+          'data-height': height.value,
         },
         ctx.slots.default?.() || '',
       );
diff --git a/vendor-licenses.md b/vendor-licenses.md
index c3049f5b7c..a22b29a64e 100644
--- a/vendor-licenses.md
+++ b/vendor-licenses.md
@@ -315,3 +315,7 @@ WebR: [License](https://github.com/r-wasm/webr/blob/e47ab9854c9306c410f302579c66
 Whirl: [MIT License](https://github.com/jh3y/whirl/tree/8de79b76a13200ccbd8b0b75b4f79978ef1ee890)
 
 Windi CSS: [MIT License](https://github.com/windicss/windicss/blob/bcd50d877e62630f191602ddeabd9f677cc6d90c/LICENSE)
+
+Yaegi: [Apache License 2.0](https://github.com/traefik/yaegi/blob/d93266d013f393a20122ef0dd3f579d411a066be/LICENSE)
+
+yaegi-wasm: [Apache License 2.0](https://github.com/Muhammad-Ayman/yaegi-wasm/blob/528a6bbac7464dc8911e50e0d617512f3e247e8c/LICENSE)