Looking into it...just pushed a few tweaks. It could also be the default menu wasn't clear what you were supposed to drag and where to drop it. We need to fix that.
I figured out how to reproduce this - click on 'create screen' without entering anything into the input field. It creates a blank canvas that doesn't accept any elements.
Yep. That's what I did originally. I was on chrome fedora without it working, but now on chrome mac it works. This time though I did change the name instead of leaving it blank.
I am not a designer by trade, but I am routinely called by the friends/family niche to build stuff for them -- I love how amazed they are when I spend 2 hours putting together a WordPress site for them; they seem so blown away by my non-existent abilities
What might you use to implement functionality and data then? I'm asking because I'm coming from database development in FileMaker with limited traditional coding knowledge. While it's very easy and fast to build solutions in FileMaker I've been looking for a web-based alternative for ages. Of course I tried frameworks like Rails and Django, worked tutorials, understand the concepts, can follow along but it's a steep learning curve and I'm nowhere near the results I'm able to achieve in FileMaker.
This looks like one of the most sensible WYSIWYG web page builders. Thank you for the minimal permissions to sign up with twitter. Might I recommend that you add the preview for the element when you hover over the component on in the tray? Nothing happens when I drag and drop things either -- latest chrome release channel.
There was a slight issue where the mousemove event wouldn't trigger if you dragged too slowly :) That has been fixed. Is it working better for you now?
Didn't work on Firefox 14.0.1 Ubuntu 12.04. Dragged elements don't appear on the canvas. The error in the console log, "not dropping, no container or component found". Same issue with Chrome Version 21.0.1180.81.
Looking forwards to when these are fixed though, I'd like to use it myself, and would be happy to contribute.
== Update ==
The problem I was having seemed to be I hadn't named my screen, I was then shown a blank white screen which looked like I could drag the elements onto, but this didn't work.
When I saw this and clicked it, I was preparing myself for a bootstrap-in-production-code abomination, but was pleasantly surprised. The design and interaction on this site are gorgeous and not boostrapped, and the tool looks really nice for putting together prototypes.
With all the horrible bootstrap default production sites i've seen lately, I've developed a pretty signficant hatred for the framework. But sometimes after seeing tools like this, I remember that it can be a very effective prototyping tool (as long as it's used only for prototypes, and you hire a real designer and/or front end guy to put together your production design and code).
That being said, awesome job with this site and this tool. Then only suggestion I could possibly make would be to change the header text from "build amazing websites" to "build amazing prototypes" - this at least helps to spread the concept that boostrap does not replace good, unique design and code.
Thanks! We did build a lot of this with bootstrap itself, using custom LESS.
I do disagree that bootstrap doesn't replace unique design and code. Lots of great websites have a standard set of interface elements, and bootstrap makes this extremely easy. Just add your custom styles and you have a unique site built on a solid CSS framework.
He said they just need to 'hire a real designer and/or front-end guy' - which basically translates to 'add your custom styles' and you're both happy. And I agree with you both.
The problem is so many people don't do that. They just leave the stock bootstrap there. If you can't even be bothered to change the colors from the templates, how am I supposed to take your company seriously?
Re: pricing. It depends how awesome you plan to make this. As it stands I'd probably pay $10 a month, maybe a bit more. If you fully pimped it out like Balsamiq has done for mockups - the sky is the limit. And if you had no competition for a bunch of your features - I'd actually prefer you charged more and had fewer customers, so everybody doesn't roll their eyes when they see something I built with Jetstrap, like they are doing now with Bootstrap (that assumes you get around to LESS integration...hint hint!).
Using bootstrap default styles on a production site is lazy and shows a complete disregard for the art of design and front-end development. It's like buying a template from themeforest for $30 and changing the site title and name, except even worse: it's even less unique and more recognizable.
I am super particular and nitpicky about design and front end things and have an abnormally high level of attention to detail so for me any company that uses default bootstrap in production is automatically not legit (this may not be the case for others). A legit company has the time and resources to create a custom unique design and interaction style that is suited to their brand. A BS company does not, so they use bootstrap.
Sorry for being blunt, but the site looks quite bad on a mobile device [1][2][3].
I realize that this tool is probably meant to be used from a computer with a large screen and with a mouse, but consider the following scenario: Somebody, who is using their smart phone, is landing on your page from a search for "bootstrap responsive interface-building tool". If that was me, I'd probably leave the site pretty fast.
I absolutely love the idea, but this works horrible on both Chrome and Safari.
I've seen bugs ranging from not being able to drag anything at all to elements not landing in a proper container, to just being overall confusing (dragging a table row results in dragging a table cell as a ghost. Where is my row?).
My trial was about trying to drag&drop a super-simple layout, with a table, with some form elements.
Unfortunately that's not properly possible right now, i'll wait up another bit for fixes. PLEASE keep up this work, we need more tooling like this!
Thanks for letting us know. I'm going through the issues reported in the comments here and trying to reproduce and fix them. Some I'm having a hard time reproducing :(
Having a window.onError hook that logs the traces to your backend can really help you debugging clientside stuff like this! :)
Also i can recommend logging (at least during your demo phase) a complete click-trhough of what your users are doing so you can reproduce it at will, using for instance http://www.clicktale.com/
thanks for the reply, i have done something similar for a document editor/creator(EDI documents) but purely javascript. i might just try CS out now. cool stuff, hope to see more out from you guys.
If you can, I would suggest keeping the ability to use old versions. With how quickly bootstrap is revving, there will soon be many sites using old versions that could still use the tool.
One suggestion: a "quick search" bar that would let you add elements by starting to type the names of things, similar to Balsamiq Mockups. It's a bit of a pain to navigate through the menus to find the right element.
This is coming soon. We do plan to charge for it so we can keep making it better, but the payment stuff hasn't been integrated and we are going to squash some more bugs before that. Thanks!
slightly off topic, but where did you get the background music for the tour video where you walk through how it works and what it is. It has a great apple sounding beat.
Could you let us in on how to go about implementing such an interface? You don't have to go into specifics but if you used any tools or frameworks that you found invaluable etc, it would be nice to know.
Sure. The stack on the frontend is Backbone.js with Handlebars.js templates (and jQuery, of course). I used CoffeeScript's classes heavily to compartmentalize stuff.
Object orientation is your friend with these kinds of tools. We based a bit of the internal component model off of Java's AWT and Swing, making sure that each component we built was reusable in any situation, making it extremely easy to add new components.
Just like in the DOM, you are performing operations on a tree structure, so recursion and iterative optimization is important (especially in Javascript where function calls are expensive).
Other than that, it's just a lot of event handling and DOM manipulation.
154 comments
[ 3.2 ms ] story [ 224 ms ] thread"Failed to load resource: the server responded with a status of 404 (NOT FOUND) http://jetstrap.com/api/v1/project/last
"not dropping, no container or component found. builder.js:127"
What might you use to implement functionality and data then? I'm asking because I'm coming from database development in FileMaker with limited traditional coding knowledge. While it's very easy and fast to build solutions in FileMaker I've been looking for a web-based alternative for ages. Of course I tried frameworks like Rails and Django, worked tutorials, understand the concepts, can follow along but it's a steep learning curve and I'm nowhere near the results I'm able to achieve in FileMaker.
I guess there's just no shortcut or easy way.
Loving it.
Looking forwards to when these are fixed though, I'd like to use it myself, and would be happy to contribute.
== Update ==
The problem I was having seemed to be I hadn't named my screen, I was then shown a blank white screen which looked like I could drag the elements onto, but this didn't work.
With all the horrible bootstrap default production sites i've seen lately, I've developed a pretty signficant hatred for the framework. But sometimes after seeing tools like this, I remember that it can be a very effective prototyping tool (as long as it's used only for prototypes, and you hire a real designer and/or front end guy to put together your production design and code).
That being said, awesome job with this site and this tool. Then only suggestion I could possibly make would be to change the header text from "build amazing websites" to "build amazing prototypes" - this at least helps to spread the concept that boostrap does not replace good, unique design and code.
I do disagree that bootstrap doesn't replace unique design and code. Lots of great websites have a standard set of interface elements, and bootstrap makes this extremely easy. Just add your custom styles and you have a unique site built on a solid CSS framework.
The problem is so many people don't do that. They just leave the stock bootstrap there. If you can't even be bothered to change the colors from the templates, how am I supposed to take your company seriously?
Re: pricing. It depends how awesome you plan to make this. As it stands I'd probably pay $10 a month, maybe a bit more. If you fully pimped it out like Balsamiq has done for mockups - the sky is the limit. And if you had no competition for a bunch of your features - I'd actually prefer you charged more and had fewer customers, so everybody doesn't roll their eyes when they see something I built with Jetstrap, like they are doing now with Bootstrap (that assumes you get around to LESS integration...hint hint!).
I am super particular and nitpicky about design and front end things and have an abnormally high level of attention to detail so for me any company that uses default bootstrap in production is automatically not legit (this may not be the case for others). A legit company has the time and resources to create a custom unique design and interaction style that is suited to their brand. A BS company does not, so they use bootstrap.
I realize that this tool is probably meant to be used from a computer with a large screen and with a mouse, but consider the following scenario: Somebody, who is using their smart phone, is landing on your page from a search for "bootstrap responsive interface-building tool". If that was me, I'd probably leave the site pretty fast.
[1]: http://i.imgur.com/UsYhZ.png?1
[2]: http://i.imgur.com/UzaB8.png?1
[3]: http://i.imgur.com/JEPSj.png?1
(Using Dolphin Browser on Samsung Galaxy S2, Android 2.3.5)
I've seen bugs ranging from not being able to drag anything at all to elements not landing in a proper container, to just being overall confusing (dragging a table row results in dragging a table cell as a ghost. Where is my row?).
My trial was about trying to drag&drop a super-simple layout, with a table, with some form elements.
Unfortunately that's not properly possible right now, i'll wait up another bit for fixes. PLEASE keep up this work, we need more tooling like this!
Uncaught TypeError: Object #<Object> has no method 'apply' jquery.js:3332 jQuery.event.dispatch jquery.js:3332 jQuery.event.add.elemData.handle.eventHandle
When dragging a select input, this did, work, when then dragging another element, more errors:
frame:55 Uncaught TypeError: Cannot call method 'value' of undefined builder.js:142 Uncaught TypeError: Object #<Object> has no method 'apply'
I hope you have automated javascript error logging and are fixing every bug in this 'cause i really would like this to work!
http://i.imgur.com/YMavW.png
Hope that helps
I plan on using this on my next site. One question, though: is there a way to know which version of bootstrap and such the editor is using?
One suggestion: a "quick search" bar that would let you add elements by starting to type the names of things, similar to Balsamiq Mockups. It's a bit of a pain to navigate through the menus to find the right element.
So, how can I pay you for it?
Object orientation is your friend with these kinds of tools. We based a bit of the internal component model off of Java's AWT and Swing, making sure that each component we built was reusable in any situation, making it extremely easy to add new components.
Just like in the DOM, you are performing operations on a tree structure, so recursion and iterative optimization is important (especially in Javascript where function calls are expensive).
Other than that, it's just a lot of event handling and DOM manipulation.