# Livecodes

> - [`Playground`](../../interfaces/Playground.md)

## Pages

- [Interface: API](apihtml.md): - [`Playground`](../../interfaces/Playground.md)
- [Type Alias: APICommands](apicommandshtml.md): **APICommands**:`"setBroadcastToken"`\|`"showVersion"`
- [Interface: AppConfig](appconfightml.md): These are properties that define how the app behaves.
- [Type Alias: AppLanguage](applanguagehtml.md): **AppLanguage**:`"auto"`\|`"ar"`\|`"de"`\|`"en"`\|`"es"`\|`"fa"`\|`"fr"`\|`"hi"`\|`"it"`\|`"ja"`\...
- [Type Alias: CDN](cdnhtml.md): **CDN**:`"jspm"`\|`"skypack"`\|`"jsdelivr"`\|`"fastly.jsdelivr"`\|`"gcore.jsdelivr"`\|`"testingcf.jsdelivr...
- [Interface: Code](codehtml.md): An object that contains the language, content and compiled code for each of the 3 [code editors](https://livecodes.io...
- [Type Alias: CodejarTheme](codejarthemehtml.md): **CodejarTheme**:`"a11y-dark"`\|`"atom-dark"`\|`"base16-ateliersulphurpool-light"`\|`"catppuccin-latte"`\|`"...
- [Type Alias: CodemirrorTheme](codemirrorthemehtml.md): **CodemirrorTheme**:`"amy"`\|`"aura"`\|`"ayu-light"`\|`"barf"`\|`"basic-light"`\|`"basic-dark"`\|`"bespi...
- [Interface: Config](confightml.md): The playground [configuration object](https://livecodes.io/docs/configuration/configuration-object).
- [Interface: ContentConfig](contentconfightml.md): The properties that define the content of the current [project](https://livecodes.io/docs/features/projects).
- [Type Alias: CssPresetId](csspresetidhtml.md): **CssPresetId**:`""`\|`"normalize.css"`\|`"reset-css"`
- [Interface: EditorConfig](editorconfightml.md): - [`UserConfig`](UserConfig.md)
- [Type Alias: EditorId](editoridhtml.md): **EditorId**:`"markup"`\|`"style"`\|`"script"`
- [Interface: EditorPosition](editorpositionhtml.md): `optional`**column**:`number`
- [Type Alias: EditorTheme](editorthemehtml.md): **EditorTheme**: [`MonacoTheme`](MonacoTheme.md) \| [`CodemirrorTheme`](CodemirrorTheme.md) \| [`CodejarTheme`](Codej...
- [Interface: EmbedOptions](embedoptionshtml.md): An object that represents the playground embed options.
- [Interface: FormatterConfig](formatterconfightml.md): - [`UserConfig`](UserConfig.md)
- [Type Alias: Language](languagehtml.md): **Language**:`"html"`\|`"htm"`\|`"markdown"`\|`"md"`\|`"mdown"`\|`"mkdn"`\|`"mdx"`\|`"astro"`\|`"pug...
- [Type Alias: MonacoTheme](monacothemehtml.md): **MonacoTheme**:`"active4d"`\|`"all-hallows-eve"`\|`"amy"`\|`"birds-of-paradise"`\|`"blackboard"`\|`"brill...
- [Interface: Playground](playgroundhtml.md): An object that represents the LiveCodes playground instance.
- [Type Alias: Processor](processorhtml.md): **Processor**:`"postcss"`\|`"postcssImportUrl"`\|`"tailwindcss"`\|`"windicss"`\|`"unocss"`\|`"tokencss"`\...
- [Type Alias: TemplateName](templatenamehtml.md): **TemplateName**:`"blank"`\|`"javascript"`\|`"typescript"`\|`"react"`\|`"react-native"`\|`"vue2"`\|`"vue...
- [Interface: TestResult](testresulthtml.md): **duration**:`number`
- [Type Alias: Theme](themehtml.md): **Theme**:`"light"`\|`"dark"`
- [Type Alias: ToolsPaneStatus](toolspanestatushtml.md): **ToolsPaneStatus**:`"closed"`\|`"open"`\|`"full"`\|`"none"`\|`""`
- [Interface: Types](typeshtml.md): \[`key`:`string`\]:`string`\|`object`
- [Interface: UserConfig](userconfightml.md): - [`EditorConfig`](EditorConfig.md).[`FormatterConfig`](FormatterConfig.md)
- [Type Alias: WatchConsole()](watchconsolehtml.md): **WatchConsole**: (`event`,`fn`) =>`object`
- [Type Alias: WatchDestroy()](watchdestroyhtml.md): **WatchDestroy**: (`event`,`fn`) =>`object`
- [Type Alias: WatchLoad()](watchloadhtml.md): **WatchLoad**: (`event`,`fn`) =>`object`
- [Type Alias: WatchReady()](watchreadyhtml.md): **WatchReady**: (`event`,`fn`) =>`object`
- [Type Alias: WatchTests()](watchtestshtml.md): **WatchTests**: (`event`,`fn`) =>`object`
- [About us](abouthtml.md): LiveCodes is built and maintained by [Hatem Hosny](https://github.com/hatemhosny), and wonderful [contributors](https...
- [AI Code Assistant 🪄](aihtml.md): LiveCodes supports AI-powered code completion, totally for **free** with **no account or API token required**, using ...
- [art-template](art-templatehtml.md): [art-template](https://aui.github.io/art-template/) is a high performance JavaScript templating engine.
- [AsciiDoc](asciidochtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [AssemblyScript](assemblyscripthtml.md): TODO...
- [Assets](assetshtml.md): Adding local assets (e.g. images, fonts, stylesheets, scripts) that are not hosted online is such a common need that ...
- [Astro](astrohtml.md): TODO...
- [Autoprefixer](autoprefixerhtml.md): TODO...
- [Babel](babelhtml.md): [Babel](https://babeljs.io/) is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards com...
- [Backup / Restore](backup-restorehtml.md): LiveCodes data can be backed-up, so that it can be later restored on the same or different device.
- [BBCode](bbcodehtml.md): [BBCode](https://www.bbcode.org/) ("Bulletin Board Code") is a lightweight markup language used to format messages in...
- [Blockly](blocklyhtml.md): TODO...
- [Bookmarklet](bookmarklethtml.md): LiveCodes allows [importing code](./features/import.html.md) from a [wide variety of sources](./features/import.html....
- [Broadcast](broadcasthtml.md): LiveCodes Broadcast allows sending the [result page](./result.html.md) (and optionally source & compiled code and pro...
- [Civet](civethtml.md): TODO...
- [Clio](cliohtml.md): TODO...
- [ClojureScript](clojurescripthtml.md): [ClojureScript](https://clojurescript.org/) is a robust, practical, and fast programming language with a set of usefu...
- [Code Format](code-formathtml.md): Code formatting is supported for most [languages](../languages/index.html.md).
- [Code Prefill](code-prefillhtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [Code to Image](code-to-imagehtml.md): LiveCodes has a feature called "Code to Image" that allows converting the code in the code editor into nice-looking i...
- [Display Mode: codeblock](codeblockhtml.md): import LiveCodes from '../../../src/components/LiveCodes.tsx';
- [CoffeeScript](coffeescripthtml.md): [CoffeeScript](https://coffeescript.org/) is a little language that compiles into JavaScript.
- [Command Menu](command-menuhtml.md): The command menu allows running a large set of commands from the UI. It is keyboard-friendly and allows for searching...
- [Common Lisp](commonlisphtml.md): [Common Lisp](https://common-lisp.net/) is a dialect of the Lisp programming language.
- [Compiled Code](compiled-codehtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [Configuration Object](configuration-objecthtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [Console](consolehtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [Contact {#contact-custom-content-none}](contacthtml.md): We would love to hear from you!
- [Contribution](contributionhtml.md): Contributions are always welcome, no matter how large or small. Before contributing,
- [C/C++ (Wasm)](cpp-wasmhtml.md): TODO...
- [C++](cpphtml.md): TODO...
- [Function: createPlayground()](createplaygroundhtml.md): **createPlayground**(`container`,`options`?):`Promise`\
- [Credits](creditshtml.md): LiveCodes uses services that are generously provided by:
- [C# (Wasm)](csharp-wasmhtml.md): C# is a high-level, general-purpose, object-oriented programming language developed by Microsoft.
- [CSS](csshtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [CSS Modules](cssmoduleshtml.md): A [CSS Module](https://github.com/css-modules/css-modules) is a CSS file in which all class names and animation names...
- [cssnano](cssnanohtml.md): TODO...
- [Custom Settings](custom-settingshtml.md)
- [Data URLs](data-urlshtml.md): **Data URLs**, URLs prefixed with the`data:`scheme, allow content creators to embed small files inline in documents.
- [Default Template/Language](default-template-languagehtml.md): When the app is loaded, by default, the last used [language](../languages/index.html.md) is selected.
- [Default View](default-viewhtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [Deploy](deployhtml.md): The result page (of any number of projects) can be deployed and hosted at [GitHub Pages](https://pages.github.com/) (...
- [Diagrams](diagramshtml.md): import OpenCode from '../../src/components/OpenCode.tsx';
- [Display Modes](display-modeshtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [Docker Setup](dockerhtml.md): This guide makes it easy to set up a self-hosted instance of LiveCodes on a V...
- [doT](dothtml.md): [doT](https://olado.github.io/doT/): The fastest + concise javascript template engine for Node.js and browsers.
- [Editor Settings](editor-settingshtml.md): LiveCodes allows a lot of flexibility for configuring which code editor to use and its settings.
- [Display Mode: editor](editorhtml.md): import LiveCodes from '../../../src/components/LiveCodes.tsx';
- [EJS](ejshtml.md): There are 2 modes for rendering:
- [Embedded Playgrounds](embedshtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [Eta](etahtml.md): [Eta](https://eta.js.org/) is an embedded JS template engine for Node, Deno, and the browser. Lightweight, fast, and ...
- [Export](exporthtml.md): Project export can be accessed from the Project menu → Export.
- [External Resources](external-resourceshtml.md): URLs to external CSS stylesheets and JS scripts can be added to the page from the UI using the Project menu → Externa...
- [Fennel](fennelhtml.md): [Fennel](https://fennel-lang.org/) is a programming language that brings together the speed, simplicity, and reach of...
- [Flow](flowhtml.md): TODO...
- [Display Mode: full](fullhtml.md): import LiveCodes from '../../../src/components/LiveCodes.tsx';
- [Function: getPlaygroundUrl()](getplaygroundurlhtml.md): **getPlaygroundUrl**(`options`):`string`
- [Getting Started](getting-startedhtml.md): import LiveCodes from '../src/components/LiveCodes.tsx';
- [GitHub Action ⚡](gh-actionhtml.md): The [Preview in LiveCodes](https://github.com/live-codes/preview-in-livecodes) GitHub Action generates preview links ...
- [GitHub Integration](github-integrationhtml.md): Generally, LiveCodes can be used anonymously without any accounts. This includes [importing](./import.html.md) code f...
- [Gleam](gleamhtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [Go (Wasm)](go-wasmhtml.md): [Go](https://go.dev/) (Golang), is an open-source, statically typed, and compiled programming language developed by G...
- [Go (Golang)](gohtml.md): [Go](https://go.dev/) (Golang), is an open-source, statically typed, and compiled programming language developed by G...
- [Haml](hamlhtml.md): [Haml](https://haml.info/) compiler for client side javascript view templates using [clientside-haml-js](https://gith...
- [Handlebars](handlebarshtml.md): [Handlebars](https://handlebarsjs.com/): Minimal templating on steroids.
- [Headless Mode](headlesshtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [Internationalization (i18n)](i18nhtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [Imba](imbahtml.md): TODO...
- [Import](importhtml.md): LiveCodes supports importing code from a wide variety of sources. This can be achieved using one of the f...
- [Features](indexhtml.md): _LiveCodes_ is an open-source, client-side, code playground that runs in the browser. It enables quick prototyping an...
- [Integrations](integrationshtml.md)
- [IntelliSense](intellisensehtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [Java](javahtml.md): Java is a high-level, general-purpose, memory-safe, object-oriented programming language.
- [JavaScript](javascripthtml.md): TODO...
- [Jinja](jinjahtml.md): [Jinja](https://jinja.palletsprojects.com/) is a fast, expressive, extensible templating engine. Special placeholders...
- [JavaScript/<wbr />TypeScript SDK](js-tshtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [JSX](jsxhtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [Julia](juliahtml.md): TODO...
- [Keyboard Shortcuts](keyboard-shortcutshtml.md): Many commands can be executed from the keyboard using keyboard shortcuts. The full list can be found in the [Keyboard...
- [Less](lesshtml.md): TODO...
- [License](licensehtml.md): LiveCodes is released under the permissive [MIT License](https://github.com/live-codes/livecodes/blob/develop/LICENSE...
- [Lightning CSS](lightningcsshtml.md): TODO...
- [Liquid](liquidhtml.md): [LiquidJS](https://liquidjs.com/): A simple, expressive and safe template engine.
- [Lite Mode](litehtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [LiveScript](livescripthtml.md): TODO...
- [Lua (Wasm)](lua-wasmhtml.md): [Lua](https://www.lua.org/) is a powerful, efficient, lightweight, embeddable scripting language. It supports procedu...
- [Lua](luahtml.md): [Lua](https://www.lua.org/) is a powerful, efficient, lightweight, embeddable scripting language. It supports procedu...
- [Malina.js](malinahtml.md): TODO...
- [Markdown to LiveCodes](markdown-to-livecodeshtml.md): Markdown and MDX code blocks can be easily converted to interactive LiveCodes playgrounds.
- [Markdown](markdownhtml.md): [Markdown](https://daringfireball.net/projects/markdown/) is a text-to-HTML conversion tool for web writers.
- [MDX](mdxhtml.md): [MDX](https://mdxjs.com/) allows using JSX in [Markdown](./markdown.html.md), creating dynamic and component-driven c...
- [MJML](mjmlhtml.md): [MJML](https://mjml.io/) is a markup language designed to reduce the pain of coding a responsive email.
- [Mobile Support](mobilehtml.md): LiveCodes provides a responsive layout that adapts to different screen sizes. Don't wait to be on your desk. Try your...
- [Module Resolution](module-resolutionhtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [Mustache](mustachehtml.md): [Mustache](https://mustache.github.io/): Logic-less templates.
- [Nunjucks](nunjuckshtml.md): [Nunjucks](https://mozilla.github.io/nunjucks/) is a rich and powerful templating language for JavaScript.
- [OCaml](ocamlhtml.md): TODO...
- [Overview](overviewhtml.md): [LiveCodes](https://livecodes.io) is an [open-source](./license.html.md) client-side code playground. It is [feature-...
- [Perl](perlhtml.md): TODO...
- [Permanent URL](permanent-urlhtml.md): Any specific version of LiveCodes app can be accessed through the permanent unique URL:
- [PHP (Wasm)](php-wasmhtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [PHP](phphtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [PostCSS](postcsshtml.md): TODO...
- [Import Url](postcssimporturlhtml.md): TODO...
- [Preset Env](postcsspresetenvhtml.md): TODO...
- [PostgreSQL](postgresqlhtml.md): [PostgreSQL](https://www.postgresql.org/) is a powerful, open source object-relational database system. LiveCodes run...
- [Projects](projectshtml.md): A _LiveCodes_ project is a combination of markup, styles & scripts that result in a **single web page**. Check the se...
- [Prolog](prologhtml.md): TODO...
- [Pug](pughtml.md): [Pug](https://pugjs.org/) is a high-performance template engine heavily influenced by [Haml](https://haml.info/) and ...
- [PurgeCSS](purgecsshtml.md): TODO...
- [Python (Wasm)](python-wasmhtml.md): import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
- [Python](pythonhtml.md): import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
- [Query Parameters](query-paramshtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [R](rhtml.md): import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
- [React Native (TSX)](react-native-tsxhtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [React Native](react-nativehtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [React (TSX)](react-tsxhtml.md): TSX is a syntax that allows using TypeScript in JSX.
- [React SDK](reacthtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [Read-Only](read-onlyhtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [Reason](reasonhtml.md): TODO...
- [Recover Unsaved](recoverhtml.md)
- [ReScript](rescripthtml.md): TODO...
- [Rich Text Editor](richtexthtml.md): TODO...
- [Riot.js](riothtml.md): TODO...
- [Ruby (Wasm)](ruby-wasmhtml.md): [Ruby](https://ruby-lang.org/) is a dynamic, open source programming language with a focus on simplicity and producti...
- [Ruby](rubyhtml.md): [Ruby](https://ruby-lang.org/) is a dynamic, open source programming language with a focus on simplicity and producti...
- [Sass](sasshtml.md): TODO...
- [Scheme](schemehtml.md): [Scheme](https://www.scheme.org/) is a classic programming language in the Lisp family. It emphasizes functional prog...
- [SCSS](scsshtml.md): TODO...
- [Security](securityhtml.md): import MailLink from '../../src/components/MailLink.tsx';
- [Self-Hosting](self-hostinghtml.md): LiveCodes is a [client-side app](../why.html.md)#client-side). It can be easily self-hosted on any static file server...
- [Services](serviceshtml.md): LiveCodes (being a [client-side](../why.html.md)#client-side) app) uses multiple services (for example for short-URL ...
- [Share](sharehtml.md): It is easy to share LiveCodes projects!
- [Code Snippets](snippetshtml.md): LiveCodes supports saving and organizing code snippets in different languages.
- [Solid](solidhtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [Solid (TS)](solidtsxhtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [Sponsor LiveCodes](sponsorhtml.md): import MailLink from '../src/components/MailLink.tsx';
- [SQL (SQLite)](sqlhtml.md): [SQLite](https://www.sqlite.org/) is a small, fast, self-contained, high-reliability, full-featured, SQL database eng...
- [Stencil](stencilhtml.md): TODO...
- [Stylis](stylishtml.md): TODO...
- [Stylus](stylushtml.md): TODO...
- [Sucrase](sucrasehtml.md): [Sucrase](https://sucrase.io/) is a super-fast alternative to [Babel](./babel.html.md) for when you can target modern...
- [Svelte](sveltehtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [Sync](synchtml.md): LiveCodes local data can be synchronized to a GitHub repo. This can be used as a cloud backup, and to synchronize mul...
- [Tailwind CSS](tailwindcsshtml.md): TODO...
- [Tcl](tclhtml.md): TODO...
- [Teal](tealhtml.md): Teal is a typed dialect of [Lua](https://www.lua.org/).
- [Templates](templateshtml.md): import TemplateList from '../../src/components/TemplateList';
- [Tests](testshtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [Themes](themeshtml.md): import ThemeDemo from '../../src/components/ThemeDemo.tsx';
- [Token CSS](tokencsshtml.md): TODO...
- [Tools Pane](tools-panehtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [TSX](tsxhtml.md): TSX is a syntax that allows using TypeScript in JSX.
- [Twig](twightml.md): [Twig.js](https://github.com/twigjs/twig.js/) is a pure JavaScript implementation of the [Twig](https://twig.symfony....
- [TypeScript](typescripthtml.md): TODO...
- [UnoCSS](unocsshtml.md): TODO...
- [User Management](user-managementhtml.md): Generally, LiveCodes can be used anonymously without any accounts. This includes creating/saving [projects](./project...
- [User Settings](user-settingshtml.md): A user can select various settings that are stored locally in the browser and are subsequently used.
- [Vento](ventohtml.md): [Vento](https://vento.js.org/) is a template engine for Deno. It's inspired by other engines, such as [Nunjucks](./nu...
- [Vue SDK](vuehtml.md): import LiveCodes from '../../src/components/LiveCodes.tsx';
- [Vue 2 SFC](vue2html.md): [Vue.js](https://vuejs.org/), The Progressive JavaScript Framework, is an approachable, performant and versatile fram...
- [WebAssembly Text](wathtml.md): TODO...
- [Welcome Screen](welcomehtml.md)
- [Why Another Playground?](whyhtml.md): There are great products like [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), [JS Bin](https://jsb...
- [Windi CSS](windicsshtml.md): TODO...