Learn Plasmic
Login

Plasmic Quickstart

This guide shows you how to create a Plasmic-integrated repo and deploy a Plasmic-powered website in 5 minutes!

If you want to integrate into an existing repo or just want to understand what’s happening, see the step-by-step quickstart from the terminal.

Create your first Plasmic project

First, log into Plasmic and click on the “New Project” button to create a new project. For now, choose to start with the “Simple Light Landing Page” template.

Create new project

Feel free to click around and get a feel for how this template site is designed.

Click on the Publish button on the upper-right, and click on the “Connect to GitHub” button. Log in with your GitHub credentials.

Publish for the first time

Create a new GitHub repo for your site

Fill in the details of the new repo to create, including:

  • Name of your repo
  • Framework — from Next.js to Gatsby to vanilla create-react-app
  • Language — we recommend using Typescript for the best developer experience
  • Mode — either Codegen, which exports Plasmic-generated code directly into your git repo, or Loader, which fetches Plasmic-generated code at build time and keeps it out of your repo. You can You can read more about the differences here.
  • Domain — a domain for hosting your site on .plasmic.site.
Creating a new repo

Push to GitHub

Go ahead and start the push!

Push to repo

It may take a while to run for the first time:

Pushing to repo

Once it’s done, visit your-domain.plasmic.site to see it! Try making some changes to the site in the Plasmic studio, and publishing again.

Working locally

You can also work locally to keep the iteration loop tight. Once you set up a local development server, you make changes in Plasmic, and have them be synced to your local repo, and reflected in your local server via hot-reloading!

Check out your GitHub repo

git clone git@github.com:YOU/YOUR-REPO.git

Start your dev server

How you start your dev server will differ depending on what framework you chose to use

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!

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.

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!