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>

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

Mature React ecosystem with reusable components, strong tooling, and scalable patterns for production extension interfaces.

Open template

Preact

React-like developer experience with lighter runtime, faster startup, and smaller bundles for performance-sensitive extensions teams.

Open template

Vue

Single-file component workflow with clear conventions, rich ecosystem plugins, and maintainable architecture for browser extensions.

Open template

Svelte

Compiler-first approach delivering concise components, minimal runtime overhead, and excellent performance for interactive extension UIs.

Open template

TypeScript

Type-safe foundation that improves refactoring confidence, collaboration clarity, and long-term maintainability across extension codebases.

Open template

JavaScript

Fastest setup for rapid prototyping, quick iteration, and shipping functional extensions without upfront type-system complexity.

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.