New Plasmic codebase (CLI)

Overview

In this tutorial, we’ll use create-plasmic-app to create a new Plasmic-powered website.

Looking for other quickstart options? Check out our developer quickstart page.

create-plasmic-app

create-plasmic-app is our CLI tool for generating fresh Plasmic codebases.

Currently, Next.js, Gatsby, and Create React App are supported. For other frameworks, see our general quickstart page.

To create a project, run:

Copy
npx create-plasmic-app@latest
# or
yarn create plasmic-app


cd <your-new-app-name>

That’s it!

Local Development

We’ll want a local development server for tight iteration loops. Let’s start your dev server (make sure you’ve run cd into your new directory).

Copy
npm run dev
# or
yarn dev

Your dev server will be running at http://localhost:3000 by default.

Sync updated Plasmic designs

Plasmic is powerful, not because of a one-time export of your design to code, but because Plasmic designs are your source-of-truth that go to production. Your new codebase comes with tools to automatically sync updates from Plasmic Studio.

As part of the dev server, the Plasmic loader plugin will automatically watch for and sync your Plasmic components into your dev environment. This usually happens in the background so you don’t have to worry about it.

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

Next Steps

Thank you for checking out Plasmic! Here are some recommended next steps:

  • Try deploying your new website! Read our documentation about deployments.
  • If you’re using the Headless API (Loader), check out framework-specific instructions for Next.js, Gatsby, and Plain React.
  • If you’re using Codegen, check out getting started with codegen.
  • To learn how to use Plasmic Studio, play Plasmic Levels.
  • To interactively explore the API of your generated components, click on the “Code” toolbar button in the project in Plasmic Studio.
  • Join our Slack community.
Was this page helpful?

Give feedback on this page