Using code components in Plasmic Studio

Code components are custom React components from your own codebase that can be used like any other component in Plasmic Studio. You have full control of these code components, so you can use any npm libraries—bring your own design system and CSS styling libraries.

This is a powerful capability that enables teams to:

  • Use their existing design system.
  • Show dynamic data.
  • Use components of arbitrary complexity and behavior.
  • Introduce interactions, effects, and functionality not yet built into Plasmic Studio.

Component store

Note that Plasmic has a built-in component store, which you can immediately drag and drop into your project without needing to register any components. This includes a suite of data integrations, effects, off-the-shelf widgets, extensions for adding custom CSS, and more. Simply bring up the insert menu (press Q) to check out what’s available.

If you are using codegen, learn how to use component store components.

Read on to learn how to bring components from your own codebase.

How it works

In order for Plasmic Studio to use your code components, you must first setup an app host. This is a special page hosted on your app at a URL like https://yourdomain.com/plasmic-host. The app host will run Plasmic Studio within your React app. Because Plasmic Studio is now running inside your application, it has access to all the same React components that your application has! You just need to tell Plasmic about them by registering them.

You’ll want to:

  1. Set up your app host so you can run Plasmic Studio within your own React application.
  2. Register your code components so Plasmic knows how to use them.
Was this page helpful?

Have feedback on this page? Let us know on our forum.