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: ""]
  --code-scheme   Code generation scheme to use
                               \[choices: "", "blackbox", "direct"\] [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 pres**entational 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 -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]
  --new-component-scheme        Sync the new components using this code scheme
                                rather than the default code scheme.
                                        \[string\] [choices: "blackbox", "direct"]

plasmic watch

$ 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]
  --new-component-scheme        Sync the new components using this code scheme
                                rather than the default code scheme.
                                        \[string\] [choices: "blackbox", "direct"]

plasmic fix-imports

When using the blackbox scheme, 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]