9 ms·

React UI Builder

391 points by snake_case 11y ago

marknutter 11y ago
Something like this has existed for Polymer.js for a while now called Polymer Designer - https://polymer-designer.appspot.com/ https://polymer-designer.appspot.com/ I think as web components start to become standardized we'll see more and more of these types of tools that make it easy to click interface elements together using a GUI.
mikewhy 11y ago
Have had a huge hankering to build something like this for a while. Excited to try this out!
- foota 11y ago
  Came here to make this same comment! I've always thought something that combined react with a sweet wysiwyg gui would be the most awesome and powerful tool.
  - ipselon 11y ago
    Stay in touch guys. Next thing we are going to roll is a fast CSS editing - convenient way to edit CSS for component on the page. Actually we have a big plans for improvement of the tool. And it will be sooner if you will give us any feedback. Thanks.
    - callmevlad 11y ago
      Hey @ipselon - I'd love to get in touch and chat about this. I can't find your email in your HN profile; any chance you can contact me via vlad [at] webflow [dot] com? Thanks!
      - ipselon 11y ago
        I added my email, please find it in profile.
revskill 11y ago
How to clone project? Whenever value i input in the "Local directory path", it always say: {"errno":-2, "code: "ENOENT", path: ""} I don't think it's stupid at handling common situations like that for someone to try the first time.
- chm 11y ago
  You should file an issue on the GitHub repo. That way you're assured the author/contributors will see it :)
- ipselon 11y ago
  Please read posts here https://groups.google.com/forum/#!forum/react-ui-builder https://groups.google.com/forum/#!forum/react-ui-builder I'm pretty sure you will find answer there.
- talkingtab 11y ago
  I think the issue is permissions. Since the browser is creating and writing to files. I was having this problem and changing the permissions on the target directory to 777 fixed the problem.
  - cdcarter 11y ago
    Yes, and more obviously, the project directory needs to exist.
rattray 11y ago
Been wondering when someone would do this. How the community rallies around it rather than relying on the maintainer doing all the work, assuming it's of high quality. Looking forward to giving a try!
rattray 11y ago
Been wondering when someone would do this. How the community rallies around it rather than relying on the maintainer doing all the work, assuming it's of high quality. Looking forward to giving a try!
deleted 11y ago
[deleted]
curiousjorge 11y ago
This has huge potential. I just saw the tutorial video and super excited. I don't know why I didn't think of this before, this could be the 'missing' piece of the front-end application puzzle. What I mean by that is that there are so much fragmentation in this landscape and a tool like this could eventually consolidate all the heterogeneous attempts by forcing others to adopt the same UI builder, and compete on that front. The tool is shockingly reminiscent of early 2000s, where anyone could make software using VB. Recall that VB had everything done under the sun, somebody had built a component on VB, you could use that or you could hack it for your need. Another example is Google's Java Swing UI builder (as horrible Swing is), allowing data binding with the form. These never caught on but we now have this technology in the browser. Whoever owns the UI builder tool market will emerge as the victor, Facebook should hire you immediately. There are several appealing points about the React UI builder which I think will help me: - WYSIWYG editor to drop bootstrap component allows me to easily build from my mockup wireframes and save me from typing everything out. - ability to edit the code directly for each component. Would be nice if I double clicked a button it would create a click event (just like visual studios or netbeans) - ability to use html directly in the code (okay, feature of react which is a bit controversial but for me it definitely beats using + everywhere) - generates clean, easy to understand plumbing code (this is what I spent a lot of time on when I used to build my swing tool https://github.com/jjk3/scrape-it-screen-scraper https://github.com/jjk3/scrape-it-screen-scraper) I been putting off learning react.js,flux and such but this actually entices me to use it for my next project (https://github.com/whatsdis/hedgehog https://github.com/whatsdis/hedgehog). I will write up a follow up experience using the React UI builder, hopefully my feedback will be helpful to improve it. You got something here. Keep at it!
- ipselon 11y ago
  Hi, thanks for this awesome feedback !!! Generation of event handlers will be in the next release. Thanks again. I appreciate your feedback very much.
  - curiousjorge 11y ago
    Not a problem, event handlers would be great, very much looking forward to it. If you can email me (click my profile) I'll be happy to send you more feedbacks once I start diving into it.
lopatin 11y ago
This is great. One big reason that I'm so excited to see more tools like this is that they have the potential to make unit testing less annoying. Build your component and take snapshots of it in different states with different props. Convert that to a Jasmine (or something) spec automatically. This would take care of 90% of the UI unit tests that I write.
- foxhedgehog 11y ago
  This is a great idea.
- mca 11y ago
  I plan to add an agnostic generator for code-coverage that can be easily extended to allow generators for a given testing toolkit. I will adapt it as necessary to facilitate unforeseen/esoteric features as new testers get added, but the idea is to make a utility API that generalizes the process of defining contexts and templates for their associated testing code for the generator to use. I plan to support TDD and BDD based systems, and isomorphic module designs. Once a generator is in place a lot of tests can be fully automated, however some will require minimal input from the developer. That will be the final task, to allow the API to facilitate developer-facing interaction in the build environment, but using a data-driven approach so specialized plugin code does not have to be written by plugins author. This design will hopefully make the resultant API adaptable for other builder environments such as Google's Polymer Designer (which has recently been rewritten from scratch by the Polymer-dev team, albeit currently unusable).
thomasfl 11y ago
It even create reflux stores and actions. Like +1
mattdeboard 11y ago
This is pretty interesting, I was waiting for something similar to this to happen that looked like Interface Builder in XCode. That said I'm curious to see how good this can be without static types.
Rygu 11y ago
Some programmers may not immediately see the benefits of having such a UI builder and would never touch the generated code with a ten foot pole. However I don't think that it's about the code it generates or boilerplate it proposedly saves you from writing. It's way more about the instant feedback and feel you get when dragging UI elements into the canvas, re-arranging them, finding creative ways to (re)structure your app BEFORE you even start coding. This playground will strengthen the concept of the UI in your head, and believe it or not, that greatly enhances your productivity when you do start to code (from scratch or with the generated code).
- ExpiredLink 11y ago
  > Some programmers may not immediately see the benefits of having such a UI builder ... expecially those who haven't witnessed the Win16/32 era. VB, Delphi, Centura, ... Everything old is new again.
  - jfroma 11y ago
    Yes and without going that far in time XAML, WPF or silverlight
    - ExpiredLink 11y ago
      Some people went mad using XAML.
      - elcct 11y ago
        Dad?
- altcognito 11y ago
  Even more exciting to me is that if your interface fits into a declarative model that can be serialized you are probably maintaining a good separation between code and presentation. (though representing state changes in a UI like this is typically a bit of a challenge, perhaps that would be something fun to contribute to the project)
philliphaydon 11y ago
So this requires bootstrap? :(
- ganarajpr 11y ago
  It has the concept of boilerplate projects that you can start from. Right now, its bootstrap or material or a blank canvas.. But there is nothing preventing you from creating a new boilerplate project for foundation or semantic-ui if you choose to ( and he is asking us to basically contribute such boilerplate projects ).
  - philliphaydon 11y ago
    Ahhh that's really cool! Thanks for clearing that up. Not sure why I got down voted.
iLoch 11y ago
Wow, this looks very interesting. With the upcoming releases of Relay and GraphQL, it would be a great addition to be able to specify what data the components need as well.
EugeneOZ 11y ago
Huge work. Will be very interesting for business users. They often need to build forms quickly and a lot of them. Please consider to add accessibility attributes (ARIA, https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...) - when automated, it can be much more easy to not forget about.
- gcanti 11y ago
  > They often need to build forms quickly and a lot of them I wrote a library specifically with this goal: https://github.com/gcanti/tcomb-form https://github.com/gcanti/tcomb-form. React.js + Bootstrap + ARIA support. Maybe it could be integrated with react-ui-builder
- mca 11y ago
  I intend to not only add WAI-ARAI conformance but even better, to merge the work of this project: http://khan.github.io/tota11y/ http://khan.github.io/tota11y/ into the builder itself, so that the developer can benefit from moment to moment conformance feedback as the application is built - instead of the typical process a developer goes through when he builds a successful application and quickly finds out as an afterthought that these things are not only important, but often necessary. If I ever get around to it I want to go the extra miracle mile and allow for an /actually/ usable voice guided process of building software so that blind users can finally leverage their largely underrated skills in abstraction. It is abysmal how rare it is to ever find any usable software for the blind, even fewer that they actually enjoy using, and I know of not one such tool for development esp. front-end.
deleted 11y ago
[deleted]
EastSmith 11y ago
Having Delphi background (5 years) in another life, and using React for the past year, I was waiting for something like this any day now. Looks really nice. Not saying it will be easy, bit this should be ported to Electron/Atom.
- mca 11y ago
  This would be as easy as a easy peaze of Cake. Even easier to bring it to the MUCH MORE SUPERIRIOR NW.JS. Then it would be to react what Intel XDK is to Cordova/Phonegap. And what that greek god guy is to EnyoJS and/or WebOS.
hacker_9 11y ago
And over here in the native world we've had drag and drop ui builders for 20+ years. I can't believe how slowly the wheel is being re-invented (over and over and over again) in the web world... when will the DOM and JS die and real innovation starts happening again.
- douche 11y ago
  And there was also WebForms, but the less said about that, the better
- curiousjorge 11y ago
  Your lament is certainly warranted. It has taken two decades for the desktop to arrive in the browser. However, the journey has been a long one because our browsers has taken a long time to mature, and there are different players with different agendas. Not to mention that client-server architecture handles majority of people's needs and it has been that way since PHP and RoR until jQuery, ajax suddenly became not enough. We've seen early prototypes of SPA and Flash web applications during this time but the costs were very high. It is lower now since MV* arrived in the browser and we have the tech to replicate a desktop app in the browser but with limitations which is being eroded thanks to thin clients like nw.js, electron, etc (even NPAPI was too thick). Much as creating a desktop was impossible for early versions of Windows for the average joe, the introduction of a UI/Software builder from MS lowered that barrier of entry significantly but as you know, things moved away from isolated desktop apps to the web and we had to figure it out all over again. I think the front-end development will eventually be commoditized to the point where somebody could use a tool to generate clean, tested, plumbing code. Back-end is also seeing some of this, particularly with automatic REST api generation tools and write-once-for-both-front-and-backend would be a good catalyst. Speculation at best but we are in for some interesting times ahead.
  - hacker_9 11y ago
    The formula is: new operating-system/vm/browser > new programming language > new libraries > new ui builder :). Choose any one and re-create everything that comes after. Rinse and repeat en-millennium. At some point in the next 10 years, a browser vendor will put out a new language that will have revolutionary new features like a 'built in type system' and 'compile time errors', and users will be amazed at how their browser now only uses .1% of their CPU to load a page and wonder why this language wasn't created sooner. And then as developers we will get to live through another golden age of UI Builders as we stoke the bonfire with the tens of thousands of man hours wasted creating JSX, 'components' and javascript/DOM hacks in general.
arianvanp 11y ago
This this really rad man! I love it. So I tried it out and the UI just doesn't work in Chromium 43.0.2357.130. Cloned one of the example projects but non of the controls respond to anything. Investigating... Will file an issue if I can find out what is going wrong exactly. Anyone else experiencing similar issues?
OJFord 11y ago
I would love to see a side-by-side of this and those awful "website builder" tools that domain/hosting providers churn out. I bet this would seem easier to use, and have a much nicer finished product -- as well as being flexible if the user wants to (which of course is almost never the case with users of aforementioned tools).
- ipselon 11y ago
  You are absolutely right. But I should confess builder was inspired and some ideas were taken from those builders interfaces. :-)
  - OJFord 11y ago
    There should be no shame in such a "confession" -- don't most great things come from deciding something crappy could be better? :)
