Publish new Plasmic site from GUI

This guide shows you how to create a Plasmic-powered React website and GitHub repo in 5 minutes, just by pointing and clicking!

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

For other frameworks, see the general quickstart.

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 — use Headless API, the default. (You can also learn about Codegen.)
  • 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.

You can also see how to get started integrating Plasmic into your existing codebase.

Join us in our Slack community.

Thank you for checking out Plasmic!