Version Control Workflows

We designed Plasmic to easily fit into your version control and collaboration workflows. That means Plasmic components should be easily imported into your existing code, built by your existing build system, and checked in using your existing source code management tool. That also means that you own your code.

What should I check in?

To start, make sure you check in your plasmic.json file so that others share the same configuration.

plasmic sync updates your Plasmic components to the latest versions from the corresponding Plasmic project. After you synchronize, be sure to fix any errors and test your code before checking all files in. Usually you will see Typescript errors that inform you explicitly of breaking changes in the upstream Plasmic project.

Because the files are checked into source code management, other collaborators do not need to run plasmic sync unless they plan on updating Plasmic components.

Do not **check in your .plasmic.auth file, which contain user-specific secrets for authenticating with Plasmic servers. This is typically located in your home directory, so usually is not in your version controlled project directory.

Historical versions

When plasmic sync updates any component, it also records the specific version number of that component into plasmic.json. Thus, when you later check out any historical commit, you can always view the corresponding version of the Plasmic component in Plasmic as well.

Selective syncing

By default, running plasmic sync updates all components from the projects listed in plasmic.json (including pulling down new components that were never before synced). This is convenient to get started with small projects.

However, as you start working with many components, you’ll typically want to sync only the specific subset of components that you are actively working on for the commit you’re trying to make. For instance, if you are working on your app’s login flow and sync down the LoginForm component, you probably don’t want to also sync your Dashboard, ProfilePage, Button, Switch, or other components.

Occasionally, there are version dependencies that will need you to sync certain other components. For instance, if the LoginForm depends on a newer version of the Button component, then you’ll end up wanting to sync both components into your codebase.

Resolving conflicts

When merging or rebasing branches of your codebase, where both branches have synced the same set of components, you will encounter conflicts in Plasmic component files, just as you will with any file that was changed in both branches.

However, because Plasmic serves as your single source of truth for those components, you can safely overwrite any files in the p**resentational component library (e.g. PlasmicButton.tsx, PlasmicButton.css, etc.—in short, all the files in plasmic/) with the latest from plasmic sync.

You will still need to manually resolve conflicts on the developer-owned wrapper component**s **(e.g. Button.tsx in src/), where the application logic, state, and event handlers are specified—this is as you would with any traditionally written components.