- hacker_9 11y ago
  They aren't all bad, have you seen webflow.com? They've created a pretty good darn UI builder, responsive design as well. Doesn't use React though I think.
prplhaz4 11y ago
This thread would be remiss without mentioning the EnyoJS UI builder, Ares2, which has a similar feature set, but also allowed for Dropbox storage (work on your apps anywhere) and Cordova builds from the UI. All of it runs on node.js with EnyoJS as the frontend framework (MVC, data-binding, responsive panel layouts). Unfortunately, it seems most development for Ares2 stopped with LG's acquisition of HP's WebOS assets. Surpringly, there are still a number of developers actively utilizing EnyoJS, and despite its age, has a lot of features you find in more trendy frameworks today... https://github.com/enyojs/ares-project https://github.com/enyojs/ares-project http://enyojs.com/ http://enyojs.com/
- mca 11y ago
  Absolutely positutly FALSE. First of all development of Ares has only recently been reinvigorated by LG devoting assets to the project which HP had taken a dump on when they pretty much gave up on WebOS. EnyoJS is rock-star tech that rock-stars refuse to look at close enough to realize it is what facebook wants react to be - but 10 years ago, and is now the only truly platform independent JS framework. Much work has been done by the LG designers as far as UI (I have followed their often ignored progress very closely of late) and the architecture of Enyo. It is commonly misunderstood due to media sensationalism that LG "aquired" WebOS and it's goodies - NO NO NO - what they did is "aquired" the rights to utilize WebOS, along with the rights to own HP's nifty little office building in San Francisco (to house LG's nifty designers and devs) all under the agreement that they would pay an outrageous amount of money for these nifty items, and furthermore, that LG would slave away at WebOS/Enyo so that HP doesn't have to, all the while so that HP can benefit from the fruits since HP still owns WebOS/Enyo and friends. Phewwwwww Just don't say things like "too bad LG is murdering WebOS and Enyo" because it makes me feel sad and angry and contributes to the propaganda machine of dis-information regarding the details of the deal between LG/HP (the details which have been hashed out in a secret agreement BTW) - this doesn't help things as the media was left with no choice but to sensationalize it even more, and without the benefit of the facts of the deals terms to at least sprinkle some truth around too.
cdelsolar 11y ago
Tried cloning a project and it told me this: Object #<Object> has no method 'isAbsolute' Any ideas?
- ipselon 11y ago
  Hi, There is problem with fs lib in node.js. So, please update your local node.js to the current version.
UImyLife 11y ago
The new version of React-UI-Builder is now available! Quick CSS editing panel was added - convenient way to change component's style. Now it's a time to write some tutorials and documentation, any help will be really useful for our team! Thanks everyone for interest!
ipselon 11y ago
Who doesn't want to install react-ui-builder locally I made on-line demo version. However, demo doesn't allow use it full cycle development. http://umyproto.com/react-ui-builder/ http://umyproto.com/react-ui-builder/

391 points by snake_case 11y ago

Something like this has existed for Polymer.js for a while now called Polymer Designer - https://polymer-designer.appspot.com/ https://polymer-designer.appspot.com/ I think as web components start to become standardized we'll see more and more of these types of tools that make it easy to click interface elements together using a GUI.

mikewhy 11y ago

Have had a huge hankering to build something like this for a while. Excited to try this out!

foota 11y ago
Came here to make this same comment! I've always thought something that combined react with a sweet wysiwyg gui would be the most awesome and powerful tool.
- ipselon 11y ago
  Stay in touch guys. Next thing we are going to roll is a fast CSS editing - convenient way to edit CSS for component on the page. Actually we have a big plans for improvement of the tool. And it will be sooner if you will give us any feedback. Thanks.
  - callmevlad 11y ago
    Hey @ipselon - I'd love to get in touch and chat about this. I can't find your email in your HN profile; any chance you can contact me via vlad [at] webflow [dot] com? Thanks!
    - ipselon 11y ago
      I added my email, please find it in profile.

revskill 11y ago

How to clone project? Whenever value i input in the "Local directory path", it always say: {"errno":-2, "code: "ENOENT", path: ""} I don't think it's stupid at handling common situations like that for someone to try the first time.

chm 11y ago
You should file an issue on the GitHub repo. That way you're assured the author/contributors will see it :)
ipselon 11y ago
Please read posts here https://groups.google.com/forum/#!forum/react-ui-builder https://groups.google.com/forum/#!forum/react-ui-builder I'm pretty sure you will find answer there.
talkingtab 11y ago
I think the issue is permissions. Since the browser is creating and writing to files. I was having this problem and changing the permissions on the target directory to 777 fixed the problem.
- cdcarter 11y ago
  Yes, and more obviously, the project directory needs to exist.

rattray 11y ago

Been wondering when someone would do this. How the community rallies around it rather than relying on the maintainer doing all the work, assuming it's of high quality. Looking forward to giving a try!

rattray 11y ago

deleted 11y ago

[deleted]

curiousjorge 11y ago

This has huge potential. I just saw the tutorial video and super excited. I don't know why I didn't think of this before, this could be the 'missing' piece of the front-end application puzzle. What I mean by that is that there are so much fragmentation in this landscape and a tool like this could eventually consolidate all the heterogeneous attempts by forcing others to adopt the same UI builder, and compete on that front. The tool is shockingly reminiscent of early 2000s, where anyone could make software using VB. Recall that VB had everything done under the sun, somebody had built a component on VB, you could use that or you could hack it for your need. Another example is Google's Java Swing UI builder (as horrible Swing is), allowing data binding with the form. These never caught on but we now have this technology in the browser. Whoever owns the UI builder tool market will emerge as the victor, Facebook should hire you immediately. There are several appealing points about the React UI builder which I think will help me: - WYSIWYG editor to drop bootstrap component allows me to easily build from my mockup wireframes and save me from typing everything out. - ability to edit the code directly for each component. Would be nice if I double clicked a button it would create a click event (just like visual studios or netbeans) - ability to use html directly in the code (okay, feature of react which is a bit controversial but for me it definitely beats using + everywhere) - generates clean, easy to understand plumbing code (this is what I spent a lot of time on when I used to build my swing tool https://github.com/jjk3/scrape-it-screen-scraper https://github.com/jjk3/scrape-it-screen-scraper) I been putting off learning react.js,flux and such but this actually entices me to use it for my next project (https://github.com/whatsdis/hedgehog https://github.com/whatsdis/hedgehog). I will write up a follow up experience using the React UI builder, hopefully my feedback will be helpful to improve it. You got something here. Keep at it!

ipselon 11y ago
Hi, thanks for this awesome feedback !!! Generation of event handlers will be in the next release. Thanks again. I appreciate your feedback very much.
- curiousjorge 11y ago
  Not a problem, event handlers would be great, very much looking forward to it. If you can email me (click my profile) I'll be happy to send you more feedbacks once I start diving into it.

lopatin 11y ago

This is great. One big reason that I'm so excited to see more tools like this is that they have the potential to make unit testing less annoying. Build your component and take snapshots of it in different states with different props. Convert that to a Jasmine (or something) spec automatically. This would take care of 90% of the UI unit tests that I write.

foxhedgehog 11y ago
This is a great idea.
mca 11y ago
I plan to add an agnostic generator for code-coverage that can be easily extended to allow generators for a given testing toolkit. I will adapt it as necessary to facilitate unforeseen/esoteric features as new testers get added, but the idea is to make a utility API that generalizes the process of defining contexts and templates for their associated testing code for the generator to use. I plan to support TDD and BDD based systems, and isomorphic module designs. Once a generator is in place a lot of tests can be fully automated, however some will require minimal input from the developer. That will be the final task, to allow the API to facilitate developer-facing interaction in the build environment, but using a data-driven approach so specialized plugin code does not have to be written by plugins author. This design will hopefully make the resultant API adaptable for other builder environments such as Google's Polymer Designer (which has recently been rewritten from scratch by the Polymer-dev team, albeit currently unusable).

thomasfl 11y ago

It even create reflux stores and actions. Like +1

mattdeboard 11y ago

This is pretty interesting, I was waiting for something similar to this to happen that looked like Interface Builder in XCode. That said I'm curious to see how good this can be without static types.

Rygu 11y ago

Some programmers may not immediately see the benefits of having such a UI builder and would never touch the generated code with a ten foot pole. However I don't think that it's about the code it generates or boilerplate it proposedly saves you from writing. It's way more about the instant feedback and feel you get when dragging UI elements into the canvas, re-arranging them, finding creative ways to (re)structure your app BEFORE you even start coding. This playground will strengthen the concept of the UI in your head, and believe it or not, that greatly enhances your productivity when you do start to code (from scratch or with the generated code).

ExpiredLink 11y ago
> Some programmers may not immediately see the benefits of having such a UI builder ... expecially those who haven't witnessed the Win16/32 era. VB, Delphi, Centura, ... Everything old is new again.
- jfroma 11y ago
  Yes and without going that far in time XAML, WPF or silverlight
  - ExpiredLink 11y ago
    Some people went mad using XAML.
    - elcct 11y ago
      Dad?
altcognito 11y ago
Even more exciting to me is that if your interface fits into a declarative model that can be serialized you are probably maintaining a good separation between code and presentation. (though representing state changes in a UI like this is typically a bit of a challenge, perhaps that would be something fun to contribute to the project)

philliphaydon 11y ago

So this requires bootstrap? :(

ganarajpr 11y ago
It has the concept of boilerplate projects that you can start from. Right now, its bootstrap or material or a blank canvas.. But there is nothing preventing you from creating a new boilerplate project for foundation or semantic-ui if you choose to ( and he is asking us to basically contribute such boilerplate projects ).
- philliphaydon 11y ago
  Ahhh that's really cool! Thanks for clearing that up. Not sure why I got down voted.

iLoch 11y ago

Wow, this looks very interesting. With the upcoming releases of Relay and GraphQL, it would be a great addition to be able to specify what data the components need as well.

EugeneOZ 11y ago

Huge work. Will be very interesting for business users. They often need to build forms quickly and a lot of them. Please consider to add accessibility attributes (ARIA, https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...) - when automated, it can be much more easy to not forget about.

gcanti 11y ago
> They often need to build forms quickly and a lot of them I wrote a library specifically with this goal: https://github.com/gcanti/tcomb-form https://github.com/gcanti/tcomb-form. React.js + Bootstrap + ARIA support. Maybe it could be integrated with react-ui-builder
mca 11y ago
I intend to not only add WAI-ARAI conformance but even better, to merge the work of this project: http://khan.github.io/tota11y/ http://khan.github.io/tota11y/ into the builder itself, so that the developer can benefit from moment to moment conformance feedback as the application is built - instead of the typical process a developer goes through when he builds a successful application and quickly finds out as an afterthought that these things are not only important, but often necessary. If I ever get around to it I want to go the extra miracle mile and allow for an /actually/ usable voice guided process of building software so that blind users can finally leverage their largely underrated skills in abstraction. It is abysmal how rare it is to ever find any usable software for the blind, even fewer that they actually enjoy using, and I know of not one such tool for development esp. front-end.

deleted 11y ago

[deleted]

EastSmith 11y ago

Having Delphi background (5 years) in another life, and using React for the past year, I was waiting for something like this any day now. Looks really nice. Not saying it will be easy, bit this should be ported to Electron/Atom.

mca 11y ago
This would be as easy as a easy peaze of Cake. Even easier to bring it to the MUCH MORE SUPERIRIOR NW.JS. Then it would be to react what Intel XDK is to Cordova/Phonegap. And what that greek god guy is to EnyoJS and/or WebOS.

hacker_9 11y ago

And over here in the native world we've had drag and drop ui builders for 20+ years. I can't believe how slowly the wheel is being re-invented (over and over and over again) in the web world... when will the DOM and JS die and real innovation starts happening again.

douche 11y ago
And there was also WebForms, but the less said about that, the better
curiousjorge 11y ago
Your lament is certainly warranted. It has taken two decades for the desktop to arrive in the browser. However, the journey has been a long one because our browsers has taken a long time to mature, and there are different players with different agendas. Not to mention that client-server architecture handles majority of people's needs and it has been that way since PHP and RoR until jQuery, ajax suddenly became not enough. We've seen early prototypes of SPA and Flash web applications during this time but the costs were very high. It is lower now since MV* arrived in the browser and we have the tech to replicate a desktop app in the browser but with limitations which is being eroded thanks to thin clients like nw.js, electron, etc (even NPAPI was too thick). Much as creating a desktop was impossible for early versions of Windows for the average joe, the introduction of a UI/Software builder from MS lowered that barrier of entry significantly but as you know, things moved away from isolated desktop apps to the web and we had to figure it out all over again. I think the front-end development will eventually be commoditized to the point where somebody could use a tool to generate clean, tested, plumbing code. Back-end is also seeing some of this, particularly with automatic REST api generation tools and write-once-for-both-front-and-backend would be a good catalyst. Speculation at best but we are in for some interesting times ahead.
- hacker_9 11y ago
  The formula is: new operating-system/vm/browser > new programming language > new libraries > new ui builder :). Choose any one and re-create everything that comes after. Rinse and repeat en-millennium. At some point in the next 10 years, a browser vendor will put out a new language that will have revolutionary new features like a 'built in type system' and 'compile time errors', and users will be amazed at how their browser now only uses .1% of their CPU to load a page and wonder why this language wasn't created sooner. And then as developers we will get to live through another golden age of UI Builders as we stoke the bonfire with the tens of thousands of man hours wasted creating JSX, 'components' and javascript/DOM hacks in general.

arianvanp 11y ago

This this really rad man! I love it. So I tried it out and the UI just doesn't work in Chromium 43.0.2357.130. Cloned one of the example projects but non of the controls respond to anything. Investigating... Will file an issue if I can find out what is going wrong exactly. Anyone else experiencing similar issues?

OJFord 11y ago

I would love to see a side-by-side of this and those awful "website builder" tools that domain/hosting providers churn out. I bet this would seem easier to use, and have a much nicer finished product -- as well as being flexible if the user wants to (which of course is almost never the case with users of aforementioned tools).

ipselon 11y ago
You are absolutely right. But I should confess builder was inspired and some ideas were taken from those builders interfaces. :-)
- OJFord 11y ago
  There should be no shame in such a "confession" -- don't most great things come from deciding something crappy could be better? :)
hacker_9 11y ago
They aren't all bad, have you seen webflow.com? They've created a pretty good darn UI builder, responsive design as well. Doesn't use React though I think.

prplhaz4 11y ago

This thread would be remiss without mentioning the EnyoJS UI builder, Ares2, which has a similar feature set, but also allowed for Dropbox storage (work on your apps anywhere) and Cordova builds from the UI. All of it runs on node.js with EnyoJS as the frontend framework (MVC, data-binding, responsive panel layouts). Unfortunately, it seems most development for Ares2 stopped with LG's acquisition of HP's WebOS assets. Surpringly, there are still a number of developers actively utilizing EnyoJS, and despite its age, has a lot of features you find in more trendy frameworks today... https://github.com/enyojs/ares-project https://github.com/enyojs/ares-project http://enyojs.com/ http://enyojs.com/

mca 11y ago
Absolutely positutly FALSE. First of all development of Ares has only recently been reinvigorated by LG devoting assets to the project which HP had taken a dump on when they pretty much gave up on WebOS. EnyoJS is rock-star tech that rock-stars refuse to look at close enough to realize it is what facebook wants react to be - but 10 years ago, and is now the only truly platform independent JS framework. Much work has been done by the LG designers as far as UI (I have followed their often ignored progress very closely of late) and the architecture of Enyo. It is commonly misunderstood due to media sensationalism that LG "aquired" WebOS and it's goodies - NO NO NO - what they did is "aquired" the rights to utilize WebOS, along with the rights to own HP's nifty little office building in San Francisco (to house LG's nifty designers and devs) all under the agreement that they would pay an outrageous amount of money for these nifty items, and furthermore, that LG would slave away at WebOS/Enyo so that HP doesn't have to, all the while so that HP can benefit from the fruits since HP still owns WebOS/Enyo and friends. Phewwwwww Just don't say things like "too bad LG is murdering WebOS and Enyo" because it makes me feel sad and angry and contributes to the propaganda machine of dis-information regarding the details of the deal between LG/HP (the details which have been hashed out in a secret agreement BTW) - this doesn't help things as the media was left with no choice but to sensationalize it even more, and without the benefit of the facts of the deals terms to at least sprinkle some truth around too.

cdelsolar 11y ago

Tried cloning a project and it told me this: Object #<Object> has no method 'isAbsolute' Any ideas?

ipselon 11y ago
Hi, There is problem with fs lib in node.js. So, please update your local node.js to the current version.

UImyLife 11y ago

The new version of React-UI-Builder is now available! Quick CSS editing panel was added - convenient way to change component's style. Now it's a time to write some tutorials and documentation, any help will be really useful for our team! Thanks everyone for interest!

ipselon 11y ago

Who doesn't want to install react-ui-builder locally I made on-line demo version. However, demo doesn't allow use it full cycle development. http://umyproto.com/react-ui-builder/ http://umyproto.com/react-ui-builder/