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

#Choose your template fast

• Start with new or new-typescript for a minimal JavaScript or TypeScript baseline.
• Pick new-react, new-preact, new-vue, or new-svelte when your UI stack is framework-first.
• Match the template to 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

Get a React-like workflow with a lighter runtime and smaller bundles.

Open template

Vue

Use single-file components and clear conventions for maintainable extension UIs.

Open template

Svelte

Ship interactive UIs with concise components and minimal runtime overhead.

Open template

TypeScript

Add type safety for clearer refactors and long-term maintainability.

Open template

JavaScript

Start fast and ship quickly with the lightest setup, while keeping the path clear for rapid prototypes, production-ready features, and teams that want minimal ceremony.

Open template

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