Plasmic CLI Usage
The Plasmic CLI makes it easy to invoke code generation of Plasmic components as you develop your application.
Here are all the commands and options:
$ plasmic -hUsage: plasmic <command> [options]
Commands: index.js init Initializes Plasmic for a project. index.js sync Syncs designs from Plasmic to local files. index.js watch Watches for updates to projects, and syncs them automatically to local files. index.js fix-imports Fixes import paths after you've moved around Plasmic blackbox files
Options: --version Show version number [boolean] --auth Plasmic auth file to use; by default, uses ~/.plasmic.auth, or the first .plasmic.auth file found in current and parent directories --config Plasmic config file to use; by default, uses the first plasmic.json file found in the current or parent directories -h, --help Show help [boolean]
plasmic init
This command will generate a plasmic.json file and .plasmic.auth (if one doesn’t already exist).
$ plasmic init -hplasmic init
Initializes Plasmic for a project.
Options: --version Show version number [boolean] --auth Plasmic auth file to use; by default, uses ~/.plasmic.auth, or the first .plasmic.auth file found in current and parent directories --config Plasmic config file to use; by default, uses the first plasmic.json file found in the current or parent directories -h, --help Show help [boolean] --host Plasmic host to use [string] [default: "https://studio.plasmic.app"] --platform Target platform to generate code for [choices: "react"] [default: "react"] --code-lang Target language to generate code for [choices: "", "js", "ts"] [default: ""] --src-dir Default directory to put React component files (that you edit) into [string] [default: ""] --plasmic-dir Default directory to put Plasmic-managed files into; relative to src-dir [string] [default: ""] --style-scheme Styling framework to use [choices: "css"] [default: "css"]
plasmic sync
This command will sync designs to local files.
A quick note about generated files
Files in the presentational component library (e.g. PlasmicButton.tsx in plasmic/
) should not be edited, as those changes will be lost next time you run plasmic sync
. Your changes in developer-owned wrapper components (e.g. Button.tsx in src/
) will be unaffected. For these files, we only update imports to reflect any new Plasmic-managed files.
Syncing new projects
For new projects, you will need to manually specify them on the first sync. Your plasmic.json file will be automatically updated to include them.
$ plasmic sync --projects PROJECT_ID
The full list of options:
$ plasmic sync -hplasmic sync
Syncs designs from Plasmic to local files.
Options: --version Show version number [boolean] --auth Plasmic auth file to use; by default, uses ~/.plasmic.auth, or the first .plasmic.auth file found in current and parent directories --config Plasmic config file to use; by default, uses the first plasmic.json file found in the current or parent directories -h, --help Show help [boolean] --projects, -p ID of Plasmic projects to sync. If not specified, defaults to all known projects. [array] [default: []] --yes Automatic yes to prompts. [boolean] [default: false] --force Force sync to bypass specified version ranges. [boolean] [default: false] --non-recursive Do not recursively sync dependencies, only sync the specified projects [boolean] [default: false] --force-overwrite Overwrite the skeleton file with newly generated version. Useful when switching between codegen schemes. [boolean] [default: false] --append-jsx-on-missing-base When the base metadata is missing to perform the three-way merge for direct edit component, append the jsx of the new version so that user can perform manual merge. [boolean] [default: false]
plasmic watch
plasmic watch
will listen for new changes from the Studio and automatically sync when any change is detected.
Note: This will only work for projects where version="latest"
in plasmic.json
.
$ plasmic watch -hplasmic watch
Watches for updates to projects, and syncs them automatically to local files.
Options: --version Show version number [boolean] --auth Plasmic auth file to use; by default, uses ~/.plasmic.auth, or the first .plasmic.auth file found in current and parent directories --config Plasmic config file to use; by default, uses the first plasmic.json file found in the current or parent directories -h, --help Show help [boolean] --projects, -p ID of Plasmic projects to sync. If not specified, defaults to all known projects. [array] [default: []] --yes Automatic yes to prompts. [boolean] [default: false] --force Force sync to bypass specified version ranges. [boolean] [default: false] --non-recursive Do not recursively sync dependencies, only sync the specified projects [boolean] [default: false] --force-overwrite Overwrite the skeleton file with newly generated version. Useful when switching between codegen schemes. [boolean] [default: false] --append-jsx-on-missing-base When the base metadata is missing to perform the three-way merge for direct edit component, append the jsx of the new version so that user can perform manual merge. [boolean] [default: false]
plasmic fix-imports
When using codegen, you can freely move files around the filesystem (e.g. using git mv
). Use this command to fix import paths and your plasmic.json file.
Note: this is run automatically as part of plasmic sync
.
$ plasmic fix-imports -hplasmic fix-imports
Fixes import paths after you've moved around Plasmic blackbox files
Options: --version Show version number [boolean] --auth Plasmic auth file to use; by default, uses ~/.plasmic.auth, or the first .plasmic.auth file found in current and parent directories --config Plasmic config file to use; by default, uses the first plasmic.json file found in the current or parent directories -h, --help Show help [boolean]