Create new Plasmic site from CLI

This React-specific step-by-step guide shows you how to get started from the terminal.

For other frameworks, see the general quickstart.

We’ll default to consuming your Plasmic designs via the Headless API mode of integration. (You can also learn about the more advanced Codegen instead.)

create-plasmic-app

When creating a new repo, we recommend you use create-plasmic-app, which sets everything up automatically for you. To create a project, run:

Copy

npx create-plasmic-app
# or
yarn create plasmic-app

Afterward, start the development server:

Copy

npm run dev # for Next.js
# or
npm run start # for everything else

If you chose “Codegen”, you will also need to watch for new changes (in a separate terminal):

Copy

npm install -g @plasmicapp/cli

plasmic watch

Now try editing your Plasmic project, and see the result show up in your running app as well!

Manual Setup Guide

Get started with a React codebase

If you already have an existing React codebase you want to use, you can skip this step.

Choose a framework, replacing my-app with the name you want to give your project:

Then navigate to your new project:

Copy

cd my-app/

Install the Plasmic dependency to your local repo

Authenticate with Plasmic

Clone a Plasmic Starter project

Log into Plasmic, click on “New Project”, and clone one of the starter projects 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:

Copy

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

Configure your repository

Start your development server

Sync updated Plasmic designs

Plasmic is powerful because it is not just a one-time export of your design to code. Instead, components and pages designed in Plasmic continue to be a source of truth, and you can sync updates down to your code at any time without losing your changes.

Try making some changes in your Plasmic project, and see them show up on your local development server!

Render a Plasmic component

If you are using Next.js or Gatsby, we will have automatically created routes for each of your page components.

If you want to render components, choose an entry point and render your Plasmic components. For example, if you have a “Home” Plasmic component that you want to render in app.js:

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

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

To interactively explore the API of your generated components, click on the “Code” toolbar button in the project in Plasmic Studio.

Join us in our Slack community.

Thank you for checking out Plasmic!