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.
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.
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.
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, fully managing the sync process for you (available for Next.js/Gatsby only). You can read more about the differences here.
- Domain — a domain for hosting your site on
Go ahead and start the push!
It may take a while to run for the first time:
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.
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!
git clone email@example.com:YOU/YOUR-REPO.git
How you start your dev server will differ depending on what framework you chose to use
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!
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!