Page builder, meet code components.
Introducing Plasmic 2.0: the web design tool that integrates seamlessly with your codebase and lets you drag-and-drop your real production React components.
Empower your team with your design system, interactive components, production data, and much more.
Use off-the-shelf components.
Tap into the full universe of open-source npm libraries. Or expose components from your own codebase.
Youtube
react-youtube
Google Maps
@react-google-maps/api
Bring any design system.
Use your own design system, or use off-the-shelf libraries complete with all the theming and customizations you've applied in your codebase. Seamlessly interweave Plasmic-designed content and code components.
Roboto
Material UI
@material-ui/core
Ant Design
antd
Shipping
Standard shipping
2 South Park San Francisco, CA 94107
Change
Arwes Card
@arwes/core

NEBULA

A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. Originally, the term was used to describe any diffused astronomical object, including galaxies beyond the Milky Way.

Orion
Photo of the Orion nebula taken by Hubble.
Access your real production data.
Bring components of any complexity—components that fetch data, use application/session state, and more.
Data from Shopify product catalog (via Storefront GraphQL API)
SUMMER COLLECTION
Data from Contentful CMS (via REST API)
Data from Shopify product catalog (as a CSS grid)
Extend Plasmic with any interaction.
You can introduce some very general-purpose building blocks that extend Plasmic's feature set.
Reveal on scroll
react-awesome-reveal
JAY-Z
FOLLOW ARTIST
3D parallax tilt effect
react-parallax-tilt
Parallax scroll effect
react-scroll-parallax
A generic "Embed Code" component
How does this work?
Plasmic is a page builder and design tool that has a kernel which runs from within your application. We call the Plasmic project "hosted" by your application.
This tight integration is what lets you easily and seamlessly expose code components of arbitrary complexity. They can connect to your application state, fetch data, implement complex behavior, and much more. All without bundling shenanigans.
You can set the app host to be your localhost dev server (complete with hot reload working!) OR your actual production site.
What does it take to enable this for your codebase? Simply add a snippet of code, and now you can configure any Plasmic project to use your application URL as the host. Then expose any component by calling registerComponent() on it. That's it!
See developer docs ->See this project's host repo on GitHub ->
Plasmic lets anyone build and deploy visual content—from full pages to sections of pages—within any tech stack.
Plasmic powers some of the largest websites in the world. Companies from boutique brands to Fortune 500s use Plasmic to eliminate swaths of development work and let marketing and design teams iterate incredibly fast.
And now with code components, developers can equip their whole team with the exact right set of building blocks to move even faster.
Try Plasmic for free
Code components are just the beginning of what application hosting unlocks.
Follow @plasmicapp on Twitter to see what's next.