#Templates

Start faster by generating extensions from official templates instead of building folder structure and config 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

npx extension@latest create my-extension --template=<slug>

pnpx extension@latest create my-extension --template=<slug>

yarn dlx extension@latest create my-extension --template=<slug>

Replace <slug> with the template you want to start from.

#Template naming convention

Template slugs follow a <context>-<stack> pattern. The prefix tells you what kind of extension surface you get:

Quick picks:

• Just want to start? Use new (JS) or new-typescript (TS) for a minimal baseline.
• Framework-first? Pick new-react, new-preact, new-vue, or new-svelte.
• Content script? Pick content (JS) or content-react, content-vue, etc.
• Match your team stack to reduce setup drift.

#Available templates

Highlighted starter options include TypeScript, JavaScript, Svelte, Vue, React, and Preact.

React

Build polished extension interfaces with React, strong tooling, and a mature component ecosystem.

Open template

Preact

Build polished extension interfaces with Preact, lighter bundles, and familiar JSX you know well.

Open template

Vue

Build polished extension interfaces with Vue, single-file flow, and predictable structure in UIs.

Open template

Svelte

Build polished extension interfaces with Svelte, lean components, and tiny runtime in shipped UI.

Open template

TypeScript

Build polished extension interfaces with TypeScript, static typing, and safer refactors at scale.

Open template

JavaScript

Build polished extension interfaces with JavaScript, light tooling, and quick sketch-to-UI speed.

Open template

The grid above is a curated subset of popular stacks. Card links use templates.extension.dev when a live preview exists. The authoritative list of slugs is every folder name under extension-js/examples—those names map 1:1 to --template=<slug>. Beyond new* baselines, the repo includes many context-first families (for example action, content, sidebar, and specialized new-* / special-folders-* samples); browse GitHub to match your surface area.

#How it works

When you run create --template=<slug>, Extension.js fetches the selected template, generates the project files, and can install dependencies automatically.

#More templates

Find official template sources in the examples repository:

• extension-js/examples

Template folder names map directly to --template=<slug>.

#Best practices

• Use templates to bootstrap your project quickly and efficiently.
• Start using templates with technology stacks you are familiar with.
• Choose the browser extension context that best fits your project requirements.

#Next steps

• Learn how Browser runners help you validate extension behavior.
• Learn how Extension.js handles Environment variables.