How ancyloce/anvilkit-studio works
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: page.tsx Studio editor · route.ts Page APIs · page-api.ts Page persistence · publish-pipeline.ts Publish pipeline
Components 24
Studio product
- Studio editor
apps/studio/app/editor/page.tsx - Canvas editor
apps/studio/app/studio/canvas/[pageId]/page.tsx - Page APIs
apps/studio/app/api/pages/route.ts - Page persistence
apps/studio/lib/page-storage/page-api.ts - SQLite adapter
apps/studio/lib/page-storage/sqlite-page-storage-adapter.ts - File adapter
apps/studio/lib/page-storage/filesystem-page-storage-adapter.ts - Published renderer
apps/studio/lib/published-render.tsx - Render route
apps/studio/app/[...slug]/page.tsx - AI image routes
apps/studio/app/api/canvas/ai/text-to-image/route.ts - Replicate provider
apps/studio/app/api/canvas/ai/_lib/replicate.ts - Agent preparation
apps/studio/app/api/agent/preparations/route.ts - Analytics
apps/studio/lib/analytics/analytics-api.ts - Unsplash proxy
apps/studio/app/api/unsplash/[...path]/route.ts
Editor runtime
- Studio runtime
packages/runtime/core/src/react/components/Studio.tsx - Publish pipeline
packages/runtime/core/src/react/components/publish-pipeline.ts - Plugin lifecycle
packages/runtime/core/src/runtime/lifecycle-manager.ts
Shared foundation
- Contracts and IR
packages/foundation/contracts/src/index.ts - Page schema
packages/foundation/schema/src/index.ts - Page validation
packages/foundation/validator/src/index.ts
Collaboration
- Collaboration UI
apps/studio/app/collab/page.tsx - Collaboration config
apps/studio/app/api/collab/config/route.ts - Collaboration relay
apps/collab/server.mjs
Other components
- Page author
- Page visitor
Connections 20
- 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