wxt-dev/wxt

★ 9,800TypeScriptAudience · developerComplexity · 3/5LicenseSetup · moderate

Mindmap

mindmap
  root((wxt))
    What It Does
      Browser extension scaffold
      Cross-browser support
      Live reload and HMR
    Tech Stack
      TypeScript
      React Vue Svelte
      Node.js
    Features
      MV2 and MV3 support
      Auto import utilities
      Built-in publishing
    Use Cases
      Toolbar extensions
      Page customizers
      Productivity tools
    Setup
      Folder-based structure
      CLI scaffold

mindmap root((wxt)) What It Does Browser extension scaffold Cross-browser support Live reload and HMR Tech Stack TypeScript React Vue Svelte Node.js Features MV2 and MV3 support Auto import utilities Built-in publishing Use Cases Toolbar extensions Page customizers Productivity tools Setup Folder-based structure CLI scaffold

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Build a Chrome or cross-browser extension with live reload without manually configuring build tools.

USE CASE 2

Create a productivity extension using your preferred frontend framework, React, Vue, or Svelte.

USE CASE 3

Publish a browser extension to the Chrome Web Store using WXT's built-in publishing workflow.

USE CASE 4

Add a browser toolbar tool or page customizer to a side project with minimal boilerplate setup.

Tech stack

TypeScriptNode.jsReactVueSvelte

Getting it running

Difficulty · moderate Time to first run · 30min

Requires Node.js, target browser must be installed locally for the development server to reload the extension.

Free to use in any project including commercial, as long as you keep the copyright notice.

In plain English

WXT is a framework (a pre-built toolkit that speeds up development) for building browser extensions, add-ons that run inside web browsers like Chrome. Think of it as a fast-track starting kit that handles all the complicated setup so you can focus on what your extension actually does. The problem it solves: building a browser extension from scratch means wrestling with browser-specific rules, file organization, and a slow development loop where you have to reload the extension manually every time you make a change. WXT removes that friction. How it works: you organize your extension's files in a folder-based structure, and WXT figures out the rest, it compiles everything, handles the differences between browser manifest formats (MV2 and MV3, the two rule sets browsers use), and gives you a live development server with HMR (Hot Module Replacement), meaning your changes appear instantly without a manual reload. It also auto-imports common utilities so you don't have to write repetitive setup code. When would you use it: if you want to build a Chrome or cross-browser extension, whether it's a productivity tool, a page customizer, or anything that lives in the browser toolbar, WXT gets you from zero to running faster than setting things up manually. It supports whichever frontend framework you prefer (Vue, React, Svelte, and others are all mentioned as compatible). You can also publish your extension automatically through WXT's built-in publishing tools. WXT is written in TypeScript and MIT-licensed (free to use in any project).

Copy-paste prompts

Prompt 1

Using WXT, scaffold a new Chrome extension that adds a floating button to every webpage. Show me the folder structure and the entry file I need to create.

Prompt 2

I'm building a browser extension with WXT and React. How do I add a content script that reads the current page title and sends it to my popup component?

Prompt 3

Help me set up WXT's publishing workflow to automatically deploy my extension to the Chrome Web Store after a successful build.

Prompt 4

Using WXT with Vue 3, build a browser extension that lets users highlight text on any webpage and save those snippets to local storage.

Open on GitHub → Explain another repo

← wxt-dev on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.