Building React Frontends visually
summary
A demo of a browser-based visual builder that generates React components and keeps them live-synced into a local app: a ToDo app and reusable Task component are drawn, turned into Plasmic visual builder components with variants and flexbox-powered stacks, then pulled into a CRA project via plasmic sync/watch and swapped for real data. The system schedules updates to meet a 60 fps frame budget (≈16ms), supports CodeSandbox export and code components, and produces pixel‑perfect, editable UI that actually works in production.
AI-written summary · about
chapters (11)
- 0:00Design vs frontend gap
- 1:14Visual UI builders
- 3:17Plasmic demo
- 8:54Component variants and states
- 13:09Generating React code
- 16:44Live design-code sync
- 19:12Plasmic challenges
- 23:27Simplifying CSS layout
- 25:12Importing designs
- 26:36Workflow impact
- 28:00Future of visual frontend
related talks
39mBuilding React UIs visually
36mBuilding a Web Design Tool for Developers
14mVisual building for Next.js
29mEvolving the Visual Programming Environment with React
30mDesigning with React
35mTeleport your application
01h 04mBuilding Design Systems for Scale: From Tokens and Components to Motion & AI Tools
39mDesigning with Components