Framework Support

Screenbook works with any frontend framework. This page shows the current support status for auto-generating screen.meta.ts files from your routes.

File-based Routing

Frameworks with file-based routing are fully supported. Screenbook can automatically detect routes and generate screen.meta.ts files.

Framework	Status	Auto-generate
Next.js (App Router)	✅ Supported	✅
Next.js (Pages Router)	✅ Supported	✅
Nuxt	✅ Supported	✅
Remix	✅ Supported	✅
Astro	✅ Supported	✅
SvelteKit	✅ Supported	✅
SolidStart	✅ Supported	✅
QwikCity	✅ Supported	✅
TanStack Start	✅ Supported	✅

How it works

For file-based routing, Screenbook uses the routesPattern configuration to find route files:

import { defineConfig } from "screenbook"

export default defineConfig({
  // Next.js App Router
  routesPattern: "src/app/**/page.tsx",

  // Nuxt
  // routesPattern: "pages/**/*.vue",

  // Remix
  // routesPattern: "app/routes/**/*.tsx",
})

Then run screenbook generate to create screen.meta.ts files automatically.

Config-based Routing

Frameworks with config-based routing (routes defined in a single file) are planned for future releases.

Framework	Status	Auto-generate
React Router	✅ Supported	✅
Vue Router	✅ Supported	✅
TanStack Router	✅ Supported	✅
Solid Router	✅ Supported	✅
Angular Router	✅ Supported	✅

Manual Setup

Even without auto-generate support, you can manually create screen.meta.ts files for any framework:

import { defineScreen } from "screenbook"

export const screen = defineScreen({
  id: "dashboard",
  title: "Dashboard",
  route: "/dashboard",
  owner: ["platform"],
  tags: ["analytics"],
})

Configure Screenbook to find your manually created files:

import { defineConfig } from "screenbook"

export default defineConfig({
  metaPattern: "src/screens/**/screen.meta.ts",
  // routesPattern is optional for manual setup
})

Framework Examples

See working examples for supported frameworks:

Framework Examples Integration examples for Next.js, Vite + React, and more

Request a Framework

Don’t see your framework? Open an issue to request support!