Beginner End-to-End Tutorial: Building Minitwitter
This tutorial will show building a simple app, Minitwitter, end-to-end.

As you learn Plasmic, please let us know all your questions and feedback!  Reach us on our Slack community or at team@plasmic.app.

About Minitwitter

Minitwitter is a very basic web app—its main page is just a wall of posts. There’s also a second page where anyone can enter a new post. There’s no login/auth or anything else. So it’s a great way to get started learning about all the core Plasmic concepts and workflow quickly, without getting bogged down in complexity that’s specific to any particular app or domain. It’s simpler even than the TodoMVC tutorial!

You can play with a finished version of the codebase here:

About this tutorial

This tutorial consists of two parts—design and code. If you want to just focus on the code, you can skip the design portion, and instead clone this completed Plasmic project (however, we still recommend the video tutorial as a primer to the main concepts in Plasmic, such as slots and variants).


In the design section, you will learn the following concepts in Plasmic Studio:

  • Free-form drawing and wireframing
  • Artboards
  • Components
  • Layout
  • Slots
  • Variants, including interaction variants
  • Live preview mode

In the code section, you will:

  • Import Plasmic components into a React codebase.
  • Wire props up to the components, integrating with real React state.
  • Control what interfaces the components export.
  • Add multiple pages and routing.
  • Load and store data into real data stores.

You can find a completed version of the codebase here if you wish to refer to it:

Design Minitwitter

Let’s begin with a video showing how to use Plasmic Studio to design the Minitwitter app, learning all the core concepts in Plasmic as we go:


Again, if you wish to skip this, you can clone the completed design project for the following code sections of the tutorial:

Import the design into code

Create a new React app using create-react-app. In this tutorial we’ll be showing Typescript, but Plasmic also works with plain JS projects.

# {sh}
npx create-react-app minitwitter --typescript