svelte-codesandbox

A powerful Svelte wrapper component around the CodeSandbox editor embed. Useful for creating interactive demos and documenting code without throwing together your own REPL.

Installation

npm

npm install svelte-codesandbox

pnpm

pnpm install svelte-codesandbox

yarn

yarn add svelte-codesandbox

Usage

Basic Usage

<script>
    import { Sandbox } from "svelte-codesandbox";
</script>

<Sandbox id="sandbox-id" />

Customizing the Sandbox

<script>
    import { Sandbox } from "svelte-codesandbox";
</script>

<Sandbox
    --sandbox-height="800px"
    src="sandbox-id"
    codemirror
    fontSize={16}
    theme="light"
    highlights={[1, 3]}
    modules={["src/index.js", "src/App.js"]}
/>

For an in-depth list of customization options, visit CodeSandbox's embedding documentation.