
Jetstrap for Bootstrap - yesimahuman
http://jetstrap.com/
======
itsprofitbaron
I noticed the "Try Jetstrap free today!" then I saw you mention _"Our first
thought was $10/mo for 100 screens"_ [1] which I think is not only underpriced
but the wrong pricing structure.

You should implement something like this:

\- User signs up - gets 5 - 10 FREE Screens.

\- Once they've used up their FREE screens take them to a page to purchase
more screens.

\- When they have 1-2 FREE Screens remaining you should have a popup which
says they've nearly used their free screens up and to buy more (with one
option offering to go to payment page & the other leting the user continue
what they were doing).

\- On the page where the users can purchase more screens, I wouldn't bother
with a monthly subscription plan because that's not what your target audience
is interested in.

I'd offer the following options:

100 Screens - $39 ($0.39/Screen)

250 Screens - $95 ($0.38/Screen)

500 Screens - $180 ($0.36/Screen)

[1] <http://news.ycombinator.com/item?id=4572125>

~~~
ebzlo
The problem with this is that there is no incentive to keep one account.

GoMockingbird (<http://gomockingbird.com>) is an example of an application I
probably have 4 accounts for-- not on purpose, I just couldn't figure out
which email, twitter, facebook I used to sign up for it. I didn't realize that
only the first project was free until later, because I generally stop using it
after one project.

I could totally foresee a user signing up for 5-10 free screens then
forgetting about the tool for later. When they come back, those original 5-10
screens may or may not be related to what they're working on now, and I can
guarantee most people won't shell out the $39 when they realize they could
just create a new account.

The proper way to monetize this (IMO) is through a freemium model. Don't limit
them with what you have now. Figure out something that's truly a solid bell or
whistle and sell them that. Give users the ability to create HTML/CSS for
free, but maybe scroll-fixed javascript headers cost $10 for 10 pages (scroll
here: <https://www.kiteedu.com>).

~~~
asdfaoeu
Right idea I think but I would go with something that makes it more useful for
not just prototyping like api export / import and direct editing of template
formats like interpreting ruby's erb just enough to display some placeholder
text.

------
mcobrien
I tried this out earlier, just before you sent the beta email out. A few
thoughts:

1\. Keyboard shortcuts! I really wanted to deselect items by hitting escape
but it didn't work. I kept trying anyway because I'm so used to Balsamiq :)
I'd also love to be able to hit / to quick-search the list of elements I can
add, then return to add the selected item. Again, Balsamiq really nails this.

2\. I wanted to add a div with Bootstrap's pull-right class, but couldn't
figure out how. Some means to add custom elements with custom css classes,
even in a limited way, would really help me.

3\. I typed some text (directly into a grid .row) but it didn't show up in the
CSS+HTML tab. Not sure if this was a bug or not.

I really want this to work and it would save our team loads of time (meaning,
we would pay for it :). Looking forward to what you do next.

~~~
yesimahuman
Quick update: just added escape. Thanks for the feedback!

------
tomasien
Mwahahaha my plan to become a professional web designer without learning how
to write any code is working!

~~~
tomasien
(I can actually write code, I'd much rather use this whenever practical
though)

~~~
sharkweek
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

------
codegeek
I can only sign up using twitter, google or github ? I have these accounts but
prefer not to use them. Any plans to offer generic login ?

~~~
yesimahuman
yea, we will be soon. I think the last thing I had up here had the opposite
reaction (wanting oauth rather than yet another login) :)

~~~
davidwparker
I'm confused as to why I would need to register at all? A public facing demo
would be really nice, even if it limited the features so you could still
charge for the full product.

~~~
samroesch
Agreed, public facing demo, with register to download CSS/html could work.

That said, it was really low pain to get started just now. It makes me so
happy to not have to go click a link in my email!

------
ianlevesque
Can we get a Sign Up with Email option? I don't like linking together other
login services with sites I'm just trying out.

------
erikano
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.

[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)

~~~
yesimahuman
Thanks for letting us know. Odd that the gradients aren't showing up on the
buttons, which indicates to me a bug with Dolphin. I'll take a look.

