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β
ποΈ art-template
art-template is a high performance JavaScript templating engine.
ποΈ AsciiDoc
AsciiDoc 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.
ποΈ AssemblyScript
AssemblyScript compiles a strict variant of TypeScript to WebAssembly, enabling high-performance code execution in the browser. It is designed for developers familiar with TypeScript who want to target WebAssembly.
ποΈ Astro
Astro is a modern static site builder focused on delivering fast, content-driven websites. It uses a βzero JavaScript by defaultβ approach and supports multiple frameworks like React, Vue, and Svelte through an islands architecture.
ποΈ Autoprefixer
Autoprefixer is a PostCSS plugin that automatically adds vendor prefixes to your CSS. It uses data from Can I Use to determine which properties need prefixes.
ποΈ Babel
Babel 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.
ποΈ BBCode
BBCode ("Bulletin Board Code") is a lightweight markup language used to format messages in many Internet forum software.
ποΈ Blockly
Blockly is a visual programming editor developed by Google. It allows users to write code by dragging and dropping blocks together, which are then translated into executable JavaScript.
ποΈ Civet
Civet is a programming language that compiles to TypeScript or JavaScript. It features a concise syntax with significant whitespace, pattern matching, and modern JavaScript features.
ποΈ Clio
Clio is a fast, distributed, functional programming language that compiles to JavaScript. It is made to take advantage of multiple CPUs and CPU cores (parallelism) by default.
ποΈ ClojureScript
ClojureScript is a robust, practical, and fast programming language with a set of useful features that together form a simple, coherent, and powerful tool.
ποΈ CoffeeScript
CoffeeScript is a little language that compiles into JavaScript.
ποΈ Common Lisp
Common Lisp is a dialect of the Lisp programming language.
ποΈ C/C++ (Wasm)
The C++ (Wasm) language support in LiveCodes uses Clang compiled to WebAssembly via @chriskoch/cpp-wasm. Unlike the JSCPP-based C++ interpreter, this provides a real C/C++ compiler running on WebAssembly.
ποΈ C++
C++ is a general-purpose programming language with a bias towards systems programming. It supports procedural, object-oriented, and generic programming paradigms.
ποΈ C# (Wasm)
(Wasm)
ποΈ CSS
CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML. It controls layout, colors, fonts, and the overall visual appearance of web pages.
ποΈ CSS Modules
A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.
ποΈ cssnano
cssnano is a CSS minifier built on top of PostCSS. It applies various optimizations to reduce the size of your CSS output.
ποΈ Diagrams
Overview
ποΈ doT
doT: The fastest + concise javascript template engine for Node.js and browsers.
ποΈ EJS
Embedded JavaScript templating.
ποΈ Eta
Eta is an embedded JS template engine for Node, Deno, and the browser. Lightweight, fast, and pluggable. Written in TypeScript.
ποΈ Fennel
Fennel is a programming language that brings together the speed, simplicity, and reach of Lua with the flexibility of a lisp syntax and macro system.
ποΈ Flow
Flow is a typed dialect of JavaScript that looks like TypeScript.
ποΈ Gleam
Gleam is a friendly language for building type-safe systems that scale!
ποΈ Go (Wasm)
Go (Golang), is an open-source, statically typed, and compiled programming language developed by Google. It is designed for simplicity, efficiency, and strong support for concurrency, making it well-suited for building scalable and high-performance applications.
ποΈ Go (Golang)
Go (Golang), is an open-source, statically typed, and compiled programming language developed by Google. It is designed for simplicity, efficiency, and strong support for concurrency, making it well-suited for building scalable and high-performance applications.
ποΈ Haml
Haml compiler for client side javascript view templates using clientside-haml-js.
ποΈ Handlebars
Handlebars: Minimal templating on steroids.
ποΈ HTML
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.
ποΈ Imba
Imba is a full-stack programming language for the web that compiles to performant JavaScript. It has a clean, Ruby-like syntax and is designed for building web applications.
ποΈ Java
Java is a high-level, general-purpose, memory-safe, object-oriented programming language.
ποΈ JavaScript
LiveCodes runs JavaScript (JS) in the browser.
ποΈ Jinja
Jinja 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.
ποΈ JSX
JSX is a syntax extension for JavaScript that allows writing HTML-like markup inside JavaScript.
ποΈ Julia
Julia is a high-level, high-performance programming language for scientific computing. It is designed for numerical analysis, data science, and computational science with syntax familiar to users of other technical computing environments.
ποΈ Less
Less (Leaner Style Sheets) is a CSS preprocessor that extends CSS with variables, nesting, mixins, functions and operations. It uses a CSS-like syntax with curly braces and semicolons, so every valid CSS stylesheet is also valid Less.
ποΈ Lightning CSS
Lightning CSS is an extremely fast CSS parser, transformer, bundler, and minifier written in Rust and compiled to WebAssembly. It supports modern CSS features and can transpile them for broader browser compatibility.
ποΈ Liquid
LiquidJS: A simple, expressive and safe template engine.
ποΈ LiveScript
LiveScript is a language that compiles to JavaScript. It is a fork of Coco, which is itself derived from CoffeeScript. LiveScript features a rich syntax with function composition, pattern matching, and many other functional programming features.
ποΈ Lua (Wasm)
Lua is a powerful, efficient, lightweight, embeddable scripting language. It supports procedural programming, object-oriented programming, functional programming, data-driven programming, and data description.
ποΈ Lua
Lua is a powerful, efficient, lightweight, embeddable scripting language. It supports procedural programming, object-oriented programming, functional programming, data-driven programming, and data description.
ποΈ Malina.js
Malina.js is a minimal JavaScript framework for building reactive web applications, inspired by Svelte.
ποΈ Markdown
Markdown is a text-to-HTML conversion tool for web writers.
ποΈ MDX
MDX allows using JSX in Markdown, creating dynamic and component-driven content for websites, documentation, and applications.
ποΈ MiniZinc
MiniZinc is a high-level constraint modelling language that allows you to easily express and solve discrete optimisation problems.
ποΈ MJML
MJML is a markup language designed to reduce the pain of coding a responsive email.
ποΈ Mustache
Mustache: Logic-less templates.
ποΈ Nunjucks
Nunjucks is a rich and powerful templating language for JavaScript.
ποΈ OCaml
OCaml is a general-purpose, functional programming language that extends the Caml dialect of ML with object-oriented features. It is known for its powerful type system, pattern matching, and functional programming capabilities.
ποΈ Perl
Perl is a highly capable, feature-rich programming language with over 30 years of development. It is popular for text processing, system administration, web development, and more.
ποΈ PHP (Wasm)
PHP in Browser, powered by WebAssembly (using php-wasm).
ποΈ PHP
PHP running client-side in the browser using Uniter.
ποΈ PostCSS
PostCSS is a tool for transforming CSS with JavaScript plugins. It provides a framework that allows you to parse CSS and use plugins to transform the AST, enabling tasks like autoprefixing, linting, and using future CSS features.
ποΈ PostCSS Import Url
The Import Url processor uses the postcss-import-url plugin to inline CSS files from external URLs or npm packages directly into your stylesheet.
ποΈ PostCSS Preset Env
postcss-preset-env lets you use modern CSS features today by converting them to browser-compatible CSS based on your target browsers. It is built on PostCSS and uses data from caniuse.com and MDN.
ποΈ PostgreSQL
PostgreSQL is a powerful, open source object-relational database system. LiveCodes runs PostgreSQL in the browser using PGlite (lightweight Postgres packaged as Wasm).
ποΈ Prolog
Prolog is a logic programming language used for artificial intelligence and computational linguistics. Programs are expressed as relations represented by facts and rules, and computation is performed by running queries over these relations.
ποΈ Pug
Pug is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers. It was formerly known as "Jade".
ποΈ PurgeCSS
PurgeCSS is a tool to remove unused CSS from your stylesheets. It analyzes your content and CSS files to determine which selectors are actually used, then removes the unused ones to reduce file size.
ποΈ Python (Wasm)
Pyodide is a Python distribution for the browser and Node.js based on WebAssembly.
ποΈ Python
LiveCodes can run Python in the browser using Brython, a Python 3 implementation for client-side web programming.
ποΈ R
LiveCodes runs R statistical programming language in the browser using WebR.
ποΈ React Native (TSX)
React Native is a framework for building mobile apps using React and React Native. React Native support in LiveCodes is achieved by using React Native for Web (an accessible implementation of React Native's Components and APIs that is interoperable with React DOM).
ποΈ React Native
React Native is a framework for building mobile apps using React and React Native. React Native support in LiveCodes is achieved by using React Native for Web (an accessible implementation of React Native's Components and APIs that is interoperable with React DOM).
ποΈ React (TSX)
TSX is a syntax that allows using TypeScript in JSX.
ποΈ React
React Compiler is a build-time only tool that automatically optimizes React apps.
ποΈ Reason
Reason is a programming language that compiles to JavaScript. It is a syntax extension and toolchain for OCaml, and is designed for building type-safe applications, with strong support for React via ReasonReact.
ποΈ ReScript
ReScript is a robust typed language that compiles to efficient and human-readable JavaScript. It provides a first-class type system with fast compilation and first-class React integration.
ποΈ Rich Text Editor
LiveCodes includes a built-in rich text editor powered by Quill, a modern WYSIWYG editor. This allows writing formatted content visually which is then rendered as HTML in the result page.
ποΈ Riot.js
Riot.js is a simple and elegant component-based UI library. Riot components (tags) use a familiar HTML-like syntax with embedded JavaScript and CSS, similar to Vue SFCs.
ποΈ Ruby (Wasm)
Ruby is a dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write.
ποΈ Ruby
Ruby is a dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write.
ποΈ Sass
Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that uses the indented syntax (no curly braces or semicolons). It adds features like variables, nesting, mixins, and functions to CSS.
ποΈ Scheme
Scheme is a classic programming language in the Lisp family. It emphasizes functional programming and domain-specific languages but adapts to other styles.
ποΈ SCSS
SCSS (Sassy CSS) is the main syntax of the Sass CSS preprocessor. It uses curly braces and semicolons like CSS, so every valid CSS stylesheet is also valid SCSS. It adds features like variables, nesting, mixins, and functions to CSS.
ποΈ Solid
Solid is a JavaScript framework for making interactive web applications.
ποΈ Solid (TS)
Solid is a JavaScript framework for making interactive web applications.
ποΈ SQL (SQLite)
SQLite is a small, fast, self-contained, high-reliability, full-featured, SQL database engine. LiveCodes runs SQLite (compiled to Wasm) in the browser using SQL.js.
ποΈ Stencil
Stencil is a compiler for generating Web Components. It combines the best concepts of modern frameworks β reactive data-binding, TypeScript, and JSX β into a tool that produces standards-compliant custom elements.
ποΈ Stylis
Stylis is a lightweight CSS preprocessor and parser. It supports CSS-like syntax with nesting, auto-prefixing, and other transformations.
ποΈ Stylus
Stylus is an expressive, dynamic CSS preprocessor. It supports both an indented, minimal syntax (optional braces, colons and semicolons) and regular CSS-like syntax, and adds variables, nesting, mixins and functions to CSS.
ποΈ Sucrase
Sucrase is a super-fast alternative to Babel for when you can target modern JS runtimes.
ποΈ Svelte
Svelte is a framework for building user interfaces on the web. It uses a compiler to turn declarative components written in HTML, CSS and JavaScript.
ποΈ Tailwind CSS
Tailwind CSS is an open-source CSS framework that provides utility CSS classes that can be composed to build any design, directly in the markup.
ποΈ Tcl
Tcl (Tool Command Language) is a powerful, interpretable scripting language known for its simple syntax and extensibility. It is commonly used for embedded systems, rapid prototyping, and GUI scripting.
ποΈ Teal
Teal is a typed dialect of Lua.
ποΈ Token CSS
Token CSS is a design token-based CSS framework. It allows you to define design tokens (colors, spacing, typography, etc.) and use them consistently across your stylesheets. The tokens are converted to CSS custom properties and utility classes.
ποΈ TSX
TSX is a syntax that allows using TypeScript in JSX.
ποΈ Twig
Twig.js is a pure JavaScript implementation of the Twig PHP templating language.
ποΈ TypeScript
TypeScript is a strongly typed programming language that builds on JavaScript. It adds optional static typing, interfaces, generics, and other modern features that compile to plain JavaScript.
ποΈ UnoCSS
UnoCSS is an atomic CSS engine that provides utility CSS classes. Unlike traditional CSS frameworks, it is fully customizable and works by scanning your source code to generate only the CSS you need.
ποΈ Vento
Vento is a template engine for Deno. It's inspired by other engines, such as Nunjucks, Liquid, Eta, and Mustache.
ποΈ Vue SFC
Vue.js, The Progressive JavaScript Framework, is an approachable, performant and versatile framework for building web user interfaces.
ποΈ Vue 2 SFC
Vue.js, The Progressive JavaScript Framework, is an approachable, performant and versatile framework for building web user interfaces.
ποΈ WebAssembly Text Format
WebAssembly Text Format (WAT) is the human-readable text representation of WebAssembly. It uses S-expressions and allows writing low-level code that compiles to the binary Wasm format that browsers execute.
ποΈ Windi CSS
Windi CSS is a utility-first CSS framework that provides utility classes to build designs directly in your markup. It scans your source code and generates only the CSS you need, resulting in fast load times and small bundle sizes.