How plasmicapp/plasmic works
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: client Plasmic Studio · useServerQueryOp.ts Data and queries · components Registered components · create_plasmic_app Code generation
Components 18
Visual authoring
- Plasmic Studio
platform/wab/src/wab/client - Design and interactions
platform/wab/src/wab/client - Collaboration and branching
platform/wab/src/wab/client - Data and queries
platform/wab/src/wab/client/components/sidebar-tabs/ServerQuery/useServerQueryOp.ts - Studio preferences
platform/wab/src/wab/client/LocalStorageKey.ts
Code integration
- Registered components
packages/create-plasmic-app/cpa-out/nextjs-app-codegen-ts/components - Design import
platform/wab/src/wab/client - Code generation
packages/create-plasmic-app/cpa-out/nextjs-app-codegen-ts/components/plasmic/create_plasmic_app
Rendering runtime
- Framework loader
packages/create-plasmic-app/cpa-out/nextjs-app-loader-ts - Generated app
packages/create-plasmic-app/cpa-out/nextjs-app-codegen-ts/app
Project operations
- Plasmic CLI
packages/cli/src/actions - Auth packages
packages/auth-api/src/api.ts
Other components
- Creator
- Backend services
- App codebase
- Figma designs
- Plasmic CDN
- Hosting provider
Connections 18
- 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