------
DanielBMarkham
Sweet spot between heavy IDE and notepad. I like it!

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?

~~~
yesimahuman
Right now, no (it's running a very recent version). We plan to keep it updated
with stable releases though. Thanks!

~~~
jarito
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.

~~~
icelancer
Completely agree. Backwards compatibility would be huge./

------
neya
My suggestion as a UI/UX guy: Refine the call-to-action buttons by assigning
them a different color. Black is not really an attention seeker. I would
suggest something like a bright Green or pale Blue for the buttons (for the
Sign up buttons on the top and the bottom). Hopefully this will improve your
conversion rate.

Just these, otherwise excellent. Keep it up guys!

~~~
ovi256
I recall that red was the color most likely to get attention, and thus
recommended for calls to action. Any reason not to use red ?

~~~
neya
Yeah, it depends on the scenario, green is like a very peaceful-ish color, red
is like something to relate with urgency (In a negative way). Red in real life
means danger, stop, error..etc.

I wanted to recommend red too initially, but I think for his use case blue or
green would go well because of the background image (and also for the reasons
above).

------
justindocanto
I love this tool. As a programmer I cringe at most WYSIWYG because they
heavily dilute the code needed to make something happen + hardly ever get it
done in the first place. This actually looks very promising.

One note though. Your target audience is going to include non-programmers and
those people might not even know the proper names for some of these bootstrap
elements. So I suggest some kind of toggle between the boostrap name buttons &
maybe some sort of GUI. like Actually dragging a menu into the workspace, or
dragging a twitter bootstrap button into the workspace, etc.

Other than that.. I like where this is going.

~~~
ArekDymalski
Great suggestion.

------
aaronblohowiak
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.

~~~
yesimahuman
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?

------
tharshan09
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.

~~~
yesimahuman
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.

------
marcamillion
Re: pricing...given the feedback here, maybe one thing you may want to do is
to sell credits.

So maybe each screen cost X credits - but you sell the credits in packages.
$10 for 10, $20 for 40, $50 for 150, etc. The idea being that you get more
credits, the more you pay.

The beauty about it is that you front-load a lot of your revenue, which allows
you to plan easier. It also is easier from the user's perspective, because I
know I can always come back and use those credits.

You can even set some reasonable expiration time period - say 24 months - on
the credits.

Anyway, that's just my $0.02.

Awesome product, by the way!

 _Edit 1:_ Another interesting side effect of implementing a credit system, is
that you are setting the ground work for a marketplace. People can
auction/sell some of their designs, and people can use their excess credits to
buy those.

------
ceworthington
Love this; extremely useful.

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.

~~~
yesimahuman
Definitely. This needs to be added, thanks for the suggestion!

------
slurgfest
I tried signing in with Google. Why do you need so much biographical
information? Never mind, I won't use this.

------
kgosser
Max Lynch and Ben Sperry are super talented. They are also getting really good
at marketing! Great copywriting!

~~~
helloimben
Too kind, man! Thanks :)

------
SchizoDuckie
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!

~~~
yesimahuman
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 :(

~~~
egonschiele
Trying to start a new project gives me this error:

    
    
        Failed to load resource: the server responded with a status of 404 (NOT FOUND) http://jetstrap.com/api/v1/project/last
    

After choosing the 'fluid' layout and hitting 'Create'.

~~~
yesimahuman
The 404 is okay (we use that to check if you had an existing project loaded in
your session), are you seeing an issue?

~~~
egonschiele
It wouldn't let me start a new project, I assumed the 404 was related. Hitting
the 'create' button did nothing.

------
bruth
Nice work. One nitpick is the "Saving..." text with the spinner is very
distracting. My eyes shoot up and look at it every time. I have a personal
feeling that displaying "Saving" text represents a lack of confidence that it
will actually save. Since it's there my eyes go look every time to make sure
it _has_ saved. If you feel it is important to display to your users their
work has been saved.. show a subtle timestamp or something with the last save
date, but remove the spinner.

------
gadders
Pretty cool - looks like it has come a long way since the Alpha.

What I'd like to see added would be an easy way to change the colour/font etc
of elements to make them less bootstrappy.

~~~
symbiotic
It looks like there's a built-in css editor (look in the lower right) so you
can do something like this pretty easily:

.btn {color: red;}

~~~
gadders
Easy for you, maybe ;-)

