Skip to main content

​
Introduction to LiveCodes

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

Try it now

Start coding instantly with no setup required

View on GitHub

Explore the source code and contribute

​
What makes LiveCodes different?

LiveCodes is a code playground that just works - no servers to configure, no databases to maintain, no build steps, and no subscription fees. Everything runs entirely in your browser.

90+ languages

From JavaScript and Python to WebAssembly languages like Go, Ruby, and C++. Supports modern frameworks including React, Vue, Svelte, and Solid.

Client-side execution

All code runs in your browser - no backend servers needed. Your code stays private and secure on your machine.

Monaco editor

Powered by VS Code’s Monaco editor with full IntelliSense, autocomplete, and type definitions for imported npm modules.

Embeddable SDK

Lightweight SDK (less than 5kb gzipped) for embedding playgrounds in your apps. Available for vanilla JS, React, Vue, Svelte, and Solid.

Import & export

Import from GitHub, CodePen, JSFiddle, or local files. Export to multiple formats and share via QR code.

Share & deploy

Generate shareable URLs or deploy to GitHub Pages with a single click. No account required for basic features.

​
Key features

​
Powerful code editor

LiveCodes uses Monaco editor (the same editor that powers VS Code) with advanced features:
  • IntelliSense and autocomplete: Get intelligent code completion with type information
  • Automatic Type Acquisition: Automatically loads type definitions for imported npm modules
  • Custom types support: Define your own types for better autocomplete
  • Multi-cursor editing: Edit multiple lines simultaneously
  • Code formatting: Format your code with Prettier integration

​
Zero configuration

No configuration files, no build steps, no installs - just open and start coding.
LiveCodes automatically handles:
  • Module imports from npm, deno.land/x, jsr, and GitHub
  • TypeScript and JSX compilation
  • CSS preprocessing (Sass, Less, Stylus)
  • Framework setup (React, Vue, Svelte, etc.)

​
Developer tools

Built-in dev tools help you debug and test your code:
  • Console: View logs, errors, and warnings
  • Compiled code viewer: See the transpiled output
  • Test runner: Write and run tests with popular frameworks

​
Privacy and security

Your code and data are stored locally in your browser. LiveCodes respects your privacy.
  • Client-side execution means your code never leaves your machine
  • No tracking or analytics by default
  • Local storage for your projects
  • Optional GitHub integration for advanced features

​
Language support

LiveCodes supports 90+ languages and frameworks out of the box:
  • React (JSX/TSX)
  • Vue (2 & 3)
  • Svelte
  • Solid
  • Angular
  • Stencil
  • Lit
  • Alpine.js
  • Riot.js

​
Use cases

LiveCodes is perfect for:
  • Learning and experimentation: Try new languages and frameworks without setup
  • Code demos and tutorials: Create interactive examples for documentation
  • Technical interviews: Share coding challenges with candidates
  • Bug reproduction: Quickly create minimal reproducible examples
  • Prototyping: Test ideas and share proof-of-concepts
  • Educational content: Embed live coding examples in blog posts or courses

​
Community and support

LiveCodes is actively maintained and welcomes contributions:

Documentation

Comprehensive guides and API references

GitHub Issues

Report bugs or request features

Discussions

Ask questions and share ideas

Twitter/X

Follow for updates and announcements

​
License

LiveCodes is free and open-source software licensed under the MIT License.
Ready to start coding? Check out the quickstart guide to create your first playground!

Build docs developers (and LLMs) love

Get started for freeTalk to us