An Open Source UI Builder for React
github.com
github.com
Please don't fall for the monopoly. Spend a little time and make it work everywhere, for the sake of the open web
My best guess would be that it either did too much or not enough. Getting an extra developer's worth of productivity from a tool is great but there could be other ways to make gains as noted in the shutdown page. Visual editing is a different way of programming and can be more or less productive depending on specifics. I recall doing some IBM DirectTalk voice/telephony app dev using a visual flow editor--it was the worst. There are of course success stories like the original Visual Basic 1.0. Xcode and autolayout is less productive but more expressive.
On the doing less side, are there tools for parsing/editing/outputting HTML+CSS rather than a full React integration? I've worked with designers that used Figma or Zeplin but we only tended to export the graphics and copy/paste the styles.
For example, we (Anima - YC S18) are doing it (https://www.animaapp.com)
I worked on a thing like that for a long time. I wasn't trying to "draw" HTML and CSS, but rather I wanted a way of building rich and structured content in a natural and visual interface without sacrificing control of the markup. I ended up bogged down because little by little it tried to be a design tool, and I ended up with a complex project that doesn't do any one thing very well.
It's on the back-burner for now, and it may end up open source. Link below:
Creator of Airppt here -> https://airpptx.github.io
Drag and drop a UI in powerpoint with your layout, and poof, you get a UI in HTML/CSS. Don't try anything too complex or fancy, and take a look at the limitations.
I haven't published on Show HN yet, still a work in progress - but a side hobby of mine
Prefacing this with the fact I don't know all that much about the product, only a quick glance
For a big team of developers, building a big website with complicated interactions or requirements, a tool like this isn't going to meet all the requirements the developers have
If you're building something simpler, then you're probably better served by something like Webflow or Squarespace.
In my head, I'm wondering if they are just way too early? Going from design -> code -> UI is, in theory, less efficient than just going from design -> UI, in a programmable, customizable, scalable way.
making stuff is never going to go mainstream when you can just pay someone to do it for you
Loved Delphi, Forms, Blend, Netbeans Matisse and JSF designer, Blend, Outsystems, ...
As mentioned in another thread, these kind of tools with good workflows and developer experience don't get written for free.
I'm super curious around what the sales strategy was.
I'd imagine for devs, it would have to be around productivity (time saved by exporting vs. manually coding, adherence to consistent CSS standards, etc.).
For designers, I would imagine it would be around taking more of the software dev lifecycle - e.g. designers can now eat up part of the value that front-end dev provides. Based on that, designers should be more in demand, paid more, and so on.
Those seem like huge levers to pull from a PMF perspective, but to your point, maybe it all sounds great until you get into that conversation, and it's really not something that teams are looking for (at least right now).
There’s a lot of activity in the Sketch/Figma/whatever to React space at the moment, including Hadron [0], Alva [1] and Lona [2].
There’s a real gap in the workflow between design - basically a drawing - and working code. Handoff tools like Zeplin help, but it seems redundant to build everything twice, first in a design and prototyping tool, then again in working code.
However I’m not sure where these tools fit in, as a team that uses React in production would have the skills - and would probably prefer - to dive in with code, rather than use the output of a code generator.
It’s meant to make things easier, but the tech is so complicated it’s way out of reach of those who might actually benefit from it.
Showcase:
Demos:
Happy to answer questions.
It is an object model based solution so it does take some getting used to...basically imagine your vue/react application constructed as an object model, the product provides a UI environment for creating and manipulating that model.
Of course there is always room for improving the workflow so what you see today is definitely not what we envision the final state to be. What we are really excited about is the underlying tech which is going to allow different UI based solutions.
In tools like Sketch and Figma you're digging for the underlying visual rules, one "component" or layer can have a ton of variations, and I can quickly compare and compose them side by side on a canvas. You build an evolving system to build design systems from.
In code you're implementing the version or composition that made it, one composition. Unless you can move, juggle and manipulate items as convenient as in design tools, exploring compositions with code is a much lesser experience for a designer, even if he can code.
There is certainly a grey area for tools that are too limiting for developers and require too much setup for designers to use out of the box.
This is an extremely ambitious problem to solve because it requires building an entire Wix or Webflow that also speaks and outputs some sort of web component (in our case React). It needs to allow designers to work in a completely visual way without worrying about tools like Git while developers can at the same time add logic and state to the otherwise static design. You have to remove all hard handoffs that fork the source of truth and keeps ideas from flowing from the canvas through the development pipeline. InVision and other tools are "glue" that attempt to solve this, and they definitely make things easier, but the handoffs are still there.
Many of the tools I'm seeing get close, but they don't go all the way because it would be insanely expensive to replace all the tools in the pipeline (InVision included) and make a single environment that everyone works in to produce a full UI from blank canvas to prototype to production. Gamers have Unity, that's what we need in the web/native app development arena.
We've been working on it here: http://www.shift.studio. While I'm sad to see Pagedraw go (and I've reached out about getting lessons learned from the founder who responded and was extremely helpful/nice), I still believe this is a good idea and we are going to push forward and get it done. I also really love seeing that others here agree that something like this needs to be built.
I would love to hear from HN, what do y'all believe is the fundamental list of features required to tackle this? (no matter how bold/crazy the request)
- A look and feel similar to Pagedraw would be perfect
- The output should be just: js, html and css. No frameworks.
- The tool should not offer its own components, only the possibility of integrating off-the-shelf webcomponents (w3c)
Their home page doesn’t even render correctly in Firefox.
So what does this mean? Does it mean it is the right product when it is open source, or is the code being made open source just for the purposes of archiving?
Or now that it is open source is it seen that it might become a more useful tool?