------
jeffpersonified
I think this is a great tool, and desperately wanted it to work. In fact,
decided to try it out on a project I'm currently working on. That said, the
autosaving has been causing me problems all morning. It's unclear when it
saves, and because it seems to lack a manual saving feature I was unable to
save the last 30 min of work. All lost after reloading the page reverted to
the version I started with. Very frustrating.

------
lmg643
I would second comments elsewhere that balsamiq is a good model for this site.
I am a paying balsamiq customer. Jetstrap seems like balsamiq but you are
building a functional prototype instead of a wireframe mockup. As is, this
could be worth about the same on a monthly basis, and I could possibly see
this becoming a hosting site for full fledged pages built on jetstrap.

------
jenius
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.

~~~
yesimahuman
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.

~~~
wilfra
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!).

------
alexandern
An idea would be to integrate this with a DVCS system like Github och
Bitbucket. Jetstrap could do commit/push at a frequent interval, thus allowing
you to revert your changes. Good job.

------
taf2
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.

~~~
yesimahuman
We got it at Audio Jungle. It cost about $14 I think.

------
joelrunyon
Really like this, but noticed a few bugs with the drag and drop interface.
Sometimes items wouldn't select and/or drop where I wanted them.

Other times, I'd take a look at the code and there were quite a few irrelevant
divs.

Is there a way to make the html code editable to fine tweak the pages while
still editing the page via drag and drop to get the big picture mockup?

Btw great work so far. I'm really loving it and planning on using it for
several new projects.

------
adamt
Looks very pretty, but can't decide if this is useful or not. I love bootstap,
but I am not convinced this is much quicker than a text editor (even if it is
much prettier)

Quick bug report:

MacOS/Chrome (latest) - create navbar - click or double click on the bar, and
you get errors.

Uncaught TypeError: Object #<Object> has no method 'apply' jquery.js:3332
jQuery.event.dispatch jquery.js:3332
jQuery.event.add.elemData.handle.eventHandle

~~~
yesimahuman
Sure. One of my personal bootstrap pain points I wanted to solve was I often
failed to properly use certain complicated bootstrap components. The better
you get the less this becomes a big issue.

One way to use Jetstrap is to just generate snippets of Bootstrap if you
already have a large code base and just want to copy and paste complicated
components.

~~~
wyck
I agree taking the time to learn all the options in bootstrap is time
consuming and this alleviates much of that via a nice UI, but would I pay for
that, probably not.

------
vineet
I like. I hit some bugs when adding/working with tables, but I guess this is
beta. I am looking forward to really trying to use it in the not so distant
future.

It would be great if you could not only let me select the starting template
but if you could let me choose from a dozen skins - say from Bootswatch, or
similar features like lavishbootstrap.com, and the 'dice' feature at
boottheme.com).

~~~
helloimben
Thanks! That's definitely something we've thought of, and could very well find
its way in at some point in the future. We'll be gathering a ton of feedback
as we continue forward developing the tool.

------
joelrunyon
This looks great. I noticed the "try it for free." Are there plans to turn
this into a paid product at some point? How limited is the trial?

~~~
yesimahuman
Yes, we will eventually charge for it once we work out some of the kinks in
the beta. Our first thought was $10/mo for 100 screens (though I agree with
the feedback below, so this will probably go up). Any feedback on that?

~~~
turtle4
Does everything have to be subscription based now? I know it is good for
revenue, but it sure is a poor experience for the user. I would rather just
pay $10 for 100 screens, if that is what you are charging, rather than tack on
the /mo charge. When I run out, I buy more. Offer volume discounts for extreme
purchasing over time, perhaps, but don't make me subscribe for light use.
That's my initial feedback.

