Plasmic Manual Quickstart
Whether you already have an existing repo or would like to create a new one, this step-by-step guide shows you how to get started from the terminal.
You can choose to use either the
Loader path is only available for Next.js and Gatsby-based builds,
and can greatly simplify deployments for websites and JAMstack projects.
For all other React stacks, for users who want advanced customizability,
and to be able to check Plasmic-generated code into your repository,
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 # or yarn create plasmic-app
Afterward, start the development server:
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):
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!
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.
To learn more about the code integration, read on to our Developer Guide.
Join us in our Slack community.
Thank you for checking out Plasmic!