Code generation is a more advanced way to use Plasmic, where code is physically generated into your version control.
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.
When you use codegen, you export code from Plasmic using the
plasmic cli. Install it globally first:
npm install -g @plasmicapp/cli# or: yarn global add @plasmicapp/cli
Next, you need to log into the
plasmic cli so Plasmic knows who you are. To do so, run:
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.
Run this to sync your project down as React components in your repo:
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
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".
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:
# 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.
Now you are ready to learn how to make use of the files
plasmic just put into your repo! Take a look here: