Example Projects
TodoMVC
Complete example of a simple task manager app, including both the design project in Plasmic and code on Github.
We have written up a tour of the project for new Plasmic users, walking through how this exercises the core concepts it Plasmic, as well as an Intermediate Code Tutorial on how to go from the completed design to the finished implementation.
Play with the implemented code at:
Check out the code from:
https://github.com/plasmicapp/todomvc
Plasmic Landing Page and Docs
This landing page is quite simple.
The header in the docs has an interactive search bar, where on mobile one it’s hidden until you click the search icon.
3-Minute Codegen Quickstart
Super-short guide to syncing down a simple Profile Card component into your local codebase.
Simple responsive page
Final website running off CodeSandbox
This example shows off a single screen that has different layouts on different Screen Variants. It also has a simple Copyable Link component that has some hover and click interactivity (behavior implemented in code).
Twitter home feed
A simple re-creation of the Twitter home feed.
Plasmic Kit
(Link coming soon)
We’ve been using Plasmic to design and build many parts of Plasmic itself!
“Plasmic Levels” Mini-Game
A sequence of levels that take you through some general concepts around layout and components, and how Plasmic expresses these. It gives you a fun little hands-on way to go from zero to hero in Plasmic.
You can find this one in the “Get Started” section of the main project list page you see when you log in.
Minitwitter
The subject of the beginner end-to-end tutorial. A very simple app that has two pages—one for listing posts, and another for posting. The tutorial explains both how to design the app from scratch in Plasmic Studio, and how to code up the functionality in React.
See the video for the design section of the tutorial:
Have feedback on this page? Let us know on our forum.