Using code components in Plasmic Studio

You can use custom React components—from your own codebase or imported from npm libraries—directly as building blocks in Plasmic Studio.

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.

How it works

To start using code components, you will create a special page for your React application, accessible from a special url (called the “app host url”). This page will render a special component that runs the Plasmic Studio within your React application. Because Plasmic 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, and you’ll be able to use them in your designs.

How to get started

You’ll want to:

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

Give feedback on this page