> ## 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 project templates for React, Vue, and more

> Scaffold browser extensions from official Extension.js templates for React, Vue, Svelte, TypeScript, 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

<CodeGroup>
  ```bash npm theme={null}
  npx extension@latest create my-extension --template=<slug>
  ```

  ```bash pnpm theme={null}
  pnpx extension@latest create my-extension --template=<slug>
  ```

  ```bash yarn theme={null}
  yarn dlx extension@latest create my-extension --template=<slug>
  ```

  ```bash bun theme={null}
  bunx extension@latest create my-extension --template=<slug>
  ```

  ```bash deno theme={null}
  deno run -A npm:extension@latest create my-extension --template=<slug>
  ```
</CodeGroup>

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

## Available templates

Choose the stack default that matches your project. Each card scaffolds a minimal, runnable extension with a working `manifest.json`.

<CardGroup cols={2}>
  <Card title="JavaScript" href="/docs/getting-started/templates/javascript">
    <div className="flex items-center gap-4">
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" alt="JavaScript" width="40" height="40" />

      <span className="text-sm text-gray-600 dark:text-gray-300">
        Vanilla ES modules with no compile step. The fastest way to start.
      </span>
    </div>
  </Card>

  <Card title="TypeScript" href="/docs/getting-started/templates/typescript">
    <div className="flex items-center gap-4">
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" alt="TypeScript" width="40" height="40" />

      <span className="text-sm text-gray-600 dark:text-gray-300">
        Strict types across popup, content, and background scripts.
      </span>
    </div>
  </Card>

  <Card title="Svelte" href="/docs/getting-started/templates/svelte">
    <div className="flex items-center gap-4">
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/svelte/svelte-original.svg" alt="Svelte" width="40" height="40" />

      <span className="text-sm text-gray-600 dark:text-gray-300">
        Compile-time UI with a tiny runtime, suited to content scripts.
      </span>
    </div>
  </Card>

  <Card title="Vue" href="/docs/getting-started/templates/vue">
    <div className="flex items-center gap-4">
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg" alt="Vue" width="40" height="40" />

      <span className="text-sm text-gray-600 dark:text-gray-300">
        Single-file components wired up for popup, options, and content scripts.
      </span>
    </div>
  </Card>

  <Card title="Preact" href="/docs/getting-started/templates/preact">
    <div className="flex items-center gap-4">
      <img src="https://preactjs.com/branding/symbol.svg" alt="Preact" width="40" height="40" />

      <span className="text-sm text-gray-600 dark:text-gray-300">
        React API in a 3kB runtime. A good fit when bundle size matters.
      </span>
    </div>
  </Card>

  <Card title="React" href="/docs/getting-started/templates/react">
    <div className="flex items-center gap-4">
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" alt="React" width="40" height="40" />

      <span className="text-sm text-gray-600 dark:text-gray-300">
        Component-based UI with full Manifest V3 support and hot module
        replacement for popup and options.
      </span>
    </div>
  </Card>
</CardGroup>

Looking for production-grade starters with auth, payments, design systems, and full app shells? Browse premium templates at [extension.dev](https://extension.dev).

## How it works

When you run `create --template=<slug>`, Extension.js fetches the selected template, scaffolds the project files, and optionally installs dependencies.

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

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

***