Introduction to Plasmic
What is 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.
What can I use Plasmic for?
Plasmic as a page builder and “visual CMS” is its simplest and most common use case. Editors can create and update content in Plasmic without code, and publish this into their production site without needing to block on developers.
Beyond website content, 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.
What is the workflow?
The Plasmic editor—called Plasmic Studio—is a browser-based tool, so it’s easy for non-developers to jump in and start creating things.
As soon as a Plasmic project is created, developers can render pages and components from it into a codebase, typically via the Headless API. (Codegen is an alternative mode of integration, where you can generate source files into your repo.)
Thereafter, non-developers can publish changes to Plasmic content (components and pages) without involving developers. You can set up webhooks to trigger your build/deployment pipeline.
How does Plasmic integrate into a codebase?
What you build in Plasmic can be consumed flexibly. The most common use case is consuming Plasmic designs like CMS content over an API, but you can also generate code into your codebase, or even publish pages to platforms like Shopify. Plasmic ultimately aims to be the most versatile builder and integrate into any environment.
You leverage your existing SEO, analytics, core user flows, hosting, CI/CD, and other infrastructure. For anything with non-trivial interactivity, all the logic/behavior—state bindings, event handlers, etc.—are all done from your own code.
To learn more, see the Technical Overview.
Starting from Figma
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.
Next steps
More resources
We’d love to hear all your questions and thoughts! Reach us on our Slack community.