Building a Design Tool for React in React

on YouTube ↗27m

" summary

BuilderX is a design tool written in React that ships a canvas editor with a right-side properties panel and live code output. It implements selection, drag, and layout at interactive rates (about 60fps) and generates clean JSX that targets both React web and React Native. The implementation shifts from imperative state mutations toward declarative models, handles roughly 1,000 component/options scenarios in testing, and successfully exports usable code for real projects.

AI-written summary · about

" chapters (7)

1. 0:00Introduction to the talk
2. 1:44Need for design tools in React
3. 3:52Key features of the tool
4. 9:20Performance and state management
5. 13:14Imperative vs declarative approaches
6. 18:50User interface and updates
7. 22:49Future improvements and conclusion

" related talks

• 30mDesigning with ReactMark Dalgleish · React Amsterdam 2019
• 18mBridging the gap between design prototyping and codeIves van Hoorne · ReactJS Day 2018
• 25mDesigning with ReactKristin Baumann · React Day Berlin 2017
• 22mJSX for DesignersTravis Arnold · React Finland 2021
• 36mBuilding a Web Design Tool for DevelopersYang Zhang · HalfStack Online 2020
• 43mDesigning with ReactKristin Baumann · <React.NotAConf /> 2018
• 21mIntroducing React View: A Set of Tools that Closes the Gap between Users, DevelopersVojtech Miksu · React Summit 2020
• 41mBuilding a design system with React in 2025, what's new?Jean Burellier · React Paris 2025