# Introduction
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
:pm-install{name="codelet"}
`react` 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` | ``, a React wrapper around `Editor` |
| `codelet/vue` | ``, 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.
::card-group{cols="3"}
::card
---
title: Code editor
icon: i-lucide-code
to: /guide/editor
---
The standalone `Editor` class: options, methods, highlighting, cursors.
::
::card
---
title: Workbench
icon: i-lucide-layout-panel-left
to: /guide/workbench
---
The VS Code-shaped shell: files, tabs, the palette, the panel.
::
::card
---
title: Extensions
icon: i-lucide-puzzle
to: /guide/extensions
---
The `vscode` subset and the built-in extensions that use it.
::
::