Controlled rendering
Turn React component code strings into live browser previews inside a scoped, sandbox-friendly runtime.
React Code Canvas
A browser-based canvas for rendering React components at runtime.
bun add react-code-canvas@latest
App.tsx
import { ReactCanvas } from 'react-code-canvas';
const code = `
export default function Hello() {
return (
<h1 className="title">
Hello, world 👋
</h1>
);
}`;
export default function App() {
return (
<ReactCanvas
code={code}
showEditor
showPreview
persistKey="playground"
/>
);
}
Why react-code-canvas
Everything you need to render untrusted JSX with control
Validation workflow
Check code with analyzeReactCode() in Node — no browser, no render — and catch bad scope references before you ever save.
Live text editing
Let users edit rendered text in place while the original JSX is preserved and patched back automatically.
Explicit scope
No imports in user code. You decide exactly which components, hooks, and libraries are available via scope.
Built-in persistence
Opt into localStorage with a single persistKey prop, or wire onCodeChange to your own backend.
Ships ESM + CJS + types
Dual bundles with first-class TypeScript declarations, so it just works in any modern toolchain.
Ready to build your live canvas?
Install the package and render your first component in a couple of minutes.