Top Sites>LiveCodes

Not stored for this site.

# LiveCodes

> LiveCodes is a feature-rich, open-source, client-side code playground that supports React, Vue, Svelte, Solid, JavaScript, TypeScript, CSS, Sass, Tailwind CSS, Python, Go, Ruby, PHP, and 90+ languages/frameworks.

A large number of starter templates are available to help you get started quickly.
Projects can be saved, shared, exported (e.g. to GitHub Gists), deployed (e.g. to GitHub Pages), or embedded in web pages.
A powerful yet easy-to-use SDK enables the creation of and communication with embedded playgrounds.

With extensive language support and high configurability, LiveCodes can easily adapt to your needs.
It offers excellent mobile support, featuring a responsive layout and a touch-friendly code editor.

LiveCodes is an outstanding tool for learning, teaching, prototyping, sharing, and testing code.
It can be easily self-hosted, if needed, on any static file server.

LiveCodes is completely free for unlimited use, with no ads and no account required.
Its MIT License also permits commercial use.

- [Docs](https://livecodes.io/docs/llms.txt)
- [Full Docs](https://livecodes.io/docs/llms-full.txt)
- [README](https://raw.githubusercontent.com/live-codes/livecodes/refs/heads/develop/README.md)



## Docs

- [Overview](https://livecodes.io/docs/overview.html.md)
- [Why Another Playground?](https://livecodes.io/docs/why.html.md)
- [Getting Started](https://livecodes.io/docs/getting-started.html.md)

## Features

- [Features](https://livecodes.io/docs/features/index.html.md)
- [Projects](https://livecodes.io/docs/features/projects.html.md)
- [Templates](https://livecodes.io/docs/features/templates.html.md)
- [CSS](https://livecodes.io/docs/features/css.html.md)
- [Result Page](https://livecodes.io/docs/features/result.html.md)
- [External Resources](https://livecodes.io/docs/features/external-resources.html.md)
- [Tools Pane](https://livecodes.io/docs/features/tools-pane.html.md)
- [Console](https://livecodes.io/docs/features/console.html.md)
- [Compiled Code](https://livecodes.io/docs/features/compiled-code.html.md)
- [Tests](https://livecodes.io/docs/features/tests.html.md)
- [Module Resolution](https://livecodes.io/docs/features/module-resolution.html.md)
- [IntelliSense](https://livecodes.io/docs/features/intellisense.html.md)
- [Code Format](https://livecodes.io/docs/features/code-format.html.md)
- [Command Menu](https://livecodes.io/docs/features/command-menu.html.md)
- [Keyboard Shortcuts](https://livecodes.io/docs/features/keyboard-shortcuts.html.md)
- [User Settings](https://livecodes.io/docs/features/user-settings.html.md)
- [Editor Settings](https://livecodes.io/docs/features/editor-settings.html.md)
- [Internationalization (i18n)](https://livecodes.io/docs/features/i18n.html.md)
- [Default Template/Language](https://livecodes.io/docs/features/default-template-language.html.md)
- [Assets](https://livecodes.io/docs/features/assets.html.md)
- [Code Snippets](https://livecodes.io/docs/features/snippets.html.md)
- [Import](https://livecodes.io/docs/features/import.html.md)
- [Export](https://livecodes.io/docs/features/export.html.md)
- [Share](https://livecodes.io/docs/features/share.html.md)
- [Welcome Screen](https://livecodes.io/docs/features/welcome.html.md)
- [Recover Unsaved](https://livecodes.io/docs/features/recover.html.md)
- [Code to Image](https://livecodes.io/docs/features/code-to-image.html.md)
- [Display Modes](https://livecodes.io/docs/features/display-modes.html.md)
- [Default View](https://livecodes.io/docs/features/default-view.html.md)
- [Themes](https://livecodes.io/docs/features/themes.html.md)
- [Mobile Support](https://livecodes.io/docs/features/mobile.html.md)
- [Embedded Playgrounds](https://livecodes.io/docs/features/embeds.html.md)
- [Lite Mode](https://livecodes.io/docs/features/lite.html.md)
- [Read-Only](https://livecodes.io/docs/features/read-only.html.md)
- [Permanent URL](https://livecodes.io/docs/features/permanent-url.html.md)
- [Code Prefill](https://livecodes.io/docs/features/code-prefill.html.md)
- [Data URLs](https://livecodes.io/docs/features/data-urls.html.md)
- [Deploy](https://livecodes.io/docs/features/deploy.html.md)
- [Sync](https://livecodes.io/docs/features/sync.html.md)
- [Broadcast](https://livecodes.io/docs/features/broadcast.html.md)
- [Backup / Restore](https://livecodes.io/docs/features/backup-restore.html.md)
- [GitHub Integration](https://livecodes.io/docs/features/github-integration.html.md)
- [Integrations](https://livecodes.io/docs/features/integrations.html.md)
- [User Management](https://livecodes.io/docs/features/user-management.html.md)
- [Security](https://livecodes.io/docs/features/security.html.md)
- [Self-Hosting](https://livecodes.io/docs/features/self-hosting.html.md)

## Configuration

- [Configuration](https://livecodes.io/docs/configuration/index.html.md)
- [Configuration Object](https://livecodes.io/docs/configuration/configuration-object.html.md)
- [Query Parameters](https://livecodes.io/docs/configuration/query-params.html.md)

## SDK

- [LiveCodes SDK](https://livecodes.io/docs/sdk/index.html.md)
- [JavaScript/TypeScript SDK](https://livecodes.io/docs/sdk/js-ts.html.md)
- [React SDK](https://livecodes.io/docs/sdk/react.html.md)
- [Vue SDK](https://livecodes.io/docs/sdk/vue.html.md)
- [Svelte](https://livecodes.io/docs/sdk/svelte.html.md)
- [Solid](https://livecodes.io/docs/sdk/solid.html.md)
- [Headless Mode](https://livecodes.io/docs/sdk/headless.html.md)

## Advanced

- [Advanced Topics](https://livecodes.io/docs/advanced/index.html.md)
- [Custom Settings](https://livecodes.io/docs/advanced/custom-settings.html.md)
- [Services](https://livecodes.io/docs/advanced/services.html.md)
- [Docker Setup](https://livecodes.io/docs/advanced/docker.html.md)

## Languages

- [Languages](https://livecodes.io/docs/languages/index.html.md)
- [art-template](https://livecodes.io/docs/languages/art-template.html.md)
- [AsciiDoc](https://livecodes.io/docs/languages/asciidoc.html.md)
- [AssemblyScript](https://livecodes.io/docs/languages/assemblyscript.html.md)
- [Astro](https://livecodes.io/docs/languages/astro.html.md)
- [Autoprefixer](https://livecodes.io/docs/languages/autoprefixer.html.md)
- [Babel](https://livecodes.io/docs/languages/babel.html.md)
- [BBCode](https://livecodes.io/docs/languages/bbcode.html.md)
- [Blockly](https://livecodes.io/docs/languages/blockly.html.md)
- [Civet](https://livecodes.io/docs/languages/civet.html.md)
- [Clio](https://livecodes.io/docs/languages/clio.html.md)
- [ClojureScript](https://livecodes.io/docs/languages/clojurescript.html.md)
- [CoffeeScript](https://livecodes.io/docs/languages/coffeescript.html.md)
- [Common Lisp](https://livecodes.io/docs/languages/commonlisp.html.md)
- [C/C++ (Wasm)](https://livecodes.io/docs/languages/cpp-wasm.html.md)
- [C++](https://livecodes.io/docs/languages/cpp.html.md)
- [C# (Wasm)](https://livecodes.io/docs/languages/csharp-wasm.html.md)
- [CSS](https://livecodes.io/docs/languages/css.html.md)
- [CSS Modules](https://livecodes.io/docs/languages/cssmodules.html.md)
- [cssnano](https://livecodes.io/docs/languages/cssnano.html.md)
- [Diagrams](https://livecodes.io/docs/languages/diagrams.html.md)
- [doT](https://livecodes.io/docs/languages/dot.html.md)
- [EJS](https://livecodes.io/docs/languages/ejs.html.md)
- [Eta](https://livecodes.io/docs/languages/eta.html.md)
- [Fennel](https://livecodes.io/docs/languages/fennel.html.md)
- [Flow](https://livecodes.io/docs/languages/flow.html.md)
- [Gleam](https://livecodes.io/docs/languages/gleam.html.md)
- [Go (Wasm)](https://livecodes.io/docs/languages/go-wasm.html.md)
- [Go (Golang)](https://livecodes.io/docs/languages/go.html.md)
- [Haml](https://livecodes.io/docs/languages/haml.html.md)
- [Handlebars](https://livecodes.io/docs/languages/handlebars.html.md)
- [HTML](https://livecodes.io/docs/languages/html.html.md)
- [Imba](https://livecodes.io/docs/languages/imba.html.md)
- [Languages](https://livecodes.io/docs/languages/index.html.md)
- [Java](https://livecodes.io/docs/languages/java.html.md)
- [JavaScript](https://livecodes.io/docs/languages/javascript.html.md)
- [Jinja](https://livecodes.io/docs/languages/jinja.html.md)
- [JSX](https://livecodes.io/docs/languages/jsx.html.md)
- [Julia](https://livecodes.io/docs/languages/julia.html.md)
- [Less](https://livecodes.io/docs/languages/less.html.md)
- [Lightning CSS](https://livecodes.io/docs/languages/lightningcss.html.md)
- [Liquid](https://livecodes.io/docs/languages/liquid.html.md)
- [LiveScript](https://livecodes.io/docs/languages/livescript.html.md)
- [Lua (Wasm)](https://livecodes.io/docs/languages/lua-wasm.html.md)
- [Lua](https://livecodes.io/docs/languages/lua.html.md)
- [Malina.js](https://livecodes.io/docs/languages/malina.html.md)
- [Markdown](https://livecodes.io/docs/languages/markdown.html.md)
- [MDX](https://livecodes.io/docs/languages/mdx.html.md)
- [MiniZinc](https://livecodes.io/docs/languages/minizinc.html.md)
- [MJML](https://livecodes.io/docs/languages/mjml.html.md)
- [Mustache](https://livecodes.io/docs/languages/mustache.html.md)
- [Nunjucks](https://livecodes.io/docs/languages/nunjucks.html.md)
- [OCaml](https://livecodes.io/docs/languages/ocaml.html.md)
- [Perl](https://livecodes.io/docs/languages/perl.html.md)
- [PHP (Wasm)](https://livecodes.io/docs/languages/php-wasm.html.md)
- [PHP](https://livecodes.io/docs/languages/php.html.md)
- [PostCSS](https://livecodes.io/docs/languages/postcss.html.md)
- [Import Url](https://livecodes.io/docs/languages/postcssImportUrl.html.md)
- [Preset Env](https://livecodes.io/docs/languages/postcssPresetEnv.html.md)
- [PostgreSQL](https://livecodes.io/docs/languages/postgresql.html.md)
- [Prolog](https://livecodes.io/docs/languages/prolog.html.md)
- [Pug](https://livecodes.io/docs/languages/pug.html.md)
- [PurgeCSS](https://livecodes.io/docs/languages/purgecss.html.md)
- [Python (Wasm)](https://livecodes.io/docs/languages/python-wasm.html.md)
- [Python](https://livecodes.io/docs/languages/python.html.md)
- [R](https://livecodes.io/docs/languages/r.html.md)
- [React Native (TSX)](https://livecodes.io/docs/languages/react-native-tsx.html.md)
- [React Native](https://livecodes.io/docs/languages/react-native.html.md)
- [React (TSX)](https://livecodes.io/docs/languages/react-tsx.html.md)
- [React](https://livecodes.io/docs/languages/react.html.md)
- [Reason](https://livecodes.io/docs/languages/reason.html.md)
- [ReScript](https://livecodes.io/docs/languages/rescript.html.md)
- [Rich Text Editor](https://livecodes.io/docs/languages/richtext.html.md)
- [Riot.js](https://livecodes.io/docs/languages/riot.html.md)
- [Ruby (Wasm)](https://livecodes.io/docs/languages/ruby-wasm.html.md)
- [Ruby](https://livecodes.io/docs/languages/ruby.html.md)
- [Sass](https://livecodes.io/docs/languages/sass.html.md)
- [Scheme](https://livecodes.io/docs/languages/scheme.html.md)
- [SCSS](https://livecodes.io/docs/languages/scss.html.md)
- [Solid](https://livecodes.io/docs/languages/solid.html.md)
- [Solid (TS)](https://livecodes.io/docs/languages/solid.tsx.html.md)
- [SQL (SQLite)](https://livecodes.io/docs/languages/sql.html.md)
- [Stencil](https://livecodes.io/docs/languages/stencil.html.md)
- [Stylis](https://livecodes.io/docs/languages/stylis.html.md)
- [Stylus](https://livecodes.io/docs/languages/stylus.html.md)
- [Sucrase](https://livecodes.io/docs/languages/sucrase.html.md)
- [Svelte](https://livecodes.io/docs/languages/svelte.html.md)
- [Tailwind CSS](https://livecodes.io/docs/languages/tailwindcss.html.md)
- [Tcl](https://livecodes.io/docs/languages/tcl.html.md)
- [Teal](https://livecodes.io/docs/languages/teal.html.md)
- [Token CSS](https://livecodes.io/docs/languages/tokencss.html.md)
- [TSX](https://livecodes.io/docs/languages/tsx.html.md)
- [Twig](https://livecodes.io/docs/languages/twig.html.md)
- [TypeScript](https://livecodes.io/docs/languages/typescript.html.md)
- [UnoCSS](https://livecodes.io/docs/languages/unocss.html.md)
- [Vento](https://livecodes.io/docs/languages/vento.html.md)
- [Vue SFC](https://livecodes.io/docs/languages/vue.html.md)
- [Vue 2 SFC](https://livecodes.io/docs/languages/vue2.html.md)
- [WebAssembly Text](https://livecodes.io/docs/languages/wat.html.md)
- [Windi CSS](https://livecodes.io/docs/languages/windicss.html.md)

## Tutorials

- [Guides & Tutorials](https://livecodes.io/docs/tutorials/index.html.md)
- [007bff;](https://livecodes.io/docs/tutorials/getting-started-guide.html.md)
- [3498db</span>](https://livecodes.io/docs/tutorials/building-your-first-app.html.md)

## Docs

- [Bookmarklet](https://livecodes.io/docs/bookmarklet.html.md)
- [GitHub Action ⚡](https://livecodes.io/docs/gh-action.html.md)
- [Markdown to LiveCodes](https://livecodes.io/docs/markdown-to-livecodes.html.md)
- [Contribution](https://livecodes.io/docs/contribution.html.md)
- [Credits](https://livecodes.io/docs/credits.html.md)
- [License](https://livecodes.io/docs/license.html.md)
- [Sponsor LiveCodes](https://livecodes.io/docs/sponsor.html.md)
- [Contact](https://livecodes.io/docs/contact.html.md)
- [About us](https://livecodes.io/docs/about.html.md)

## Display Modes

- [Display Modes](https://livecodes.io/docs/examples/display-modes/index.html.md)
- [Display Mode: full](https://livecodes.io/docs/examples/display-modes/full.html.md)
- [Display Mode: editor](https://livecodes.io/docs/examples/display-modes/editor.html.md)
- [Display Mode: codeblock](https://livecodes.io/docs/examples/display-modes/codeblock.html.md)
- [Display Mode: result](https://livecodes.io/docs/examples/display-modes/result.html.md)

## Internal

- [\_internal](https://livecodes.io/docs/api/internal/index.html.md)

## Interfaces

- [Interface: API](https://livecodes.io/docs/api/internal/interfaces/API.html.md)
- [Interface: AppConfig](https://livecodes.io/docs/api/internal/interfaces/AppConfig.html.md)
- [Interface: ContentConfig](https://livecodes.io/docs/api/internal/interfaces/ContentConfig.html.md)
- [Interface: EditorConfig](https://livecodes.io/docs/api/internal/interfaces/EditorConfig.html.md)
- [Interface: EditorPosition](https://livecodes.io/docs/api/internal/interfaces/EditorPosition.html.md)
- [Interface: FormatterConfig](https://livecodes.io/docs/api/internal/interfaces/FormatterConfig.html.md)
- [Interface: TestResult](https://livecodes.io/docs/api/internal/interfaces/TestResult.html.md)
- [Interface: Types](https://livecodes.io/docs/api/internal/interfaces/Types.html.md)
- [Interface: UserConfig](https://livecodes.io/docs/api/internal/interfaces/UserConfig.html.md)

## Type Aliases

- [Type Alias: APICommands](https://livecodes.io/docs/api/internal/type-aliases/APICommands.html.md)
- [Type Alias: AppLanguage](https://livecodes.io/docs/api/internal/type-aliases/AppLanguage.html.md)
- [Type Alias: CDN](https://livecodes.io/docs/api/internal/type-aliases/CDN.html.md)
- [Type Alias: CodejarTheme](https://livecodes.io/docs/api/internal/type-aliases/CodejarTheme.html.md)
- [Type Alias: CodemirrorTheme](https://livecodes.io/docs/api/internal/type-aliases/CodemirrorTheme.html.md)
- [Type Alias: CssPresetId](https://livecodes.io/docs/api/internal/type-aliases/CssPresetId.html.md)
- [Type Alias: EditorId](https://livecodes.io/docs/api/internal/type-aliases/EditorId.html.md)
- [Type Alias: EditorTheme](https://livecodes.io/docs/api/internal/type-aliases/EditorTheme.html.md)
- [Type Alias: MonacoTheme](https://livecodes.io/docs/api/internal/type-aliases/MonacoTheme.html.md)
- [Type Alias: Processor](https://livecodes.io/docs/api/internal/type-aliases/Processor.html.md)
- [Type Alias: TemplateName](https://livecodes.io/docs/api/internal/type-aliases/TemplateName.html.md)
- [Type Alias: Theme](https://livecodes.io/docs/api/internal/type-aliases/Theme.html.md)
- [Type Alias: ToolsPaneStatus](https://livecodes.io/docs/api/internal/type-aliases/ToolsPaneStatus.html.md)
- [Type Alias: WatchCode()](https://livecodes.io/docs/api/internal/type-aliases/WatchCode.html.md)
- [Type Alias: WatchConsole()](https://livecodes.io/docs/api/internal/type-aliases/WatchConsole.html.md)
- [Type Alias: WatchDestroy()](https://livecodes.io/docs/api/internal/type-aliases/WatchDestroy.html.md)
- [Type Alias: WatchLoad()](https://livecodes.io/docs/api/internal/type-aliases/WatchLoad.html.md)
- [Type Alias: WatchReady()](https://livecodes.io/docs/api/internal/type-aliases/WatchReady.html.md)
- [Type Alias: WatchTests()](https://livecodes.io/docs/api/internal/type-aliases/WatchTests.html.md)

## Interfaces

- [Interface: Code](https://livecodes.io/docs/api/interfaces/Code.html.md)
- [Interface: Config](https://livecodes.io/docs/api/interfaces/Config.html.md)
- [Interface: EmbedOptions](https://livecodes.io/docs/api/interfaces/EmbedOptions.html.md)
- [Interface: Playground](https://livecodes.io/docs/api/interfaces/Playground.html.md)

## Type Aliases

- [Type Alias: Language](https://livecodes.io/docs/api/type-aliases/Language.html.md)

## Functions

- [Function: createPlayground()](https://livecodes.io/docs/api/functions/createPlayground.html.md)
- [Function: getPlaygroundUrl()](https://livecodes.io/docs/api/functions/getPlaygroundUrl.html.md)