打包好的livecode,版本v-46

docs/languages/art-template.html.md

@@ -0,0 +1,131 @@
+# art-template
+
+[art-template](https://aui.github.io/art-template/) is a high performance JavaScript templating engine.
+
+## Usage
+
+There are 2 modes for rendering:
+
+### Pre-rendered (Default)
+
+The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md).
+
+The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs.
+
+Example: This provides the value of the expression `name`
+
+```json title="Custom Settings"
+{
+  "template": {
+    "data": {
+      "name": "LiveCodes"
+    }
+  }
+}
+```
+
+[Full example below](#pre-rendered)
+
+### Dynamic
+
+To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`.
+
+Example:
+
+```json title="Custom Settings"
+{
+  "template": {
+    "prerender": false
+  }
+}
+```
+
+In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime.
+
+This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data.
+
+Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that.
+
+Example:
+
+```js title="Script Editor (JS)"
+window.livecodes.templateData = { name: 'LiveCodes' };
+```
+
+[Full example below](#dynamic-1)
+
+## Language Info
+
+### Name
+
+`art-template`
+
+### Extensions
+
+`.art`, `.art-template`
+
+### Editor
+
+`markup`
+
+## Compiler
+
+The official [art-template compiler](https://www.npmjs.com/package/art-template).
+
+### Version
+
+`art-template`: v4.13.2
+
+## Code Formatting
+
+Using [Prettier](https://prettier.io/).
+
+## Custom Settings
+
+[Custom settings](../advanced/custom-settings.html.md) added to the property `art-template` are passed as a JSON object to the [`compile`](https://aui.github.io/art-template/docs/api.html#compile-source-options) method during compile. Please check the [documentation](https://aui.github.io/art-template/docs/options.html) for full reference.
+
+Please note that custom settings should be valid JSON (i.e. functions are not allowed).
+
+**Example:**
+
+```json title="Custom Settings"
+{
+  "art-template": {
+    "minimize": false
+  }
+}
+```
+
+## Example Usage
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+### Pre-rendered
+
+export const config = {
+  markup: { language: 'art-template', content: 'Hello {{name}}!' },
+  customSettings: { template: { data: { name: 'LiveCodes' } } },
+};
+
+export const params = { compiled: 'open' };
+
+<LiveCodes config={config} params={params}></LiveCodes>
+
+### Dynamic
+
+export const config2 = {
+  markup: { language: 'art-template', content: 'Hello {{name}}!' },
+  script: {
+    language: 'javascript',
+    content: 'window.livecodes.templateData = { name: "LiveCodes" };',
+  },
+  customSettings: { template: { prerender: false } },
+  activeEditor: 'script',
+};
+
+<LiveCodes config={config2}></LiveCodes>
+
+## Links
+
+- [Official website](https://aui.github.io/art-template/)
+- [Documentation](https://aui.github.io/art-template/docs/)

docs/languages/asciidoc.html.md

@@ -0,0 +1,81 @@
+# AsciiDoc
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+[AsciiDoc](https://asciidoc.org) is a plain text markup language for writing technical content. It’s packed with semantic elements and equipped with features to modularize and reuse content. AsciiDoc content can be composed using a text editor, managed in a version control system, and published to multiple output formats.
+
+In LiveCodes, AsciiDoc is compiled to HTML using [Asciidoctor](https://asciidoctor.org/).
+
+## Usage
+
+### Demo
+
+export const asciidocConfig = {
+  markup: {
+    language: 'asciidoc',
+    content: `= AsciiDoc Demo
+
+== Features
+
+* Simple
+* Clean
+* Dev-friendly
+`,
+  },
+}
+
+<LiveCodes config={asciidocConfig} height='70vh' />
+
+## Language Info
+
+### Name
+
+`asciidoc`
+
+### Extensions
+
+`adoc`, `asc`
+
+## Editor
+
+`markup`
+
+## Compiler
+
+[Asciidoctor.js](https://docs.asciidoctor.org/asciidoctor.js/latest/)
+
+### Version
+
+Asciidoctor.js: `v2.2.8`
+
+## Code Formatting
+
+Not supported.
+
+## Custom Settings
+
+[Custom settings](../advanced/custom-settings.html.md) added to the property `asciidoc` are passed as a JSON object to the [`convert()`](https://docs.asciidoctor.org/asciidoctor.js/latest/setup/quick-tour/#your-first-conversion) function during compile.
+Please check the [documentation](https://docs.asciidoctor.org/asciidoctor.js/latest/processor/convert-options/) and [document attributes](https://docs.asciidoctor.org/asciidoc/latest/attributes/document-attributes-ref/) for full reference.
+
+Please note that custom settings should be valid JSON (i.e. functions are not allowed).
+
+```json
+{
+  "asciidoc": {
+    "attributes": {
+      "source-highlighter": "highlight.js",
+      "icons": "font"
+    }
+  }
+}
+```
+
+## Limitations
+
+- Some advanced extensions may not work (e.g. diagrams)
+
+## Links
+
+- [AsciiDoc](https://asciidoc.org)
+- [Asciidoctor](https://asciidoctor.org/)
+- [AsciiDoctor.js](https://docs.asciidoctor.org/asciidoctor.js/latest/)

docs/languages/assemblyscript.html.md

@@ -0,0 +1,3 @@
+# AssemblyScript
+
+TODO...

docs/languages/astro.html.md

@@ -0,0 +1,3 @@
+# Astro
+
+TODO...

docs/languages/autoprefixer.html.md

@@ -0,0 +1,3 @@
+# Autoprefixer
+
+TODO...

docs/languages/babel.html.md

@@ -0,0 +1,56 @@
+# Babel
+
+[Babel](https://babeljs.io/) is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
+
+## Language Info
+
+### Name
+
+`babel`
+
+### Extensions
+
+`.es`, `.babel`
+
+### Editor
+
+`script`
+
+## Compiler
+
+The official [`@babel/standalone` compiler](https://babeljs.io/docs/babel-standalone).
+
+### Version
+
+`@babel/standalone`: v7.24.7
+
+## Custom Settings
+
+[Custom settings](../advanced/custom-settings.html.md) added to the property `babel` are passed as a JSON object to the [`Babel.transform`](https://babeljs.io/docs/babel-standalone#api) method during compile. Please check the [documentation](https://babeljs.io/docs/babel-core/) for full reference.
+
+By default, the following configuration is used:
+
+```json
+{
+  "babel": { "presets": [["env", { "modules": false }], "typescript", "react"] }
+}
+```
+
+Please note that custom settings should be valid JSON (i.e. functions are not allowed).
+
+## Example Usage
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+export const params = {
+  babel:
+    'export const numbers = [1, 2, 3].map((x) => x * 2);\n\nexport const Greet = (name: string) => <>Hello {name}!</>;\n',
+  compiled: 'open',
+};
+
+<LiveCodes params={params}></LiveCodes>
+
+## Links
+
+- [Babel official website](https://babeljs.io/)
+- [Babel documentation](https://babeljs.io/docs/)

docs/languages/bbcode.html.md

@@ -0,0 +1,41 @@
+# BBCode
+
+[BBCode](https://www.bbcode.org/) ("Bulletin Board Code") is a lightweight markup language used to format messages in many Internet forum software.
+
+## Language Info
+
+### Name
+
+`bbcode`
+
+### Extensions
+
+`.bbcode`, `.bb`
+
+### Editor
+
+`markup`
+
+## Compiler
+
+[BBob](https://github.com/JiLiZART/BBob).
+
+### Version
+
+`BBob`: v3.0.2
+
+## Example Usage
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+export const config = {markup: {language: 'bbcode', content: '[i]Text[/i]'}};
+
+export const params = {compiled: 'open'};
+
+<LiveCodes config={config} params={params}></LiveCodes>
+
+## Links
+
+- [bbcode.org](https://www.bbcode.org/)
+- [BBCode guide](https://www.phpbb.com/community/help/bbcode)
+- [BBCode on Wikipedia](https://en.wikipedia.org/wiki/BBCode)

docs/languages/blockly.html.md

@@ -0,0 +1,3 @@
+# Blockly
+
+TODO...

docs/languages/civet.html.md

@@ -0,0 +1,3 @@
+# Civet
+
+TODO...

docs/languages/clio.html.md

@@ -0,0 +1,3 @@
+# Clio
+
+TODO...

docs/languages/clojurescript.html.md

@@ -0,0 +1,67 @@
+# ClojureScript
+
+[ClojureScript](https://clojurescript.org/) is a robust, practical, and fast programming language with a set of useful features that together form a simple, coherent, and powerful tool.
+
+ClojureScript is a compiler for [Clojure](https://clojure.org/) that targets
+JavaScript. <br />In LiveCodes, it runs in the browser using
+[Cherry](https://github.com/squint-cljs/cherry).
+
+:::info Note
+
+Lisp language family supported in LiveCodes includes [Common Lisp](./commonlisp.html.md), [Scheme](./scheme.html.md), [ClojureScript](./clojurescript.html.md) and [Fennel](./fennel.html.md).
+
+:::
+
+## Language Info
+
+### Name
+
+`clojurescript`
+
+### Extensions
+
+`cljs`, `cljc`, `clj`, `edn`, `clojure`
+
+### Editor
+
+`script`
+
+## Compiler
+
+[Cherry](https://github.com/squint-cljs/cherry)
+
+If `JSX` is used (using `#jsx` reader tag - [example](https://github.com/squint-cljs/cherry/blob/60adcf6e3a8fb940a80c6a193599da0272fe3058/examples/jsx/pages/component.cljs)), it is also compiled ([JSX](./jsx.html.md)). See [example usage](#example-usage).
+
+### Version
+
+`cherry-cljs`: v0.2.18
+
+## Code Formatting
+
+Using [Parinfer](https://shaunlebron.github.io/parinfer/).
+
+## Example Usage
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+export const params = {
+  cljs: `(ns demo\n${'  '};; you can use npm modules\n${'  '}(:require ["canvas-confetti$default" :as confetti]))\n\n(let [el (js/document.getElementById "test")]\n${'  '}(.addEventListener el "click"\n ${'   '}(fn []\n ${'     '}(confetti)\n${'      '}(println "test"))))\n`,
+  html: '<button id="test">test</button>',
+  console: 'open',
+};
+
+<LiveCodes params={params}></LiveCodes>
+
+Using React (with JSX):
+
+<LiveCodes template="clojurescript"></LiveCodes>
+
+## Starter Template
+
+https://livecodes.io/?template=clojurescript
+
+## Links
+
+- [ClojureScript official website](https://clojurescript.org/)
+- [Clojure official website](https://clojure.org/)
+- [Cherry repo](https://github.com/squint-cljs/cherry)

docs/languages/coffeescript.html.md

@@ -0,0 +1,47 @@
+# CoffeeScript
+
+[CoffeeScript](https://coffeescript.org/) is a little language that compiles into JavaScript.
+
+## Usage
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+This example demonstrates usage in LiveCodes:
+
+<LiveCodes template="coffeescript" height="80vh"></LiveCodes>
+
+## Language Info
+
+### Name
+
+`coffeescript`
+
+### Extensions
+
+`.coffee`
+
+### Aliases
+
+`coffee`, `coffeescript`
+
+### Editor
+
+`script`
+
+## Compiler
+
+The official [CoffeeScript compiler](https://www.npmjs.com/package/coffeescript).
+
+### Version
+
+`coffeescript`: v2.7.0
+
+## Starter Template
+
+https://livecodes.io/?template=coffeescript
+
+## Links
+
+- [Official website](https://coffeescript.org/)
+- [Language Reference](https://coffeescript.org/#language)
+- [CoffeeScript on GitHub](https://github.com/jashkenas/coffeescript)

docs/languages/commonlisp.html.md

@@ -0,0 +1,62 @@
+# Common Lisp
+
+[Common Lisp](https://common-lisp.net/) is a dialect of the Lisp programming language.
+
+In LiveCodes, Common Lisp code runs in the browser using [JSCL](https://github.com/jscl-project/jscl), a Common Lisp to JavaScript compiler.
+
+:::info Note
+
+Lisp language family supported in LiveCodes includes [Common Lisp](./commonlisp.html.md), [Scheme](./scheme.html.md), [ClojureScript](./clojurescript.html.md) and [Fennel](./fennel.html.md).
+
+:::
+
+## Usage
+
+LiveCodes runs Common Lisp code in the browser. JSCL implements a subset of Common Lisp, but covers enough functionality to write practical code.
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+This example demonstrates basic Common Lisp syntax and functionality:
+
+<LiveCodes template="commonlisp" height="80vh"></LiveCodes>
+
+### JS Interoperability
+
+Please see [JSCL docs](https://github.com/jscl-project/jscl/wiki/JSCL-and-manipulations-with-JS-objects)
+
+## Language Info
+
+### Name
+
+`commonlisp`
+
+### Aliases/Extensions
+
+`common-lisp`, `lisp`
+
+### Editor
+
+`script`
+
+## Compiler
+
+[JSCL](https://github.com/jscl-project/jscl) - Common Lisp to JavaScript compiler
+
+## Code Formatting
+
+Using [Parinfer](https://shaunlebron.github.io/parinfer/).
+
+## Limitations
+
+Since JSCL is a subset of Common Lisp, it doesn't implement all Common Lisp features. See the [JSCL documentation](https://github.com/jscl-project/jscl#status) for more information.
+
+## Starter Template
+
+https://livecodes.io/?template=commonlisp
+
+## Links
+
+- [Common Lisp](https://common-lisp.net/)
+- [JSCL](https://github.com/jscl-project/jscl)
+- [Common Lisp: A Gentle Introduction to Symbolic Computation](https://www.cs.cmu.edu/~dst/LispBook/)
+- [Practical Common Lisp](http://www.gigamonkeys.com/book/)

docs/languages/cpp-wasm.html.md

@@ -0,0 +1,3 @@
+# C/C++ (Wasm)
+
+TODO...

docs/languages/cpp.html.md

@@ -0,0 +1,3 @@
+# C++
+
+TODO...

docs/languages/csharp-wasm.html.md

@@ -0,0 +1,137 @@
+# C# (Wasm)
+
+C# is a high-level, general-purpose, object-oriented programming language developed by Microsoft.
+
+In LiveCodes, C# runs in the browser using Blazor WebAssembly with a WebAssembly-based .NET runtime.
+
+## Usage
+
+Demo:
+
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+export const csharpConfig = {
+  activeEditor: 'script',
+  script: {
+    language: 'csharp-wasm',
+    content: `using System;
+
+public class Program
+{
+    public static void Main()
+    {
+        int[] sortedArray = { 1, 3, 5, 7, 9, 11, 13, 15 };
+        int itemToSearch = 7;
+
+        int result = BinarySearch(sortedArray, 0, sortedArray.Length - 1, itemToSearch);
+
+        if (result == -1)
+        {
+            Console.WriteLine("Result: Item not found in the array.");
+        }
+        else
+        {
+            Console.WriteLine($"Result: Item found at index -> {result}");
+        }
+    }
+
+    public static int BinarySearch(int[] arr, int left, int right, int item)
+    {
+        if (right >= left)
+        {
+            int mid = left + (right - left) / 2;
+            if (arr[mid] == item)
+            {
+                return mid;
+            }
+
+            if (arr[mid] > item)
+            {
+                return BinarySearch(arr, left, mid - 1, item);
+            }
+
+            return BinarySearch(arr, mid + 1, right, item);
+        }
+        return -1;
+    }
+}`,
+  },
+  mode: 'simple',
+  editor: 'auto',
+  tools: {
+    status: 'full',
+  },
+};
+
+<LiveCodes config={csharpConfig}></LiveCodes>
+
+
+### Communication with JavaScript
+
+The C# code runs in the context of the result page. A few helper properties and methods are available in the browser global `livecodes.csharp` object:
+
+- `livecodes.csharp.input`: The initial standard input passed to the C# code.
+- `livecodes.csharp.loaded`: A promise that resolves when the C# environment (Blazor WebAssembly) is fully loaded. Other helpers should be used after this promise resolves.
+- `livecodes.csharp.output`: The standard output from the C# code execution.
+- `livecodes.csharp.run`: A function that runs the C# code with new input. This function takes a string as input and returns a promise that resolves with an object containing the `output`, `error`, and `exitCode` properties.
+
+Example:
+
+
+<LiveCodes template="csharp-wasm" params={{ activeEditor: 'markup' }} height="80vh"></LiveCodes>
+
+
+## Language Info
+
+### Name
+
+`csharp-wasm`
+
+### Aliases / Extensions
+
+`cs`, `csharp`, `wasm.cs`, `cs-wasm`
+
+### Editor
+
+`script`
+
+## Compiler
+
+Blazor WebAssembly with .NET WebAssembly runtime.
+
+### Version
+
+.NET 9.0
+
+## Code Formatting
+
+using [Prettier](https://prettier.io/)
+
+## Live Reload
+
+By default, new code changes are sent to the result page for re-evaluation without a full page reload, avoiding the need to reinitialize the Blazor environment. This behavior can be disabled by adding the code comment `// __livecodes_reload__` to the C# code, which forces a full page reload.
+
+This comment can be added in the `hiddenContent` property of the editor for embedded playgrounds.
+
+## Example Usage
+
+```csharp
+using System;
+
+public class Program
+{
+    public static void Main()
+    {
+        Console.WriteLine("Hello, LiveCodes C#!");
+    }
+}
+```
+
+## Starter Template
+
+https://livecodes.io/?template=csharp-wasm
+
+## Links
+
+- [C#](https://learn.microsoft.com/en-us/dotnet/csharp/)
+- [Blazor WebAssembly](https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor)

docs/languages/css.html.md

@@ -0,0 +1,3 @@
+# CSS
+
+TODO...

docs/languages/cssmodules.html.md

@@ -0,0 +1,252 @@
+# CSS Modules
+
+A [CSS Module](https://github.com/css-modules/css-modules) is a CSS file in which all class names and animation names are scoped locally by default.
+
+The selector names are unique to avoid naming collision. They can then be imported as a JavaScript object.
+
+## Usage
+
+CSS Modules can be enabled from the style editor menu.
+
+Selectors added to the style editor (using any language e.g. CSS, SCSS, Less, etc.) are transformed to unique selectors. The transformed classes are then accessible in the script editor as a JSON object, and are injected into the HTML elements.
+
+**Example:**
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs>
+  <TabItem value="src-css" label="Source CSS" default>
+
+```css
+:global .page {
+  padding: 20px;
+}
+
+.text {
+  color: black;
+  font-family: sans-serif;
+}
+
+.small-text {
+  composes: text;
+  font-size: 20px;
+}
+
+.large-text {
+  composes: text;
+  font-size: 40px;
+}
+
+.large-text:hover {
+  color: red;
+}
+
+.title {
+  composes: large-text;
+  color: green;
+}
+```
+
+  </TabItem>
+  <TabItem value="compiled-css" label="Compiled CSS">
+
+```css
+.page {
+  padding: 20px;
+}
+
+._text_1ygro_9 {
+  color: black;
+  font-family: sans-serif;
+}
+
+._small-text_1ygro_19 {
+  font-size: 20px;
+}
+
+._large-text_1ygro_29 {
+  font-size: 40px;
+}
+
+._large-text_1ygro_29:hover {
+  color: red;
+}
+
+._title_1ygro_47 {
+  color: green;
+}
+```
+
+  </TabItem>
+  <TabItem value="json" label="JSON Object">
+
+```json
+{
+  "text": "_text_1ygro_9",
+  "small-text": "_small-text_1ygro_19 _text_1ygro_9",
+  "large-text": "_large-text_1ygro_29 _text_1ygro_9",
+  "title": "_title_1ygro_47 _large-text_1ygro_29 _text_1ygro_9",
+  "smallText": "_small-text_1ygro_19 _text_1ygro_9",
+  "largeText": "_large-text_1ygro_29 _text_1ygro_9"
+}
+```
+
+  </TabItem>
+  <TabItem value="src-html" label="Source HTML">
+
+```html
+<div class="page">
+  <h1>Page Title</h1>
+  <p class="small-text">
+    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore earum blanditiis quidem non
+    beatae ipsam autem maiores ut et delectus unde repudiandae, repellendus aut. Aspernatur
+    similique facere facilis minima tempora.
+  </p>
+</div>
+```
+
+  </TabItem>
+  <TabItem value="compiled-html" label="Compiled HTML">
+
+```html
+<div class="page">
+  <h1>Page Title</h1>
+  <p class="small-text _small-text_1ygro_19 _text_1ygro_9">
+    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore earum blanditiis quidem non
+    beatae ipsam autem maiores ut et delectus unde repudiandae, repellendus aut. Aspernatur
+    similique facere facilis minima tempora.
+  </p>
+</div>
+```
+
+  </TabItem>
+</Tabs>
+
+In the script editor, the JSON object representing the transformed classes can be imported from the relative URLs `'./style.module.css'` or `'./styles.module.css'`.
+
+[Default](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#default_import), [named](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#named_import) and [namespace](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#namespace_import) imports are supported. Class names are also available in camelCase (e.g `.large-text` becomes `largeText`). This can be changed by setting [`localsConvention`](https://github.com/madyankin/postcss-modules#localsconvention) in [custom settings](#custom-settings).
+
+**Example:**
+
+```js title="In script editor (using JS in this case):"
+import classes from './style.module.css';
+import { smallText } from './styles.module.css';
+import * as allClasses from './styles.module.css';
+
+console.log(classes.title);
+
+// .small-text -> smallText
+console.log(smallText);
+
+// .large-text -> largeText
+console.log(allClasses.largeText);
+
+// bracket notation for class with dash
+console.log(allClasses['large-text']);
+```
+
+For full example, see [example usage](#example-usage) below.
+
+:::info
+
+CSS Modules has to be enabled (from style editor menu), to be able to import classes in the script editor.
+
+Importing a URL that does not include `.module` (e.g. `./style.css`) gets the processed CSS **string** as the module's default export.
+
+The extension of the style editor language can also be used, in addition to `.css`. For example, when using SCSS, importing from any of the following URLs is the same:
+
+- `./style.module.css`
+- `./styles.module.css`
+- `./style.module.scss`
+- `./styles.module.scss`
+
+:::
+
+## Language Info
+
+### Name
+
+`cssmodules`
+
+### Type
+
+[Processor](../features/css.html.md)#css-processors)
+
+### Editor
+
+`style`
+
+## Compiler
+
+The CSS Modules processor is provided using [postcss-modules](https://github.com/madyankin/postcss-modules) as a [PostCSS](./postcss.html.md) plugin.
+
+### Version
+
+`postcss-modules`: v6.0.1
+
+## Custom Settings
+
+[Custom settings](../advanced/custom-settings.html.md) added to the property `cssmodules` are passed as a JSON object to the `postcss-modules` plugin during compile. Please check the [documentation](https://github.com/madyankin/postcss-modules#usage) for full reference.
+
+In addition, the following settings are available:
+
+- `addClassesToHTML`
+
+  Type: `boolean`. Default: `true`.
+
+  The generated classes are injected into the HTML elements, so the styles are applied without having to assign them using JavaScript.
+
+- `removeOriginalClasses`
+
+  Type: `boolean`. Default: `false`.
+
+  When enabled, the original classes are removed from HTML, keeping only the generated classes. Only applies if `addClassesToHTML` is enabled.
+
+Please note that custom settings should be valid JSON (i.e. functions are not allowed).
+
+**Example:**
+
+```json
+{
+  "cssmodules": {
+    "exportGlobals": true,
+    "localsConvention": "camelCaseOnly",
+    "addClassesToHTML": false
+  }
+}
+```
+
+## Limitations
+
+Currently, loading external sources in [`composes`](https://github.com/css-modules/css-modules#composing-from-other-files) is not supported.
+
+```css
+/* you cannot do this */
+.title {
+  composes: title from 'https://example.com/styles.css';
+}
+```
+
+If you get this working, [please create a pull request](https://github.com/live-codes/livecodes/pulls).
+
+## Example Usage
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+export const params = {
+  activeEditor: 'style',
+  html: '<div class="page">\n <h1>Page Title</h1>\n <p class="small-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore earum blanditiis quidem non beatae ipsam autem maiores ut et delectus unde repudiandae, repellendus aut. Aspernatur similique facere facilis minima tempora.</p>\n</div>\n',
+  css: ':global .page {\n padding: 20px;\n}\n\n.text {\n color: black;\n font-family: sans-serif;\n}\n\n.small-text {\n composes: text;\n font-size: 20px;\n}\n\n.large-text {\n composes: text;\n font-size: 40px;\n}\n\n.large-text:hover {\n color: red;\n}\n\n.title {\n composes: large-text;\n color: green;\n}\n',
+  js: "import classes from './style.module.css';\n\ndocument.querySelector('h1').className = classes.title;\nconsole.log(classes);\n",
+  processors: 'cssmodules',
+  compiled: 'open',
+};
+
+<LiveCodes params={params} height="400"></LiveCodes>
+
+## Links
+
+- [CSS Modules](https://github.com/css-modules/css-modules)
+- [postcss-modules](https://github.com/madyankin/postcss-modules)
+- [PostCSS](https://postcss.org/)

docs/languages/cssnano.html.md

@@ -0,0 +1,3 @@
+# cssnano
+
+TODO...

docs/languages/diagrams.html.md

@@ -0,0 +1,581 @@
+# Diagrams
+
+import OpenCode from '../../src/components/OpenCode.tsx';
+
+## Overview
+
+Diagrams-as-code.
+
+Allows using syntax for multiple visualization libraries inside HTML to produce diagrams.
+The rendered diagrams are added to the [result page](../features/result.html.md) as either:
+
+- SVG elements (which you can style with CSS or manipulate with JavaScript)
+- HTML images (which you can right-click and save or open in a new window)
+
+Diagrams from multiple libraries can be used in the same page. Only the libraries used will be loaded in the LiveCodes playground. The result page will have no libraries (only the output SVG or images).
+
+<OpenCode template="diagrams">Open starter template in LiveCodes</OpenCode>
+
+## Usage
+
+This code: (<OpenCode id="2m8u9hgeiq4"></OpenCode>)
+
+```html
+<div data-src="my-diagram"></div>
+
+<script type="application/diagram-mermaid" data-output="my-diagram">
+  graph TD
+    A-->B
+    A-->C
+    B-->D
+    C-->D
+</script>
+```
+
+produces this output:
+
+![flow-chart](./img/flow-chart.svg)
+
+<h3>Steps</h3>
+
+#### 1. Add a diagram target:
+
+The target element should have a `data-src` attribute.
+
+It can be an HTML element (the SVG of the diagram will be embedded as a child element)
+
+```html
+<div data-src="my-diagram"></div>
+```
+
+becomes
+
+```html
+<div data-src="my-diagram"><svg ...>...</svg></div>
+```
+
+or an HTML image element (the diagram will be added to its `src` attribute as a [data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs))
+
+```html
+<img data-src="my-diagram" />
+```
+
+becomes
+
+```html
+<img data-src="my-diagram" src="data:image/svg+xml;base64,..." />
+```
+
+There can be more that one target element for the same diagram if they have the same `data-src` attribute.
+
+```html
+<div data-src="my-diagram"></div>
+<img data-src="my-diagram" />
+```
+
+#### 2. Add a script element with the diagram syntax:
+
+It should have:
+
+- an attribute `type="application/diagram-{diagram type}"` that specifies the diagram type (e.g. `type="application/diagram-mermaid"`).
+- a `data-output` attribute that matches the `data-src` attribute of the target element.
+- the syntax of the diagram is the content of the script element or the content of a file linked by the `src` attribute.
+
+```html
+<script type="application/diagram-mermaid" data-output="my-diagram">
+  graph TD
+    A-->B
+    A-->C
+    B-->D
+    C-->D
+</script>
+
+<script
+  type="application/diagram-mermaid"
+  data-output="second-diagram"
+  src="/url/to/diagram/syntax"
+></script>
+```
+
+## Supported Libraries
+
+### [Cytoscape](https://js.cytoscape.org/)
+
+The diagram syntax is JSON representing [Cytoscape options](https://js.cytoscape.org/#getting-started/specifying-basic-options).
+
+Please note that reference to JavaScript objects cannot be used.<br /> e.g. do not use `{container: document.getElementById('cy')}`.
+
+Example: (<OpenCode id="nq6954cuvgs"></OpenCode>)
+
+```html
+<div data-src="cytoscape.svg"></div>
+<script type="application/diagram-cytoscape" data-output="cytoscape.svg">
+  {
+    "elements": [
+      {
+        "data": { "id": "a" }},
+      {
+        "data": { "id": "b" }},
+      {
+        "data": { "id": "ab", "source": "a", "target": "b" }}],
+
+    "style": [
+      {
+        "selector": "node",
+        "style": {
+          "background-color": "#666",
+          "label": "data(id)"}
+      },
+
+      {
+        "selector": "edge",
+        "style": {
+          "width": 3,
+          "line-color": "#ccc",
+          "target-arrow-color": "#ccc",
+          "target-arrow-shape": "triangle",
+          "curve-style": "bezier"
+        }
+      }
+    ],
+
+    "layout": {
+      "name": "grid",
+      "rows": 1
+    }
+
+  }
+</script>
+```
+
+### [ELK](https://www.eclipse.org/elk/)
+
+Diagram layout is produced using [elkjs](https://github.com/kieler/elkjs) and rendered using [elkjs-svg](https://github.com/EmilStenstrom/elkjs-svg).
+
+The syntax used is [ELK JSON](https://www.eclipse.org/elk/documentation/tooldevelopers/graphdatastructure/jsonformat.html) format. <br />ELK text format is not supported! (You may use [this tool](https://rtsys.informatik.uni-kiel.de/elklive/conversion.html) to convert formats)
+
+Example: (<OpenCode id="49cbr5k3z69"></OpenCode>)
+
+```html
+<div data-src="elk.svg"></div>
+<script type="application/diagram-elk" data-output="elk.svg">
+  {
+    "id": "root",
+    "layoutOptions": {
+      "elk.algorithm": "layered"
+    },
+    "children": [
+      {"id": "n1", "width": 70, "height": 70},
+      {"id": "n2", "width": 70, "height": 70},
+      {"id": "n3", "width": 70, "height": 70},
+      {"id": "n4", "width": 70, "height": 70},
+      {"id": "n5", "width": 70, "height": 70},
+      {"id": "n6", "width": 70, "height": 70}
+    ],
+    "edges": [
+      {"id": "e1", "sources": ["n1"], "targets": ["n2"]},
+      {"id": "e2", "sources": ["n1"], "targets": ["n3"]},
+      {"id": "e3", "sources": ["n2"], "targets": ["n4"]},
+      {"id": "e4", "sources": ["n3"], "targets": ["n5"]},
+      {"id": "e5", "sources": ["n5"], "targets": ["n6"]},
+      {"id": "e6", "sources": ["n4"], "targets": ["n6"]}
+    ]
+  }
+</script>
+```
+
+### [Gnuplot](http://www.gnuplot.info/)
+
+using [gnuplot-JS](https://github.com/chhu/gnuplot-JS)
+
+Instead of using `data-output` attribute in the [script element](#2-add-a-script-element-with-the-diagram-syntax), the statement `set output` is used in the diagram syntax (see highlighted lines below).
+
+Data files are also specified in the diagram syntax (see highlighted lines below).
+They are defined in script elements with the attribute `type="application/diagram-gnuplot-file"`. The file name is specified in `data-file` attribute and either have inline content or linked to with a `src` attribute.
+
+Example: (<OpenCode id="45tardc2qaz"></OpenCode>)
+
+```html {4,22}
+<div data-src="contour.svg"></div>
+<script type="application/diagram-gnuplot">
+  set terminal svg size 600,400 enhanced fname 'arial' fsize 10 butt solid
+  set output 'contour.svg'
+  set view 60, 30, 0.85, 1.1
+  set samples 25, 25
+  set isosamples 26, 26
+  set contour base
+  set cntrparam bspline
+  set cntrparam levels auto 10
+  set style data lines
+  set title "3D gnuplot demo - contour of data grid plotting"
+  set xlabel "X axis"
+  set xrange [ 0.00000 : 15.0000 ] noreverse nowriteback
+  set ylabel "Y axis"
+  set yrange [ 0.00000 : 15.0000 ] noreverse nowriteback
+  set zlabel "Z axis"
+  set zlabel  offset character 1, 0, 0 font "" textcolor lt -1 norotate
+  set zrange [ -1.20000 : 1.20000 ] noreverse nowriteback
+
+  # "glass.dat" is defined below
+  splot "glass.dat" using 1
+</script>
+
+<!--  data file -->
+<script
+  type="application/diagram-gnuplot-file"
+  data-file="glass.dat"
+  src="https://raw.githubusercontent.com/gnuplot/gnuplot/master/demo/glass.dat"
+></script>
+
+<!--  or inline data in a script block -->
+<script type="application/diagram-gnuplot-file" data-file="another-file.dat">
+  0.568000   0.000000  -0.911000
+  0.518894   0.231026  -0.911000
+  0.380066   0.422106  -0.911000
+  0.175522   0.540200  -0.911000
+  -0.059372   0.564888  -0.911000
+</script>
+```
+
+### [Graphviz](https://graphviz.org/)
+
+using [@hpcc-js/wasm](https://github.com/hpcc-systems/hpcc-js-wasm)
+
+The following [layout engines](https://graphviz.org/docs/layouts/) are supported:
+
+- dot
+- neato
+- fdp
+- sfdp
+- circo
+- twopi
+- osage
+- patchwork
+
+By default, the `dot` layout engine is used. To use a different engine add the attribute `data-layout` to the [script element](#2-add-a-script-element-with-the-diagram-syntax) with the value of the required engine name, like this:
+
+```html
+<script type="application/diagram-graphviz" data-layout="fdp" data-output="my-diagram">
+  ...
+</script>
+```
+
+Example: (<OpenCode id="ms2c6jc4vnj"></OpenCode>)
+
+```html
+<div data-src="flow-chart.svg"></div>
+<script type="application/diagram-graphviz" data-output="flow-chart.svg">
+  digraph G {
+    node [shape=rect];
+
+    subgraph cluster_0 {
+      style=filled;
+      color=lightgrey;
+      node [style=filled,color=white];
+      a0 -> a1 -> a2 -> a3;
+      label = "Hello";
+    }
+
+    subgraph cluster_1 {
+      node [style=filled];
+      b0 -> b1 -> b2 -> b3;
+      label = "World!";
+      color=blue
+    }
+
+    start -> a0;
+    start -> b0;
+    a1 -> b3;
+    b2 -> a3;
+    a3 -> a0;
+    a3 -> end;
+    b3 -> end;
+
+    start [shape=Mdiamond];
+    end [shape=Msquare];
+  }
+</script>
+```
+
+### [Mermaid](https://mermaid-js.github.io/mermaid/)
+
+Example: (<OpenCode id="r9y3ubytquj"></OpenCode>)
+
+```html
+<div data-src="class-diagram.svg"></div>
+<script type="application/diagram-mermaid" data-output="class-diagram.svg">
+  classDiagram
+  Class01 <|-- AveryLongClass : Cool
+  Class03 *-- Class04
+  Class05 o-- Class06
+  Class07 .. Class08
+  Class09 --> C2 : Where am i?
+  Class09 --* C3
+  Class09 --|> Class07
+  Class07 : equals()
+  Class07 : Object[] elementData
+  Class01 : size()
+  Class01 : int chimp
+  Class01 : int gorilla
+  Class08 <--> C2: Cool label
+</script>
+```
+
+### [Nomnoml](https://nomnoml.com/)
+
+Example: (<OpenCode id="8x45vzfnxw5"></OpenCode>)
+
+```html
+<div data-src="nomnoml.svg"></div>
+<script type="application/diagram-nomnoml" data-output="nomnoml.svg">
+  [Pirate|eyeCount: Int|raid();pillage()|
+    [beard]--[parrot]
+    [beard]-:>[foul mouth]
+  ]
+
+  [<table>mischief | bawl | sing || yell | drink]
+
+  [<abstract>Marauder]<:--[Pirate]
+  [Pirate]- 0..7[mischief]
+  [jollyness]->[Pirate]
+  [jollyness]->[rum]
+  [jollyness]->[singing]
+  [Pirate]-> *[rum|tastiness: Int|swig()]
+  [Pirate]->[singing]
+  [singing]<->[rum]
+</script>
+```
+
+### [Pintora](https://pintorajs.vercel.app/)
+
+[Pintora config](https://pintorajs.vercel.app/docs/configuration/config) object can be specified in [custom settings](../advanced/custom-settings.html.md), under the key `pintora`.
+
+Example Custom Settings:
+
+```json
+{
+  "pintora": {
+    "themeConfig": {
+      "theme": "dark"
+    }
+  }
+}
+```
+
+Example: (<OpenCode id="9ygd8w4jfai"></OpenCode>)
+
+```html
+<div data-src="pintora.svg"></div>
+<script type="application/diagram-pintora" data-output="pintora.svg">
+  sequenceDiagram
+    Frida-->>Georgia: Flowers are beautiful
+    @note over Frida,Georgia: Painters
+    @note right of Georgia: Right
+    @note left of Georgia
+    multiline
+    note
+    @end_note
+</script>
+```
+
+### [Plotly](https://plotly.com/graphing-libraries/)
+
+The diagram syntax is a JSON object with `data` and `layout` properties (see [Plotly reference](https://plotly.com/javascript/reference/index/)).
+
+Please note that the output is a non-interactive SVG element or image. The plotly library is not loaded in the result page, so any JavaScript functionality is not available.
+
+Example: (<OpenCode id="c9teuatsfk6"></OpenCode>)
+
+```html
+<div data-src="plotly.svg"></div>
+<script type="application/diagram-plotly" data-output="plotly.svg">
+  {
+    "data": [
+      {
+        "y": [
+          0.2,
+          0.2,
+          0.6,
+          1,
+          0.5,
+          0.4,
+          0.2,
+          0.7,
+          0.9,
+          0.1,
+          0.5,
+          0.3
+        ],
+        "x": [
+          "day 1",
+          "day 1",
+          "day 1",
+          "day 1",
+          "day 1",
+          "day 1",
+          "day 2",
+          "day 2",
+          "day 2",
+          "day 2",
+          "day 2",
+          "day 2"
+        ],
+        "name": "kale",
+        "marker": {
+          "color": "#3D9970"
+        },
+        "type": "box"
+      },
+      {
+        "y": [
+          0.6,
+          0.7,
+          0.3,
+          0.6,
+          0,
+          0.5,
+          0.7,
+          0.9,
+          0.5,
+          0.8,
+          0.7,
+          0.2
+        ],
+        "x": [
+          "day 1",
+          "day 1",
+          "day 1",
+          "day 1",
+          "day 1",
+          "day 1",
+          "day 2",
+          "day 2",
+          "day 2",
+          "day 2",
+          "day 2",
+          "day 2"
+        ],
+        "name": "radishes",
+        "marker": {
+          "color": "#FF4136"
+        },
+        "type": "box"
+      },
+      {
+        "y": [
+          0.1,
+          0.3,
+          0.1,
+          0.9,
+          0.6,
+          0.6,
+          0.9,
+          1,
+          0.3,
+          0.6,
+          0.8,
+          0.5
+        ],
+        "x": [
+          "day 1",
+          "day 1",
+          "day 1",
+          "day 1",
+          "day 1",
+          "day 1",
+          "day 2",
+          "day 2",
+          "day 2",
+          "day 2",
+          "day 2",
+          "day 2"
+        ],
+        "name": "carrots",
+        "marker": {
+          "color": "#FF851B"
+        },
+        "type": "box"
+      }
+    ],
+    "layout": {
+      "yaxis": {
+        "title": "normalized moisture",
+        "zeroline": false
+      },
+      "boxmode": "group"
+    }
+  }
+</script>
+```
+
+### [Svgbob](https://github.com/ivanceras/svgbob)
+
+Example: (<OpenCode id="fqe7devefsm"></OpenCode>)
+
+```html
+<div data-src="svgbob.svg"></div>
+<script type="application/diagram-svgbob" data-output="svgbob.svg">
+  o-> Graphics Diagram
+
+     0       3                          P *
+      *-------*      +y                    \
+   1 /|    2 /|       ^                     \
+    *-+-----* |       |                v0    \       v3
+    | |4    | |7      | ◄╮               *----\-----*
+    | *-----|-*     ⤹ +-----> +x        /      v X   \
+    |/      |/       / ⤴               /        o     \
+    *-------*       v                 /                \
+   5       6      +z              v1 *------------------* v2
+</script>
+```
+
+### [Vega](https://vega.github.io/vega/)
+
+The diagram syntax is [Vega JSON specification](https://vega.github.io/vega/docs/#specification).
+
+Please note that the output is a non-interactive SVG element or image. The Vega library is not loaded in the result page, so any JavaScript functionality is not available.
+
+Example: (<OpenCode id="m8ynr8vj7b2"></OpenCode>)
+
+```html
+<div data-src="vega.svg"></div>
+<script
+  type="application/diagram-vega"
+  data-output="vega.svg"
+  src="https://vega.github.io/vega/examples/stacked-bar-chart.vg.json"
+></script>
+```
+
+### [VegaLite](https://vega.github.io/vega-lite/)
+
+The diagram syntax is [Vega-Lite View JSON Specification](https://vega.github.io/vega-lite/docs/spec.html).
+
+Please note that the output is a non-interactive SVG element or image. The Vega-Lite library is not loaded in the result page, so any JavaScript functionality is not available.
+
+Example: (<OpenCode id="sui8eux6siv"></OpenCode>)
+
+```html
+<div data-src="vega-lite.svg"></div>
+<script
+  type="application/diagram-vega-lite"
+  data-output="vega-lite.svg"
+  src="https://vega.github.io/vega-lite/examples/sequence_line_fold.vl.json"
+></script>
+```
+
+### [WaveDrom](https://wavedrom.com/)
+
+The diagram syntax is [WaveJSON](https://wavedrom.com/tutorial.html) format.
+
+Example: (<OpenCode id="ey74x6q6cq3"></OpenCode>)
+
+```html
+<div data-src="wavedrom.svg"></div>
+<script type="application/diagram-wavedrom" data-output="wavedrom.svg">
+  { signal : [
+    { name: "clk",  wave: "p......" },
+    { name: "bus",  wave: "x.34.5x",   data: "head body tail" },
+    { name: "wire", wave: "0.1..0." },
+  ]}
+</script>
+```

docs/languages/dot.html.md

@@ -0,0 +1,130 @@
+# doT
+
+[doT](https://olado.github.io/doT/): The fastest + concise javascript template engine for Node.js and browsers.
+
+## Usage
+
+There are 2 modes for rendering:
+
+### Pre-rendered (Default)
+
+The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md).
+
+The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs.
+
+Example: This provides the value of the expression `name`
+
+```json title="Custom Settings"
+{
+  "template": {
+    "data": {
+      "name": "LiveCodes"
+    }
+  }
+}
+```
+
+[Full example below](#pre-rendered)
+
+### Dynamic
+
+To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`.
+
+Example:
+
+```json title="Custom Settings"
+{
+  "template": {
+    "prerender": false
+  }
+}
+```
+
+In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime.
+
+This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data.
+
+Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that.
+
+Example:
+
+```js title="Script Editor (JS)"
+window.livecodes.templateData = { name: 'LiveCodes' };
+```
+
+[Full example below](#dynamic-1)
+
+## Language Info
+
+### Name
+
+`dot`
+
+### Extension
+
+`.dot`
+
+### Editor
+
+`markup`
+
+## Compiler
+
+The official [doT compiler](https://www.npmjs.com/package/dot).
+
+### Version
+
+`dot`: v1.1.3
+
+## Code Formatting
+
+Using [Prettier](https://prettier.io/).
+
+## Custom Settings
+
+[Custom settings](../advanced/custom-settings.html.md) added to the property `dot` are passed as a JSON object to the `doT.template` method during compile. Please check the [documentation](https://olado.github.io/doT/index.html) for full reference.
+
+Please note that custom settings should be valid JSON (i.e. functions are not allowed).
+
+**Example:**
+
+```json title="Custom Settings"
+{
+  "dot": {
+    "varname": "data"
+  }
+}
+```
+
+## Example Usage
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+### Pre-rendered
+
+export const config = {
+  markup: { language: 'dot', content: 'Hello, {{= it.name }}!' },
+  customSettings: { template: { data: { name: 'LiveCodes' } } },
+};
+
+export const params = { compiled: 'open' };
+
+<LiveCodes config={config} params={params}></LiveCodes>
+
+### Dynamic
+
+export const config2 = {
+  markup: { language: 'dot', content: 'Hello, {{= it.name }}!' },
+  script: {
+    language: 'javascript',
+    content: 'window.livecodes.templateData = { name: "LiveCodes" };',
+  },
+  customSettings: { template: { prerender: false } },
+  activeEditor: 'script',
+};
+
+<LiveCodes config={config2}></LiveCodes>
+
+## Links
+
+- [Official website](https://olado.github.io/doT/)

docs/languages/ejs.html.md

@@ -0,0 +1,130 @@
+# EJS
+
+[Embedded JavaScript templating.](https://ejs.co/)
+
+## Usage
+
+There are 2 modes for rendering:
+
+### Pre-rendered (Default)
+
+The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md).
+
+The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs.
+
+Example: This provides the value of the expression `name`
+
+```json title="Custom Settings"
+{
+  "template": {
+    "data": {
+      "name": "LiveCodes"
+    }
+  }
+}
+```
+
+[Full example below](#pre-rendered)
+
+### Dynamic
+
+To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`.
+
+Example:
+
+```json title="Custom Settings"
+{
+  "template": {
+    "prerender": false
+  }
+}
+```
+
+In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime.
+
+This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data.
+
+Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that.
+
+Example:
+
+```js title="Script Editor (JS)"
+window.livecodes.templateData = { name: 'LiveCodes' };
+```
+
+[Full example below](#dynamic-1)
+
+## Language Info
+
+### Name
+
+`ejs`
+
+### Extension
+
+`.ejs`
+
+### Editor
+
+`markup`
+
+## Compiler
+
+The official [EJS compiler](https://www.npmjs.com/package/ejs).
+
+### Version
+
+`ejs`: v3.1.10
+
+## Code Formatting
+
+Using [Prettier](https://prettier.io/).
+
+## Custom Settings
+
+[Custom settings](../advanced/custom-settings.html.md) added to the property `ejs` are passed as a JSON object to the [`compile`](https://ejs.co/#docs) method during compile. Please check the [documentation](https://ejs.co/#docs) for full reference.
+
+Please note that custom settings should be valid JSON (i.e. functions are not allowed).
+
+**Example:**
+
+```json title="Custom Settings"
+{
+  "ejs": {
+    "delimiter": "%"
+  }
+}
+```
+
+## Example Usage
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+### Pre-rendered
+
+export const config = {
+  markup: { language: 'ejs', content: 'Hello <%= name %>!' },
+  customSettings: { template: { data: { name: 'LiveCodes' } } },
+};
+
+export const params = { compiled: 'open' };
+
+<LiveCodes config={config} params={params}></LiveCodes>
+
+### Dynamic
+
+export const config2 = {
+  markup: { language: 'ejs', content: 'Hello <%= name %>!' },
+  script: {
+    language: 'javascript',
+    content: 'window.livecodes.templateData = { name: "LiveCodes" };',
+  },
+  customSettings: { template: { prerender: false } },
+  activeEditor: 'script',
+};
+
+<LiveCodes config={config2}></LiveCodes>
+
+## Links
+
+- [Official website](https://ejs.co/)

docs/languages/eta.html.md

@@ -0,0 +1,120 @@
+# Eta
+
+[Eta](https://eta.js.org/) is an embedded JS template engine for Node, Deno, and the browser. Lighweight, fast, and pluggable. Written in TypeScript.
+
+## Usage
+
+There are 2 modes for rendering:
+
+### Pre-rendered (Default)
+
+The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md).
+
+The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs.
+
+Example: This provides the value of the expression `name`
+
+```json title="Custom Settings"
+{
+  "template": {
+    "data": {
+      "name": "LiveCodes"
+    }
+  }
+}
+```
+
+[Full example below](#pre-rendered)
+
+### Dynamic
+
+To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`.
+
+Example:
+
+```json title="Custom Settings"
+{
+  "template": {
+    "prerender": false
+  }
+}
+```
+
+In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime.
+
+This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data.
+
+Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that.
+
+Example:
+
+```js title="Script Editor (JS)"
+window.livecodes.templateData = { name: 'LiveCodes' };
+```
+
+[Full example below](#dynamic-1)
+
+## Language Info
+
+### Name
+
+`eta`
+
+### Extension
+
+`.eta`
+
+### Editor
+
+`markup`
+
+## Compiler
+
+The official [Eta compiler](https://www.npmjs.com/package/eta).
+
+### Version
+
+`eta`: v3.4.0
+
+## Code Formatting
+
+Using [Prettier](https://prettier.io/).
+
+## Custom Settings
+
+[Custom settings](../advanced/custom-settings.html.md) added to the property `eta` are passed as a JSON object to the [`Eta.render`](https://eta.js.org/docs/api/rendering) method during compile. Please check the [documentation](https://eta.js.org/docs/api/configuration) for full reference.
+
+Please note that custom settings should be valid JSON (i.e. functions are not allowed).
+
+**Example:**
+
+```json title="Custom Settings"
+{
+  "eta": {
+    "varName": "data"
+  }
+}
+```
+
+## Example Usage
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+### Pre-rendered
+
+export const config = {markup: {language: 'eta', content: 'Hello <%= it.name %>!'}, customSettings: {"template": {"data": {"name": "LiveCodes"}}}};
+
+export const params = {compiled: 'open'};
+
+<LiveCodes config={config} params={params}></LiveCodes>
+
+### Dynamic
+
+export const config2 = {markup: {language: 'eta', content: 'Hello <%= it.name %>!'}, script: {language: 'javascript', content: 'window.livecodes.templateData = { name: "LiveCodes" };'}, customSettings: {"template": {"prerender": false}}, activeEditor: 'script'};
+
+<LiveCodes config={config2}></LiveCodes>
+
+## Links
+
+- [Official website](https://eta.js.org/)
+- [Documentation](https://eta.js.org/docs/learn)

docs/languages/fennel.html.md

@@ -0,0 +1,60 @@
+# Fennel
+
+[Fennel](https://fennel-lang.org/) is a programming language that brings together the speed, simplicity, and reach of [Lua](https://www.lua.org/) with the flexibility of a [lisp syntax and macro system](<https://en.wikipedia.org/wiki/Lisp_(programming_language)>).
+
+Fennel code is compiled to Lua, which then runs in the browser using [Fengari](https://fengari.io/). See documentation for Lua language support in LiveCodes [here](./lua.html.md).
+
+:::info Note
+
+Lisp language family supported in LiveCodes includes [Common Lisp](./commonlisp.html.md), [Scheme](./scheme.html.md), [ClojureScript](./clojurescript.html.md) and [Fennel](./fennel.html.md).
+
+:::
+
+## Usage
+
+JavaScript interoperability and DOM access is achieved using [`"js"` module](https://github.com/fengari-lua/fengari-interop).
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+This example demonstrates usage, JavaScript interoperability and DOM access:
+
+<LiveCodes template="fennel" height="80vh"></LiveCodes>
+
+## Language Info
+
+### Name
+
+`fennel`
+
+### Extension
+
+`.fnl`
+
+### Editor
+
+`script`
+
+## Compiler
+
+[Fennel](https://fennel-lang.org/)
+
+### Version
+
+Fennel v1.3.0
+
+## Code Formatting
+
+Using [Parinfer](https://shaunlebron.github.io/parinfer/).
+
+## Starter Template
+
+https://livecodes.io/?template=fennel
+
+## Links
+
+- [Fennel](https://fennel-lang.org/)
+- [Fennel tutorial](https://fennel-lang.org/tutorial)
+- [Lua](https://www.lua.org/)
+- [Fengari](https://fengari.io/)
+- [lua](./lua.html.md) in LiveCodes
+- [Common Lisp](./commonlisp.html.md) in LiveCodes

docs/languages/flow.html.md

@@ -0,0 +1,3 @@
+# Flow
+
+TODO...

docs/languages/gleam.html.md

@@ -0,0 +1,257 @@
+# Gleam
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+[Gleam](https://gleam.run) is a friendly language for building type-safe systems that scale!
+
+Gleam is a statically-typed functional programming language, which compiles to Erlang or JavaScript.
+
+## Usage
+
+LiveCodes compiles Gleam code to JavaScript using the WebAssembly (wasm) version of the [official Gleam compiler](https://github.com/gleam-lang/gleam). The compiled JavaScript code is then executed in the context of the [result page](../features/result.html.md).
+
+The compiled JavaScript code can be inspected in the [Compiled Code Viewer](../features/compiled-code.html.md) in the [Tools Pane](../features/tools-pane.html.md) (below the result page). Console output is shown in the [integrated console](../features/console.html.md).
+
+Please note that the compiler messages (e.g. errors and warnings) are shown in the browser console (not the integrated console).
+
+### Standard Library
+
+[Gleam's standard library](https://hexdocs.pm/gleam_stdlib/) in addition to the following packages are available for use and can be imported as usual with no additional configuration:
+
+- [gleam/crypto](https://hexdocs.pm/gleam_crypto/)
+- [gleam/erlang](https://hexdocs.pm/gleam_erlang/)
+- [gleam/fetch](https://hexdocs.pm/gleam_fetch/)
+- [gleam/http](https://hexdocs.pm/gleam_http/)
+- [gleam/javascript](https://hexdocs.pm/gleam_javascript/)
+- [gleam/json](https://hexdocs.pm/gleam_json/)
+- [gleam/otp](https://hexdocs.pm/gleam_otp/)
+
+Demo:
+
+export const stdlibConfig = {
+  activeEditor: 'script',
+  script: {
+    language: 'gleam',
+    content: `import gleam/io\nimport gleam/string\n\npub fn main() {\n  "hello world!"\n  |> string.uppercase\n  |> io.println\n}`,
+  },
+  tools: { status: 'open' },
+};
+
+<LiveCodes config={stdlibConfig}></LiveCodes>
+
+### Custom Modules
+
+Custom modules can be used in Gleam code. These modules have to be precompiled (to JavaScript) by the Gleam compiler. URLs to the compiled JavaScript code and either the Gleam source code or URLs to the Gleam source code are needed to be able to import custom modules.
+
+This is an example for a repo with precompiled Gleam modules:
+https://github.com/live-codes/gleam-precompiled
+
+Please refer to [Gleam CLI docs](https://gleam.run/writing-gleam/command-line-reference/) for details about adding and building packages.
+
+Note that the built code was committed to the repo by clearing out `.gitignore` file.
+
+The built code can then by accessed from a [CDN that mirrors GitHub](https://www.jsdelivr.com/?docs=gh), like this:
+`https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@main/...`
+
+Built modules can then be declared in [custom settings](../advanced/custom-settings.html.md) (Project menu → Custom Settings), under the `gleam` property, by adding a `modules` property.
+
+The `modules` property is an object that has the module name as the key. The value is an object with the following properties:
+
+- `srcUrl`: the URL to the Gleam source code of the module.
+- `src`: optionally use this instead of `srcUrl` to specify the Gleam source code of the module.
+- `compiledUrl`: the URL to the compiled JavaScript code of the module.
+
+Example:
+
+```json title="Custom Settings"
+{
+  "gleam": {
+    "modules": {
+      "plinth/browser/document": {
+        "srcUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/packages/plinth/src/plinth/browser/document.gleam",
+        "compiledUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/dev/javascript/plinth/plinth/browser/document.mjs"
+      }
+    }
+  }
+}
+```
+
+See the [demo below](#example-usage) ([open in LiveCodes](https://livecodes.io/?template=gleam)).
+
+If `compiledUrl` property is not specified, the JavaScript module is imported from this URL pattern: `{module_name}.mjs` (example: `plinth/browser/document.mjs`).
+This can then be [mapped (using import maps)](../features/module-resolution.html.md)#custom-module-resolution) in [custom settings](../advanced/custom-settings.html.md) (Project menu → Custom Settings) to the full URL of the compiled JavaScript code.
+
+Example:
+
+```json title="Custom Settings"
+{
+  "gleam": {
+    "modules": {
+      "some_pkg/some_module": {
+        "srcUrl": "https://example.com/packages/some_pkg/some_module.gleam"
+      },
+      "another_pkg/another_module": {
+        "srcUrl": "https://example.com/packages/another_pkg/another_module.gleam"
+      }
+    }
+  },
+  "imports": {
+    // map a specific module
+    "some_pkg/some_module.mjs": "https://example.com/compiled/some_pkg/some_module.mjs",
+    // or map a whole directory
+    "another_pkg/": "https://example.com/compiled/another_pkg/"
+  }
+}
+```
+
+### Externals
+
+[External functions](https://tour.gleam.run/advanced-features/externals/) written in JavaScript can also be used. An external function has the `@external` attribute on it. It needs to specify a "relative" URL specifying the location of the external code. This URL is [mapped (using import maps)](../features/module-resolution.html.md)#custom-module-resolution) in [custom settings](../advanced/custom-settings.html.md) (Project menu → Custom Settings) to the full URL of the script that contains the code.
+
+**Example:**
+
+The following script is hosted on this URL:
+https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/demo/greet.js
+
+```js title="greet.js"
+export const hello = (str) => `Hello, ${str}!`;
+```
+
+Use this in custom settings:
+
+```json title="Custom Settings"
+{
+  "imports": {
+    "my_pkg/greet.js": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/demo/greet.js"
+  }
+}
+```
+
+`"my_pkg/greet.js"` can then be used in the `@external` attribute.
+
+```js title="Gleam"
+import gleam/io
+
+// highlight-next-line
+@external(javascript, "my_pkg/greet.js", "hello")
+// highlight-next-line
+pub fn hello(str: String) -> String
+
+pub fn main() {
+ io.println(hello("from JavaScript"))
+}
+```
+
+Demo:
+
+export const externalsConfig = {
+  activeEditor: 'script',
+  script: {
+    language: 'gleam',
+    content:
+      'import gleam/io\n\n@external(javascript, "my_pkg/greet.js", "hello")\npub fn hello(str: String) -> String\n\npub fn main() {\n io.println(hello("from JavaScript"))\n}',
+  },
+  tools: { status: 'open' },
+  customSettings: {
+    imports: {
+      'my_pkg/greet.js':
+        'https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/demo/greet.js',
+    },
+  },
+};
+
+<LiveCodes config={externalsConfig}></LiveCodes>
+
+:::tip
+
+[Data URLs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) can be used to avoid having to host the external code online. LiveCodes enables [creating data URLs](../features/data-urls.html.md) easily.
+
+Example:
+The import map in the previous example can be rewritten like this:
+
+```json title="Custom Settings"
+{
+  "imports": {
+    "my_pkg/greet.js": "data:text/javascript;charset=UTF-8;base64,ZXhwb3J0IGNvbnN0IGhlbGxvID0gKHN0cikgPT4gYEhlbGxvLCAke3N0cn0hYDs="
+  }
+}
+```
+
+:::
+
+### NPM Modules
+
+Modules published to [npm](https://www.npmjs.com/), [deno.land/x](https://deno.land/x) and [jsr.io](https://jsr.io/) can be imported as external functions. There is no need to specify import maps. The package/module name is prefixed with a modifier to specify the source (e.g. `npm:uuid` to import the [`uuid`](https://www.npmjs.com/package/uuid) npm module).
+
+See list of supported CDNs and the respective modifiers in the section about [module resolution](../features/module-resolution.html.md)#cdn-providers).
+
+Example:
+
+```js
+import gleam/io
+
+// npm module (https://www.npmjs.com/package/uuid)
+@external(javascript, "npm:uuid", "v4")
+pub fn uuid() -> String
+
+// jsr module (https://jsr.io/@kwhinnery/yassify)
+@external(javascript, "jsr:@kwhinnery/yassify", "yassify")
+pub fn yassify(str: String) -> String
+
+pub fn main() {
+ io.println(uuid())
+ io.println(yassify("Hello, World!"))
+}
+```
+
+Demo:
+
+export const npmConfig = {
+  activeEditor: 'script',
+  script: {
+    language: 'gleam',
+    content:
+      'import gleam/io\n\n// npm module (https://www.npmjs.com/package/uuid)\n@external(javascript, "npm:uuid", "v4")\npub fn uuid() -> String\n\n// jsr module (https://jsr.io/@kwhinnery/yassify)\n@external(javascript, "jsr:@kwhinnery/yassify", "yassify")\npub fn yassify(str: String) -> String\n\npub fn main() {\n io.println(uuid())\n io.println(yassify("Hello, World!"))\n}\n',
+  },
+  tools: { status: 'open' },
+};
+
+<LiveCodes config={npmConfig}></LiveCodes>
+
+### Example Usage
+
+This is the Gleam starter template demonstrating the use of standard library, custom modules, external functions and npm modules.
+
+<LiveCodes template="gleam" height="80vh"></LiveCodes>
+
+## Language Info
+
+### Name
+
+`gleam`
+
+### Extension
+
+`.gleam`
+
+### Editor
+
+`script`
+
+## Compiler
+
+The wasm version of the [official Gleam compiler](https://github.com/gleam-lang/gleam).
+
+### Version
+
+`v1.3.0-rc1`
+
+## Starter Template
+
+https://livecodes.io/?template=gleam
+
+## Links
+
+- [Gleam](https://gleam.run)
+- [Gleam documentation](https://gleam.run/documentation/)
+- [Gleam language tour](https://tour.gleam.run/)

docs/languages/go.html.md

@@ -0,0 +1,3 @@
+# Go (Golang)
+
+TODO...

docs/languages/haml.html.md

@@ -0,0 +1,121 @@
+# Haml
+
+[Haml](https://haml.info/) compiler for client side javascript view templates using [clientside-haml-js](https://github.com/uglyog/clientside-haml-js).
+
+## Usage
+
+There are 2 modes for rendering:
+
+### Pre-rendered (Default)
+
+The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md).
+
+The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs.
+
+Example: This provides the value of the expression `name`
+
+```json title="Custom Settings"
+{
+  "template": {
+    "data": {
+      "name": "LiveCodes"
+    }
+  }
+}
+```
+
+[Full example below](#pre-rendered)
+
+### Dynamic
+
+To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`.
+
+Example:
+
+```json title="Custom Settings"
+{
+  "template": {
+    "prerender": false
+  }
+}
+```
+
+In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime.
+
+This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data.
+
+Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that.
+
+Example:
+
+```js title="Script Editor (JS)"
+window.livecodes.templateData = { name: 'LiveCodes' };
+```
+
+[Full example below](#dynamic-1)
+
+## Language Info
+
+### Name
+
+`haml`
+
+### Extension
+
+`.haml`
+
+### Editor
+
+`markup`
+
+## Compiler
+
+[clientside-haml-js](https://github.com/uglyog/clientside-haml-js).
+
+### Version
+
+`clientside-haml-js`: v5.4
+
+## Code Formatting
+
+Not supported.
+
+## Custom Settings
+
+[Custom settings](../advanced/custom-settings.html.md) added to the property `haml` are passed as a JSON object to the [`haml.compileHaml`](https://github.com/uglyog/clientside-haml-js#client-side-haml-api) method during compile. Please check the [documentation](https://github.com/uglyog/clientside-haml-js#client-side-haml-api) for full reference.
+
+Please note that custom settings should be valid JSON (i.e. functions are not allowed).
+
+## Example Usage
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+### Pre-rendered
+
+export const config = {
+  markup: { language: 'haml', content: '%p Hello, #{name}!' },
+  customSettings: { template: { data: { name: 'LiveCodes' } } },
+};
+
+export const params = { compiled: 'open' };
+
+<LiveCodes config={config} params={params}></LiveCodes>
+
+### Dynamic
+
+export const config2 = {
+  markup: { language: 'haml', content: '%p Hello, #{name}!' },
+  script: {
+    language: 'javascript',
+    content: 'window.livecodes.templateData = { name: "LiveCodes" };',
+  },
+  customSettings: { template: { prerender: false } },
+  activeEditor: 'script',
+};
+
+<LiveCodes config={config2}></LiveCodes>
+
+## Links
+
+- [Haml](https://haml.info/)
+- [clientside-haml-js](https://github.com/uglyog/clientside-haml-js)

docs/languages/handlebars.html.md

@@ -0,0 +1,131 @@
+# Handlebars
+
+[Handlebars](https://handlebarsjs.com/): Minimal templating on steroids.
+
+## Usage
+
+There are 2 modes for rendering:
+
+### Pre-rendered (Default)
+
+The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md).
+
+The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs.
+
+Example: This provides the value of the expression `name`
+
+```json title="Custom Settings"
+{
+  "template": {
+    "data": {
+      "name": "LiveCodes"
+    }
+  }
+}
+```
+
+[Full example below](#pre-rendered)
+
+### Dynamic
+
+To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`.
+
+Example:
+
+```json title="Custom Settings"
+{
+  "template": {
+    "prerender": false
+  }
+}
+```
+
+In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime.
+
+This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data.
+
+Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that.
+
+Example:
+
+```js title="Script Editor (JS)"
+window.livecodes.templateData = { name: 'LiveCodes' };
+```
+
+[Full example below](#dynamic-1)
+
+## Language Info
+
+### Name
+
+`handlebars`
+
+### Extensions
+
+`.hbs`, `.handlebars`
+
+### Editor
+
+`markup`
+
+## Compiler
+
+The official [handlebars compiler](https://www.npmjs.com/package/handlebars).
+
+### Version
+
+`handlebars`: v4.7.8
+
+## Code Formatting
+
+Using [Prettier](https://prettier.io/).
+
+## Custom Settings
+
+[Custom settings](../advanced/custom-settings.html.md) added to the property `handlebars` are passed as a JSON object to the [`compile`](https://handlebarsjs.com/api-reference/compilation.html#handlebars-compile-template-options) method during compile. Please check the [documentation](https://handlebarsjs.com/api-reference/compilation.html#handlebars-compile-template-options) for full reference.
+
+Please note that custom settings should be valid JSON (i.e. functions are not allowed).
+
+**Example:**
+
+```json title="Custom Settings"
+{
+  "handlebars": {
+    "preventIndent": true
+  }
+}
+```
+
+## Example Usage
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+### Pre-rendered
+
+export const config = {
+  markup: { language: 'handlebars', content: 'Hello {{name}}!' },
+  customSettings: { template: { data: { name: 'LiveCodes' } } },
+};
+
+export const params = { compiled: 'open' };
+
+<LiveCodes config={config} params={params}></LiveCodes>
+
+### Dynamic
+
+export const config2 = {
+  markup: { language: 'handlebars', content: 'Hello {{name}}!' },
+  script: {
+    language: 'javascript',
+    content: 'window.livecodes.templateData = { name: "LiveCodes" };',
+  },
+  customSettings: { template: { prerender: false } },
+  activeEditor: 'script',
+};
+
+<LiveCodes config={config2}></LiveCodes>
+
+## Links
+
+- [Official website](https://handlebarsjs.com/)
+- [Language guide](https://handlebarsjs.com/guide/)

docs/languages/html.html.md

@@ -0,0 +1,68 @@
+# HTML
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+
+HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications. It defines the structure and content of web pages.
+
+## Usage
+
+HTML code in the [markup editor](../features/projects.html.md)#markup-editor) is added as is without compilation or processing to the body of the [result page](../features/result.html.md).
+
+There is no need to add a full page structure (e.g. `<html>`, `<head>`, `<body>` tags). This is already handled by LiveCodes.
+(See [Result Page Structure](../features/result.html.md)#result-page-structure) for more details.)
+
+If you need to add content to the `<head>` section or `<html>` attributes of the result page, you can add it in the [project info screen](https://livecodes.io/?screen=info).
+
+### Demo
+
+
+export const htmlOnlyConfig = {
+  markup: {
+    language: 'html',
+    content: `<h1>Hello, LiveCodes!</h1>
+<p>This is a paragraph in HTML.</p>
+<ul>
+  <li>Simple</li>
+  <li>Structured</li>
+  <li>Semantic</li>
+</ul>
+`,
+  },
+}
+
+<LiveCodes config={htmlOnlyConfig} />
+
+### Styles and JavaScript
+
+Most of the time, you will want to add styles and scripts in the [respective editors](../features/projects.html.md).
+However, you can of course still add them in `<link>`, `<style>` and `<script>` tags in HTML.
+This can be useful in different scenarios, such as adding global variables that are then used in the script editor,
+or adding JavaScript together with a different script editor language (e.g. see [SQL starter template](https://livecodes.io/?template=sql&activeEditor=markup))
+
+## Language Info
+
+### Name
+
+`html`
+
+### Extensions
+
+`.html`, `.htm`
+
+### Editor
+
+`markup`
+
+## Compiler
+
+None.
+
+## Code Formatting
+
+Using [Prettier](https://prettier.io/).
+
+## Links
+
+- [HTML: HyperText Markup Language (MDN)](https://developer.mozilla.org/en-US/docs/Web/HTML)
+- [HTML Tutorial (W3Schools)](https://www.w3schools.com/html/)

docs/languages/imba.html.md

@@ -0,0 +1,3 @@
+# Imba
+
+TODO...

docs/languages/index.html.md

@@ -0,0 +1,30 @@
+# Languages
+
+## Overview
+
+The term "language" used in these documentations refer to any technology (in addition to web languages: HTML, CSS and JavaScript), that needs some form of transformation/compilation to run in the browser.
+
+LiveCodes provides support for a wide range of languages, which include (but not limited to):
+
+- Syntax used by web libraries/frameworks (e.g. JSX, TSX, Vue SFC, Svelte SFC, MDX, Astro).
+- Languages that transpile to JavaScript (e.g. TypeScript, CoffeeScript, LiveScript, ReScript).
+- Languages/frameworks that generate CSS (e.g. SCSS, Less, Stylus, Tailwind CSS, UnoCSS).
+- CSS processors (e.g. PostCSS, Autoprefixer, Lightning CSS, CSS Modules, cssnano)
+- Traditional programming languages (e.g. Python, Ruby, Go, PHP, C++, R, Lua, Scheme, Perl).
+- Data manipulation/logic languages (e.g. SQL, Prolog).
+- Authoring/templating languages (e.g Markdown, AsciiDoc, Pug, Handlebars, Haml).
+- Low-code/visual editors (e.g. blockly, rich text editor).
+- Modeling languages/diagram-as-code (e.g. Gnuplot, Graphviz, Mermaid, Vega, Plotly).
+- Languages that target WebAssembly (e.g. AssemblyScript, WebAssembly Text Format)
+- ... and others.
+
+Below is the full list of supported languages with documentations for usage in LiveCodes.
+
+## Language List
+
+```mdx-code-block
+import DocCardList from '@theme/DocCardList';
+import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
+
+<DocCardList items={useCurrentSidebarCategory().items.filter(item => item.docId !== 'languages/index')}/>
+```

docs/languages/java.html.md

@@ -0,0 +1,122 @@
+# Java
+
+Java is a high-level, general-purpose, memory-safe, object-oriented programming language.
+
+In LiveCodes, Java runs in the browser using [DoppioJVM](https://github.com/plasma-umass/doppio).
+
+## Usage
+
+Demo:
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+export const javaConfig = {
+  activeEditor: 'script',
+  script: {
+    language: 'java',
+    content: `public class BinarySearchSnippet {
+  /**
+   * Search an item with binarySearch algorithm.
+   *
+   * @param arr sorted array to search
+   * @param item an item to search
+   * @return if item is found, return the index position of the array item otherwise return -1
+   */
+
+  public static int binarySearch(int[] arr, int left, int right, int item) {
+    if (right >= left) {
+      int mid = left + (right - left) / 2;
+      if (arr[mid] == item) {
+        return mid;
+      }
+
+      if (arr[mid] > item) {
+        return binarySearch(arr, left, mid - 1, item);
+      }
+
+      return binarySearch(arr, mid + 1, right, item);
+    }
+    return -1;
+  }
+
+  public static void main(String[] args) {
+    int[] sortedArray = {1, 3, 5, 7, 9, 11, 13, 15};
+    int itemToSearch = 7;
+
+    int result = binarySearch(sortedArray, 0, sortedArray.length - 1, itemToSearch);
+
+    if (result == -1) {
+      System.out.println("Result: Item not found in the array.");
+    } else {
+      System.out.println("Result: Item found at index -> " + result);
+    }
+  }
+}
+`,
+  },
+  mode: 'simple',
+  editor: 'auto',
+  tools: {
+    status: 'full',
+},
+};
+
+<LiveCodes config={javaConfig}></LiveCodes>
+
+### Communication with JavaScript
+
+The Java code runs in the context of the [result page](../features/result.html.md).
+A few helper properties and methods are available in the browser global `livecodes.java` object:
+
+- `livecodes.java.input`: the initial standard input that is passed to the Java code.
+- `livecodes.java.loaded`: A promise that resolves when the Java environment is loaded. Any other helpers should be used after this promise resolves.
+- `livecodes.java.output`: the standard output.
+- `livecodes.java.error`: the standard error.
+- `livecodes.java.exitCode`: the exit code.
+- `livecodes.java.run`: a function that runs the Java code with new input. This function takes a string as input and returns a promise that resolves when the Java code is done running. The promise resolves with an object containing the `input`, `output`, `error`, and `exitCode` properties.
+
+Example:
+
+<LiveCodes template="java" params={{ activeEditor: 'markup' }} height="80vh"></LiveCodes>
+
+## Language Info
+
+### Name
+
+`java`
+
+### Extension
+
+`.java`
+
+### Editor
+
+`script`
+
+## Compiler
+
+[DoppioJVM](https://github.com/plasma-umass/doppio)
+
+### Version
+
+`DoppioJVM`: v0.5.0, which runs Java 8 JDK.
+
+## Code Formatting
+
+Using [Prettier](https://prettier.io) with the [Prettier Java plugin](https://github.com/jhipster/prettier-java).
+
+## 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 Java 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.html.md)#markup) for embedded playgrounds.
+
+## Starter Template
+
+https://livecodes.io/?template=java
+
+## Links
+
+- [Java](https://www.java.com/)
+- [DoppioJVM](https://github.com/plasma-umass/doppio)

docs/languages/javascript.html.md

@@ -0,0 +1,3 @@
+# JavaScript
+
+TODO...

docs/languages/jinja.html.md

@@ -0,0 +1,150 @@
+# Jinja
+
+[Jinja](https://jinja.palletsprojects.com/) is a fast, expressive, extensible templating engine. Special placeholders in the template allow writing code similar to Python syntax. Then the template is passed data to render the final document.
+
+LiveCodes uses a [minimalistic JavaScript implementation](https://github.com/huggingface/huggingface.js/tree/main/packages/jinja).
+
+## Usage
+
+There are 2 modes for rendering:
+
+### Pre-rendered (Default)
+
+The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md).
+
+The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs.
+
+Example: This provides the value of the expression `name`
+
+```json title="Custom Settings"
+{
+  "template": {
+    "data": {
+      "name": "LiveCodes"
+    }
+  }
+}
+```
+
+[Full example below](#pre-rendered)
+
+### Dynamic
+
+To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`.
+
+Example:
+
+```json title="Custom Settings"
+{
+  "template": {
+    "prerender": false
+  }
+}
+```
+
+In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime.
+
+This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data.
+
+Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that.
+
+Example:
+
+```js title="Script Editor (JS)"
+window.livecodes.templateData = { name: 'LiveCodes' };
+```
+
+[Full example below](#dynamic-1)
+
+## Language Info
+
+### Name
+
+`jinja`
+
+### Extension
+
+`.jinja`
+
+### Editor
+
+`markup`
+
+## Compiler
+
+[@huggingface/jinja](https://www.npmjs.com/package/@huggingface/jinja).
+
+### Version
+
+`@huggingface/jinja`: v0.5.0
+
+## Code Formatting
+
+Using `@huggingface/jinja` integrated formatted.
+
+## Example Usage
+
+import LiveCodes from '../../src/components/LiveCodes';
+
+### Pre-rendered
+
+export const config = {
+  markup: { language: 'jinja', content: `<ul id="navigation">
+{% for item in navigation %}
+    <li><a href="{{ item.href }}">{{ item.caption }}</a></li>
+{% endfor %}
+</ul>
+
+<h1>My Webpage</h1>
+{{ a_variable }}
+
+` },
+  customSettings: { template: { data: {
+  navigation: [
+    { href: "/", caption: "Home" },
+    { href: "/about", caption: "About" },
+    { href: "/contact", caption: "Contact" },
+  ],
+  a_variable: "Hello World!",
+} } },
+};
+
+export const params = { compiled: 'open' };
+
+<LiveCodes config={config} params={params}></LiveCodes>
+
+### Dynamic
+
+export const config2 = {
+  markup: { language: 'jinja', content: `<ul id="navigation">
+{% for item in navigation %}
+    <li><a href="{{ item.href }}">{{ item.caption }}</a></li>
+{% endfor %}
+</ul>
+
+<h1>My Webpage</h1>
+{{ a_variable }}
+
+` },
+  script: {
+    language: 'javascript',
+    content: `window.livecodes.templateData = {
+  navigation: [
+    { href: "/", caption: "Home" },
+    { href: "/about", caption: "About" },
+    { href: "/contact", caption: "Contact" },
+  ],
+  a_variable: "Hello World!",
+};`,
+  },
+  customSettings: { template: { prerender: false } },
+  activeEditor: 'script',
+};
+
+<LiveCodes config={config2}></LiveCodes>
+
+## Links
+
+- [Jinja](https://jinja.palletsprojects.com/)
+- [Template Documentation](https://jinja.palletsprojects.com/en/stable/templates/)
+- [`@huggingface/jinja`](https://www.npmjs.com/package/@huggingface/jinja)

docs/languages/jsx.html.md

@@ -0,0 +1,312 @@
+# JSX
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
+
+[JSX](https://react.dev/learn/writing-markup-with-jsx) is a syntax extension for JavaScript that allows writing HTML-like markup inside JavaScript.
+It has been popularized by [React](https://react.dev/), and then adopted by many other libraries/frameworks.
+
+By default, when running JSX in LiveCodes, [React](https://react.dev/) runtime is used.
+However, other libraries like [Preact](https://preactjs.com/), [nano JSX](https://nanojsx.io/) and others can be used as well (see [Custom JSX Runtimes](#custom-jsx-runtimes)).
+
+TSX is also supported in LiveCodes and is [documented here](./tsx.html.md).
+
+Please note that [React compiler](https://react.dev/learn/react-compiler) is also available in LiveCodes and is [documented here](./react.html.md).
+
+## Usage
+
+The easiest way is to [auto-render](#auto-rendering) a component by exporting it as the [default export](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export#using_the_default_export):
+
+export const basicJsxDemo = {
+  jsx: `export default function App() {\n  return <h1>Hello World!</h1>;\n}`,
+};
+
+<RunInLiveCodes
+  params={basicJsxDemo}
+  code={basicJsxDemo.jsx}
+  language="jsx"
+  formatCode={false}
+></RunInLiveCodes>
+
+You may, however, be more explicit and render the component yourself using [React DOM](https://react.dev/reference/react-dom/client):
+
+export const reactDomDemo = {
+  jsx: `import { createRoot } from "react-dom/client";\n\nfunction App() {\n  return <h1>Hello World!</h1>;\n}\n\nconst root = createRoot(document.querySelector("#root"));\nroot.render(<App />);`,
+  html: `<div id="root"></div>`,
+};
+
+<RunInLiveCodes
+  params={reactDomDemo}
+  code={reactDomDemo.jsx}
+  language="jsx"
+  formatCode={false}
+></RunInLiveCodes>
+
+:::info note
+
+React's [new JSX transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) is utilized. So there is no need to import React.
+
+```jsx
+// this is not needed:
+// import React from 'react';
+
+export default function App() {
+  return <h1>Hello World!</h1>;
+}
+```
+
+:::
+
+### Auto-rendering
+
+A component is rendered automatically as a React component (without having to manually use React Dom to render it) if the following conditions are met:
+
+- The component is exported as the default export.
+- No custom JSX runtime is used (see [Custom JSX Runtimes](#custom-jsx-runtimes)).
+- No [imports from `"./script"`](#exports) in markup editor.
+- Auto-rendering is not [disabled](#disabling-auto-rendering).
+
+#### Root Element
+
+To render the React components to a specific [root](https://react.dev/reference/react-dom/client/createRoot) DOM element use `"livecodes-app"` as the element `id`. Otherwise, if that element is not found, a new `div` element is added to `document.body` and is used as the root.
+
+Example:
+
+export const rootDemo = {
+  html: `<div id="livecodes-app">Loading...</div>`,
+  jsx: `export default function App() {\n  return <h1>Hello World!</h1>;\n}`,
+};
+
+<RunInLiveCodes
+  params={rootDemo}
+  code={rootDemo.html}
+  language="html"
+  formatCode={false}
+></RunInLiveCodes>
+
+#### Disabling Auto-rendering
+
+To disable auto-rendering, set the [custom settings](#custom-settings) `disableAutoRender` property to `true`.
+
+export const disableAutoRenderDemo = {
+  markup: {
+    language: 'html',
+    content: `JSX auto-rendering is disabled. Set from Project menu → Custom Settings.`,
+  },
+  script: {
+    language: 'jsx',
+    content: `export default function App() {\n  return <h1>Hello World!</h1>;\n}`,
+  },
+  customSettings: { jsx: { disableAutoRender: true } },
+};
+
+<RunInLiveCodes
+  config={disableAutoRenderDemo}
+  code={JSON.stringify(disableAutoRenderDemo.customSettings, null, 2)}
+  language="json"
+  codeTitle="Custom Settings"
+  formatCode={false}
+></RunInLiveCodes>
+
+### Importing Modules
+
+npm modules can be imported as described in the section about [module resolution](../features/module-resolution.html.md), including bare module imports and importing from different CDNs. Stylesheet imports are added as `<link rel="stylesheet">` tags in the page `head`.
+
+Example:
+
+export const importsDemo = {
+  jsx: `import { useState, useEffect } from "react";\nimport confetti from "canvas-confetti";\nimport "bootstrap/dist/css/bootstrap.css";\n\nexport default function App() {\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    if (count > 0) {\n      confetti();\n    }\n  }, [count]);\n\n  return (\n    <div className="m-5 text-center">\n      <p>You clicked {count} times.</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n`,
+};
+
+<RunInLiveCodes
+  params={importsDemo}
+  code={importsDemo.jsx}
+  language="jsx"
+  formatCode={false}
+></RunInLiveCodes>
+
+Module imports can be customized using import maps as described in [module resolution](../features/module-resolution.html.md)#custom-module-resolution) documentations.
+
+#### Types for Imported Modules
+
+Types for imported modules are loaded automatically (if available) to provide [Intellisense](../features/intellisense.html.md), auto-completion and type information.
+
+![LiveCodes Intellisense](../../static/img/screenshots/intellisense-1.jpg)
+
+![LiveCodes Intellisense](../../static/img/screenshots/intellisense-2.jpg)
+
+Moreover, you can provide custom type definitions for modules that do not have types available on npm. See [Custom Types](../features/intellisense.html.md)#custom-types) for details.
+
+### Exports
+
+Values exported from script editor (default or named) can be imported in the markup editor by importing from `"./script"` (with no extension).
+
+This can be useful, for example, when using [MDX](./mdx.html.md) to import components exported form JSX.
+
+Demo:
+
+export const exportsDemo = {
+  mdx: `import Greeting from "./script";\n\n<Greeting name="MDX" />\n`,
+  jsx: `export default function(props) {\n  return <h1>Greeting from {props.name}!</h1>;\n}\n`,
+};
+
+<LiveCodes params={exportsDemo}></LiveCodes>
+
+:::info note
+
+When values are imported from `"./script"`, [auto-rendering](#auto-rendering) is disabled, because it is assumed that you want to take control over component rendering.
+
+:::
+
+### Styles
+
+CSS can be applied to the component using various ways:
+
+#### Style Editor
+
+Styles added in the style editor is applied globally to the [result page](../features/result.html.md). This can use different **languages/processors** supported in LiveCodes including CSS, SCSS, Less, Stylus, ..etc. See [style documentation](../features/css.html.md) for more details.
+
+And of course, styles and stylesheets added in markup editor are also applied globally.
+
+#### Importing Stylesheets
+
+Stylesheets imported in script editor are added as `<link rel="stylesheet">` tags in the page `head`.
+The stylesheet URL can be an absolute URL or a path in the npm package. The URL has to end with `".css"`.
+
+example:
+
+export const stylesDemo = {
+  jsx: `import "bootstrap/dist/css/bootstrap.css";\n\nexport default () => <h1 className="m-5 text-center">Hello World!</h1>;\n`,
+};
+
+<RunInLiveCodes
+  params={stylesDemo}
+  code={stylesDemo.jsx}
+  language="jsx"
+  formatCode={false}
+></RunInLiveCodes>
+
+#### CSS Modules
+
+CSS modules are supported and are [documented separately](./cssmodules.html.md). Make sure to enable CSS modules (from style editor menu or in [`processors`](../configuration/configuration-object.html.md)#processors) property of [configuration object](../configuration/configuration-object.html.md)).
+
+Demo:
+
+export const cssModulesDemo = {
+  activeEditor: 'script',
+  style: { language: 'css', content: `.title {\n  color: green;\n  font-family: sans-serif;\n}\n` },
+  script: {
+    language: 'jsx',
+    content: `import classes from './style.module.css';\n\nexport default function() {\n  return <h1 className={classes.title}>Hello, CSS Modules!</h1>;\n}\n`,
+  },
+  processors: ['cssmodules'],
+};
+
+<LiveCodes config={cssModulesDemo}></LiveCodes>
+
+#### CSS Frameworks
+
+[CSS Frameworks](../features/css.html.md)#css-processors) supported in LiveCodes (e.g. [Tailwind CSS](./tailwindcss.html.md), [UnoCSS](./unocss.html.md), [WindiCSS](./windicss.html.md)) can detect class names added in JSX. Make sure that the required utility is enabled (from style editor menu or in [`processors`](../configuration/configuration-object.html.md)#processors) property of [configuration object](../configuration/configuration-object.html.md)) and that required [directives](https://tailwindcss.com/docs/functions-and-directives#tailwind) are added to the style editor.
+
+Demo:
+
+export const tailwindcssDemo = {
+  activeEditor: 'script',
+  style: {
+    language: 'css',
+    content: `@tailwind base;\n@tailwind components;\n@tailwind utilities;\n`,
+  },
+  script: {
+    language: 'jsx',
+    content: `export default function() {\n  return <h1 className="text-3xl font-bold text-gray-500 text-center m-4">Hello, Tailwind CSS!</h1>;\n}\n`,
+  },
+  processors: ['tailwindcss'],
+};
+
+<LiveCodes config={tailwindcssDemo}></LiveCodes>
+
+#### CSS-in-JS
+
+CSS-in-JS libraries can be imported and used as usual.
+
+Demo:
+
+export const styledComponentsDemo = {
+  jsx: `import styled from 'styled-components';\n\nconst Title = styled.h1\`\n text-align: center;\n font-family: sans-serif;\n color: palevioletred;\n\`;\n\nexport default function () {\n return <Title>Hello, styled-components!</Title>;\n}\n`,
+};
+
+<LiveCodes params={styledComponentsDemo}></LiveCodes>
+
+### Custom JSX Runtimes
+
+LiveCodes allows using other libraries (like [Preact](https://preactjs.com/) and [nano JSX](https://nanojsx.io/)) as the JSX runtime.
+
+JSX is compiled to JavaScript using the TypeScript compiler, which allows multiple configuration options for JSX, including [`jsx`](https://www.typescriptlang.org/tsconfig#jsx), [`jsxFactory`](https://www.typescriptlang.org/tsconfig#jsxFactory), [`jsxFragmentFactory`](https://www.typescriptlang.org/tsconfig#jsxFragmentFactory) and [`jsxImportSource`](https://www.typescriptlang.org/tsconfig#jsxImportSource).
+
+These can be configured using in-code pragmas or in [custom settings](#custom-settings).
+
+Example for using Preact:
+
+export const preactDemo = {
+  jsx: `/** @jsx h */\nimport { h, render } from 'preact';\n\nconst App = (props) => <h1>Hello, {props.name}</h1>;\n\nrender(<App name="Preact" />, document.body);\n`,
+};
+
+<RunInLiveCodes
+  params={preactDemo}
+  code={'//highlight-next-line\n' + preactDemo.jsx}
+  language="jsx"
+  formatCode={false}
+  showLineNumbers={true}
+></RunInLiveCodes>
+
+:::info note
+
+[Auto-rendering](#auto-rendering) is disabled for custom JSX runtimes.
+
+:::
+
+## Language Info
+
+### Name
+
+`jsx`
+
+### Extension
+
+`.jsx`
+
+### Editor
+
+`script`
+
+## Compiler
+
+[TypeScript compiler](./typescript.html.md)
+
+## Code Formatting
+
+Using [Prettier](https://prettier.io/).
+
+## Custom Settings
+
+[Custom settings](../advanced/custom-settings.html.md) added to the property `jsx` are passed to the TypeScript compiler as [compiler options](https://www.typescriptlang.org/tsconfig#compilerOptions) while compiling JSX.
+In addition, the option `disableAutoRender` can be set to `true` to disable [auto-rendering](#auto-rendering).
+
+Please note that custom settings should be valid JSON (i.e. functions are not allowed).
+
+**Example:**
+
+```json title="Custom Settings"
+{
+  "jsx": {
+    "disableAutoRender": true,
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment"
+  }
+}
+```
+
+## Links
+
+- [React](https://react.dev/)
+- [JSX](https://react.dev/learn/writing-markup-with-jsx)

docs/languages/julia.html.md

@@ -0,0 +1,3 @@
+# Julia
+
+TODO...

docs/languages/less.html.md

@@ -0,0 +1,3 @@
+# Less
+
+TODO...

docs/languages/lightningcss.html.md

@@ -0,0 +1,3 @@
+# Lightning CSS
+
+TODO...

docs/languages/liquid.html.md

@@ -0,0 +1,132 @@
+# Liquid
+
+[LiquidJS](https://liquidjs.com/): A simple, expressive and safe template engine.
+
+## Usage
+
+There are 2 modes for rendering:
+
+### Pre-rendered (Default)
+
+The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md).
+
+The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs.
+
+Example: This provides the value of the expression `name`
+
+```json title="Custom Settings"
+{
+  "template": {
+    "data": {
+      "name": "LiveCodes"
+    }
+  }
+}
+```
+
+[Full example below](#pre-rendered)
+
+### Dynamic
+
+To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`.
+
+Example:
+
+```json title="Custom Settings"
+{
+  "template": {
+    "prerender": false
+  }
+}
+```
+
+In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime.
+
+This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data.
+
+Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that.
+
+Example:
+
+```js title="Script Editor (JS)"
+window.livecodes.templateData = { name: 'LiveCodes' };
+```
+
+[Full example below](#dynamic-1)
+
+## Language Info
+
+### Name
+
+`liquid`
+
+### Extensions
+
+`.liquid`, `.liquidjs`
+
+### Editor
+
+`markup`
+
+## Compiler
+
+The official [LiquidJS compiler](https://www.npmjs.com/package/liquidjs).
+
+### Version
+
+`liquidjs`: v10.14.0
+
+## Code Formatting
+
+Using [Prettier](https://prettier.io/).
+
+## Custom Settings
+
+[Custom settings](../advanced/custom-settings.html.md) added to the property `liquid` are passed as a JSON object to the [Liquid constructor](https://liquidjs.com/api/classes/Liquid.html). Please check the [documentation](https://liquidjs.com/tutorials/options.html) for full reference.
+
+Please note that custom settings should be valid JSON (i.e. functions are not allowed).
+
+**Example:**
+
+```json title="Custom Settings"
+{
+  "liquid": {
+    "outputDelimiterLeft": "<%=",
+    "outputDelimiterRight": "%>"
+  }
+}
+```
+
+## Example Usage
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+### Pre-rendered
+
+export const config = {
+  markup: { language: 'liquid', content: 'Hello, {{ name | capitalize }}!' },
+  customSettings: { template: { data: { name: 'livecodes' } } },
+};
+
+export const params = { compiled: 'open' };
+
+<LiveCodes config={config} params={params}></LiveCodes>
+
+### Dynamic
+
+export const config2 = {
+  markup: { language: 'liquid', content: 'Hello, {{ name | capitalize }}!' },
+  script: {
+    language: 'javascript',
+    content: 'window.livecodes.templateData = { name: "livecodes" };',
+  },
+  customSettings: { template: { prerender: false } },
+  activeEditor: 'script',
+};
+
+<LiveCodes config={config2}></LiveCodes>
+
+## Links
+
+- [Official website](https://liquidjs.com/)
+- [Liquidjs tutorials](https://liquidjs.com/tutorials/intro-to-liquid.html)

docs/languages/livescript.html.md

@@ -0,0 +1,3 @@
+# LiveScript
+
+TODO...

docs/languages/lua-wasm.html.md

@@ -0,0 +1,66 @@
+# Lua (Wasm)
+
+[Lua](https://www.lua.org/) is a powerful, efficient, lightweight, embeddable scripting language. It supports procedural programming, object-oriented programming, functional programming, data-driven programming, and data description.
+
+LiveCodes can run Lua in the browser using [Wasmoon](https://github.com/ceifa/wasmoon).
+
+> Wasmoon is a real Lua 5.4 VM with JS bindings made with [WebAssembly](https://webassembly.org/).
+>
+> [github.com/ceifa/wasmoon](https://github.com/ceifa/wasmoon)
+
+:::info Note
+
+LiveCodes also supports running Lua using [Fengari](https://fengari.io/) which is the Lua VM written in JavaScript. Read documentation [here](./lua.html.md)
+
+:::
+
+## Usage
+
+LiveCodes runs Lua in the browser. JavaScript interoperability and DOM access is achieved using the global variable `window` which exposes the page `window` object.
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+This example demonstrates usage, JavaScript interoperability and DOM access:
+
+<LiveCodes template="lua-wasm" height="80vh"></LiveCodes>
+
+## Language Info
+
+### Name
+
+`lua-wasm`
+
+### Alias
+
+`luawasm`
+
+### Extension
+
+`.wasm.lua`
+
+### Editor
+
+`script`
+
+## Compiler
+
+[Wasmoon](https://github.com/ceifa/wasmoon)
+
+### Version
+
+Wasmoon v1.16.0
+
+## Code Formatting
+
+Using [`lua-fmt`](https://github.com/trixnz/lua-fmt).
+
+## Starter Template
+
+https://livecodes.io/?template=lua-wasm
+
+## Links
+
+- [Lua](https://www.lua.org/)
+- [Lua documentation](https://www.lua.org/docs.html)
+- [wasmoon](https://github.com/ceifa/wasmoon)
+- [Lua (using Fengari)](./lua.html.md) in LiveCodes

docs/languages/lua.html.md

@@ -0,0 +1,62 @@
+# Lua
+
+[Lua](https://www.lua.org/) is a powerful, efficient, lightweight, embeddable scripting language. It supports procedural programming, object-oriented programming, functional programming, data-driven programming, and data description.
+
+LiveCodes runs Lua in the browser using [Fengari](https://fengari.io/).
+
+> Fengari (Moon in greek) is the Lua VM written in JavaScript. It uses JavaScript's garbage collector so that interoperability with the DOM is non-leaky.
+>
+> [fengari.io](https://fengari.io/)
+
+:::info Note
+
+LiveCodes also supports running Lua using [Wasmoon](https://github.com/ceifa/wasmoon) which is a real Lua 5.4 VM with JS bindings made with WebAssembly. Read documentation [here](./lua-wasm.html.md)
+
+:::
+
+## Usage
+
+LiveCodes runs Lua in the browser. JavaScript interoperability and DOM access is achieved using [`"js"` module](https://github.com/fengari-lua/fengari-interop).
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+This example demonstrates usage, JavaScript interoperability and DOM access:
+
+<LiveCodes template="lua" height="80vh"></LiveCodes>
+
+## Language Info
+
+### Name
+
+`lua`
+
+### Extension
+
+`.lua`
+
+### Editor
+
+`script`
+
+## Compiler
+
+[Fengari](https://fengari.io/)
+
+### Version
+
+Fengari v0.1.4
+
+## Code Formatting
+
+Using [`lua-fmt`](https://github.com/trixnz/lua-fmt).
+
+## Starter Template
+
+https://livecodes.io/?template=lua
+
+## Links
+
+- [Lua](https://www.lua.org/)
+- [Lua documentation](https://www.lua.org/docs.html)
+- [Fengari](https://fengari.io/)
+- [lua-wasm](./lua-wasm.html.md) in LiveCodes

docs/languages/malina.html.md

@@ -0,0 +1,3 @@
+# Malina.js
+
+TODO...

docs/languages/markdown.html.md

@@ -0,0 +1,3 @@
+# Markdown
+
+TODO...

docs/languages/mdx.html.md

@@ -0,0 +1,3 @@
+# MDX
+
+TODO...

docs/languages/mjml.html.md

@@ -0,0 +1,67 @@
+# MJML
+
+[MJML](https://mjml.io/) is a markup language designed to reduce the pain of coding a responsive email.
+
+## Language Info
+
+### Name
+
+`mjml`
+
+### Extension
+
+`.mjml`
+
+### Editor
+
+`markup`
+
+## Compiler
+
+The [browser build](https://www.npmjs.com/package/mjml-browser) of the official [MJML compiler](https://github.com/mjmlio/mjml).
+
+### Version
+
+`mjml-browser`: v4.15.3
+
+## Custom Settings
+
+[Custom settings](../advanced/custom-settings.html.md) added to the property `mjml` are passed as a JSON object to the mjml compiler. Please check the [documentation](https://documentation.mjml.io/#inside-node-js) for full reference.
+
+**Example:**
+
+```json
+{
+  "mjml": {
+    "keepComments": false,
+    "minify": true
+  }
+}
+```
+
+## Example Usage
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+export const params = {
+  mjml: '<mjml>\n\t<mj-body>\n\t\t<mj-section>\n\t\t\t<mj-column>\n\t\t\t\t<mj-text>\n\t\t\t\t\tHello World!\n\t\t\t\t</mj-text>\n\t\t\t</mj-column>\n\t\t</mj-section>\n\t</mj-body>\n</mjml>\n',
+};
+
+<LiveCodes params={params}></LiveCodes>
+
+This playground loads a template from the official MJML [email templates](https://github.com/mjmlio/email-templates):
+
+<LiveCodes
+  import="https://github.com/mjmlio/email-templates/blob/master/templates/onepage.mjml"
+  height="400"
+></LiveCodes>
+
+## Links
+
+- [MJML official website](https://mjml.io/)
+
+- [MJML documentation](https://documentation.mjml.io/)
+
+- [MJML GitHub repo](https://github.com/mjmlio/mjml)
+
+- [Official email templates](https://mjml.io/templates)

docs/languages/mustache.html.md

@@ -0,0 +1,115 @@
+# Mustache
+
+[Mustache](https://mustache.github.io/): Logic-less templates.
+
+## Usage
+
+There are 2 modes for rendering:
+
+### Pre-rendered (Default)
+
+The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md).
+
+The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs.
+
+Example: This provides the value of the expression `name`
+
+```json title="Custom Settings"
+{
+  "template": {
+    "data": {
+      "name": "LiveCodes"
+    }
+  }
+}
+```
+
+[Full example below](#pre-rendered)
+
+### Dynamic
+
+To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`.
+
+Example:
+
+```json title="Custom Settings"
+{
+  "template": {
+    "prerender": false
+  }
+}
+```
+
+In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime.
+
+This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data.
+
+Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that.
+
+Example:
+
+```js title="Script Editor (JS)"
+window.livecodes.templateData = { name: 'LiveCodes' };
+```
+
+[Full example below](#dynamic-1)
+
+## Language Info
+
+### Name
+
+`mustache`
+
+### Extension
+
+`.mustache`
+
+### Editor
+
+`markup`
+
+## Compiler
+
+[mustache.js](https://github.com/janl/mustache.js/).
+
+### Version
+
+`mustache`: v4.2.0
+
+## Code Formatting
+
+Using [Prettier](https://prettier.io/).
+
+## Example Usage
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+### Pre-rendered
+
+export const config = {
+  markup: { language: 'mustache', content: 'Hello {{name}}!' },
+  customSettings: { template: { data: { name: 'LiveCodes' } } },
+};
+
+export const params = { compiled: 'open' };
+
+<LiveCodes config={config} params={params}></LiveCodes>
+
+### Dynamic
+
+export const config2 = {
+  markup: { language: 'mustache', content: 'Hello {{name}}!' },
+  script: {
+    language: 'javascript',
+    content: 'window.livecodes.templateData = { name: "LiveCodes" };',
+  },
+  customSettings: { template: { prerender: false } },
+  activeEditor: 'script',
+};
+
+<LiveCodes config={config2}></LiveCodes>
+
+## Links
+
+- [Mustache](https://mustache.github.io/)
+- [mustache.js](https://github.com/janl/mustache.js)

docs/languages/nunjucks.html.md

@@ -0,0 +1,115 @@
+# Nunjucks
+
+[Nunjucks](https://mozilla.github.io/nunjucks/) is a rich and powerful templating language for JavaScript.
+
+## Usage
+
+There are 2 modes for rendering:
+
+### Pre-rendered (Default)
+
+The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md).
+
+The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs.
+
+Example: This provides the value of the expression `name`
+
+```json title="Custom Settings"
+{
+  "template": {
+    "data": {
+      "name": "LiveCodes"
+    }
+  }
+}
+```
+
+[Full example below](#pre-rendered)
+
+### Dynamic
+
+To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`.
+
+Example:
+
+```json title="Custom Settings"
+{
+  "template": {
+    "prerender": false
+  }
+}
+```
+
+In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime.
+
+This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data.
+
+Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that.
+
+Example:
+
+```js title="Script Editor (JS)"
+window.livecodes.templateData = { name: 'LiveCodes' };
+```
+
+[Full example below](#dynamic-1)
+
+## Language Info
+
+### Name
+
+`nunjucks`
+
+### Extension
+
+`.njk`, `.nunjucks`
+
+### Editor
+
+`markup`
+
+## Compiler
+
+The official [Nunjucks compiler](https://www.npmjs.com/package/nunjucks).
+
+### Version
+
+`nunjucks`: v3.2.3
+
+## Code Formatting
+
+Using [Prettier](https://prettier.io/).
+
+## Example Usage
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+### Pre-rendered
+
+export const config = {
+  markup: { language: 'nunjucks', content: 'Hello {{name}}!' },
+  customSettings: { template: { data: { name: 'LiveCodes' } } },
+};
+
+export const params = { compiled: 'open' };
+
+<LiveCodes config={config} params={params}></LiveCodes>
+
+### Dynamic
+
+export const config2 = {
+  markup: { language: 'nunjucks', content: 'Hello {{name}}!' },
+  script: {
+    language: 'javascript',
+    content: 'window.livecodes.templateData = { name: "LiveCodes" };',
+  },
+  customSettings: { template: { prerender: false } },
+  activeEditor: 'script',
+};
+
+<LiveCodes config={config2}></LiveCodes>
+
+## Links
+
+- [Official website](https://mozilla.github.io/nunjucks/)
+- [Documentation](https://mozilla.github.io/nunjucks/templating.html)

docs/languages/ocaml.html.md

@@ -0,0 +1,3 @@
+# OCaml
+
+TODO...