Implementation:PrefectHQ Prefect UI V2 Package Manifest

Knowledge Sources	PrefectHQ_Prefect npm Docs
Domains	Frontend, Configuration, Build_System
Last Updated	2026-02-09 22:00 GMT

Overview

Package manifest defining the ui-v2 React application's metadata, npm scripts, runtime dependencies, and development toolchain.

Description

The ui-v2/package.json is the central manifest for the Prefect ui-v2 frontend application. It defines the project as a private ES module (`"type": "module"`) requiring Node.js >=22.13.0. The file declares npm scripts for the complete development lifecycle: `dev` (Vite dev server), `build` (TypeScript + Vite production build), `test` (Vitest), `test:e2e` (Playwright), `lint` (ESLint), `check` (Biome), `storybook`, and `service-sync` (OpenAPI client generation).

Runtime dependencies include React 19, TanStack ecosystem (Query, Router, Table, Virtual), Radix UI primitives (~25 components), Recharts for charting, CodeMirror for code editing, react-hook-form with Zod validation, date-fns for date utilities, and the @prefecthq/graphs library. Dev dependencies include Vite 7, Vitest 4, Playwright, Storybook 10, Biome, Tailwind CSS 4, and TypeScript 5.9.

Usage

Reference this file when modifying the ui-v2 build process, adding new frontend dependencies, or understanding the available npm scripts for development, testing, and deployment.

Code Reference

Source Location

• Repository: PrefectHQ_Prefect
• File: ui-v2/package.json
• Lines: 1-149

Signature

{
  "name": "prefect-ui",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "engines": { "node": ">=22.13.0 <23" },
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "test": "vitest",
    "test:e2e": "playwright test",
    "lint": "eslint .",
    "check": "biome check --write",
    "storybook": "storybook dev -p 6006",
    "service-sync": "uv run ../scripts/generate_oss_openapi_schema.py && npx openapi-typescript oss_schema.json -o src/api/prefect.ts && rm oss_schema.json"
  },
  "dependencies": {
    "react": "19.2.4",
    "@tanstack/react-query": "^5.90.20",
    "@tanstack/react-router": "^1.159.3",
    "recharts": "^3.5.1",
    "zod": "^3.25.76"
  },
  "devDependencies": {
    "vite": "^7.3.1",
    "vitest": "^4.0.16",
    "typescript": "^5.9.3",
    "@playwright/test": "^1.58.2"
  }
}

Import

# Not importable; consumed by npm
cd ui-v2
npm install   # Install all dependencies
npm run dev   # Start development server
npm run build # Production build

I/O Contract

Inputs

Name	Type	Required	Description
dependencies	object	Yes	Runtime package requirements (~45 packages)
devDependencies	object	Yes	Build/test tooling (~30 packages)
scripts	object	Yes	npm script commands for dev lifecycle
engines.node	string	Yes	Required Node.js version (>=22.13.0)

Outputs

Name	Type	Description
npm run dev	HTTP server	Vite development server with HMR
npm run build	static files	Production-optimized static assets
npm run test	test results	Vitest unit/integration test output
npm run test:e2e	test results	Playwright end-to-end test output

Usage Examples

Development Workflow

cd ui-v2

# Install dependencies
npm install

# Start development server with hot reload
npm run dev

# Run unit tests
npm run test

# Run end-to-end tests
npm run test:e2e

# Lint and format code
npm run lint:fix
npm run check

# Generate TypeScript API client from OpenAPI schema
npm run service-sync

# Launch Storybook for component development
npm run storybook

Production Build

cd ui-v2

# Type-check and build for production
npm run build

# Analyze bundle size
npm run analyze

# Preview production build locally
npm run preview