The Land Beyond
Some hills are so steep they seem endless. So has it been for the web development community—longing for a visual way to build front ends that harmonizes with real, evolving code.
Today I’m excited to announce the open beta of MightyMeld, a dev tool that does just that, for front ends of unbounded complexity, with complete authenticity to source code. We designed MightyMeld to be simple to set up, architecturally agnostic, and work on any existing React web app.
For too long, front-end and full-stack devs—arguably the most visual of developers—have had to labor with non-visual tools. No longer. Moving forward, we web developers won’t have to look at the visual, code-aware builders in Xcode and Unity with jealousy. Finally there is a tool for us.
A Visual Dev Tool for Your Code
We got here by working backwards. Instead of design-to-code, MightyMeld starts with your code and layers on interactivity from there. The result is the world’s first truly bidirectional WYSIWYG for web apps.
Always under the gun to get more done? We built MightyMeld for you. Set up in minutes, then launch your app alongside a live visualization of your JSX in action. Like a game level designer, you can play through your experience, pause the “game” at any time, fix things, and keep going.
Like Chrome DevTools, MightyMeld works with your existing dev environment. Unlike other browser dev tools, everything in MightyMeld is phrased in terms of your underlying code.
A Visual Tool for Visual Work
Inspect your live JSX, and see your actual code in action instead of the compiled DOM output. Trigger an “Open in Editor” to hop to a callback immediately, instead of having to search in your text editor. It feels so natural to us, like something we should have had all along. We think you’ll agree.
On top of this foundation, MightyMeld has a broad set of tools designed to unlock the creative power of front-end developers:
- Update styles and layout with a design-tool-like feel.
- Scaffold UI quickly with flexible building blocks we call “prefabs”.
- Simultaneously look at desktop, tablet, and phone screens while dialing in your responsive styles.
- Prompt our Generative AI assist to make targeted style changes to your app (and code).
We’re dreaming of a future where all layout and style updates on web codebases are done visually. The code is still yours to see but with time you’ll find yourself typing JSX and styles less and less. Our goal is to give front-end developers unprecedented ease of use, speed, and total control, so that they can get more done in less time, and tackle ever-more-ambitious projects.
How We Give You Complete Control
As an engineer, I know that developers don’t want big blocks of clunky, generated code in their codebases. That’s why we built MightyMeld to surgically micro-update your code as you work. I find it amazing to see visual updates resolve into clean code—the same code I would have written anyway. Don’t take my word for it. Try it yourself.
The beauty of true bidirectionality is freedom. Working in regular code, you can program any feature that’s possible, leverage any tool or library that’s available, and adapt your solution to the infrastructure of your choice. We built MightyMeld to sync seamlessly with your ever-evolving architectural choices to help you stay in control while feeling your way to the correct UI.
How Front-End Developers Are Using MightyMeld
We’ve been working with a growing community of devs in our closed beta. Here’s what they had to say:
"Feels like Figma for developers" — Elijah Soladoye
“It’s a very intuitive thing to see my code update as i drag and drop it" — Zoya Bawangaonwala
“This is the next level" — Steven Barrios
"This is what I wish Storybook was.” — Peter Finn
And one of the most interesting quotes:
"It feels like an enhancement that takes nothing away rather than a wholesale replacement for large parts of my flow." — Jacob Mathison
This statement cuts to the very heart of why we built MightyMeld, and why it’s so different from every visual web builder I’ve seen before. We aren’t here to lock you into a specific platform, UI library, design system, deployment scheme, framework, or style of coding. We built MightyMeld to be the visual dev tool that works the way you work. Our goal was to make complexity intuitive: to flow with you, not against you.
We’re Just Getting Started
We’ve had tremendous support from the community, our investors and advisors, and our dynamic tech ecosystem which makes it so easy to build products. We hope that, with MightyMeld, it gets even easier to make amazing work. Whether you’re a beginning developer or a seasoned pro, we think you’ll find it hard to go back.
As an early-stage product, we have plenty ahead of us. While inspecting and modifying is getting pretty solid, we’ve barely begun to explore the potential for building with components. We have plans to expose more of the logic of the running app for inspection and manipulation. And of course, lots of polish. We ask the community for continued support in guiding this potentially promising new product.
Use MightyMeld for free. We have a pile of guides and build videos to show you around. Join our mailing list to stay up to date on new developments. We’ve also saved a spot for you in our vibrant Discord community. And you can always email us or book a time for one-on-one support. I invite each and every one of you to join us on the journey.
We appreciate your support! ❤️💜🩷
