AnnouncementVisly — Build React components visuallyWritten by Emil Sjölander on 2020-12-16

Today marks the first public release of Visly. We've been developing Visly and using it ourselves to build most of Visly's UI components for the past year, and in the past six months a number of designers, developers, and founders have been using a pre-release version of the product. One of those is Eliot, the founder of Metaview, a platform that uplevels your interviewing and recruitment process.

At Metaview we use Visly for our entire frontend, from document collaboration features to monitoring dashboards. Visly allows us to get interface elements looking “just right” much quicker than tweaking JSX and makes us feel happy when it comes to working on layout stuff, not sad!

— Eliot Ball, Metaview Founder

Starting today, you can join Eliot and many others in creating UI in the way it was meant to be created - visually.

Visly helps developers build and product teams collaborate

We built Visly because we were tired of seeing product teams siloed, with engineers working on one side and designers on the other, using so-called "handoff" tools in an attempt to facilitate communication. We've all experienced frustrations and inefficiencies from the duplicated work and miscommunication (among other things) that come from working like that. Call us crazy, but we believe UI should be built visually.

With Visly, the engineers and designers on your team can collaborate in the same tool and ship products to production together. Unlike other no-code tools, Visly doesn't dismiss code — we think code is still the best tool out there for building business logic, state management, and complex user interactions. Visly components interoperate seamlessly with code, and can be used together with your existing front-end infrastructure such as Next.js and Gatsby.

Making sure Visly works with all your existing code, and software development processes, has been a top priority from day one. We've made sure Visly can be Designing for incremental adoption, so you can start using it today whether you're writing the first line of code for a new app, or adding a feature to an already successful product. Visly also brings with it tooling to help resolve merge conflicts and, on the Pro plan, GitHub integrations to allow visual code review of UI components.

Visly empowers beginners and accelerates experts

At Visly, our mission is to make development of frontend applications more tangible, visual, and collaborative. We want to help you focus on building the best products, rather than re-implementing things that should be standard on the web already, like accessibility support, or recreating what a designer has already done in a design tool. Whether you are a beginner, just starting down the path of building product, or an expert with years of React experience, Visly will help you and your team develop better products.

Visly is there to help even before you sign up. Creating high quality application building blocks such as buttons, sliders, and drop downs (we call these primitive components) that follow all the accessibility standards, are performant, and on top of everything look and feel great is a lot of work, whether you see yourself as a beginner or an expert. As part of the sign up process for Visly, we'll guide you through creating your very own set of primitive components, fully tailored to your design and customizable to your heart's content. And it'll only take you 5 minutes 🤯

We could have stopped here, but we know that most applications require a lot more than just these primitive components. And often times you'll want to tweak these components in a way that libraries such as Material design and Ant design just don't allow you to do. That's where the Visly component editor comes into play. Change the design, contents, or even the layer structure of your primitive components, as well as create entirely new, much larger, components, all of which will work seamlessly together with the code you already have.

Ben, an early user of Visly, has been using Visly to build the UI for web apps, websites, even embeddable add-ons for Coda, all using this editor and the primitives that ship with Visly. You can join Ben and many others in creating UI in the way it was meant to be created - visually.

Visly is a true game changer. This tool has a razor vision that guides the roadmap, keeping the focus on visually building and maintaining react UI without compromising the developer experience in the slightest. I look forward to every release.

— Ben Stocks, CEO at Solen Labs

Visly is built in Visly

By now you may be thinking "my product is too complex for Visly", but let me prove you wrong. The majority of Visly's UI is built in Visly itself. Below is a quick walkthrough of our own Visly component library, showing you how we build complex UI such as our bug reporting flow using Visly together with common frontend workflows such as live updating with React fast-refresh. If you have any doubts that Visly would work for you, email me and I'll help you and your team get onboarded personally.

What's next for Visly

Today is just the very beginning — over the next 6-12 months we'll be adding support for React Native & Vue.js development, dark mode, better responsive design, Windows developers, and much more. In terms of designer support, we'll be adding Figma integrations, visual version control, as well as many smaller canvas features designers currently miss from tools like Figma when using Visly.

From the very beginning, we understood that we needed to focus first and foremost on the developer community; otherwise, Visly could have quickly turned into a prototyping tool rather than a tool for building production components. That being said, we know the value Visly can hold for designers and want to make Visly the best tool for designers too. Over the course of 2021, you'll see Visly expand far beyond what it is today, and we're hoping to do that with as much input as possible from you.

We're incredibly excited about the future of frontend development and user interface design, and we are humbled to be able to play a small part in helping craft the interfaces of tomorrow.

Using React to build a complex front-end? Visly is for you.