Svelte Browserpod Editor

leaningtech

A reusable Svelte component for in-browser code editing with BrowserPod

svelte-browserpod-editor

A 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.

Installation

npm install @leaningtech/svelte-browserpod-editor

Quick Start

<script>
  import {
    BrowserPodEditorProvider,
    EditorPanel,
    PreviewPanel,
    TerminalPanel,
    FileTree
  } from '@leaningtech/svelte-browserpod-editor';
  import '@leaningtech/svelte-browserpod-editor/theme.css';
</script>

<BrowserPodEditorProvider
  projectSource={{ type: 'local', path: '/project/' }}
  apiKey="your-api-key"
>
  <FileTree />
  <EditorPanel />
  <PreviewPanel />
  <TerminalPanel tabs={[
    { id: 'dev', label: 'Dev', commands: [['npm', 'run', 'dev']], autoRun: true }
  ]} />
</BrowserPodEditorProvider>

Components

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

Project Sources

Load projects from three sources (currently only local and zip work. Zip requires appropriate CORS headers if used cross-origin):

// 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' }

Terminal Configuration

<TerminalPanel tabs={[
  {
    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
  }
]} />

Multi-Editor Layout

Multiple editors are supported automatically:

<div class="editors">
  <EditorPanel />  <!-- Editor 0 -->
  <EditorPanel />  <!-- Editor 1 -->
</div>

Clicking/focusing an editor makes it active. FileTree clicks open files in the active editor.

Layout

Use wrapper elements for layout—components don't include default positioning:

<div class="editor-slot">
  <EditorPanel />
</div>
<div class="preview-slot">
  <PreviewPanel />
</div>

<style>
  .editor-slot { flex: 2 1 0; min-height: 0; display: flex; }
  .preview-slot { width: 320px; display: flex; }
</style>

Theming

Import the default theme and override CSS variables:

@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.

Analytics

Wire up analytics tracking:

import { setAnalyticsCallback } from '@leaningtech/svelte-browserpod-editor';

setAnalyticsCallback((event, props) => {
  // Your analytics implementation
});

License

MIT

Top categories