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
Material UI Select
@material-ui/core
Material UI Button Group
@material-ui/core
Ant Design
antd
Thank you for your order!
Please fill all required fields.
Ant Slider
antd
Ant Menu
antd
Ant Alert
antd
Thank you for your order!
Please fill all required fields.
Ant Collapse
antd
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.
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)
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.
