Codegen overview

Code generation is a more advanced way to use Plasmic, where code is physically generated into your version control.

Getting started

If you want to start a new project, the easiest way is to follow the guide using create-plasmic-app! Do that, and come back here.

Install the plasmic cli

When you use codegen, you export code from Plasmic using the plasmic cli. Install it globally first:

Copy
npm install -g @plasmicapp/cli
# or: yarn global add @plasmicapp/cli

Authenticate with Plasmic

Next, you need to log into the plasmic cli so Plasmic knows who you are. To do so, run:

Copy
plasmic auth

Sync your project

Finally, you can sync Plasmic code down to your repo! If you don’t already have a project you want to sync, you can create an example starter project here.

Once you have a project, you need to take note of the project ID in the URL. For example for a url like https://studio.plasmic.app/projects/fyLUsDXMW8eJuJ9WwfAaag, the project ID is the fyLUsDXMW8eJuJ9WwfAaag string at the end.

Getting Started

Run this to sync your project down as React components in your repo:

Copy
plasmic sync -p PROJECT_ID

This generates React components for each component in your Plasmic project.

The first run of sync asks various questions about what flavor of codegen you want. The settings are saved to plasmic.json.

The CLI also generates a plasmic.lock file it uses to keep track of versions.

You can check all of these files into your repository with git add . && git commit -a -m "Initial Plasmic sync".

Sync updated Plasmic designs

Plasmic is powerful because it is not just a one-time export of your design to code. Instead, components and pages designed in Plasmic continue to be a source of truth, and you can sync updates down to your code at any time without losing your changes.

In a separate terminal:

Copy
# Syncs and watches for changes; as designs get updated, they are automatically
# synced to your local git repo:
plasmic watch


# Or, to syncs generated code to your local git repo, one-time:
plasmic sync

This CLI command will watch for changes in Plasmic Studio and automatically trigger a codegen sync when the project has been edited. It should work nicely with your hot-reloading development server.

Codegen guide

Now you are ready to learn how to make use of the files plasmic just put into your repo! Take a look here:

Codegen tools reference

Was this page helpful?

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