Developer Guide

Welcome!

This guide walks through how to use Plasmic with a codebase, specifically focusing on code generation.

If you’re new to Plasmic, you may be interested in the End-to-End Beginner Tutorial, which designs and implements a simple Minitwitter app, or the Intermediate Code Tutorial, which implements TodoMVC.

We’d love to hear all your questions and thoughts! Reach us on our Slack community or at team@plasmic.app.

Overview

Plasmic is a visual builder of presentational components that can be imported into your production codebase, while allowing logic/data/behavior to be added using code in a natural way. (See Plasmic Studio Guide for a more general overview of the Plasmic design tool.)

A critical difference between Plasmic and other code generation tools is that Plasmic aims to keep the link between design and code alive. With other code generation tools, code export is a one-time action—when the design is done, the code is exported, and the developers then take the code and modifies it as they see fit before merging into the production code repo. This cuts off the code from the design tool—if the designers continue to iterate on the design, there is no easy way to export those changes to code and merge them with the production code, which may have been modified in arbitrary ways by the developers.

With Plasmic, one can continue to edit the design and have these changes easily merged into production code with minimal effort. To accomplish this, Plasmic uses code generation schemes that aim to separate the concerns of design—structure, style, layout—and the concerns of development—attaching event handlers, displaying real data, and applying business logic and behaviors.

Code Generation

Generating components

Generating other assets

Workflow