matiadev/svelte-sandbox

★ 11SvelteAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((svelte-sandbox))
    Components
      WebSandbox
      SvelteSandbox
      CodeEditor
    Features
      Live preview
      Multi-file support
      Package auto-resolve
      Sandboxed iframe
    Customization
      Width and height
      Color themes
      Syntax highlighting
    Use cases
      Documentation sites
      Tutorial platforms
      Learning tools

mindmap root((svelte-sandbox)) Components WebSandbox SvelteSandbox CodeEditor Features Live preview Multi-file support Package auto-resolve Sandboxed iframe Customization Width and height Color themes Syntax highlighting Use cases Documentation sites Tutorial platforms Learning tools

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Embed a live HTML/CSS/JavaScript playground in a Svelte documentation site so readers can edit and run examples directly in the browser.

USE CASE 2

Add a multi-file Svelte component editor to a tutorial platform where learners write and preview full Svelte applications.

USE CASE 3

Drop in the standalone CodeEditor component built on CodeMirror 6 to build a custom code editing interface in a Svelte 5 project.

Tech stack

SvelteJavaScriptCodeMirror 6

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

This is a component library for Svelte 5 developers who want to embed interactive, live-editable code playgrounds directly inside a web page. You install it via npm and drop one of its components into your Svelte project to get an in-browser code editor paired with a live preview window. The library ships two main components. The first, WebSandbox, gives you a split-panel editor where users can write HTML, CSS, and JavaScript and see the result update in real time. The second, SvelteSandbox, goes further and supports multiple Svelte component files at once, letting users write and preview full Svelte applications with tabs switching between files. Both components run the preview inside a sandboxed iframe, which keeps the code isolated from the rest of the page. When the JavaScript imports an external package by name (like a confetti animation library), the sandbox automatically resolves where to fetch it from, so users do not need to configure anything. There is also a standalone CodeEditor component that just provides the text editor part (using CodeMirror 6, a popular code editing library) if you want to build something custom on top of it. Both sandboxes accept props to control their width, height, and appearance. A theme system lets you change background colors, accent colors, font families, and border styles for the container. A separate editor theme controls syntax highlighting colors. A previewOnly flag hides the code panels entirely so you can show the running result without the editor. This library is aimed at Svelte developers building documentation sites, tutorial platforms, or any page where showing runnable code examples would be useful. It requires Svelte 5 and is published to npm under the name @sveltecraft/sandbox.

Copy-paste prompts

Prompt 1

I installed @sveltecraft/sandbox in my Svelte 5 project. How do I add a WebSandbox component with a default HTML, CSS, and JavaScript starter example?

Prompt 2

Show me how to configure the SvelteSandbox component from @sveltecraft/sandbox with two Svelte component files and a custom accent color theme.

Prompt 3

How do I use the previewOnly prop in the @sveltecraft/sandbox WebSandbox to show just the running output without the code editor panels?

Prompt 4

I want to customize syntax highlighting in the @sveltecraft/sandbox CodeEditor. What props control the editor theme versus the container appearance?

Open on GitHub → Explain another repo

← matiadev on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.