Code Editors & Playgrounds (in your app)

Embedding a runnable editor in your docs, learning tool, or app.

For your code editor (VS Code, JetBrains, etc.) this is the wrong page. This is for embedding a runnable code playground inside your web app — common for docs, tutorials, AI assistants, and learning platforms.

Editors (the textbox itself)

★ Monaco — VS Code's editor; full IntelliSense; large bundle (~2 MB). Use for serious code editing.
★ CodeMirror 6 — modular, much smaller, fast. The default for embedded editors.
Ace Editor — older but mature.
Textmate-style highlighters for read-only code: Shiki (build-time, see Markdown), Bright (RSC-friendly), prism-react-renderer, highlight.js.

Run JavaScript / TypeScript in the page

★ Sandpack (CodeSandbox) — drop-in <Sandpack /> React component; bundles + runs your code in the browser; supports React, Vue, Solid, Svelte, vanilla, Vite. The default for in-page playgrounds.
★ StackBlitz WebContainers — full Node.js in the browser; runs npm install, vite dev, anything. Embed via <iframe> or the WebContainer API.
CodeSandbox embeds — older iframe-based approach.
JSFiddle / CodePen embeds — minimal, classic.
Replit embeds — supports many languages.

Run multiple languages

runno — runs WASM-compiled languages (Python, Ruby, Quickjs, ...) in the browser.
CompilerExplorer (Godbolt) — compiler intermediate output for many languages.
Pyodide — Python in the browser via WASM.
DuckDB-WASM — SQL in the browser.

Live MDX / interactive docs

★ MDX + Sandpack — the standard for "this code block is live" pattern in 2026.
Code Hike + Bright — animated narrative code blocks.
mdx-bundler — runtime MDX with custom components.
react-live — runtime React code playground (no bundler); great for component docs.
@svelte-puzzles/playground — Svelte tutorial-style.

Tutorial / course platforms (build your own)

TutorialKit (StackBlitz) — open-source framework for interactive tutorials.
Sandpack Layouts — composable Sandpack layouts.
Outstatic / Plate / Tina for editing tutorials as MDX.

Pick this if…

Interactive code in docs: Sandpack.
"Run my Vite app in the browser": StackBlitz WebContainers.
Read-only highlighted code: Shiki at build time.
You want a serious code editor in-app: Monaco.
You want a small embedded editor: CodeMirror 6.
Live React component playground: react-live.