Plasmic Quickstart

This guide shows you how to get started quickly with an end-to-end site configured to a Plasmic project.

You can choose to use either the Loader or Codegen paths. The Loader path is only available for Next.js and Gatsby-based builds, and can greatly simplify deployments for most use cases. For all other React stacks, for users who want advanced customizability, and to be able to check Plasmic-generated code into your repository, choose the Codegen path.

Install the Plasmic dependency to your local repo

Authenticate with Plasmic

Clone a Plasmic Starter project

Log into the dashboard and click on a template project to clone the project into your own workspace. We recommend starting with “Simple Light” for a nice landing page.

Copy your project ID

You’ll be redirected to your own copy of the project in Plasmic Studio.

We’ll come back to this. For now, just take note of your project ID in the URL.

For example, the project ID would be n7WcdDHjcwjRswHgHG4tDM in the following:

https://studio.plasmic.app/projects/n7WcdDHjcwjRswHgHG4tDM"

Configure your repository

Render a Plasmic component

Choose an entry point to render your Plasmic component (e.g. app.js).

See the codegen API reference to understand how to manage slot, variant, and override component props on the Home component.

Start your development server

Note: the exact command will depend on your current build setup.

npm start
# or: yarn start

Next steps

The best way to learn how to use the Plasmic Studio is by playing Plasmic Levels.

For more details on how to use the components you create, check out our “How-to Guides”.

Thank you for checking out Plasmic!