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:

Copy

$ 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).

Copy

$ 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.

Copy

$ plasmic sync --projects PROJECT_ID

The full list of options:

Copy

$ 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.

Copy

$ 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.

Copy

$ 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]

Give feedback on this page