Skip to content
Intent
Libraries
Framework
Start
Router
Data & State
Query
DB
Store
AI
UI
Table
Charts
Form
Markdown
Highlight
UX
Virtual
Pacer
Hotkeys
Tooling
Devtools
Config
CLI
Intent
Browse all libraries
Blog
Blog & Release Notes
About
YouTube
The official TanStack channel.
Workshops
Live sessions from the maintainers.
Release Notes
The latest releases and changelog.
Community
Channels
Discord
Real-time community support.
GitHub
Source, issues, discussions, and releases.
People & Work
Maintainers
Meet the people maintaining the stack.
Showcase
Projects selected by the TanStack team.
Community projects
TanChat
NEW
Tools
Tools
Application Starter
Alpha
Generate TanStack app starters.
Stats
NPM and ecosystem usage data.
Merch
Support
Support
Support Overview
Find the right support path.
Partners
Companies supporting TanStack.
OSS Sponsors
Sponsors keeping TanStack open source.
Enterprise Support
Private consulting and expert support.
Contact
Get in touch with the TanStack team.
About
Ethos
How we approach open source.
Tenets
The values that shape TanStack libraries.
Design System
Logos, tokens, and UI components.
Search
Ask AI
Libraries
Blog
Community
TanChat
NEW
Tools
Merch
Support
Search
Ask AI
Sign In
Back
TanStack Intent
/
Registry
/
livecodes
Fetching package from npm...
TanStack Intent
/
Registry
/
livecodes
livecodes
0.14.1 (latest) — 15 skills
Copy install prompt
A Code Playground That Just Works!
Skills
(15)
Skills
All Skills
15
livecodes/configuration
core
livecodes/display-modes
core
livecodes/framework-wrappers
framework
livecodes/getting-started
lifecycle
livecodes/gh-action
composition
livecodes/headless-mode
core
livecodes/import-export
core
livecodes/language-support
core
livecodes/markdown-integration
composition
livecodes/module-resolution
core
livecodes/sdk-embedding
core
livecodes/sdk-methods
core
livecodes/self-hosting
composition
livecodes
core
livecodes/testing
core
Skills
15
History
livecodes/configuration
core
Configure playground behavior through Config object, query parameters, EmbedOptions, editor settings, processors, external resources, and custom settings. Load this skill when setting up project content, configuring CSS processors, or customizing display.
412 lines
livecodes/display-modes
core
Configure how the playground is displayed: full, focus, simple, lite, editor, codeblock, and result modes. Load this skill when choosing display mode for embeddings, configuring read-only views, or showing only result or editor.
301 lines
livecodes/framework-wrappers
framework
Use SDK with React, Vue, Svelte, Solid, Preact, and Web Components. sdkReady callback pattern, reactive props, and framework-specific setup. Load this skill when embedding LiveCodes in a framework application.
492 lines
livecodes/getting-started
lifecycle
Quick start for standalone app at livecodes.io, embedding playgrounds with CDN or npm, and self-hosting basics. Load this skill for initial setup and basic usage patterns.
294 lines
livecodes/gh-action
composition
Use the "Preview in LiveCodes" GitHub Action to generate preview playground links for pull request code changes. Automates playground creation and PR comments.
269 lines
livecodes/headless-mode
core
Run playground without visible UI using SDK methods directly. Load this skill when building Markdown compilers, code formatters, or tools that need compiled output without display.
190 lines
livecodes/import-export
core
Import code from GitHub gists/files/repos, GitLab, URLs, DOM, and local files. Export projects as HTML, JSON, ZIP, or to external services. Load this skill when loading projects from external sources or exporting project state.
230 lines
livecodes/language-support
core
Work with 90+ supported languages, compilers, CSS processors, and WASM-compiled languages for markup, style, and script editors. Load this skill when configuring languages, setting up CSS processors, or working with WASM-based languages like Python, Ruby, or Go.
210 lines
livecodes/markdown-integration
composition
Integrate LiveCodes with documentation sites using remark-livecodes, markdown-it-livecodes, gatsby-remark-livecodes, or marked-livecodes for Docusaurus, Astro, VitePress, Next.js, and Storybook.
356 lines
livecodes/module-resolution
core
Import npm, deno.land/x, jsr, and GitHub modules without build steps using automatic CDN resolution, custom import maps, and CDN provider prefixes. Load this skill when using bare module imports, configuring CDN providers, or resolving import conflicts.
245 lines
livecodes/sdk-embedding
core
Create and configure embedded playgrounds using createPlayground(), EmbedOptions, container setup, loading modes (eager/lazy/click), and appUrl for self-hosted instances. Load this skill when embedding LiveCodes in web pages, configuring playground containers, or setting up SDK integration.
242 lines
livecodes/sdk-methods
core
Use SDK methods to interact with playgrounds: run, getCode, setConfig, getConfig, watch, runTests, format, getShareUrl, show, destroy. Load this skill when programmatically controlling embedded playgrounds, reacting to code changes, or retrieving compiled output.
278 lines
livecodes/self-hosting
composition
Deploy LiveCodes to static servers, GitHub Pages, or Docker. Configure SDK appUrl, BASE_URL for subdirectories, and handle share/broadcast services. Load this skill when self-hosting LiveCodes or using a custom app URL.
231 lines
livecodes
core
>-
215 lines
livecodes/testing
core
Write and run automated tests with Jest and Testing Library in the browser. Import code from script editor, use watch mode, and run tests programmatically. Load this skill when writing tests for playground code or running tests via SDK.
307 lines
