# Extensions

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](/guide/extensions) for how to pass them, and the
[API](/api) for writing your own.

## Files and previews

::card-group{cols="2"}
::card

---

title: Markdown preview
icon: i-lucide-eye
to: /extensions/markdown

---

A rendered preview of a Markdown file, beside the file itself.
::
::card

---

title: HTML preview
icon: i-lucide-globe
to: /extensions/html

---

The page itself beside the file, sandboxed until you trust it.
::
::card

---

title: Media
icon: i-lucide-image
to: /extensions/media

---

Opens images, video and audio in a custom editor tab.
::
::card

---

title: Tar export
icon: i-lucide-file-archive
to: /extensions/tar

---

Downloads any folder in the tree as a tarball.
::
::

## Shells and running code

::card-group{cols="2"}
::card

---

title: Terminal
icon: i-lucide-square-terminal
to: /extensions/terminal

---

A terminal panel tab, driven by whatever shell profile you register.
::
::card

---

title: just-bash
icon: i-lucide-terminal
to: /extensions/just-bash

---

A shell profile for the terminal, running in the page over the workbench's own files.
::
::card

---

title: WebContainer
icon: i-lucide-container
to: /extensions/webcontainer

---

node in the terminal, over a filesystem kept in step with the workbench's own.
::
::card

---

title: npm Scripts
icon: i-lucide-package
to: /extensions/npm

---

Runs the workspace's package.json scripts as tasks, in a terminal another extension provides.
::
::card

---

title: Tasks
icon: i-lucide-play-circle
to: /extensions/tasks

---

An activity bar pane listing every task the workspace's providers offer, and a way to run one.
::
::

## Language support

::card-group{cols="2"}
::card

---

title: Language servers
icon: i-lucide-braces
to: /extensions/lsp

---

Diagnostics, hover, completion and go-to-definition for a language.
::
::

## Collaboration and sources

::card-group{cols="2"}
::card

---

title: Live Share
icon: i-lucide-radio
to: /extensions/live

---

Shares the workspace, edits and carets with whoever opens a link.
::
::card

---

title: GitHub
icon: i-lucide-github
to: /extensions/github

---

Opens any repository from GitHub in the workbench, with nothing cloned.
::
::card

---

title: Remote
icon: i-lucide-server
to: /extensions/remote

---

Backs the explorer with a real filesystem on a server.
::
::card

---

title: Source control
icon: i-lucide-git-branch
to: /extensions/scm

---

A Source Control pane in the activity bar, and `vscode.diff` behind it.
::
::

## The workbench itself

::card-group{cols="2"}
::card

---

title: Search
icon: i-lucide-search
to: /extensions/search

---

A sidebar view that searches file contents and paths.
::
::card

---

title: Extensions view
icon: i-lucide-blocks
to: /extensions/extensions

---

Lists what the workbench is running and what each one contributed.
::
::card

---

title: Logs
icon: i-lucide-scroll-text
to: /extensions/logs

---

A panel tab that captures console output, errors and output channels.
::
::card

---

title: Marketplace
icon: i-lucide-store
to: /extensions/vsix

---

Open VSX searched from the page, and a `.vsix` unpacked and run in this window.
::
::card

---

title: Settings editor
icon: i-lucide-settings
to: /extensions/settings

---

The reader's settings as a JSON tab, built from what every extension declared.
::
::card

---

title: Chat
icon: i-lucide-message-circle
to: /extensions/chat

---

A conversation about the workspace in the secondary side bar.
::
::

## 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`.

::codelet-playground{mode="workbench" extensions="search logs extensions-view" view="extensions" height="440"}

```ts [greet.ts]
export const greet = (name: string) => `hi ${name}`;
```

```ts [index.ts]
import { greet } from "./greet";

console.log(greet("codelet"));
```

```md [README.md]
# greet

A greeting, and a second mention of greet in prose.
```

::

## 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:

```ts
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.
::

:read-more{to="/api"}