Repository files navigation

A Code Playground That Just Works!

Afeature-rich, open-source,client-side code playground for React, Vue, Svelte, Solid, Typescript, Python, Go, Ruby, PHP and90+ languages/frameworks.

Try it now on livecodes.io

Documentations

What makes LiveCodes different?

• No servers to configure (or pay for!)
• No databases to maintain (or pay for!)
• No installs
• No configuration files
• No build steps
• No subscription fees (free and open-source)
• No account required *
• No limits for usage (unlimited private projects)
• 90+ languages/frameworks/processors
• Large set of features and integrations
• Import code from a wide variety of sources
• Use modules from npm, deno.land/x, jsr, GitHub, and others
• Easily embed it in your web pages
• It runs in the browser (client-side)

_{* GitHub account is required only for features that useGitHub Integration.}

1. Go tolivecodes.io

... and enjoy all thefeatures!

Add this code to your page:

<divid="container"></div><scripttype="module">import{createPlayground}from'https://cdn.jsdelivr.net/npm/livecodes';createPlayground('#container',{params:{markdown:'# Hello LiveCodes!',css:'h1 {color: dodgerblue;}',js:'console.log("Hello, from JS!");',console:'open',},});</script>

^{Check documentations forEmbedded Playgrounds.}

1. Download arelease

2. Put it on a static file server (for free!)^1,2,3,4

   ^{Check the guide forself-hosting (including the built-in setup to deploy to GitHub Pages).}

... and it just works!

• A wide range oflanguage support (90+ languages/frameworks/processors)
• Powerful Editor
• Mobile-friendly
• External resources/libraries
• Import modules from npm, deno.land/x, jsr, GitHub and others
• Code Pre-fill
• Import/Exportprojects
• Share
• Embed the playground in any web page
• Display modes
• Deploy
• Starter Templates
• Assets
• Themes
• Dev Tools (console,compiled code viewer,test runner)
• Code formatting
• Intellisense
• AI Code Assistant 🪄
• Lite mode
• Read-only mode
• Broadcast
• Sync
• Backup/Restore
• Client-side!
• Veryconfigurable
• Developer-friendly build-free environment
• PowerfulSDK (available forvanilla JavaScript, TypeScript,React,Vue andSvelte)
• ComprehensiveDocumentations
• Focused onprivacy and security
• Free andOpen-Source

For details check thefull list of features.

The Software Development Kit (SDK) provides an easy, yet powerful, interface to embed and communicate with LiveCodes playgrounds.

The SDK is provided as a light-weight (less than 5kb gzipped), zero-dependenciesnpm package, that is also available fromCDNs. It can be used to create playgrounds with a wide variety ofconfigurations andembed options. In addition,SDK methods allow programmatic communication and control of the playgrounds during runtime.

npm i livecodes

Example: (open in LiveCodes)

import{createPlayground}from'livecodes';createPlayground('#container',{config:{markup:{language:'markdown',content:'# Hello World!',},},view:'result',});

TheJavaScript SDK is framework/library agnostic. However, wrapper components are also provided for popular libraries (currentlyReact andVue). The SDK can be used inSvelte directly without wrappers.TypeScript support provides type-safety and a great developer experience.

React SDK example: (open in LiveCodes)

importLiveCodesfrom'livecodes/react';constconfig={markup:{language:'markdown',content:'# Hello World!',},};constPlayground=()=><LiveCodesconfig={config}view="result"/>;exportdefaultPlayground;

Vue SDK example: (open in LiveCodes)

<scriptsetup>importLiveCodesfrom'livecodes/vue';constconfig={markup:{language:'markdown',content:'# Hello World!',},};</script><template><LiveCodes:config="config"view="result"/></template>

In addition, the SDK allows creating links to playgrounds:

import{getPlaygroundUrl}from'livecodes';consturl=getPlaygroundUrl({config:{markup:{language:'markdown',content:'# Hello World!',},},});console.log(url);

SeeSDK docs for more details.

Comprehensive documentations forfeatures,getting started,configuration andSDK are available on:

https://livecodes.io/docs/

The documentations include demos, code samples, screenshots,Storybook andTypeScript types.

Keep up with the latest changes:

• Twitter/X:@livecodes_io
• Blog:blog.livecodes.io
• Development build:dev.livecodes.io

We welcome feedback!

Please start a newissue ordiscussion.

For security reports please refer toSECURITY.md.

You may also reach out to us using thecontact form.

Contributions are welcome and highly appreciated.

A huge shout-out to our wonderfulcontributors! Your hard work makes all the difference!

Please refer to thecontribution guide.

LiveCodes uses services that are generously provided by:

Packages used by LiveCodes and their licenses arelisted here.

MIT License ©Hatem Hosny

LiveCodes is free and open-source. The app does not contain ads or require subscription. It allows unlimited usage without any restrictions.

By sponsoring LiveCodes, you will be supporting the ongoing development and maintenance of the project, as well as helping to ensure that it remains a valuable resource for the developer community.

Please considerbecoming a sponsor.