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.)
When creating a new repo, we recommend you use
which sets everything up automatically for you.
To create a project, run:
npx create-plasmic-app# oryarn create plasmic-app
Afterward, start the development server:
npm run dev # for Next.js# ornpm run start # for everything else
If you chose “Codegen”, you will also need to watch for new changes (in a separate terminal):
npm install -g @plasmicapp/cliplasmic watch
Now try editing your Plasmic project, and see the result show up in your running app as well!
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
Then navigate to your new 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.
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:
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!
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
See the codegen API reference to understand how to manage slot, variant, and override component props on the Home component.
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!