VisionKit

VisionKit is a production-grade Mobile Vision SDK ecosystem for React, Next.js, TypeScript, and mobile browsers.

Architecture

The workspace follows a pnpm monorepo model:

• apps/web: public product website, docs previews, dashboard, playground, and benchmark surfaces.
• apps/docs: docs application boundary for dedicated publishing.
• apps/playground: isolated SDK playground application boundary.
• apps/dashboard: enterprise observability application boundary.
• apps/benchmark: benchmark runner and reporting application boundary.
• packages/core: camera, permission, capability, and processing primitives.
• packages/react: React hooks and client runtime bindings.
• packages/next: Next.js integration helpers.
• packages/camera: camera session orchestration.
• packages/qr, packages/barcode, packages/ocr: scan processors.
• packages/overlays: overlay geometry and scan-region primitives.
• packages/workers: worker protocol and scheduling primitives.
• packages/ui, packages/themes: design system tokens and primitives.
• packages/docs-system: docs metadata, navigation, and examples.
• packages/analytics: performance event schemas.
• packages/shared: shared SDK utilities.

Design System

The interface is monochrome-first, typography-led, and based on a shadow-as-border system:

• rgba(0,0,0,0.08) 0 0 0 1px for borders.
• Layered ambient elevation for premium depth.
• Geist Sans and Geist Mono through next/font/google.
• Technical labels use uppercase mono text.
• Large headings use compressed negative tracking.

Data Flow

The web app follows:

API -> lib/api -> Page -> Section -> UI

Pages initiate data reads and pass promises into async sections behind Suspense boundaries. UI components remain stateless and presentational unless browser APIs, interaction, or animation are required.