Announcing Plasmic 2.0: code components, and application-hosted Plasmic
Code components, and application-hosted Plasmic
After many months in the lab, we’re incredibly excited to announce Plasmic 2.0! This marks one of the biggest architectural shifts so far in Plasmic.
A key capability this shift enables is code components. You can now use React components from your codebase directly in Plasmic Studio! After dropping in a snippet of code into your codebase, developers can expose any component that they’ve either defined or imported, enabling Plasmic Studio users drag and drop these components into their designs.
Easily insert components from the entire universe of off-the-shelf npm libraries, such as Google Maps, Youtube videos, and many more.
Register design system components, including from popular libraries like Material UI or Ant—fully functional components that adhere to your overall brand, with all your theming and customizations applied.
Or expose arbitrarily complex components from your own codebase. For instance, interactive product galleries that fetch personalized data from an ecommerce backend and use application state.
You can even introduce some pretty abstract code components, like generic “Embed Code” components, parallax tilt wrapper components, or reveal-on-scroll wrapper components. You can truly extend Plasmic with new features.
With code components, developers can provide the exact application-specific building blocks to empower the rest of their team—you can truly make Plasmic your own.
The way Plasmic supports code components is a little different than what you might have seen in other tools. It’s enabled by a foundational new feature called “application-hosted Plasmic.” In short, Plasmic has a kernel that runs from within your application—your app serves as a “host” for Plasmic. This tight integration is how you can easily and seamlessly expose code components to Plasmic. As a result, there are no restrictions on the complexity of the components used, no separate bundling shenanigans, etc. You can set the app host to be your localhost dev server (complete with hot reload working!) or your actual production site.
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 the developer docs.
You can play with code components in this example project. The host app’s source code is available on Github—see the component registrations.
This is just the start of what application hosting enables. For now, we’d love to hear your feedback on code components and what this unlocks for your team!
There’s more!
Can now right-click horizontal stacks and convert to responsive columns.
Can now set responsive columns to reverse the order of their items.
Can now select a text element and press Cmd+B to toggle boldness.
Can now rename variants from the canvas.
Speed and memory consumption improvements.
Many more bug fixes and improvements!