@sveltecraft/sandbox

Live code sandbox components for Svelte 5 with live preview in a sandboxed iframe and auto-resolved bare imports via esm.sh.

Installation

npm i @sveltecraft/sandbox

WebSandbox

An interactive HTML/CSS/JS sandbox with editable source panels and live preview:

<script lang="ts">
    import { WebSandbox } from '@sveltecraft/sandbox';
</script>

<WebSandbox
    width={800}
    height={400}
    code={{
        html: '<button>Clicks: 0</button>',
        css: `
            body {
                display: grid;
                place-content: center;
            }
            
            button {
                padding: 1rem 2rem;
                font-size: 1.25rem;
                cursor: pointer;
            }
        `,
        script: `
            import confetti from 'canvas-confetti';
            
            let count = 0;

            document.querySelector('button').addEventListener('click', (e) => {
                count++;
                e.target.textContent = \`Clicks: \${count}\`;
                confetti();
            });
        `
    }}
/>

Props

SvelteSandbox

A multi-file Svelte playground with dynamic file tabs and live preview:

<script lang="ts">
    import { SvelteSandbox } from '@sveltecraft/sandbox';
    import { files } from '$lib/examples';
</script>

<SvelteSandbox width={800} height={400} {files} />

export const files = {
    'App.svelte': `
        <script>
            import Button from './Button.svelte';
            let count = $state(0);
        </script>

        <Button onclick={() => count++}>
            Clicks: {count}
        </Button>

        <style>
            :global {
                body {
                    display: grid;
                    place-content: center;
                }
            }
        </style>
    `,
    'Button.svelte': `
        <script>
            let { children, onclick } = $props();
        </script>

        <button {onclick}>
            {@render children?.()}
        </button>

        <style>
            button {
                padding: 1rem 2rem;
                font-size: 1.25rem;
                cursor: pointer;
            }
        </style>
    `
};

Note: Inline template literals with </script> or </style> won't work directly in a .svelte file because the parser closes the tag early. Define your files in a .ts file and import them, or use string concatenation (</scr + ipt>).

Props

CodeEditor

The underlying CodeMirror 6 editor is also exported if you want to use it standalone:

<script lang="ts">
    import { CodeEditor } from '@sveltecraft/sandbox';
</script>

<CodeEditor bind:value={myCode} language="javascript" theme={editorTheme} />

Theming

Container (theme)

Editor (editorTheme)

Example

<WebSandbox
    code={{ html: '<h1>Hello</h1>' }}
    theme={{
        bg: '#0f172a',
        accent: '#38bdf8',
        radius: '0.75rem'
    }}
    editorTheme={{
        accent: '#38bdf8',
        function: '#f472b6',
        comment: '#64748b'
    }}
/>

How it works

• Live preview — Code is rendered inside a sandboxed iframe via the srcdoc attribute with only allow-scripts.
• Import resolution — Bare specifiers (e.g. canvas-confetti) are automatically detected and mapped to esm.sh via a <script type="importmap"> injected into the iframe.
• Svelte compilation — When using SvelteSandbox, components are compiled client-side inside the iframe with support for multi-file imports.
• Dedent — Template literals preserve their leading whitespace. The built-in dedent utility strips it so you can write clean, indented code blocks without affecting the output.
• Reactive — Edits in any panel update the preview in real time. A reload button forces a fresh iframe render when needed.
• CodeMirror 6 — The editor uses CodeMirror 6 with a Poimandres-inspired dark theme, lazy-loaded to keep initial bundle size small.

Development

# Start the preview app
pnpm dev

# Build the library
pnpm build

# Package for publishing
pnpm prepack

# Publish to npm
pnpm publish