# 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.
| | `Workbench` (`codelet/workbench`) | `Editor` (`codelet`) |
| -------- | -------------------------------------------------------- | ----------------------------------------------------------- |
| Shows | A file tree, tabs, a panel and a command palette | One code field |
| Good for | An in-browser IDE, a course platform, a code review tool | A config field, a code snippet, a single-file playground |
| Guide | [Workbench](/guide/workbench) | [Standalone editor](/guide/workbench#the-standalone-editor) |
## See it running
::codelet-playground{mode="workbench" active="src/index.ts" extensions="search lsp-typescript" height="420"}
```json [package.json]
{
"name": "demo",
"version": "1.0.0"
}
```
```ts [src/greet.ts]
export const greet = (name: string): string => `hi ${name}`;
```
```ts [src/index.ts]
import { greet } from "./greet";
console.log(greet("codelet"));
```
```md [README.md]
# Demo
A tiny workspace, running entirely in your browser.
```
::
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
:pm-install{name="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
| Entry | What it gives you |
| ---------------- | --------------------------------------------------------------------------------- |
| `codelet` | `Editor`, the standalone code editor, and `renderEditorHTML` for server rendering |
| `codelet/themes` | rangi's own themes, converted to `Theme` objects |
### Framework wrappers
| Entry | What it gives you |
| --------------- | ------------------------------------------------- |
| `codelet/react` | ``, a React wrapper around `Editor` |
| `codelet/vue` | ``, the same wrapper for Vue |
### Workbench
| Entry | What it gives you |
| -------------------------- | ----------------------------------------------------------------------------- |
| `codelet/workbench` | `Workbench`, the VS Code-shaped shell, and `FileSystem` |
| `codelet/workbench/server` | `renderWorkbench()`, the shell's markup for a server |
| `codelet/extensions` | the extension API: a subset of the `vscode` namespace, plus `defineExtension` |
### Built-in extensions
| Entry | What it gives you |
| ----------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| `codelet/extensions/search` | the sidebar Search view |
| `codelet/extensions/extensions` | the Extensions view: what the workbench is running, with a button to stop and restart each one |
| `codelet/extensions/vsix` | Open VSX marketplace search, with a `.vsix` unpacked and run in the page |
| `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/webcontainer` | Node itself, in the terminal, over a filesystem kept in step with the workbench's |
| `codelet/extensions/chat` | a chat side bar backed by WebLLM, with tools over the filesystem and a shell |
| `codelet/extensions/live` | a workspace shared with whoever opens a link |
| `codelet/extensions/media` | image, video and audio preview tabs |
| `codelet/extensions/npm` | the workspace's `package.json` scripts, runnable as tasks |
| `codelet/extensions/tasks` | an activity bar pane listing whatever tasks are available to run |
| `codelet/extensions/settings` | the reader's settings as an editable tab |
| `codelet/extensions/tar` | downloads any folder in the tree as a `.tar.gz` |
| `codelet/extensions/github` | opens any repository from GitHub in the workbench |
| `codelet/extensions/scm` | a Source Control pane in the activity bar |
| `codelet/extensions/markdown` | a rendered Markdown preview, beside the file |
| `codelet/extensions/html` | an HTML preview, beside the file, sandboxed until you trust it |
| `codelet/extensions/remote` | a real filesystem behind the tree, backed by a server |
| `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 |
### Server
| Entry | What it gives you |
| ---------------- | ----------------------------------------------------------------------------- |
| `codelet/server` | the other end of `codelet/extensions/remote`: a file server for one directory |
## Bundle size
Measured minified and gzipped, with `pnpm size`:
| Build | Size |
| --------------------------------------- | -------- |
| Editor alone | 120.7 kB |
| Workbench | 217.3 kB |
| Workbench with every built-in extension | 319.2 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 last row is every extension bundled at once, not what a
typical page ships.
## Where to go next
::card-group{cols="2"}
::card
---
title: Getting started
icon: i-lucide-rocket
to: /guide/usage
---
Install codelet and mount your first editor or workbench.
::
::card
---
title: Workbench
icon: i-lucide-layout-dashboard
to: /guide/workbench
---
Options, methods and server rendering for the shell.
::
::card
---
title: Extensions
icon: i-lucide-puzzle
to: /guide/extensions
---
Search, terminals, language servers and the rest, opt-in one import at a time.
::
::card
---
title: Extension API
icon: i-lucide-library
to: /api
---
Write your own extension against the `vscode` subset.
::
::