~~~
digitalengineer
Exacly! Please let us by 'x number screens for $'. Subscription is hardly
required for something like this. (Ps please add youtube/vimeo video instead
of flash video, I'm on iOS and would love to see it).

~~~
persona
Same problem. Found this: <http://www.youtube.com/watch?v=AuTo_6id3J8>

------
zackzackzack
I cannot get this to work at all. Looks nice, would like to use it, nothing
happens when I try to drag and drop things.

~~~
yesimahuman
Sorry about that Zack. What browser are you on?

~~~
threepointone
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.

~~~
zackzackzack
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.

~~~
yesimahuman
Just pushed a fix to not allow blank entires. Sorry again about that :(

------
randomguy7788
have to say, this is an amazing design and editing tool they built. seems to
be built on top of backbone?

~~~
yesimahuman
Yep, Backbone.js and CoffeeScript. It actually started as a side project to
learn CoffeeScript once and for all. I'm hooked now.

~~~
randomguy7788
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.

------
jkaykin
Wow! This is such a great tool! Thank you for making this. Did you build the
landing page with Jetstrap?

~~~
yesimahuman
We did not, the landing page was built before we had Jetstrap working, but
I've used it for some personal projects.

------
icelancer
Wow, this looks great! Outstanding video, too. Consider me sold, definitely
going to try the trial.

------
nantes
Quick data point, works beautifully under Chrome (Version 21.0.1180.89) on
Ubuntu 12.10 beta.

Loving it.

~~~
Alan01252
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.

------
umrashrf
You could name it "Jetstart" :)

~~~
marcamillion
This is a wonderful suggestion - although, I know they are trying to play on
the 'Bootstrap' part of the name.

------
MikeKusold
After playing with this for about 30 minutes I find myself fighting to get the
elements positioned correctly. I'm not sure how difficult this would be, but
it would be great to be able to update the view from the HTML panel.

------
Clanan
As a developer with sub-par design skills, thank you for this.

So, how can I pay you for it?

~~~
yesimahuman
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!

------
francov88
Great job Max! The app works great, can't wait to see where this goes.

------
hospadam
I love the idea. This is a competitor that I've tried that has worked quite
well so far - <http://divshot.com/>

~~~
davidcollantes
Their video works, while the OP doesn't. Thanks for the link!

------
ArekDymalski
Awesome tool. I hope you'll just add WYSIWYG CSS editor and easy&fast
integration with Firebase. That would be a toolset of my dreams :)

------
ryanjodonnell
Cool idea. Seems a bit buggy at the moment - I tried dragging a bunch of stuff
in quickly and it failed. Keep up the good work though!

------
dynamo
Cool Idea! It's Bootstrap meets Balsamiq Mockups

------
selindion
Cool product. From playing around with it, it doesn't support a lot of
bootstrap features like carousels or image galleries?

~~~
yesimahuman
Not yet, but we would like to add them!

------
jennyshen
Video looks great so I went ahead to sign up. It's not working in Chrome
though. Still some bugs as I can see from console.

------
alpb
The only website I saw that does not run on iPad in year 2012... Video
requires flash, links doesn't work...

------
ricksta
Your video doesn't work on iPad. It asks for a browser which support html5
which iPad supports

------
canterburry
signup and login page not working at the moment...very excited about the
builder tho.

------
jblesage
This is very similar to Divshot, which was featured here on HN a few days ago.

------
somethingnew
Awesome!

------
emehrkay
How long did this take to create? It looks damn cool

~~~
yesimahuman
Thanks! We started working on it at the end of July this year. However, we
ported over a ton of work for a product we also have for jQuery Mobile called
Codiqa (<http://codiqa.com/>). Without that it probably would have taken many
months longer.

------
ilija139
Talk about MVP ;)

------
c141charlie
Fabulous work.

------
antjanus
saw this when it was in beta :) definitely cool.

~~~
yesimahuman
Actually, this is the beta, that was alpha before :)

------
mcordio
awesome tool.

