OP here. I wrote some about this project in the following link, and there's a video demo as well: https://portfolio.christopherhwood.com/llm-drag-drop-website...

This has been one of my favorite things I've ever worked on - the way the LLM collaborates with the user to accelerate tedious and hard work, the way you can directly edit the code instead of dealing with a panel of visual editing toggles - I think it has a lot of potential but I don't have time to pursue it anymore so open-sourcing it.

The idea for this came out of conversations with a few people who were struggling with frontend development.

For technical people, strictly using an LLM to write code can be tedious. To combat this, LLM usage is limited to getting started quickly, improving design, and wiring up frontend state.

On the other hand, writing frontend code feels less efficient than just moving things around on a screen. Hence the drag and drop interface that makes it fast to build.

Finally, I despise the visual editing toggles on Figma / Bubble / Squarespace / etc. The amount of hunt and peck to simply adjust a font a bit and change some colors or add a shadow is a huge time suck. So I built a way to directly edit the underlying React code when styling - just add or remove tailwind classes.

IMO the craziest thing is that all of the code is just stored on the frontend in a config language of sorts. It is inflated at runtime and can be updated without any hot reload.

There is no "underlying React code" for the app you're building here - in order to edit the code, I convert the config into React code, then convert back to a config, which triggers updates in the dom.

Anyways, I think there's a lot of clever stuff in here, but then again I wrote it. Happy to answer any questions and hope this is interesting/helpful to someone else out there.