Utopia? Echoes of Delphi and Dreamweaver in new visual editor for React

Looking for a design and coding tool for React? A new effort, Utopia, was released in alpha this week.

Facebook-sponsored React is the most popular JavaScript framework for building user interfaces – the StackOverflow 2020 survey reported usage by 35.9 per cent of developers, ahead of Angular at 25.1 per cent – and is also used by other projects such as React Native, for desktop and mobile applications, and as the basis for other frameworks such as the Next.js server-side rendering framework and the Gatsby static site generator.

The usual way to design with JavaScript and HTML/CSS is to write some code and then run it to see what it looks like. There are also visual designers but it is hard to get the flexibility and control of pure code combined with the speed of a graphical design tool. Utopia, just released in Alpha, claims "full two-way synchronisation," meaning that the design and the code update each other instantly.

Developers with long memories will recall that Delphi did this (with great effect) for Windows applications, unlike the other rapid development tools at the time. There were also efforts to bring something similar to web development with tools like Macromedia's Dreamweaver, acquired by Adobe, or even Microsoft's FrontPage, easy to use but notorious for generating bad code and/or requiring server-side extensions.

"Utopia founder here. Yep, I loved the idea of FrontPage, and learnt so much, and yet - it sucked so much in practice," said Malte Nuhn in a discussion on Hacker News.

The idea of the project is that "it works with real code, in real projects", which enables prototypes built with actual React components rather than mocked up in Figma, and rapid visual design without compromising the code. "Whatever Utopia doesn't (yet) understand, it leaves as-is," claim the docs.

Another claim is that Utopia does not force developers or designers into any specific way of working. "Since Utopia is an editor - not a library, not a framework - you can use (and learn!) vanilla JavaScript and React," the team said.

The editor is based on Visual Studio Code and includes ESLint (static analysis for JavaScript) and Prettier (code formatter). The tool also includes a debug console, and presuming use of the Utopia web application, the ability to share a preview with external users. A canvas section updates as you type, or can be switched into edit mode whereupon it becomes a graphical editing tool. This is synchronised, so that selecting a visual element also moves the cursor to that point in the code editor.

Other features include the ability to work with dynamic data, dynamic CSS layouts, and user interfaces that change according to variables set by code. One of the factors that makes visual JavaScript and CSS design challenging is that it typically adapts itself to different screen sizes and form factors (responsive design) as well as morphing according to dynamically generated content. There is also a storyboard feature, letting developers set up designs with multiple scenes.

Utopia is open source and hosted on GitHub, under the MIT license. "The design tool is still quite early," according to the team. What about trying it out on your own PC? This is a matter of cloning the project and building it locally.

Your intrepid correspondent attempted to follow the somewhat incomplete instructions using Windows Subsystem for Linux 2, with partial success after some messing around with Webpack (JavaScript build tool) and NixOS (shell and package manager), and a couple of tweaks to TypeScript code that did not compile.

That said, the VS Code part of the resulting local web application is broken on our build. Our hunch is that some developers will be keen to get this working rather than coding entirely in the cloud.

The intention of the team, however, is that developers will use the hosted version and not have to worry about self-build.

• JavaScript survey: React everywhere, Jest, Webpack on the up... if only it had static typing, sigh developers
• 'Big updates' to Mac design app Sketch add real-time collaboration – but you'll need to fork out for a subscription
• But can it run Avid? The Reg hands shiny new M1 MacBook to video production pro, who beats it with Blender, Handbrake, and ... Hypercard?
• The Audacity of it all: Version 3.0 of open-source audio fave boasts new file format, 160+ bug fixes

What is the business model? "The idea is to keep this free for single player mode ("earn your time, trust, and usage, not lock you in") and charge for features that align with financial value creation. Initially those will very likely be team focused - but our priority for the remainder of the year is squarely on single-player mode," Nuhn told me on Discord.

Other common questions are whether it will work with React Native – "Not at the moment, sadly" – and whether it might work for HTML 5 web components and/or non-React JavaScript frameworks.

"Web standards are close to our heart… it's something we'll start to seriously look into once the product is a bit more mature," said Nuhn. "The same is true for other JS frameworks like Vue." ®