# plasmicapp/plasmic architecture

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

- Interactive diagram: https://gitdiagram.com/plasmicapp/plasmic
- Repository: https://github.com/plasmicapp/plasmic

## Overview

Plasmic is an open-source visual builder for designing stateful websites and applications, integrating them with existing codebases, and publishing or exporting the results. The documented user journey runs from visual authoring and component/data integration through generated or runtime-rendered pages to deployment. The repository tree includes CLI, auth packages, and framework starter outputs; sampled source also shows Studio-side server-query execution and a small amount of UI state handling. Most platform subsystems are unsampled, so their links rely on README descriptions rather than inspected implementation.

Main entry points: [`platform/wab/src/wab/client`](https://github.com/plasmicapp/plasmic/tree/master/platform/wab/src/wab/client) (Plasmic Studio), [`platform/wab/src/wab/client/components/sidebar-tabs/ServerQuery/useServerQueryOp.ts`](https://github.com/plasmicapp/plasmic/blob/master/platform/wab/src/wab/client/components/sidebar-tabs/ServerQuery/useServerQueryOp.ts) (Data and queries), [`packages/create-plasmic-app/cpa-out/nextjs-app-codegen-ts/components`](https://github.com/plasmicapp/plasmic/tree/master/packages/create-plasmic-app/cpa-out/nextjs-app-codegen-ts/components) (Registered components), [`packages/create-plasmic-app/cpa-out/nextjs-app-codegen-ts/components/plasmic/create_plasmic_app`](https://github.com/plasmicapp/plasmic/tree/master/packages/create-plasmic-app/cpa-out/nextjs-app-codegen-ts/components/plasmic/create_plasmic_app) (Code generation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_studio["Visual authoring"]
  node_studio_ui["Plasmic Studio"]
  node_design["Design and interactions"]
  node_collaboration["Collaboration and branching"]
  node_data_queries["Data and queries"]
  node_local_prefs[("Studio preferences<br/>[LocalStorageKey.ts]")]
end

subgraph group_integration["Code integration"]
  node_component_registry["Registered components"]
  node_figma_import["Design import"]
  node_codegen["Code generation"]
end

subgraph group_runtime["Rendering runtime"]
  node_loader["Framework loader"]
  node_generated_app["Generated app"]
end

subgraph group_operations["Project operations"]
  node_cli["Plasmic CLI"]
  node_auth["Auth packages<br/>[api.ts]"]
end

node_creator(("Creator"))
node_backend{{"Backend services"}}
node_codebase["App codebase"]
node_figma["Figma designs"]
node_cdn{{"Plasmic CDN"}}
node_hosting{{"Hosting provider"}}

node_creator -->|"authors in"| node_studio_ui
node_studio_ui -->|"edits"| node_design
node_studio_ui -->|"collaborates through"| node_collaboration
node_studio_ui -->|"executes"| node_data_queries
node_data_queries -->|"fetches data"| node_backend
node_codebase -->|"registers components"| node_component_registry
node_component_registry -->|"makes available"| node_studio_ui
node_figma -.->|"provides designs"| node_figma_import
node_figma_import -.->|"imports designs"| node_studio_ui
node_studio_ui -->|"generates code"| node_codegen
node_creator -->|"runs project commands"| node_cli
node_cli -->|"syncs project data"| node_cdn
node_creator -->|"uses authentication"| node_auth
node_codebase -->|"integrates loader"| node_loader
node_loader -->|"fetches published content"| node_cdn
node_codegen -->|"renders generated pages"| node_generated_app
node_generated_app -->|"deploys to"| node_hosting
node_studio_ui -->|"stores preferences"| node_local_prefs

click node_studio_ui "https://github.com/plasmicapp/plasmic/tree/master/platform/wab/src/wab/client"
click node_design "https://github.com/plasmicapp/plasmic/tree/master/platform/wab/src/wab/client"
click node_collaboration "https://github.com/plasmicapp/plasmic/tree/master/platform/wab/src/wab/client"
click node_data_queries "https://github.com/plasmicapp/plasmic/blob/master/platform/wab/src/wab/client/components/sidebar-tabs/ServerQuery/useServerQueryOp.ts"
click node_component_registry "https://github.com/plasmicapp/plasmic/tree/master/packages/create-plasmic-app/cpa-out/nextjs-app-codegen-ts/components"
click node_figma_import "https://github.com/plasmicapp/plasmic/tree/master/platform/wab/src/wab/client"
click node_codegen "https://github.com/plasmicapp/plasmic/tree/master/packages/create-plasmic-app/cpa-out/nextjs-app-codegen-ts/components/plasmic/create_plasmic_app"
click node_cli "https://github.com/plasmicapp/plasmic/tree/master/packages/cli/src/actions"
click node_auth "https://github.com/plasmicapp/plasmic/blob/master/packages/auth-api/src/api.ts"
click node_loader "https://github.com/plasmicapp/plasmic/tree/master/packages/create-plasmic-app/cpa-out/nextjs-app-loader-ts"
click node_generated_app "https://github.com/plasmicapp/plasmic/tree/master/packages/create-plasmic-app/cpa-out/nextjs-app-codegen-ts/app"
click node_local_prefs "https://github.com/plasmicapp/plasmic/blob/master/platform/wab/src/wab/client/LocalStorageKey.ts"

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_studio_ui,node_design,node_collaboration,node_data_queries,node_local_prefs toneBlue
class node_component_registry,node_figma_import,node_codegen toneAmber
class node_loader,node_generated_app toneMint
class node_cli,node_auth toneRose
class node_creator,node_backend,node_codebase,node_figma,node_cdn,node_hosting toneIndigo
```

## Components

### Visual authoring

- [Plasmic Studio](https://github.com/plasmicapp/plasmic/tree/master/platform/wab/src/wab/client): `platform/wab/src/wab/client`
- [Design and interactions](https://github.com/plasmicapp/plasmic/tree/master/platform/wab/src/wab/client): `platform/wab/src/wab/client`
- [Collaboration and branching](https://github.com/plasmicapp/plasmic/tree/master/platform/wab/src/wab/client): `platform/wab/src/wab/client`
- [Data and queries](https://github.com/plasmicapp/plasmic/blob/master/platform/wab/src/wab/client/components/sidebar-tabs/ServerQuery/useServerQueryOp.ts): `platform/wab/src/wab/client/components/sidebar-tabs/ServerQuery/useServerQueryOp.ts`
- [Studio preferences](https://github.com/plasmicapp/plasmic/blob/master/platform/wab/src/wab/client/LocalStorageKey.ts): `platform/wab/src/wab/client/LocalStorageKey.ts`

### Code integration

- [Registered components](https://github.com/plasmicapp/plasmic/tree/master/packages/create-plasmic-app/cpa-out/nextjs-app-codegen-ts/components): `packages/create-plasmic-app/cpa-out/nextjs-app-codegen-ts/components`
- [Design import](https://github.com/plasmicapp/plasmic/tree/master/platform/wab/src/wab/client): `platform/wab/src/wab/client`
- [Code generation](https://github.com/plasmicapp/plasmic/tree/master/packages/create-plasmic-app/cpa-out/nextjs-app-codegen-ts/components/plasmic/create_plasmic_app): `packages/create-plasmic-app/cpa-out/nextjs-app-codegen-ts/components/plasmic/create_plasmic_app`

### Rendering runtime

- [Framework loader](https://github.com/plasmicapp/plasmic/tree/master/packages/create-plasmic-app/cpa-out/nextjs-app-loader-ts): `packages/create-plasmic-app/cpa-out/nextjs-app-loader-ts`
- [Generated app](https://github.com/plasmicapp/plasmic/tree/master/packages/create-plasmic-app/cpa-out/nextjs-app-codegen-ts/app): `packages/create-plasmic-app/cpa-out/nextjs-app-codegen-ts/app`

### Project operations

- [Plasmic CLI](https://github.com/plasmicapp/plasmic/tree/master/packages/cli/src/actions): `packages/cli/src/actions`
- [Auth packages](https://github.com/plasmicapp/plasmic/blob/master/packages/auth-api/src/api.ts): `packages/auth-api/src/api.ts`

### Other components

- **Creator**
- **Backend services**
- **App codebase**
- **Figma designs**
- **Plasmic CDN**
- **Hosting provider**

## Connections

- Creator → Plasmic Studio: authors in
- Plasmic Studio → Design and interactions: edits
- Plasmic Studio → Collaboration and branching: collaborates through
- Plasmic Studio → Data and queries: executes
- Data and queries → Backend services: fetches data
- App codebase → Registered components: registers components
- Registered components → Plasmic Studio: makes available
- Figma designs → Design import: provides designs
- Design import → Plasmic Studio: imports designs
- Plasmic Studio → Code generation: generates code
- Creator → Plasmic CLI: runs project commands
- Plasmic CLI → Plasmic CDN: syncs project data
- Creator → Auth packages: uses authentication
- App codebase → Framework loader: integrates loader
- Framework loader → Plasmic CDN: fetches published content
- Code generation → Generated app: renders generated pages
- Generated app → Hosting provider: deploys to
- Plasmic Studio → Studio preferences: stores preferences