Introduction to Plasmic
Plasmic is a visual builder for the web. Non-developers can build pages or parts of pages, and developers can integrate these into any website or app codebase.
The goal is to empower and unblock non-developers such as marketers and designers, while freeing up developers from pixel-pushing. Teams can thus move faster, iterate more, and ship higher quality products.
Plasmic as a page builder is its simplest and most common use case. Beyond pages, Plasmic can even be used to create frontends for complex web applications (such as Plasmic itself, which was built in Plasmic). This is possible because—despite being easy to start with—Plasmic gives you full visual control and works deeply with code.
See also our comparisons with related tools.
The Plasmic editor—called Plasmic Studio—is a browser-based tool, so it’s easy to jump in and start creating things.
As soon as you’ve started a Plasmic project, you can integrate it into your codebase, either:
- via the CLI (for generating code into the codebase), or
- via the PlasmicLoader (which lets you treat Plasmic like a CMS).
Thereafter, you can always sync down the latest components and pages designed in Plasmic. Check out the quickstart guides.
You can also enable users in Plasmic Studio to publish changes directly. You can connect to GitHub to automatically generate PRs, connect to Vercel/Netlify to directly trigger deploys, and/or call webhooks for triggering any other workflow.
You can further configure the Plasmic codebase integration to enable users to publish new pages (at new routes) from within Plasmic Studio.
What you build in Plasmic can be consumed flexibly. You can generate actual React code into your codebase, or you can use PlasmicLoader to consume it like CMS content over an API—and more. Plasmic ultimately aims to be the most versatile builder and integrate into any environment.
For anything with non-trivial interactivity, all the logic/behavior—state bindings, event handlers, etc.—are all done from your own code. You can leverage your existing SEO, analytics, core user flows, hosting, CI/CD, and other infrastructure.
Plasmic essentially gives you a library of presentational components. These take care of rendering exactly what was designed. You can import and use them from anywhere in your codebase. Additionally, they provide a flexible API that lets you attach any props you want to any element within the component.
For Next.js/Gatsby, the PlasmicLoader (CMS API) works at build time and not at runtime (due to Plasmic’s framework-specific plugins). You can thus achieve performant static rendering of your content.
To learn more, see the Developer Guide.
Using Figma? Great! Creating from scratch in Plasmic has a number of advantages, but if you have existing Figma designs, you can import them into Plasmic using Plasmic’s best-in-class Figma-to-web converter. Note that this just gets you to a starting point, as you’ll often want to spend more effort to turn static drawings into a real usable site. Learn more about importing from Figma.
- Quickstart with Next.js
- Quickstart with Gatsby
- Quickstart with React
- Learn Plasmic Studio by playing Plasmic Levels