# ancyloce/anvilkit-studio architecture

> Architecture diagram of the GitHub repository ancyloce/anvilkit-studio, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ancyloce/anvilkit-studio
- Repository: https://github.com/ancyloce/anvilkit-studio
- Video tour (about a minute): https://gitdiagram.com/ancyloce/anvilkit-studio/video

## Overview

AnvilKit Studio is a frontend SDK and reference product for authoring, publishing, and rendering web pages, with a Puck-native editor runtime and extension ecosystem. The principal workflow is to edit page content, save or publish it through the page APIs, persist page records, and render published pages. Separate capabilities include canvas editing and AI image tools, collaboration, analytics, and page-generation preparation. The README documents broader extension and package capabilities not represented in the supplied tree; links to unsampled implementations are therefore limited to supported app entry points.

Main entry points: [`apps/studio/app/editor/page.tsx`](https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/app/editor/page.tsx) (Studio editor), [`apps/studio/app/api/pages/route.ts`](https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/app/api/pages/route.ts) (Page APIs), [`apps/studio/lib/page-storage/page-api.ts`](https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/lib/page-storage/page-api.ts) (Page persistence), [`packages/runtime/core/src/react/components/publish-pipeline.ts`](https://github.com/ancyloce/anvilkit-studio/blob/main/packages/runtime/core/src/react/components/publish-pipeline.ts) (Publish pipeline)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_product["Studio product"]
  node_editor["Studio editor<br/>[page.tsx]"]
  node_canvas["Canvas editor<br/>[page.tsx]"]
  node_page_api["Page APIs<br/>[route.ts]"]
  node_storage["Page persistence<br/>[page-api.ts]"]
  node_sqlite[("SQLite adapter")]
  node_filesystem[("File adapter")]
  node_published["Published renderer"]
  node_render_route["Render route<br/>[page.tsx]"]
  node_ai_images["AI image routes<br/>[route.ts]"]
  node_replicate["Replicate provider<br/>[replicate.ts]"]
  node_preparation["Agent preparation<br/>[route.ts]"]
  node_analytics["Analytics<br/>[analytics-api.ts]"]
  node_unsplash["Unsplash proxy<br/>[route.ts]"]
end

subgraph group_runtime["Editor runtime"]
  node_core["Studio runtime<br/>[Studio.tsx]"]
  node_publish["Publish pipeline"]
  node_lifecycle["Plugin lifecycle"]
end

subgraph group_foundation["Shared foundation"]
  node_contracts["Contracts and IR<br/>[index.ts]"]
  node_schema["Page schema<br/>[index.ts]"]
  node_validator["Page validation<br/>[index.ts]"]
end

subgraph group_collaboration["Collaboration"]
  node_collab_ui["Collaboration UI<br/>[page.tsx]"]
  node_collab_config["Collaboration config<br/>[route.ts]"]
  node_relay["Collaboration relay<br/>[server.mjs]"]
end

node_author(("Page author"))
node_visitor(("Page visitor"))

node_author -->|"authors in"| node_editor
node_editor -->|"uses runtime"| node_core
node_editor -->|"requests pages"| node_page_api
node_page_api -->|"delegates page data"| node_storage
node_storage -->|"persists via"| node_sqlite
node_storage -.->|"persists via"| node_filesystem
node_page_api -->|"validates payload"| node_validator
node_page_api -->|"uses page schema"| node_schema
node_publish -->|"emits hooks"| node_lifecycle
node_publish -->|"tracks success"| node_analytics
node_render_route -->|"renders pages"| node_published
node_published -->|"reads published data"| node_storage
node_canvas -->|"uses runtime"| node_core
node_editor -.->|"requests image tools"| node_ai_images
node_ai_images -->|"calls provider"| node_replicate
node_editor -.->|"requests preparation"| node_preparation
node_editor -.->|"requests assets"| node_unsplash
node_collab_ui -->|"loads config"| node_collab_config
node_collab_ui -.->|"collaborates through"| node_relay
node_visitor -->|"visits page"| node_render_route

click node_editor "https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/app/editor/page.tsx"
click node_canvas "https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/app/studio/canvas/%5BpageId%5D/page.tsx"
click node_page_api "https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/app/api/pages/route.ts"
click node_storage "https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/lib/page-storage/page-api.ts"
click node_sqlite "https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/lib/page-storage/sqlite-page-storage-adapter.ts"
click node_filesystem "https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/lib/page-storage/filesystem-page-storage-adapter.ts"
click node_published "https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/lib/published-render.tsx"
click node_render_route "https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/app/%5B...slug%5D/page.tsx"
click node_ai_images "https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/app/api/canvas/ai/text-to-image/route.ts"
click node_replicate "https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/app/api/canvas/ai/_lib/replicate.ts"
click node_preparation "https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/app/api/agent/preparations/route.ts"
click node_analytics "https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/lib/analytics/analytics-api.ts"
click node_unsplash "https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/app/api/unsplash/%5B...path%5D/route.ts"
click node_core "https://github.com/ancyloce/anvilkit-studio/blob/main/packages/runtime/core/src/react/components/Studio.tsx"
click node_publish "https://github.com/ancyloce/anvilkit-studio/blob/main/packages/runtime/core/src/react/components/publish-pipeline.ts"
click node_lifecycle "https://github.com/ancyloce/anvilkit-studio/blob/main/packages/runtime/core/src/runtime/lifecycle-manager.ts"
click node_contracts "https://github.com/ancyloce/anvilkit-studio/blob/main/packages/foundation/contracts/src/index.ts"
click node_schema "https://github.com/ancyloce/anvilkit-studio/blob/main/packages/foundation/schema/src/index.ts"
click node_validator "https://github.com/ancyloce/anvilkit-studio/blob/main/packages/foundation/validator/src/index.ts"
click node_collab_ui "https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/app/collab/page.tsx"
click node_collab_config "https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/app/api/collab/config/route.ts"
click node_relay "https://github.com/ancyloce/anvilkit-studio/blob/main/apps/collab/server.mjs"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_editor,node_canvas,node_page_api,node_storage,node_sqlite,node_filesystem,node_published,node_render_route,node_ai_images,node_replicate,node_preparation,node_analytics,node_unsplash toneBlue
class node_core,node_publish,node_lifecycle toneAmber
class node_contracts,node_schema,node_validator toneMint
class node_collab_ui,node_collab_config,node_relay toneRose
class node_author,node_visitor toneIndigo
```

## Components

### Studio product

- [Studio editor](https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/app/editor/page.tsx): `apps/studio/app/editor/page.tsx`
- [Canvas editor](https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/app/studio/canvas/%5BpageId%5D/page.tsx): `apps/studio/app/studio/canvas/[pageId]/page.tsx`
- [Page APIs](https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/app/api/pages/route.ts): `apps/studio/app/api/pages/route.ts`
- [Page persistence](https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/lib/page-storage/page-api.ts): `apps/studio/lib/page-storage/page-api.ts`
- [SQLite adapter](https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/lib/page-storage/sqlite-page-storage-adapter.ts): `apps/studio/lib/page-storage/sqlite-page-storage-adapter.ts`
- [File adapter](https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/lib/page-storage/filesystem-page-storage-adapter.ts): `apps/studio/lib/page-storage/filesystem-page-storage-adapter.ts`
- [Published renderer](https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/lib/published-render.tsx): `apps/studio/lib/published-render.tsx`
- [Render route](https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/app/%5B...slug%5D/page.tsx): `apps/studio/app/[...slug]/page.tsx`
- [AI image routes](https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/app/api/canvas/ai/text-to-image/route.ts): `apps/studio/app/api/canvas/ai/text-to-image/route.ts`
- [Replicate provider](https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/app/api/canvas/ai/_lib/replicate.ts): `apps/studio/app/api/canvas/ai/_lib/replicate.ts`
- [Agent preparation](https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/app/api/agent/preparations/route.ts): `apps/studio/app/api/agent/preparations/route.ts`
- [Analytics](https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/lib/analytics/analytics-api.ts): `apps/studio/lib/analytics/analytics-api.ts`
- [Unsplash proxy](https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/app/api/unsplash/%5B...path%5D/route.ts): `apps/studio/app/api/unsplash/[...path]/route.ts`

### Editor runtime

- [Studio runtime](https://github.com/ancyloce/anvilkit-studio/blob/main/packages/runtime/core/src/react/components/Studio.tsx): `packages/runtime/core/src/react/components/Studio.tsx`
- [Publish pipeline](https://github.com/ancyloce/anvilkit-studio/blob/main/packages/runtime/core/src/react/components/publish-pipeline.ts): `packages/runtime/core/src/react/components/publish-pipeline.ts`
- [Plugin lifecycle](https://github.com/ancyloce/anvilkit-studio/blob/main/packages/runtime/core/src/runtime/lifecycle-manager.ts): `packages/runtime/core/src/runtime/lifecycle-manager.ts`

### Shared foundation

- [Contracts and IR](https://github.com/ancyloce/anvilkit-studio/blob/main/packages/foundation/contracts/src/index.ts): `packages/foundation/contracts/src/index.ts`
- [Page schema](https://github.com/ancyloce/anvilkit-studio/blob/main/packages/foundation/schema/src/index.ts): `packages/foundation/schema/src/index.ts`
- [Page validation](https://github.com/ancyloce/anvilkit-studio/blob/main/packages/foundation/validator/src/index.ts): `packages/foundation/validator/src/index.ts`

### Collaboration

- [Collaboration UI](https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/app/collab/page.tsx): `apps/studio/app/collab/page.tsx`
- [Collaboration config](https://github.com/ancyloce/anvilkit-studio/blob/main/apps/studio/app/api/collab/config/route.ts): `apps/studio/app/api/collab/config/route.ts`
- [Collaboration relay](https://github.com/ancyloce/anvilkit-studio/blob/main/apps/collab/server.mjs): `apps/collab/server.mjs`

### Other components

- **Page author**
- **Page visitor**

## Connections

- Page author → Studio editor: authors in
- Studio editor → Studio runtime: uses runtime
- Studio editor → Page APIs: requests pages
- Page APIs → Page persistence: delegates page data
- Page persistence → SQLite adapter: persists via
- Page persistence → File adapter: persists via
- Page APIs → Page validation: validates payload
- Page APIs → Page schema: uses page schema
- Publish pipeline → Plugin lifecycle: emits hooks
- Publish pipeline → Analytics: tracks success
- Render route → Published renderer: renders pages
- Published renderer → Page persistence: reads published data
- Canvas editor → Studio runtime: uses runtime
- Studio editor → AI image routes: requests image tools
- AI image routes → Replicate provider: calls provider
- Studio editor → Agent preparation: requests preparation
- Studio editor → Unsplash proxy: requests assets
- Collaboration UI → Collaboration config: loads config
- Collaboration UI → Collaboration relay: collaborates through
- Page visitor → Render route: visits page