A reusable Svelte component for in-browser code editing with BrowserPod
npm install @leaningtech/svelte-browserpod-editorA Svelte component library for building in-browser code editors powered by BrowserPod. Run a full development environment in the browser via WebAssembly—npm install, dev servers, live previews, and more.
``bash`
npm install @leaningtech/svelte-browserpod-editor
`svelte
apiKey="your-api-key"
>
]} />
`
| Component | Description |
|-----------|-------------|
| BrowserPodEditorProvider | Required wrapper that provides context to all child components |EditorPanel
| | CodeMirror-based code editor |PreviewPanel
| | Live preview iframe with optional QR code overlay |TerminalPanel
| | Terminal with optional tabs (tab bar hidden for single terminal) |FileTree
| | File browser with folder navigation |CurrentFile
| | Displays the currently selected filename |
Load projects from three sources (currently only local and zip work. Zip requires
appropriate CORS headers if used cross-origin):
`typescript
// Local files (requires manifest.txt in static directory)
{ type: 'local', path: '/projects/my-app' }
// Direct zip URL
{ type: 'zip', url: 'https://example.com/project.zip' }
// GitHub repository
{ type: 'github', repo: 'username/repo', branch: 'main' }
`
`svelte`
id: 'install',
label: 'Install',
commands: [['npm', 'install']],
autoRun: true, // Run when BrowserPod is ready
stopOnError: true // Stop sequence if command fails
},
{
id: 'dev',
label: 'Dev Server',
commands: [['npm', 'run', 'dev']],
runOnActivate: true // Run when tab is first clicked
}
]} />
Multiple editors are supported automatically:
`svelte`
Clicking/focusing an editor makes it active. FileTree clicks open files in the active editor.
Use wrapper elements for layout—components don't include default positioning:
`svelte
`
Import the default theme and override CSS variables:
`css
@import '@leaningtech/svelte-browserpod-editor/theme.css';
:root {
--bpe-color-primary: #your-brand-color;
--bpe-color-border: rgba(255, 255, 255, 0.2);
}
`
See theme.css for the complete list of customizable variables.
Wire up analytics tracking:
`typescript
import { setAnalyticsCallback } from '@leaningtech/svelte-browserpod-editor';
setAnalyticsCallback((event, props) => {
// Your analytics implementation
});
``
MIT