live-codesOfficial·15 Agent Skills Included

livecodes

Embed and control browser code playgrounds for 90+ languages

Embeds interactive code playgrounds into any web page using a lightweight SDK for React, Vue, Svelte, Solid, and web components. Runs 90+ languages entirely in the browser with no servers, build steps, or installs to maintain. Controls playgrounds programmatically to run code, import projects, execute tests, and compile output headlessly.

1,484|262

↗

npx skills add live-codes/livecodes --all -g -y

Available:

Directs the AI agent to the LiveCodes skill directory and its decision tree so it can route user requests to the correct sub-skill, while defining the project's build and test commands.

All Skills in This Repository (15)

Pure Emerald Level Indicators

📦 In Repo

live-codes

livecodes

Embed client-side code playgrounds in web apps using YAML frontmatter.

livecodes/markdown-integration

Integrate LiveCodes with documentation sites to render code blocks as interactive playgrounds.

livecodes/configuration

Configure LiveCodes Playground behavior via Config object, URL parameters, and EmbedOptions.

livecodes/language-support

Configure per-editor languages, CSS processors, and WASM runtimes in LiveCodes playgrounds.

livecodes/self-hosting

Deploy LiveCodes to static servers, GitHub Pages, or Docker.

livecodes/headless-mode

Compile and run code headlessly via the LiveCodes SDK.

livecodes/module-resolution

Resolve bare module imports to CDN URLs via import maps.

livecodes/testing

Automate browser-based Jest and Testing Library tests in LiveCodes playgrounds.

livecodes/sdk-embedding

Embed interactive LiveCodes playgrounds into web pages with createPlayground.

livecodes/import-export

Import external code sources into LiveCodes and export projects as HTML, JSON, or ZIP.

livecodes/gh-action

Generate LiveCodes playground preview links and post them as PR comments.

livecodes/getting-started

Bootstrap LiveCodes projects and playgrounds via CDN, npm, or self-hosted deployments.

Official

Intermediate

Frequently Asked Questions

FAQPage Schema

How to install LiveCodes skills?▼

Run `npx skills add live-codes/livecodes --all -g -y` in your terminal to install all LiveCodes skills globally for your AI agent.

How to embed a code playground in a web page?▼

Import createPlayground from the livecodes package or CDN and call it with a container selector and a template or config object. The playground loads lazily by default and works without any build step.

Can LiveCodes run Python or Ruby in the browser?▼

Yes. LiveCodes supports 90+ languages including Python, Ruby, and Go through WASM, all running client-side with no server required.

Does LiveCodes work with React and Vue?▼

Yes. Dedicated wrapper components exist for React, Vue, Svelte, Solid, Preact, and plain web components, each exposing the full SDK through a ready callback.

Can I run code without showing any editor UI?▼

Yes. Headless mode lets you create a playground with no visible UI and use SDK methods to compile code, capture console output, or run tests programmatically.