LiveCodes
Code Playground That Just Works!
Psst. This is an interactive playground!
Try editing the code above and see the changes reflected in the result page.
Want a similar playground for your website?
import { createPlayground } from "livecodes";
createPlayground("#container", { template: "react" });
Feature-Rich
Supports 80+ languages/frameworks. Code Format, NPM Modules, Intellisense, TypeScript Support, Emmet, Console, Compiled code viewer, Tests, Starter Templates, Save, Import, Export, Share, Deploy, Assets, Snippets, Backup/Restore, Sync, Broadcast and a lot more features. Features are downloaded only when used.
Client-Side!
LiveCodes runs in the browser, where all the processing/transpilation occurs, with no server rounds required. So, after the initial load, it becomes pretty fast. It can be hosted on any static file server or CDN. No npm installs. Just the browser!
Standalone App
Use the standalone app for quick prototyping, testing new ideas or learning a new framework/language. The app remembers your settings. Organize your projects and assets. Share code with friends. Deploy projects to public URLs.
Embeds
LiveCodes can be embedded in your web pages. Code can be easily prefilled. This is particularly useful for educational websites and for library documentations. It is secure and highly configurable. Intellisense is available even for custom libraries!
Mobile-Friendly
The responsive layout allows working on devices with different screen sizes. The powerful Monaco editor (that powers VS Code) is used on desktop, and the touch-friendly CodeMirror 6 editor is used on mobile. Don't wait to be on your desk. Try your ideas on the go!
Developer-Friendly
LiveCodes makes it easy to get started. It is highly configurable. Lots of features can be configured by URL query params. The SDK facilitates embedding playgrounds and allows easy communication with them. The SDK is available as a JS/TS library, as well as React and Vue Components.
Focused on Privacy
Projects are private by default. The code you write in LiveCodes never leaves your computer, unless you choose to share, export or sync it. No cookies are used. User data is stored in the browser. Security is taken seriously.
Documentations
Comprehensive documentations (including TypeScript types) for features, configuration and SDK. Documentations are rich with code samples, live demos and screenshots. A gallery of usage examples is provided as a storybook.
Free and Open-Source
LiveCodes is free, with no limits for use, no ads and no account required*.
Do you want to self-host it for commercial use? No problem! It is MIT-licensed 🎉
Please consider sponsoring LiveCodes ❤
The OSI logo trademark is the trademark of Open Source Initiative.
* GitHub account is required only for features that use GitHub Integration.
Screenshots
... and of course, a light theme :)
A large collection of languages
Lots of features
Keep your projects organized
Starter templates for quick start
... a large number of starter templates
Developer console for quick inspection
View compiled code
Assets manager
Add external resources
Restore unsaved projects
CSS Processors
... and of course, a light theme :)
A large collection of languages