Plasmic

Plasmic is an open-source visual builder for the web that eliminates the usual ceiling imposed by low-code tools. Instead of forcing you into a walled garden, Plasmic integrates directly with your existing React codebase — you register your own components, and non-developers drag and drop them to build fully production-ready pages and interfaces without touching code.

At its core, Plasmic bridges three worlds that have historically lived apart: design tools like Figma, content management systems like Contentful, and application builders like Retool. A marketing team can build a landing page in Plasmic Studio, a developer can wire it to a Supabase backend, and the result ships as a performant Next.js or Gatsby page — all without any friction between the disciplines.

The repository is a large TypeScript monorepo with Lerna and Yarn workspaces containing the full Plasmic Studio web application (AGPL-licensed), all client SDKs and loader packages (MIT-licensed), an extensive component store of integrations for third-party services, and a rich set of examples covering A/B testing, dynamic forms, headless commerce, and more. It powers both the managed cloud platform at plasmic.app and fully self-hosted deployments.

What You Get

• Codebase Integration - Register any React component via PLASMIC.registerComponent() to make it drag-and-droppable in Plasmic Studio, keeping your design system and business logic intact.
• Headless CMS Page Builder - Let marketing and content teams build and publish new pages or sections into your Next.js or Gatsby app through PlasmicComponent without engineering involvement.
• Figma Import - Translate Figma designs directly into responsive DOM/CSS and React component trees, bypassing manual handoff and preserving vector layer semantics.
• Arbitrary Data Source Connectors - Connect to HTTP REST APIs, GraphQL endpoints, Supabase, Contentful, Shopify, Airtable, and many others to power dynamic content without custom integration code.
• Component Variants and Slots - Define composable components with typed prop slots and named variants so non-developers assemble pages from approved building blocks with full design flexibility.
• Multiplayer Collaboration and Branching - Multiple editors work simultaneously in Plasmic Studio with branching for parallel work, merge workflows, and cross-project component imports for shared design systems.
• Fine-Grained RBAC - Assign viewer, content creator, designer, or developer roles at team, workspace, or project level so editing permissions match each persona’s responsibilities.
• Code Generation - Export visual designs as production-ready React code that can be extended, versioned, and maintained just like handwritten components — used by Plasmic Studio itself.
• Incremental Static Regeneration Support - Trigger Next.js ISR webhooks on publish so content updates go live without full site rebuilds, keeping page performance high.
• End-User Auth and Permissions - Build logged-in applications with user-scoped data visibility and RBAC for end users of the apps you create.
• SSO and Domain Capture - Restrict team access via SAML SSO and domain-based email capture for enterprise security compliance.
• On-Premise and Self-Hosted Deployment - Run the full Plasmic Studio platform on your own infrastructure via Docker Compose and PostgreSQL, with no dependency on managed cloud services.

Common Use Cases

• Marketing page management - Marketing teams update landing pages, campaign microsites, and product feature pages in Plasmic Studio while engineers focus on core product; ISR webhooks publish changes in seconds.
• Internal tooling and dashboards - Engineering teams build admin consoles, CRM views, and ops dashboards with drag-and-drop layouts connected to internal APIs, replacing slow bespoke development cycles.
• Headless commerce storefronts - E-commerce brands design product listing and detail pages connected to Shopify or custom product APIs through Plasmic’s data source connectors, escaping theme constraints.
• Design system distribution - Platform teams register their component library once so product and marketing teams consume it in Plasmic Studio with guardrails that enforce brand tokens and accessibility standards.
• Content-heavy editorial sites - Publishers let editors compose article layouts, hero sections, and promotional blocks from registered components without a traditional CMS, deploying via Next.js SSG.
• Rapid prototyping and A/B testing - Growth teams wire Split.io or custom targeting logic to Plasmic pages and ship variant landing pages without code changes, measuring conversion directly.

Under The Hood

Architecture Plasmic’s architecture is a large-scale monorepo divided into three clearly scoped domains: the Plasmic Studio web application under platform/wab (AGPL), the public client SDKs and loader packages under packages/ (MIT), and the component store integrations under plasmicpkgs/ (MIT). The studio itself follows a layered design with a React/MobX client-side editor, an Express backend backed by PostgreSQL via TypeORM, and a set of intermediary runtime layers — PlasmicHost, live-frame, canvas-packages — that sandbox third-party component rendering inside iframes to prevent the editor from interfering with the user’s codebase. Dependency injection flows through package-level exports and a centralized registry pattern, and strict API boundaries separate the editor backend from the rendering pipeline. This architecture makes it possible to run the full studio locally while the public loader packages remain completely independent thin clients.

