plasmicapp/plasmic

What is it?

Key features

• 01Drag and drop your own React components into the visual editor.
• 02Publish visual pages into existing applications and websites.
• 03Generate React code into your codebase via codegen.
• 04Headless API for fetching content and components at runtime.
• 05Built-in design system components powered by react-aria.
• 06Import designs from Figma and convert them to DOM/CSS.
• 07Content creator mode with design guardrails for collaborators.

Use cases

• Letting marketing teams build landing pages from approved React components in a Next.js site.
• Building internal tools, client portals, and business software with a visual editor.
• Adding a visual CMS layer to an existing React codebase without moving hosting or commerce platforms.

Quick start

1. 1

   Install the Plasmic loader package for your framework (Next.js example)

   npm install @plasmicapp/loader-nextjs
2. 2

   Register your own React components for drag-and-drop in the visual editor

3. 3

   Render Plasmic-made components in your app with PlasmicComponent inside PlasmicRootProvider

Things to know

• !The platform/ directory is licensed under AGPL, not MIT.
• !Full integration with a codebase requires following the framework-specific setup in the docs.

Topics

FAQ

What is plasmic?

Open-source visual builder that lets you drag and drop your own React components to build apps and websites inside your codebase. Plasmic is a visual builder for the web, used to design and build applications and websites with optional code. Its main use cases include letting marketing teams assemble landing pages from React components in a Next.js site, building internal tools and client portals, and creating websites without being tied to a particular CMS, ecommerce platform, or host.

Is plasmic free to use? What license does it have?

plasmic is open source under the MIT license. Check the license terms before using it in commercial products.

Is plasmic still maintained?

Actively maintained. The last commit to plasmic was on Oct 21, 2026.

What can I use plasmic for?

Letting marketing teams build landing pages from approved React components in a Next.js site. Building internal tools, client portals, and business software with a visual editor. Adding a visual CMS layer to an existing React codebase without moving hosting or commerce platforms.

How do I install plasmic?

Install the Plasmic loader package for your framework (Next.js example): npm install @plasmicapp/loader-nextjs Register your own React components for drag-and-drop in the visual editor Render Plasmic-made components in your app with PlasmicComponent inside PlasmicRootProvider

Where can I get plasmic?

The source code and installation instructions are on GitHub: https://github.com/plasmicapp/plasmic