Host Plasmic Studio in your app

Plasmic Studio has a core kernel that can run in the context of your application codebase - we call this “application-hosting.” This tight integration between the design tool and your application enables a number of capabilities, starting with the ability to use existing React components from your codebase directly in Plasmic Studio.

Quickstart with an example repo

For setup with your own existing codebase, skip this section.

  1. Clone and start the host app codebase in this repo:

    Copy
    git clone https://github.com/plasmicapp/code-components.git
    cd code-components/
    yarn install
    yarn dev
  2. Duplicate this Plasmic project: https://plasmic.app/proj/code-components.

  3. From your project dashboard at https://studio.plasmic.app, configure the duplicated project to use http://localhost:3000/host as the application host.

  4. Open the duplicated project in Plasmic.

If it loads, it works!

Quickstart with an existing repo

See the quickstart for React/Next.js/Gatsby for a concise guide.

Read on for the full manual setup in your own repo.

Install packages

From here we describe the full manual setup in your own repo.

First, make sure to have the following Plasmic packages installed:

Add a host route

You need to add a special “hidden” route to your application that Plasmic Studio will use as the host entrypoint. This is basically a blank page which Plasmic will use to render artboards. This is where we’ll provide all the code component registrations, along with any necessary context and configuration needed by the code components.

This route would only be used by Plasmic Studio; it’s not a route you would tell any human to go visit.

You can choose any route you want, but we typically use /plasmic-host. We’ll call the URL to this page the “host URL”. For now, we’ll be using your localhost dev server, so the host URL will look like http://localhost:3000/plasmic-host.

Render <PlasmicCanvasHost/>

This component is the entry point for Plasmic to render the Plasmic contents and communicate with Plasmic Studio.

Examples:

Set a Plasmic project to use your app host

After starting your app, you can change the host of a project in the dashboard by clicking the menu button and specifying the URL of your host page.

configure project menu

configure project modal

You can then open the project and see if it worked. If the project loads, it works!

Later, after you deploy the route to production, update the project to use your production host URL instead, such as https://my-app.com/plasmic-host. This way, other members of your team (who can’t access your localhost dev server) will be able to open and edit the project in Plasmic. (Again, the /plasmic-host route itself is a special hidden route not meant for humans to visit; it is only for Plasmic Studio to hook into.)

Security

Whenever you add a new host to a project, we mark that host as trusted - this is to avoid accessing untrusted apps when opening random projects. You can see and change the list of trusted hosts in the settings page.

Before adding a new host URL to a project or to the list of trusted apps, make sure that you really trust the app, as it will have access to that project’s page.

Also be careful to not provide personal information or credentials when you have a project page open: we will never ask you for access tokens or passwords while you edit or view a project.

Bring your code components to Plasmic

Once your host app is set up, you can register components available in your codebase to be used on Plasmic!

You can find documentation on how to register them in the code components topic.

Give feedback on this page