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/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/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/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/scripts/build.js b/scripts/build.js
index 13058760d2..60b1976642 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -215,6 +215,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/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/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/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/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/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/vendors.ts b/src/livecodes/vendors.ts
index 3ee6afdcfc..2207984b32 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -99,6 +99,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');
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/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)