Introduction

codelet is a minimal web IDE for the browser, built on CodeMirror. The Workbench is the whole of it: a VS Code-shaped shell with a file tree, tabs, breadcrumbs, a command palette, a panel and extensions, mounted into a DOM element you already control. No CSS file, no build step of its own.

The editor inside it also ships on its own, as Editor, for a page that needs one code field rather than an IDE — a config box, a snippet, a single file in a playground. Everything else in this guide is about the workbench.

#See it running

That is a real Workbench, with a file tree, tabs, a Search view and TypeScript hovers and diagnostics — nothing on a server. Open the tree, edit a file, press Mod-P.

#Installation

npm i codelet

react and vue are optional peer dependencies. Install one only if you use the codelet/react or codelet/vue wrapper.

#Package entries

Every package below is a separate entry point, so a page only ships what it imports.

#Core

#Framework wrappers

#Workbench

#Built-in extensions

#Server

#Bundle size

Measured minified and gzipped, with pnpm size:

Extensions are opt-in and tree-shaken: a workbench that never imports the terminal, chat or any other extension pays nothing for it. The last row is every extension bundled at once, not what a typical page ships.

#Where to go next