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

'I loved the idea of FrontPage, and learnt so much' confesses Utopia founder


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.

Utopia: a new two-way code editor and designer for React.js

Utopia: a new two-way code editor and designer for React.js

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.

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." ®


Other stories you might like

  • Twitter founder Dorsey beats hasty retweet from the board
    We'll see you around the Block

    Twitter has officially entered the post-Dorsey age: its founder and two-time CEO's board term expired Wednesday, marking the first time the social media company hasn't had him around in some capacity.

    Jack Dorsey announced his resignation as Twitter chief exec in November 2021, and passed the baton to Parag Agrawal while remaining on the board. Now that board term has ended, and Dorsey has stepped down as expected. Agrawal has taken Dorsey's board seat; Salesforce co-CEO Bret Taylor has assumed the role of Twitter's board chair. 

    In his resignation announcement, Dorsey – who co-founded and is CEO of Block (formerly Square) – said having founders leading the companies they created can be severely limiting for an organization and can serve as a single point of failure. "I believe it's critical a company can stand on its own, free of its founder's influence or direction," Dorsey said. He didn't respond to a request for further comment today. 

    Continue reading
  • Snowflake stock drops as some top customers cut usage
    You might say its valuation is melting away

    IPO darling Snowflake's share price took a beating in an already bearish market for tech stocks after filing weaker than expected financial guidance amid a slowdown in orders from some of its largest customers.

    For its first quarter of fiscal 2023, ended April 30, Snowflake's revenue grew 85 percent year-on-year to $422.4 million. The company made an operating loss of $188.8 million, albeit down from $205.6 million a year ago.

    Although surpassing revenue expectations, the cloud-based data warehousing business saw its valuation tumble 16 percent in extended trading on Wednesday. Its stock price dived from $133 apiece to $117 in after-hours trading, and today is cruising back at $127. That stumble arrived amid a general tech stock sell-off some observers said was overdue.

    Continue reading
  • Amazon investors nuke proposed ethics overhaul and say yes to $212m CEO pay
    Workplace safety, labor organizing, sustainability and, um, wage 'fairness' all struck down in vote

    Amazon CEO Andy Jassy's first shareholder meeting was a rousing success for Amazon leadership and Jassy's bank account. But for activist investors intent on making Amazon more open and transparent, it was nothing short of a disaster.

    While actual voting results haven't been released yet, Amazon general counsel David Zapolsky told Reuters that stock owners voted down fifteen shareholder resolutions addressing topics including workplace safety, labor organizing, sustainability, and pay fairness. Amazon's board recommended voting no on all of the proposals.

    Jassy and the board scored additional victories in the form of shareholder approval for board appointments, executive compensation and a 20-for-1 stock split. Jassy's executive compensation package, which is tied to Amazon stock price and mostly delivered as stock awards over a multi-year period, was $212 million in 2021. 

    Continue reading

Biting the hand that feeds IT © 1998–2022