Extensions
The built-in extensions that add views, editors and tools to the workbench, and how to pass your own.
Extensions are opt-in objects you pass to the workbench's extensions option. Each built-in
extension has its own package entry, so a workbench only pays for the ones you import — nothing
else is bundled. See Using extensions for how to pass them, and the
API for writing your own.
#Files and previews
Markdown preview
A rendered preview of a Markdown file, beside the file itself.
HTML preview
The page itself beside the file, sandboxed until you trust it.
Media
Opens images, video and audio in a custom editor tab.
Exporter
Any folder in the tree out as a tarball, a zip, a folder on your disk, or text.
#Shells and running code
Terminal
A terminal panel tab, driven by whatever shell profile you register.
bash
A shell for the terminal, over the workbench's own files — with node itself behind it where the page allows one.
npm Scripts
Runs the workspace's package.json scripts as tasks, in a terminal another extension provides.
Tasks
An activity bar pane listing every task the workspace's providers offer, and a way to run one.
Ports
A panel tab listing every server running in the workbench, and where to reach each one.
#Language support
#Collaboration and sources
Live Share
Shares the workspace, edits and carets with whoever opens a link.
GitHub
Opens any repository from GitHub in the workbench, with nothing cloned.
Remote
Backs the explorer with a real filesystem on a server.
Source control
A Source Control pane in the activity bar, and vscode.diff behind it.
#The workbench itself
Search
A sidebar view that searches file contents and paths.
Extensions view
Lists what the workbench is running and what each one contributed.
Logs
A panel tab that captures console output, errors and output channels.
Marketplace
Open VSX searched from the page, and a .vsix unpacked and run in this window.
Settings editor
The reader's settings as a JSON tab, built from what every extension declared.
Chat
A conversation about the workspace in the secondary side bar, and what answers it.
pi
pi's coding agent — its loop, its tools and its models — loaded from a CDN.
Workspace tools
The workspace's own files as tools — read, list, search, write, edit and open — plus a command left running, for whatever is answering.
WebMCP
Every tool the workbench has registered, handed to the browser's own agent.
#Try it
This workbench runs three extensions together. It opens on the Extensions view — see what
each one contributed, then click the Search icon and type greet.
#Adding extensions
Pass an array to extensions. Each entry is either an extension object or, for extensions that
take options, the result of calling one:
import { search } from "codelet/extensions/search";
import { extensions } from "codelet/extensions/extensions";
import { logs } from "codelet/extensions/logs";
import { Workbench, FileSystem } from "codelet/workbench";
const workbench = new Workbench({
parent: document.getElementById("app")!,
fs: new FileSystem({ "/README.md": "# Hello" }),
extensions: [search, extensions, logs({ level: "info" })],
});Note
A few of these need something from the host: cross-origin isolation for a SharedArrayBuffer, a
server to talk to, or a network call to a CDN or a third party. Each page says so up front.