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.
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.
- Overview of how codegen works, and its guiding principles
- PlasmicLoader vs Codegen, the two ways of consuming Plasmic designs from your codebase
- Codogen Guide