What news from AWS re:Invent last week will have the most impact on you?
Amazon Q, an AI chatbot for explaining how AWS works.
Super-fast S3 Express storage.
New Graviton 4 processor instances.
Emily Freeman leaving AWS.
I don't use AWS, so none of this will affect me.
Cloud Services / Frontend Development / JavaScript

MightyMeld Launches Code Visualizer for React Developers

MightyMeld is like Chrome DevTools for React apps. Just don’t call it low code, say CEO Steven Schkolne and VC James Lindenbaum (ex-Heroku).
Nov 1st, 2023 6:00am by
Featued image for: MightyMeld Launches Code Visualizer for React Developers
Image via Unsplash.

The phrase “Figma for developers” has been used by a number of dev tool startups in recent years, but a company called MightyMeld believes its product — targeted at React developers — actually lives up to it.

MightyMeld, which is launching out of private beta today, has created what it calls a “visual way to build sophisticated web apps and frontend UIs.” It lets developers find, modify and commit code changes to production “in a visual way that is always in sync with live, running code.”

MightyMeld is a bit like Chrome DevTools — but just don’t call it a low-code tool! At least that’s what I was told multiple times in two interviews I conducted, first with lead investor James Lindenbaum from Heavybit (who was previously co-founder and CEO of Heroku), and then with MightyMeld’s founder and CEO Steven Schkolne.

Dreamweaver for React Apps?

At first, what Schkolne was describing to me sounded a bit like Dreamweaver, the website development tool I used many years ago. Dreamweaver was known for its WYSIWYG (“what you see is what you get”) environment — you could create web pages and even simple apps using a part-visual and part-code interface.

But Schkolne made it clear that MightyMeld is more sophisticated than Dreamweaver, because it can create entire React applications. MightyMeld uses the component-based architecture of React, in the form of JSX — the JavaScript extension created by Facebook to use with React. Schkolne described JSX as “basically this way of writing things that looks a lot like HTML, but actually is components.”

“Once you have this structure,” he continued, meaning the component structure of JSX, “that’s kind of the underlying observation that made us [build] MightyMeld. That made me think, maybe something like this is possible. Because this structure right here in the React code is very similar to [the] Figma hierarchy. So you can actually have this tool that merges the two [visual and code].”

MightyMeld dashboard

MightyMeld dashboard

In my discussion with James Lindenbaum, he noted that finding a “Figma for developers” type company to invest in was a difficult task. So when he discovered what Schkolne had created with MightyMeld, he was intrigued.

“Frontend systems have gotten very thick and complicated,” he said, “and so editing frontend code has just become […] an ongoing quagmire. Things like Jamstack and all this other stuff that we’re involved in has accelerated that, because it’s just made the client side thicker. So there’s just more and more UI code. And oftentimes, even something like finding the right spot in the code — in some massive tree of React components or whatever — to update something visual in the text editor is really quite difficult. So this desire to have a tool that lets you edit what is fundamentally a visual thing, with a visual tool, has been clearly a desirable thing for a long time — but no one had really done a good job of it, as far as we were concerned.”

What Lindenbaum liked about MightyMeld, when he first came across it, was that the visual interface produced “normal code.”

“A lot of times people build nice visual editing systems, but they don’t produce normal code,” he said. “They can’t look at your existing code, they don’t produce normal code that you can then use with all your normal tooling. They’re usually sort of their own contained universe.”

In other words, a low-code platform.

“But what he was building,” continued Lindenbaum, referring to Schkolne’s product, “was actually a way that you can look at an existing React code base, and then completely visualize it inside the browser window — infinite-canvas style, like Figma or similar tools, where you can actually see all the components.”

side by side git view showing generated code updates

Side-by-side git view showing generated code updates

MightyMeld’s Competition

According to Schkolne, MightyMeld is a unique product in the dev tools ecosystem, although he did acknowledge that Storybook is similar. Storybook, which is an open source tool maintained by the company Chromatic, describes itself as “a frontend workshop for building UI components and pages in isolation.”

“We’re inspired by Storybook, but want to go a bit deeper and actually run your entire app,” said Schkolne. “Storybook runs components in isolation, we run your whole app at once.”

He added that he’s seen “a ton of Figma-to-React code generators” on the market, such as Plasmic, as well as a lot of AI apps that generate React code. He then referred to all the low-code products out there — he declined to mention any by name, but said that some are “fulfilling a good need and ecosystem for people who are starting greenfield projects and maybe want a starting point.”

But again, he insisted that MightyMeld goes further than other visual development products.

“But what happens when you want to evolve and keep furthering your product,” he said. “That’s […] what MightyMeld is designed for. And as an engineer, I need to be able to iterate and push my code base forward in lots of different ways [by] doing a coded app.”

MightyMeld drag and drop

MightyMeld drag and drop

I asked Schkolne what kinds of tools their target users are using for app visualization currently?

He replied that many of their target market use VS Code and GitHub, but for app visualization “they’re really not using a tool for this other than Chrome DevTools.” He described MightyMeld as “a better sort of step up from Chrome DevTools.”

For his part, Lindenbaum says that MightyMeld is an example of “a structured tool to do development work.” He indicated that this even applies to its use of generative AI (like nearly every dev tool now, MightyMeld features AI code generation). The way the product uses AI, he said, is to assist you in the context of the app — rather than, for example, simply generate some code.

“It’s almost […] like asking your friend who sits next to you, who’s a pro with the tool, to come over and look over your shoulder and make some suggestions, or make a couple edits for you. I think MightyMeld’s intended use of AI is more like that,” he explained.

He added that Retool, a low-code product I recently profiled and had mentioned during our conversation, has a similar approach to AI. So he’s not claiming MightyMeld is unique in respect of AI.

The Dev Tools Ecosystem More Broadly

James Lindenbaum is undoubtedly one of the pioneers of the modern “dev tools” ecosystem, having co-founded Heroku — one of the first cloud “platform as a service” companies — in 2007. So I asked him if he thinks the developer market will continue to expand over the coming decade, just as it has over the past decade (fueled by React and similar JavaScript frameworks).

Firstly, he acknowledged the debate around people who use low-code products and generative AI to produce code — are they actually developers? He doesn’t have an opinion on that, but he did say that “there’s no question that more people are going to be building software.”

“That’s already happening — more people in total are going to have the power to build software as a result of some of these systems.”

In particular, he thinks the current AI market will require new kinds of dev tools — similar to what happened when cloud computing took off in the early 2010s.

“There [are] a lot of new and different kinds of problems that you need tools to deal with,” he said. “And so if you count all that as developer stuff, then yes, I think that market is going to expand.”

Group Created with Sketch.
THE NEW STACK UPDATE A newsletter digest of the week’s most important stories & analyses.