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 -h
Usage: 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 -h
plasmic 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_IDThe full list of options:
$ plasmic sync -h
plasmic 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 -h
plasmic 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 -h
plasmic 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]