#web-editor

web-editor is a small React framework for building in-browser IDEs. It's the engine behind the TurboWarp Extension Maker — but it's deliberately generic: nothing in it knows about TurboWarp.

It gives you:

• A custom resizable split-pane layout (SplitPane, Panel) — nestable, with sizes persisted to localStorage. No third-party panel library.
• A Monaco editor (CodeEditor) with locally-bundled language workers (so it works under cross-origin isolation, where CDN workers are blocked).
• An xterm.js terminal (TerminalPanel) bound to an interactive WebContainer shell — full ANSI, real ls/cat/ npm/node.
• A file tree (FileTree) with Seti file-type icons.
• A WebContainer build engine (WebContainerEngine) — boot, npm install, run a build, read the output back out, stream all of it to the terminal.
• Radix UI primitives (Button, IconButton, Tooltip, Switch, StatusBadge, …) themed with a dark Tailwind palette.

#Install

npm install browser-ide-kit
# peer deps you provide:
npm install react react-dom

It's published built (via Rslib) and ships its components, the Seti icon set, and a raw styles.css you process with Tailwind CSS v4.

#How it fits together

You create an editor instance with createEditor(), describing the project to scaffold and how to build it, then render the components inside an EditorProvider:

import {
  createEditor,
  EditorProvider,
  SplitPane,
  Panel,
  FileTree,
  CodeEditor,
  TerminalPanel,
} from 'browser-ide-kit';
import 'browser-ide-kit/styles.css';

const editor = createEditor({
  name: 'My Project',
  // npm install command run in the WebContainer
  installCommand: ['npm', 'install'],
  // produce the starter files + how to build them
  createProject: () => ({
    files: { 'package.json': '…', 'src/index.js': '…' },
    entryFile: 'src/index.js',
    build: { command: ['npm', 'run', 'build'], outputPath: 'dist/out.js' },
  }),
});

function App() {
  useEffect(() => editor.actions.init(), []);
  return (
    <EditorProvider editor={editor}>
      <SplitPane direction="horizontal" defaultSizes={[20, 80]}>
        <Panel flush>
          <FileTree />
        </Panel>
        <SplitPane direction="vertical" defaultSizes={[70, 30]}>
          <Panel title="Editor" flush>
            <CodeEditor />
          </Panel>
          <Panel title="Terminal" flush>
            <TerminalPanel />
          </Panel>
        </SplitPane>
      </SplitPane>
    </EditorProvider>
  );
}

The engine boots a WebContainer, mounts the files, installs, builds on demand (or on save), and streams everything to the terminal. The editor's blocks plug into whatever your createProject returns — your app supplies the domain-specific parts (the project template, the build command, what to do with the built output).

#Tailwind setup

browser-ide-kit/styles.css is Tailwind v4 source (it declares @import 'tailwindcss', the theme tokens, and @source for its own built components). Import it from your app's stylesheet and add a @source for your own files:

@import 'browser-ide-kit/styles.css';
@source './';

#Cross-origin isolation

WebContainers (and Monaco's bundled workers) require the page to be cross-origin isolated — COOP: same-origin + COEP: credentialless. Set those headers on your dev server and host, or use a coi-serviceworker shim on a static host that can't set headers.

#Complete apps

Two full applications are built on web-editor — read either to see the framework wired up end to end (and try the live versions):

• dev-local — a general-purpose in-browser code editor (editor · terminal · live preview), with no domain-specific tooling. The simplest end-to-end example.
• TurboWarp Extension Maker — a domain-specific IDE that adds an embedded Scratch VM, blocks editor, and stage on top.