Low-Code Design in Next.js: Visual Development Tool Demo

Carho is developing a browser-based tool for visual development in Next.js, aiming to eliminate design and developer handoff inefficiencies.

### Low-Code Design in Next.js: A Browser-Based Visual Development Tool
* 🛠 Carho from the State Library New South Wales introduces a proof of concept for visual development in Next.js, allowing users to **make updates to web content without touching code**.
* 🎨 The tool, built with Next.js and Tailwind CSS, enables **direct design changes in the browser** that are reflected in the code, **eliminating the need for traditional design-to-development handoff**.
* 👩 Designers can modify text, images, styles, and layout directly in the browser UI, with changes being **immediately applied to the underlying codebase**.
* 🔄 The project leverages React's debug data to **target specific instances of components**, and uses Next.js API routes to **access and modify local files**, triggering Fast Refresh to **update the UI**.
* ✅ Advantages of this approach include the design file becoming the codebase, **eliminating handoff inefficiencies**, enabling **immediate stakeholder feedback**, and ensuring **real data usage**.
* ❌ Disadvantages include the designer needing a **strong CSS knowledge**, potential design restrictions, and the necessity of **setting up a specific development environment**.
* 🔍 Future plans involve exploring other React frameworks (**Gatsby, Create React App**) and investigating compatibility with other front-end frameworks (**Angular, Vue, Svelte**).
* 👏 Carho concludes by sharing the project code and expressing interest in feedback, acknowledging the **experimental nature of the tool** and thanking **Next.js and Vercel** for the opportunity to present at the conference.

hey everybody, I'm Carho. I'm here to talk to you about low-code design in Next.js at the Next.js conference. Just quickly about me, I'm from the State Library New South Wales, Australia. I work as the DX Lab technical lead there, and I also have a design background. I started out life as a designer doing print and web design and industrial design as well. So, low-code design. If you're not familiar with low-code design, think of it as a way of visually building your software, using a UI (user interface) to build code, to write code for you. It's become quite popular in the last few years. I'm here to talk about it in Next.js. So, I've been working on a proof of concept that brings visual development to Next.js. It's a browser-based tool, so it works entirely in your browser, and it means it helps you change styles and more without touching any code. The reason for me investigating this project is I've noticed that there's been a few problems with design and developer

handoff over the years a typical workflow starts off with the designer sending a finished kind of file sketch or figma photoshop whatever to the developer but quite often there's a few problems such as it not using the real data. It uses mock data fake data. Also, the file isn't totally fluid. It's just kind of the static sort of renderings of what it could look like so there's a few issues there. Also, things like hover and focus active states quite often than not in the file as well. There are also many inefficiencies of hand-off this design file. Many many hours have been spent on this design file. I've done these myself also. It takes a long time to implement it in code as well and a bit extra time for pairing just to kind of make sure you fix the things that the designer notices. So it feels like double handling the solution let's just get rid of hand off entirely. Well, let's try to and design directly in the browser design with production code means that there's no back and forth.

between design and development, it's just one workflow. So, I've got a bit of a demo to show everybody, and it uses Next.js and Tailwind CSS. Tailwind CSS is a utility-first CSS library. So, this is a Next.js page. Really simple. It's got an image, some text as well, and I have a UI that I've been working on that lets you make updates to the contents of this page. So, let's just say I select trumpet. I can also select the date as well, and also the image. And I'll select this text here, and I can increase the font size of it, make it a bit bigger. I can also make it more bold. Actually, I can change the contents of it as well. This talented gentleman is not only playing the trumpet, he's playing the piano as well. I can change the background color as well. Let's make it a little bit more vibrant like that, or like that. Stick with that for now, and update our text color, perhaps like that. So, I'm making changes in the browser, but