Tech Stack The server is Express on Node.js with TypeScript throughout, persisting data in PostgreSQL using TypeORM for ORM and migration management. The client editor is React with MobX for observable state management and Ant Design for its own UI components. The monorepo is managed with Lerna and Nx for task caching, with Yarn workspaces for dependency isolation. The build toolchain relies on esbuild for fast bundling, Microsoft API Extractor for public package surface validation, and custom PEG.js parsers for CSS and expression grammars. Testing spans Jest for unit and integration work, Playwright for end-to-end browser testing, and Tstyche for type-level correctness. CI/CD runs on Jenkins with Nx distributed caching for fast incremental builds. AI capabilities are integrated via the Vercel AI SDK with support for Anthropic, OpenAI, and Google Vertex providers.

Code Quality With over 170 spec files in the platform alone and comprehensive Playwright end-to-end suites, Plasmic maintains extensive test coverage across unit, integration, and browser scenarios. TypeScript strict mode is enforced project-wide, with explicit interfaces for all major data shapes and type guards for dynamic data like Figma document properties. Error handling is explicit throughout the server routes, with typed API error classes in ApiErrors/ and JSON repair utilities for resilient bundle deserialization. Custom ESLint rules enforce domain-specific constraints such as no relative import paths and React hooks compliance. Prettier with organized imports enforces consistent formatting, and lint-staged gates commits. The codebase reflects mature engineering discipline — separation of test fixtures, side-effect-free shared utilities, and dedicated spec files per feature domain.

What Makes It Unique Plasmic’s most distinctive technical achievement is the dual-license split: the public SDK packages are MIT, meaning any app that embeds Plasmic-generated components inherits no copyleft obligation, while the Studio platform itself is AGPL to protect the editor as a service. The canvas rendering architecture uses isolated iframe sandboxes with a custom subdeps injection system that loads the user’s own registered component bundles at runtime — this is what lets you truly drag and drop your own production React components without Plasmic needing to understand them at build time. The integration of Split.io for A/B testing within the visual component system, the PEG.js-based expression engine that gives non-developers safe dynamic data binding, and the ISR webhook pipeline for zero-downtime content publishing combine to form a platform that genuinely unifies design tooling, content management, and application building in one coherent system.

Self-Hosting

Plasmic uses a dual-license model that self-hosters need to understand carefully. All public SDK packages — the loader libraries, host package, CLI, and plasmicpkgs integrations — are MIT licensed, meaning you can embed Plasmic-rendered components in commercial products, modify the code, and distribute it without any restriction or copyleft implication for your application. The Plasmic Studio platform itself, located under the platform/ directory, is licensed under the GNU Affero General Public License v3 (AGPL). AGPL is a strong copyleft license: if you run a modified version of Plasmic Studio as a network service, you must make the source of your modifications available to users. For most teams self-hosting the studio for internal use only, this is a non-issue — the AGPL’s network service clause does not trigger unless external users interact with your modified version.

Running Plasmic Studio yourself is a serious operational undertaking. The platform requires PostgreSQL, a Node.js application server, several build-generated static asset bundles, a dev devcontainer environment to onboard contributors, and Docker Compose orchestration to wire everything together. Initial setup involves running TypeORM migrations, seeding the database, and building multiple sub-packages (sub, live-frame, canvas-packages, loader-bundle-env, loader-html-hydrate) before the editor is functional. There is no single-binary deploy path — the repository provides Docker Compose configuration for development but production hardening, TLS termination, horizontal scaling, and backup strategies are left entirely to the operator. The repo’s own scripts explicitly warn that several tasks require a Jenkins CI environment.

Compared to the managed plasmic.app cloud, self-hosting trades away meaningful conveniences. The hosted platform provides SSO via SAML, domain capture, an enterprise support SLA, managed database backups, and a CDN for serving generated bundles globally. The cloud tier also includes multiplayer real-time collaboration infrastructure and a visual A/B testing integration with Split.io that works out of the box. Self-hosters must provision equivalent infrastructure for all of these capabilities independently. Teams evaluating self-hosting should weigh the AGPL obligations carefully if they plan to expose a modified studio to external users, and should budget significant engineering time for initial setup and ongoing maintenance.