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.

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.

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

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