Development and Debugging FAQ

Can Plasmic work with existing code components or design systems?

Yes. The workflow is:

  1. Create design-time placeholders for the existing code components you’re interested in. These are just for use in the Studio, and can be as accurate as you want them to be in mirroring what the real component looks like.
  2. In code, substitute the existing code component for each of the design-time placeholders.
  3. Optionally use props to configure the behavior of the code component.

For instance, if you want to use a Google Maps widget:

  1. Paste a static screenshot of a Google Maps widget into your project, and turn it into a component called “GMaps.” Use this component wherever you want a real Google Maps widget.
  2. In code, rather than render the <PlasmicGMaps/> component inside the GMaps component, render a real Google Maps widget.
  3. In Plasmic Studio, on the GMaps component, add a prop location of type text. Plasmic Studio users can use this to identify a concrete location that the real Google Maps widget can read.

How are names transformed?

The names of components, elements, args (such as slot args), and variants are all camelCased. Components are always additionally capitalized, per React conventions.

What if I am getting authentication errors from the CLI or Loader?

The easiest way to get your system authenticated with Plasmic is to use our CLI with the following command:

npx @plasmicapp/cli auth

However on rare occasion, this process may also fail. To debug this situation, check for the existence of this file in your home directory: ~/.plasmic.auth.

If it does not exist, you can create the file manually like this:

{
  "host": "https://studio.plasmic.app",
  "user": "EMAIL_HERE",
  "token": "TOKEN_HERE"
}

Make sure that the email you insert here is the one that you used to sign up on the Plasmic Studio. You can get your access token from your settings. This file is all you need to authenticate your system.