Codelet
A minimal web IDE
Drop a code editor or a full VS Code-shaped workbench into any web page. Framework-agnostic, no CSS to import, and extensions you only pay for when you use them.
import { Workbench, FileSystem } from "codelet/workbench";
import { search } from "codelet/extensions/search";
import { typescript } from "codelet/extensions/lsp/typescript";
const fs = new FileSystem();
fs.write("/hello.ts", "const greet = (name: string) => `hi ${name}`;");
new Workbench({
parent: document.getElementById("app")!,
fs,
open: "/hello.ts",
extensions: [search, typescript()],
});
Features
An editor, or a whole IDE
Use the standalone editor on its own, or the workbench for a file tree, tabs, a command palette and a panel.
React and Vue included
A
<CodeEditor />wrapper for both, as optional peers. The core is framework-agnostic.Nothing to configure
One import and no CSS build. Themes are plain objects you pass in, and two are built in.
Renders on the server
Ship markup the client takes over on mount, so the first paint is not an empty box.
Extensions you opt into
Search, terminal, chat, language servers and more, each behind its own entry and tree-shaken away when unused.
Real files, optionally
Point the workbench at a directory on a machine with the bundled server, or keep everything in memory.
