# Frameworks

Domscribe provides first-class integrations for popular frontend frameworks. Each integration includes build-time AST transformation for stable `data-ds` attributes and runtime adapters for deep context capture (props, state, component trees).

## Supported Frameworks

| Framework | Versions | Package | Guide |
| --- | --- | --- | --- |
| React | 18 - 19 | `@domscribe/react` | [React Guide](/content/docs/frameworks/react/index.html) |
| Vue | 3+ | `@domscribe/vue` | [Vue Guide](/content/docs/frameworks/vue/index.html) |
| Next.js | 15 - 16 | `@domscribe/next` | [Next.js Guide](/content/docs/frameworks/nextjs/index.html) |
| Nuxt | 3+ | `@domscribe/nuxt` | [Nuxt Guide](/content/docs/frameworks/nuxt/index.html) |

## Bundler Support

All framework integrations work with the following bundlers:

| Bundler | Versions |
| --- | --- |
| Vite | 5 - 7 |
| Webpack | 5 |
| Turbopack | Latest (via Next.js) |

The Next.js integration supports both Webpack and Turbopack automatically through the `withDomscribe()` config wrapper. React and Vue integrations ship separate Vite and Webpack plugin exports.

## Base Transform Package

If you are using a framework that does not have a dedicated integration, you can use `@domscribe/transform` directly. This gives you DOM-to-source mapping via `data-ds` attributes but without runtime context capture (no props or state extraction).

```bash
npm install -D @domscribe/transform
```

See the [React](/content/docs/frameworks/react/index.html) or [Vue](/content/docs/frameworks/vue/index.html) guides for examples of Vite and Webpack plugin configuration patterns that apply to the base transform package as well.

## Custom Adapters

Domscribe's runtime is built on an extensible `FrameworkAdapter` interface. You can add support for any component-based framework -- Svelte, Angular, Solid, Lit, or your own.

See the [Custom Adapters](/content/docs/frameworks/custom-adapters/index.html) guide for the full interface specification, a minimal example, and implementation guidelines.