> ## Documentation Index
> Fetch the complete documentation index at: https://extension.js.org/llms.txt
> Use this file to discover all available pages before exploring further.
# Extension templates for React, Vue, and more
> Scaffold browser extensions from official Extension.js templates for React, Preact, Vue, Svelte, TypeScript, WebAssembly, and vanilla JS instead of building from scratch.
Start faster by scaffolding extensions from official templates instead of building folder structure and configuration from scratch.
## Template capabilities
* **Ready project structure:** Start with a working manifest, scripts, and source layout.
* **Stack-specific setup:** Choose templates by framework and runtime needs.
* **Faster onboarding:** Move from idea to runnable extension in minutes.
* **Consistent defaults:** Reduce setup drift across projects and team members.
## Quick usage
```bash npm theme={null}
npx extension@latest create my-extension --template=
```
```bash pnpm theme={null}
pnpx extension@latest create my-extension --template=
```
```bash yarn 2+ theme={null}
yarn dlx extension@latest create my-extension --template=
```
```bash bun theme={null}
bunx extension@latest create my-extension --template=
```
```bash deno theme={null}
deno run -A npm:extension@latest create my-extension --template=
```
Replace `` with the template you want to start from.
## Available templates
Each template scaffolds a minimal, runnable extension with a working `manifest.json`. Expand one for what it gives you, the exact command, and a walkthrough.
A clean ES modules baseline with no compile step. The template wires up `manifest.json`, a sidebar panel, a background script, and a content script entry point, so you can run `extension dev` and start iterating immediately. Choose it when you want the smallest possible setup.
```bash theme={null}
npx extension@latest create my-extension --template=javascript
```
Browse the full source on GitHub: [extension-js/examples/javascript](https://github.com/extension-js/examples/tree/main/examples/javascript)
Static types across the sidebar panel, content, and background scripts, with `chrome` and `browser` API typings configured. Catch manifest, messaging, and permission bugs at compile time instead of in the browser console. This is the default when you omit `--template`.
```bash theme={null}
npx extension@latest create my-extension --template=typescript
```
Browse the full source on GitHub: [extension-js/examples/typescript](https://github.com/extension-js/examples/tree/main/examples/typescript)
Compile-time UI with single-file `.svelte` components and a minimal runtime footprint. The template scaffolds a sidebar panel and a content script, plus the build configuration needed for HMR-friendly Svelte authoring inside an extension context.
```bash theme={null}
npx extension@latest create my-extension --template=svelte
```
Browse the full source on GitHub: [extension-js/examples/svelte](https://github.com/extension-js/examples/tree/main/examples/svelte)
A progressive setup with `.vue` single-file components, scaffolded as a sidebar panel plus a content script. The template handles SFC compilation and reload behavior, so you can focus on UI.
```bash theme={null}
npx extension@latest create my-extension --template=vue
```
Browse the full source on GitHub: [extension-js/examples/vue](https://github.com/extension-js/examples/tree/main/examples/vue)
The same component model as React with a 3kB runtime, configured with the standard `preact/compat` aliasing so most React libraries keep working. A good fit when bundle size matters, especially for content scripts injected into other people's pages.
```bash theme={null}
npx extension@latest create my-extension --template=preact
```
Browse the full source on GitHub: [extension-js/examples/preact](https://github.com/extension-js/examples/tree/main/examples/preact)
A component-based UI baseline with full Manifest V3 support. The sidebar panel and content script ship as React entry points with hot module replacement wired up. Edit a component and see it update without reloading the extension by hand.
```bash theme={null}
npx extension@latest create my-extension --template=react
```
Browse the full source on GitHub: [extension-js/examples/react](https://github.com/extension-js/examples/tree/main/examples/react)
## How it works
When you run `create --template=`, Extension.js fetches the selected template, scaffolds the project files, and optionally installs dependencies.
Only the `javascript` template ships inside the CLI, so it scaffolds offline with no network call. The default when you omit `--template` is `typescript`, which downloads like every other name. When that download fails, `create` falls back to the bundled `javascript` template and names the network error. A set `EXTENSION_CREATE_TEMPLATE_URL` turns that fallback off, so a failed override fails the run and names the variable.
The catalog holds 6 groups and roughly 50 templates: starters, sidebar, content scripts, new tab, toolbar action, and special folders. Run `extension create --help` to see every name.
A name outside the catalog fails with `E_TEMPLATE_NOT_FOUND` and creates nothing. A failed download is reported as a download error instead, so a network problem never reads like a typo.
### Reproducible scaffolds
The template corpus is pinned to an immutable commit of the examples repository. Two scaffolds of the same template always produce the same files, and a shipped CLI never tracks a moving branch.
You can point at a different corpus:
```bash theme={null}
# A branch, tag, or commit SHA of extension-js/examples
EXTENSION_CREATE_TEMPLATE_REF=main extension create my-extension --template=react
# Override the archive URL entirely
EXTENSION_CREATE_TEMPLATE_URL=https://example.com/examples.zip extension create my-extension --template=react
```
`EXTENSION_CREATE_TEMPLATE_REF` accepts a branch, a tag, or a commit SHA. Setting it to `main` restores the floating branch behavior.
### Scaffold from a URL
`--template` also accepts a GitHub URL or a ZIP URL in place of a catalog name:
```bash theme={null}
extension create my-extension --template=https://github.com/extension-js/examples/tree/main/examples/content
```
From 4.1.19, template URLs and `EXTENSION_CREATE_TEMPLATE_URL` must use `https://`. `create` refuses `http://` unless you set `EXTENSION_ALLOW_HTTP_TEMPLATE=true`.
## More templates
Find official template sources in the examples repository:
* [extension-js/examples](https://github.com/extension-js/examples/tree/main/examples)
Template folder names map directly to `--template=`.
## Best practices
* Use templates to scaffold your project quickly.
* Start with a template that matches a technology stack you already know.
* Choose the browser extension context that best fits your project requirements.
## Next steps
* Learn how [browser runners](/docs/browsers/browsers-available) help you validate extension behavior.
* Learn how Extension.js handles [Environment variables](/docs/features/environment-variables).
***
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.