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

# Compatibility matrix

> One page pairing what Extension.js supports: browsers by operating system, frameworks by dev update model, and CSS tooling by what installs automatically.

This page pairs the support claims that otherwise live on separate pages: which browsers run on which operating systems, what "reload" means per framework, and which CSS tools need dependencies installed. Each table links to the page that covers setup in depth.

## Browsers × operating systems

All Chromium-based and Gecko-based targets work on Windows, macOS, and Linux. Safari is the exception: it is an alpha target that requires macOS with full Xcode.

| Target                                           | Windows | macOS | Linux | Status                                             |
| :----------------------------------------------- | :-----: | :---: | :---: | :------------------------------------------------- |
| Google Chrome                                    |    ✅    |   ✅   |   ✅   | Supported                                          |
| Microsoft Edge                                   |    ✅    |   ✅   |   ✅   | Supported                                          |
| Mozilla Firefox                                  |    ✅    |   ✅   |   ✅   | Supported                                          |
| Chromium forks (Brave, Opera, Vivaldi, Yandex)   |    ✅    |   ✅   |   ✅   | Supported                                          |
| Gecko forks (Waterfox, LibreWolf)                |    ✅    |   ✅   |   ✅   | Supported                                          |
| `chromium-based` / `gecko-based` (custom binary) |    ✅    |   ✅   |   ✅   | Supported                                          |
| Apple Safari                                     |    ❌    |   🧪  |   ❌   | Alpha — `build`/`dev` only, needs Xcode, no reload |

See [Browsers available](/docs/browsers/browsers-available) for target names and flags, and [Building Safari extensions](/docs/browsers/safari) for the Safari workflow and limitations.

## Frameworks × dev update model

Every framework gets automatic detection, bundling, and dev-time updates. What differs is the update model: whether an edit hot-swaps code in place or reloads the surface. See [Reload and HMR](/docs/features/reload-and-hmr) for the underlying tiers.

| Framework                                                            | Update model in dev   | Component state on edit | Notes                                                                                                    |
| :------------------------------------------------------------------- | :-------------------- | :---------------------- | :------------------------------------------------------------------------------------------------------- |
| [React](/docs/languages-and-frameworks/react)                        | Fast refresh          | Preserved               | `react-refresh` toolchain installed automatically on detection.                                          |
| [Preact](/docs/languages-and-frameworks/preact)                      | Live reload           | Resets                  | Fast refresh temporarily disabled (upstream plugin incompatibility); `react` aliases to `preact/compat`. |
| [Vue](/docs/languages-and-frameworks/vue)                            | Component remount     | Resets                  | Single-file components rebuild and remount on change.                                                    |
| [Svelte](/docs/languages-and-frameworks/svelte)                      | Hot component updates | Resets                  | `svelte-loader` hot reload; edited components update without a full page reload.                         |
| [TypeScript](/docs/languages-and-frameworks/typescript) / vanilla JS | Per-surface reload    | —                       | Background, content, and page scripts follow the standard reload tiers.                                  |
| [WebAssembly](/docs/languages-and-frameworks/webassembly)            | Per-surface reload    | —                       | `.wasm` assets rebuild with the bundle.                                                                  |

## CSS tooling × what installs automatically

Plain CSS and CSS Modules are built in. Preprocessors resolve their toolchain on first detection: Extension.js installs the missing packages and asks for a restart. Tailwind rides through the PostCSS pipeline and is installed by you.

| CSS tech                                                                   | Works out of the box | Installed automatically on detection     |
| :------------------------------------------------------------------------- | :------------------: | :--------------------------------------- |
| CSS                                                                        |           ✅          | Nothing needed                           |
| [CSS Modules](/docs/languages-and-frameworks/css-modules) (`*.module.css`) |           ✅          | Nothing needed                           |
| [Sass/SCSS](/docs/languages-and-frameworks/sass)                           |     On detection     | Sass loader + PostCSS toolchain          |
| [Less](/docs/languages-and-frameworks/less)                                |     On detection     | `less` + `less-loader`                   |
| [PostCSS](/docs/integrations/postcss)                                      |     With a config    | `postcss` + `postcss-loader`             |
| [Tailwind CSS](/docs/integrations/tailwindcss)                             |   After you install  | You add `tailwindcss`; wired via PostCSS |

## Package managers

`npm`, `pnpm`, `yarn`, `bun`, and `deno` are all supported for `create`, `dev`, and `build`. Deno projects scaffold a `deno.jsonc` instead of a `package.json`; the toolchain is manifest-agnostic. See [Create your first extension](/docs/getting-started/create-your-first-extension) for the Deno-specific notes.