Low Code Design in Next.js

on YouTube ↗11m

" summary

A browser-based low-code editor that edits production Next JS pages by mapping live DOM nodes to source locations and actually rewriting files, not just exporting JSON. It uses React debug data + Next JS API routes to find component file paths, then calls fs, babel and prettier to change class names, text and layout and relies on fast refresh; it’s an early prototype that works for Tailwind CSS sites but requires designers to know CSS.

AI-written summary · about

" chapters (7)

1. 0:00Start
2. 0:14About
3. 1:22Problems with Design/Dev Handoff
4. 2:45Solution?
5. 7:06React node debug data
6. 7:37Demo Breakdown
7. 9:08Disadvantages

" related talks

• 32mWhy don’t browser dev tools understand your code?Steven Schkolne · Conf42 JavaScript 2023
• 26mNext level CodingTim Neutkens · React Live 2019
• 06mMake amazing docs, faster with StackBlitz and Next.jsSylwia Vargas · Next.js Conf 2022
• 36mNext.js by ExampleGuillermo Rauch · Nordic.js 2017
• 34mWhat's Next? Exploring the future of ReactGuillermo Rauch · ReactiveConf 2016
• 41mReact inline visual editing: now's the time.Matteo Frana · reactjsday 2023
• 40mStatic and Dynamic Next.jsGuillermo Rauch · JSHeroes 2017
• 20mUsing AI to turn designs into clean codeSteve Sewell · Config 2025