they're actually being changed inside the code as well, so let's just say let's keep an eye out for the um class names here. And this is tailwind css, by the way, so it's all utility css, makes this project a lot easier to build um. And I will change it to yellow, and there we go, text just got changed to yellow. I can also um have access to a layers panel, so I'm able to do things like this and select a div and make a few changes like so, change the margin and the padding as well. And once again, these changes are reflected in the code as well, so hopefully you can sort of see how how much time could be saved if the designer just had access to this and was able to just make these changes without having to harass the developer to to do these changes. I've got another demo here, and this is a little bit more involved, so the code here just got a little bit of an array with a couple of things, and then I have a demo card component right.

so this is all within the page. So let's go inside the demo card component, and I'll open up my UI. Zoom out a little bit and say I select this text here. Once again, keep an eye out for the title. Okay, so right now it's white. So I've got this selected. I can make it green. I can make it blue. And notice that the other component is also changing because they're the same instances of the different instances of the same component. So how is this possible? I'll give a little bit of a breakdown. I use React's debug data, and you can access it with a code like this: target instance debug source. Very, very useful. And it looks a bit like this. So for that particular element, the line number and the column number of that bit of code is described, and also the direct absolute file path of the component. Um, super, super useful. So I send these to the API, and I'm using Next.js API routes. And then in this API, it has access to the local hard drive. So use FS module to

read and save the file. Also, use Babel and Prettier to make changes to class names and add elements as well. And also update the text. And then, once the file is saved, Fast Refresh is triggered and the state is all kept. So, there's a few advantages to this approach. The design file becomes the code base, so there's no more Sketch files that sit in the hard drive, anywhere, never to be touched after they've been passed on. There's no handoff, so there's no time wasted with between developers and designers. Everything's in version control, so it's all in kit. Also, these changes, design changes, designer might have an idea and one wants to see it, they can deploy this and get feedback from stakeholders straight away. Also, uses real data and conforms better to any design systems that are in the code. There are of course some disadvantages. The designer needs to know CSS pretty well, I think. Also, CSS can be a bit restrictive for design. It's not like you can just move things around, so it might restrict creativity a little bit. And also

of course, we need to set up a dev environment with this particular setup. So for this project, um, I'm still just working on it. It's a very early prototype just to see how, um, how it works. I'd like to explore, um, other React, um, frameworks such as Gatsby and Create React App, and also investigate other front-end frameworks such as Angular and Vue and Svelte. Thanks so much for checking out this talk. Here's the code, and please check it out. Uh, feedback, it'd be great to hear from you. Um, I'm not sure if this is going to go anywhere, but it was a fun project. And thanks so much for Next.js, uh, and Vercel for, uh, inviting me along. And the slides were made with, uh, React Spectacle. Cool. [Music]

Low Code Design in Next.js - Kaho Cheung

Vercel’s Frontend Cloud provides the developer experience and infrastructure to build, scale, and secure a faster, more personalized web.

Vercel

Carho, the DX Lab technical lead at the State Library New South Wales, is introducing a browser-based low-code design tool for Next.

js, aiming to improve the design and developer handoff process.

The tool allows for visual development in the browser, eliminating the need for designers to send finished files to developers and reducing inefficiencies and the back-and-forth communication between the two roles.

By enabling design with production code and real data, it seeks to streamline the entire design and development process, ultimately eliminating the need for traditional handoff.

js and Tailwind CSS for a simple web page with the ability to make real-time updates.

js and Tailwind CSS allows for efficient and collaborative design and development, saving time by enabling designers to make changes without developer intervention.

The demo illustrates the potential for streamlining the workflow between designers and developers.

Using React's Debug Data for UI Development

UI elements can be easily manipulated using React's debug data and Next.

The approach allows for the design file to become the code base, eliminating the need for separate Sketch files.

This method enables real-time feedback from stakeholders and better conformance to design systems, but it may require designers to have a strong understanding of CSS and could potentially limit creativity in design.

Exploring Various Front-End Frameworks in a Development Environment

The project is an early prototype aiming to explore React, Gatsby, Create React App, as well as Angular, Vue, and Svelte.

The goal is to receive feedback and is a fun project, with credits to Next.

js, Vercel, and React Spectacle for the slides.