Introduction
A minimal web IDE for the browser, from a standalone code editor to a full VS Code-shaped shell.
codelet is a minimal web IDE library, built on CodeMirror. It comes in two sizes: a standalone code editor you drop into any page, and a full VS Code-shaped shell with a file tree, tabs, a command palette, a panel and extensions.
Reach for the editor alone when a page needs one code field: a config field, a playground snippet, a single file to edit. Reach for the workbench when a page needs to feel like an IDE: multiple files, a file tree, a terminal, language servers, all wired together.
#Installation
npm i codeletreact and vue are optional peer dependencies. Install one only if you use the
codelet/react or codelet/vue wrapper.
#Packages
Every package below is a separate entry point, so a page only ships what it imports.
| Entry | What it gives you |
|---|---|
codelet | Editor, the standalone code editor |
codelet/react | <CodeEditor />, a React wrapper around Editor |
codelet/vue | <CodeEditor />, the same wrapper for Vue |
codelet/workbench | Workbench, the VS Code-shaped shell |
codelet/workbench/server | renderWorkbench(), the shell's markup for a server |
codelet/themes | rangi's own themes, converted to Theme objects |
codelet/extensions | the extension API: a subset of the vscode namespace, plus defineExtension |
codelet/extensions/search | the sidebar Search view |
codelet/extensions/extensions | the sidebar Extensions view, showing what the workbench is running |
codelet/extensions/logs | a Logs tab in the panel, capturing console output and errors |
codelet/extensions/terminal | a terminal tab in the panel |
codelet/extensions/terminal/just-bash | a shell to run in that terminal, over the workbench's own files |
codelet/extensions/chat | a chat side bar backed by WebLLM, with tools over the filesystem and a shell |
codelet/extensions/media | image, video and audio preview tabs |
codelet/extensions/markdown | a markdown preview tab |
codelet/extensions/html | an HTML preview tab, sandboxed until the file is trusted |
codelet/extensions/lsp | the language client: diagnostics, go-to-definition, hover, completion, signature help |
codelet/extensions/lsp/typescript | a TypeScript language server, running in a worker |
codelet/extensions/lsp/css, /html, /json, /markdown | language servers for those languages |
codelet/extensions/remote | a real filesystem behind the tree, backed by a server |
codelet/extensions/live | a workspace shared with whoever opens a link, with no server anywhere |
codelet/extensions/tar | download any folder in the tree as a tarball |
codelet/extensions/github | open any repository from GitHub in the workbench |
codelet/server | the other end: a file server for codelet/extensions/remote |
#Bundle size
Measured minified and gzipped, with pnpm size:
| Build | Size |
|---|---|
| Editor alone | 120.5 kB |
| Workbench | 179.5 kB |
| Workbench with every built-in extension | 229.8 kB |
Extensions are opt-in and tree-shaken. A workbench that never imports the terminal, chat or any other extension pays nothing for it: the 229.8 kB figure is every extension bundled at once, not what a typical page ships.