Skip to content
Get packs

Guide · Open source

How to use WXT: set up, run and build a web extension

Updated · written with AI from the project's own documentation and checked against our catalogue data

WXT is an open-source framework for building web extensions, the add-ons that run inside browsers such as Chrome. It handles project setup, a development server with hot module replacement and fast reload, and TypeScript support, so you spend less time on build configuration. This guide shows how to start a project, what the framework includes, and where to go next.

WXTwxt-dev/wxt · ★ 10.7k · MIT

Quick start

  1. 1Check prerequisites. Install Node.js and make sure you have npm, pnpm or bun available.
  2. 2Bootstrap the project. Run the init command for your package manager, such as npx wxt@latest init with npm.
  3. 3Follow the installation guide. Open the installation guide at wxt.dev to complete the setup for your project.
  4. 4Explore the features. Review the feature list, including file based entrypoints, TypeScript and auto-imports.
  5. 5Add your frontend framework. Use Vue, React, Svelte or another framework, since WXT is framework agnostic.

What WXT is and who it is for

WXT is a developer tool. The README describes it as similar to Nuxt, but for web extensions. It is aimed at developers who are building a browser extension and want a structured project setup.

It suits teams that want one codebase targeting multiple browsers, and developers who use Vue, React, Svelte or another frontend framework and want to keep it.

  • Good fit: building your own browser extension with a structured setup
  • Good fit: one codebase for multiple browsers
  • Not a fit: only wanting to use an existing extension
  • Not a fit: writing extensions with no build step, since WXT is built around a bundler workflow
  • Not a fit: no prior JavaScript or TypeScript experience, since the README assumes web development familiarity

Prerequisites: Node.js and a package manager

WXT needs Node.js and one of npm, pnpm or bun. Choose the package manager you already use. The README assumes you are comfortable with JavaScript or TypeScript and web development.

Create a new project with init

The quickest way to start is to bootstrap a new project with the init command. Run the command that matches your package manager from the README. The installation guide at wxt.dev covers the full setup.

# npm npx wxt@latest init # pnpm pnpm dlx wxt@latest init # bun bunx wxt@latest init

Know the main features

WXT bundles several features that the README lists. Knowing them helps you decide what the framework covers for your project.

  • Supports all browsers and both MV2 and MV3 extensions
  • Dev mode with HMR and fast reload
  • File based entrypoints
  • TypeScript support
  • Auto-imports
  • Automated publishing
  • Works with Vue, React, Svelte and other frontend frameworks
  • Module system for reusing code between extensions
  • Bundle analysis

Learn more in the official docs

The README links to a configuration reference, examples, a changelog and a Discord server. For detailed setup, configuration options and the module system, use the documentation at wxt.dev, which the README points to as its homepage.

What people use it for

  • Building a browser extension with a structured project layout
  • Maintaining one codebase that targets multiple browsers
  • Building an extension UI with Vue, React or Svelte
  • Bundling and publishing an extension with the automated publishing feature
  • Sharing code between extensions through the module system

Frequently asked questions

Is WXT free to use?

WXT is open source and published under the MIT license. The README states the project is MIT-licensed and funded by sponsors.

What do I need to install WXT?

You need Node.js and one of npm, pnpm or bun. You then bootstrap a project with the init command for your package manager.

Can I use WXT with React or Vue?

Yes. The README says WXT is frontend framework agnostic and works with Vue, React, Svelte and others.

Does WXT support Manifest V3?

Yes. The README lists support for both MV2 and MV3.

What are the alternatives to WXT?

The README names Plasmo, CRXJS and Extension.js as comparable projects. This guide does not compare their features in detail.

Is WXT suitable for beginners?

Not really. The README assumes familiarity with web development, so people without JavaScript or TypeScript experience may find it hard.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

WXT is a good choice for developers who are building a browser extension and want a structured project with TypeScript, hot reload and publishing help, especially if they use a frontend framework they want to keep. It is not a good choice if you only want to use an existing extension, want no build step, or are new to JavaScript and TypeScript. Compare it with Plasmo, CRXJS and Extension.js before you commit.

Install options & downloads