
Blueprint – A React UI toolkit for the web - ika
http://blueprintjs.com/
======
TheAceOfHearts
I see a few comments bringing up mobile. There's already many mobile-friendly
UI frameworks; not everything has to be mobile-first. Yes, in many cases it
makes sense to go for a mobile-first approach, especially with consumer-facing
applications. Mobile is huge and apparently it's still continuing to grow.

At the same time, there's many legitimate cases in which you want to optimize
for desktop. For example: consider an IDE, where you have lots of panels and
toolbars. In some cases it's unclear how you'd be able to support both desktop
and mobile without significantly degrading the experience. Even Google
struggles with this. How usable is Data Studio [0] on mobile? It's pretty
terrible and unusable. But that's perfectly fine, because the desktop
experience is great! I can't speak for others, but I can't imagine myself
wanting to use a mobile device to get any work done.

Kudos to Palantir for open sourcing their UI toolkit.

[0] [https://datastudio.google.com](https://datastudio.google.com)

~~~
minimaxir
For internal projects/webpages (similar to Google Data Studio as mentioned),
where you would expect the user to _only_ be using it on a desktop, having no
mobile support is fine.

But for external projects/webpages in 2016, where atleast 1/3 of usage can
come from mobile devices, having a lack of mobile support is a complete, 100%
nonstarter. And there are plenty of competing React UI frameworks with mobile
support already.

~~~
eyko
> And there are plenty of competing React UI frameworks with mobile support
> already.

Citation needed.

In all honesty though, good quality UI frameworks with good mobile support are
on the top of my "#want" list.

~~~
woah
There are a bunch of bootstrap components ported to React in the Reactstrap
project.

------
renke1
This looks really nice.

However, what I really want for React is a style-agnostic component library
that basically extends the regular set of HTML elements, but comes with no
"visual" styling (other than really basic styling like the browser's default
styling for <input>, <select> and the like). Only styling that is necessary
for the component to function should be included.

Of course, optional themes would be fine. Also, non-visual styling should be
completely inlined. Themes could inject "visual" styling via context. User-
defined styling would be passed via class or style props.

~~~
Klathmon
Styling is still "unsolved" with react IMO.

Inline styles feel wrong, CSS alone isn't encapsulated enough to work with
components correctly, CSS modules are TOO encapsulated which makes global
styles and themes a royal pain, and adding another layer ala SASS or LESS
feels like more of a "patch" vs a real solution.

And none of them really solve style inheritance in any way that I'd call
elegant.

I end up using SASS and overriding default styles with weird hacks like using
`.button.button.button` or (even worse) using `!important`, but it still feels
wrong and doesn't scale very well at all.

~~~
pault
I know everyone has their own favorite method, but one that I'm extremely
satisfied with is using webpack > sass-loader > extract-text[1] to `include
Styles from './MyComponent.scss'` in each component file, and then it all gets
bundled up into a single css file per target (also great for eliminating dead
CSS!). I use "layouts" at the root of my react hierarchy (under stores and
routers and whatnot) and put my global styles there.

I haven't run into a situation using this setup where I felt like I needed a
dirty hack to make something work. It does add a layer of complexity to the
build, but if you can get it working once you can just copy paste it into
every new webpack config, and It feels very natural and tends to organize
itself.

I am really not a fan of this new "css in your js" approach that the cool kids
are using, but I guess I'm just getting old.

[1] output of the following config will be:

    
    
      dist/
      |_app/
        |_bundle.js
        |_bundle.css
      |_admin/
        |_bundle.js
        |_bundle.css
    

```

    
    
      const webpack = require("webpack");
      const ExtractTextPlugin = require("extract-text-webpack-plugin");
      const ExtractCSS = new ExtractTextPlugin("[name].css");
    
      module.exports = {
        entry: {
          "./dist/app/bundle": "./app.js",
          "./dist/admin/bundle": "./admin.js",
        },
        output: {
          path: __dirname,
          filename: "[name].js"
        },
        module: {
          loaders: {
            test: /\.scss$/,
            loader: ExtractCSS.extract(["css", "sass?sourceMap"])
          }, {
            test: /\.js$/,
            loader: 'babel',
            exclude: /node_modules/,
            include: __dirname
          },
        },
        sassLoader: {
          includePaths: "source/styles",
          sourceMap: true
        },
        plugins: [ ExtractCSS ]
      }

```

~~~
Klathmon
That is what we do as well, but if you use a UI toolkit that includes it's own
styles, you'll need to override them. That's where the fun hacks like
.button.button.button come in to override the included styles.

~~~
pault
Oh yeah, I see what you're saying. I just don't bother with toolkits since I
find that once you factor in said fun, you aren't really saving much time, and
you might end up with a lot of jank. I just roll my own based on the needs of
the project and keep my cascade very flat and specific. Sass makes this really
easy using BEM style naming, where you can do this:

    
    
      .my-component {
        &_component-item {
          &--open {
          }
        }
      }
    

and you get a nice, flat output:

    
    
      .my-component {}
      .my-component_component-item {}
      .my-component_component-item--open {}
    

I wish framework authors would adopt this approach as it completely eliminates
specificity conflicts.

------
butu5
Thanks very much @Plantir for open sourcing React UI toolkit. This already
seems to be production ready. Big thanks for the detailed documentation. The
amount of time you have spent in creating examples and providing excellent
starting point is really great.

I really enjoyed and excited to see your take on Color Theme. Like bootstrap,
I don't think sites created using Blueprint will look same. With minimal
changes in variables,layout and using your wide ranging color theme wonderful
results can be achieved in no time.

Big Thumbs up!!

I have created a small overview videos about various UI component available.
(No installation or tutorials, only shown their various artifacts).

[https://www.youtube.com/watch?v=ky7ec5Sh2kM](https://www.youtube.com/watch?v=ky7ec5Sh2kM)

------
jasonkillian
Hi all, I work at Palantir and worked on Blueprint (although I'm currently
working on a different project). Happy to answer any questions you have about
it.

Just a note - we didn't intend to heavily publicize the project quite yet. For
example, the docs site is still a WIP, so apologies if it causes issues for
you on mobile devices.

~~~
literallycancer
Just a nitpick, but when looking at the docs, I can't move with Page Up/Page
Down unless I click in the "content column/area", kind of annoying when one
navigates using the left bar and then can't move around (on no-mouse setups,
e.g. trackpoint + keyboard). So you might want to look at that.

Otherwise no issues (older laptop i5/chrome), so I guess you guys mostly fixed
that by now.

~~~
jasonkillian
Good catch, we'll take a look at this. I've filed an issue to track it [0].

[0]:
[https://github.com/palantir/blueprint/issues/122](https://github.com/palantir/blueprint/issues/122)

------
dictum
Ah, memories. [http://blueprintcss.org/](http://blueprintcss.org/)

~~~
Jgrubb
That was the first CSS grid framework I remember coming across. Last updated
in 2011, it's not responsive at all it seems. Completely staggering how far
things have come in 5 years.

------
rq1
Your homepage pushed my CPU to 75% and resulted in an early click on the red
cross of the tab. (latest chrome stable/osx 10.11) You should do better.

~~~
3D4y0
Same thing happened to me (latest chrome/ubuntu 14.04)

------
mstijak
This is very slick. It's similar to my own project
[http://cx.codaxy.com/docs/widgets/date-
fields](http://cx.codaxy.com/docs/widgets/date-fields), however, it seems that
they went one step further.

~~~
crudbug
Impressive work.

[0] [http://cx.codaxy.com](http://cx.codaxy.com)

~~~
mstijak
Thanks. Here are a few more links for things implemented with Cx:

[http://cx.codaxy.com/fiddle/?f=vwyHzOO1](http://cx.codaxy.com/fiddle/?f=vwyHzOO1)

[http://cx.codaxy.com/starter/dashboards/sales](http://cx.codaxy.com/starter/dashboards/sales)

[https://codaxy.github.io/state-of-
js-2016-explorer/](https://codaxy.github.io/state-of-js-2016-explorer/)

[https://mstijak.github.io/tdo/](https://mstijak.github.io/tdo/)

------
config_yml
This is impressive, I can cover lot's of UI scenarios with it. I also like the
first class CSS/HTML API that they have, so I could use them without React.
And they seem to have Accessibility covered (need to dive in a bit more), but
this is super important. And at last, I dig the visual style, which has good
affordances. A nice contrast to Material Design.

------
gburt

      Blueprint is an open source project developed at Palantir.

~~~
revelation
Haha, I'm sure some intern at Palantir is now also writing a Java SWT to
Blueprint translator. The poor soul.

~~~
Ciantic
Notice that this toolkit is written in TypeScript.

------
k__
I wish web based UI-toolkit creators would focus on WebComponents. They can
easily be used as leaf-elements in almost any framework.

~~~
xliiv
+1 for web components and Polymer
[https://beta.webcomponents.org/](https://beta.webcomponents.org/)

~~~
Fifer82
A lot of people go on about Polymer, but no one actually uses it?

~~~
ergo14
Hm, some of the biggest enterprises in the world and industry leaders use it.

I'm not sure why this is repeated on HN all over and over.

[https://youtu.be/VBbejeKHrjg?t=9m32s](https://youtu.be/VBbejeKHrjg?t=9m32s)

~~~
xliiv
BTW, Chrome browser's: PDF reader, download listing, new settings are Polymer
afaik.

Google uses [https://gaming.youtube.com/](https://gaming.youtube.com/)

IBM uses
[https://console.ng.bluemix.net/catalog/](https://console.ng.bluemix.net/catalog/)

~~~
ergo14
Theres tons more. Btw. "main" youtube is also switching to polymer.

------
sehr
If someone wants to be an exemplary citizen, rendering all of the components
on to a single page for us on mobile would be amazing.

~~~
ivan_ah
Yes, I was looking for a "kitchen skin" page and was disappointed not to find
one.

------
simple10
This looks great. Nice to see a complete UI toolkit with context menus,
sortable tables, hotkeys and editable text along with all the normal tooltips,
navs, and UI widgets. Bonus points for both sass and less support. Looking
forward to trying this out.

------
vesak
Is this page written in Blueprint? It makes my Firefox consume 100% CPU.

~~~
rainings
I am using latest FF too. Very lag

------
SwellJoe
Despite the sluggishness, there's a lot of really likeable stuff in here and
it is beautiful (or, a lot more beautiful than I, or most developers, could
ever come up with without a team and some pro designers on staff).

I particularly enjoyed the piano example:
[http://blueprintjs.com/docs/#components.hotkeys](http://blueprintjs.com/docs/#components.hotkeys)

------
codycraven
Documentation is unusable on mobile... I hope that was due to someone making
some CSS mistakes with their page code and not the framework's code.

~~~
hornbaker
The framework, while polished, lacks any responsive grid components. A bit of
a glaring omission imho, in this age of Bootstrap and Semantic-UI giving you a
responsive grid out of the box.

------
karmajunkie
Maybe just me but I'm having a hard time seeing how this is substantially
different from or better than bootstrap or foundation with some react-based
wrappers like reactstrap. Seems like performance is an issue and you're just
as tightly coupled to the framework as with bootstrap/foundation. Am I missing
something?

------
GordonS
I tried to look at the site on my S7, but it ground it to a halt. Tried on my
i7 laptop, same result :/

------
olalonde
Unfortunately, mobile support is not on the roadmap:
[https://github.com/palantir/blueprint/issues/105#issuecommen...](https://github.com/palantir/blueprint/issues/105#issuecomment-260151357)

~~~
DeBraid
> Just as a caution though, the library, in general, is intended for desktop
> web applications. We haven't made mobile-compatibility a priority
> [https://news.ycombinator.com/user?id=jasonkillian](https://news.ycombinator.com/user?id=jasonkillian)

Presumably since React Native a solid mobile alternative, but shouldn't
2016-vintage web UI frameworks be responsive?

I guess if you're a big company like Palantir, you have the resources to do
native mobile, so I see why they aren't making it a priority.

~~~
olalonde
Yes, I would really like to use this but don't have the time or resources to
build and maintain a separate mobile UI. With bootstrap/react-bootstrap,
things usually turn out OK/good on mobile without me having to really think
about it.

------
Edmond
I am the developer of HiveMind (crudzilla.com), I am currently stuck on what I
think would be the final feature of the platform that would fulfill my vision
of what a modern web application platform should be about.

That feature is a drag-n-drop UI construction mechanism that would basically
allow the user to glue together UI components (I call them UI parts) and write
code only as a fill-in-the-blank task to complete the application.

I think React, Angular and similar paradigms might eventually make this
possible. In the future building web applications, especially typical business
crud applications with simple workflows wrap around a UI should not require
more than familiarity with a development product and basic programming.

------
foo303
Not to sound like a bummer here, but I'm not sure what kind of computer is
needed to open this webpage. Simply scrolling up and down that website causes
my computer to almost freeze. Firefox 49.0 user here. I would profile it, but
I'm afraid of having to restart the computer as a result.

Edit: It looks amazing. (Still the performance issue is reproducible easily)

~~~
adidahiya
Hi folks, I'm one of the developers of this project -- we hear your perf
concerns loud and clear and are tracking the issues :)

As mentioned elsewhere in this thread, this page was released a little too
early while we were still playing around with animations in the header. I've
gone ahead and disabled them for now, so you should see leaner CPU utilization
now. Thanks for your comments.

~~~
SwellJoe
Even now, it's still pretty sluggish, all around. My machine is, I think, as
big as can be expected (current gen i7, 16GB), though I am on a slow 4G
network. But, as others note, it is gorgeous, and the API appears well
thought-out, and very complete (or, at least, complete for the kinds of
systems UIs I build).

~~~
adriand
Weird, because on my iPhone 6, it works fine with no detectable performance
issues at all.

------
CGamesPlay
The documentation page does render legibly on mobile. It looks nice but that
doesn't bode well for the library...

------
simple10
Question for Palantir devs: is this currently being used in production?

~~~
ethanbond
I'm a designer at Palantir (also write some code), and yes, it's used pretty
much everywhere.

~~~
mwww
Could you please show us a few screenshots? Thanks!

~~~
mlitwin
You can see some designs here
[https://dribbble.com/palantir](https://dribbble.com/palantir)

------
crudbug
ReactJS enlightened web developers with _Component_ based
functional/thinking/development model, which brought some order in front-end
UI development. And it has been one of the best things with community behind
it.

Having worked with both Desktop UI (Swing/GTK) and Server based UI toolkits
(JSF), the value of ReactJS is a standard Component Life cycle.

I would propose having a ReactUI component specification with a standard
version. The current specification [0] is not decoupled from implementation.
The separate spec and implementation numbering will enable multiple
implementations - ReactJS from Facebook being one.

I am thinking similar to Reactive-Streams [0] specification and Reactive
Extensions [2] which have multiple implementations.

[0] [https://facebook.github.io/react/docs/react-
component.html](https://facebook.github.io/react/docs/react-component.html)

[1] [http://www.reactive-streams.org](http://www.reactive-streams.org)

[2] [https://github.com/ReactiveX](https://github.com/ReactiveX)

~~~
rpeden
React wasn't the first. :)

Some of us were out in the wilderness building GWT components back in
2009/2010\. And although compiling to JS was a pretty weird option at the
time, it mostly worked. Your app looked terrible if you just cobbled together
GWT's default components, but if you built your own components with custom
CSS, you could end up with a really nice looking application. We even used
immutability and one-way data flow where we could, though it wasn't culturally
ingrained the way it is in the React community.

I understand why GWT idn't become mainstream. Java was really disliked in the
JS community, even more than it is now. But having a big, maintainable web app
using DI and all other sorts of fun things was actually kind of fun 6-7 years
ago. I like React and Angular 2 better now, though.

------
rpwverheij
This looks really nice and well set up. I love the fact that you chose
typescript and bundle a good definitions file. I totally understand homepage
performance was not on the agenda yet, and its really no big deal to me, but I
have to agree with others on the mobile support: this sadly crosses blueprint
of my list for 99% of my work, if not all. Will be coming back to see where to
project is going though!

------
awjr
Coincidentally I was watching "ReactNL 2016 Max Stoiber - Styling React.JS
applications"
[https://www.youtube.com/watch?v=19gqsBc_Cx0](https://www.youtube.com/watch?v=19gqsBc_Cx0)

Styling in React needs some sort of consistent way forward.

------
ENGNR
Maybe I need to take a few layers of tinfoil off the old hat, and I suspect
it's just good old fashioned open source generosity, but..

Given that it's from Palantir, is there any way this could become a security
attack vector at scale?

~~~
grzm
Fortunately, it's open source, fully open to code review!

------
NicoJuicy
A little bit slow on my mobile

~~~
lucideer
A little bit slow on my laptop, nevermind mobile. Not good signs.

~~~
elcct
Wanted to say this as well. Definitely a deal breaker.

~~~
sotojuan
Not too far off the average SPA experience.

~~~
elcct
That makes me sad

------
petemill
It seems you may have to include the css for the whole library on every
page[0]. I would have much preferred it if the css for each component is
included on your page as you require the component.

Though I admit it is confusing since the "Let's Get Started" section of the
homepage[1] does not mention including the global css.

[0] [http://blueprintjs.com/docs/](http://blueprintjs.com/docs/) [1]
[http://blueprintjs.com/](http://blueprintjs.com/)

------
pinouchon
Impressive.

One question: I couldn't find advanced form components, and specifically
dropdown/multiselects. (a bit like this:
[https://selectize.github.io/selectize.js/](https://selectize.github.io/selectize.js/),
or this: [http://wenzhixin.net.cn/p/multiple-select/docs/#the-
basics1](http://wenzhixin.net.cn/p/multiple-select/docs/#the-basics1))

Do you plan to implement this kind of components?

------
hokkos
This look exceptional ! It's full featured (datepicker, tree) and professional
looking. It's also seems to by typescripted. But the slider needs work on
touchscreen.

------
ika
What I like the most is that the UI is just really nice and clean

------
aagat
There is also [http://react.semantic-ui.com/](http://react.semantic-ui.com/)
which I have found to be very useful.

------
adakbar
Those themes are gorgeous, where I can find those theme?

------
jules
The design looks amazing. I love how easy it is for "programmer ui design" to
look quite good these days.

------
IJP
Great work, it looks very nice! One thing I always find missing from most of
these React toolkits is a TreeTable component. This is a component that I
often require in business applications, and I suspect other will too. Is this
something that you would consider adding in the future?

------
revelation
I wonder why all the UI toolkits always come without some form of layout
support.

What is Qt without a GridLayout?

~~~
ggregoire
What are you talking about?

\- bootstrap contains a grid layout

\- semantic-ui contains a grid layout

\- bulma contains a grid layout

\- purecss contains a grid layout

\- tachyon contains a grid layout

\- skeleton contains a grid layout

\- milligram contains a grid layout

\- spectre contains a grid layout

and the list goes on.

~~~
revelation
That's nice but their idea of grid is to hand you a bunch of fixed-sizes CSS
you can slap on elements. That has very little to do with the actual
_layouting_ a UI toolkit like Qt provides for.

~~~
Kiro
I don't know anything about Qt but if it's so good, why hasn't someone made
something equivalent for web that just generates the underlying HTML/CSS?

------
sebringj
This is very well done. If they provided a React Native one as well, that
would be even cooler.

------
leesalminen
Docs are utterly broken on mobile.

------
ckluis
Everything looked good until the grid/table. Those are vastly
underpowered/featured versus other solutions (kendoui, devexpress, etc) we are
currently using/have evaluated.

------
okigan
Cool/interactive logo on the web page -- how is that done ?

~~~
simple10
Canvas.

------
enturn
My RT-AC68U router flagged this website as having malware. Seems more related
to email than the website though.

Description: Sites whose addresses have been found in spam messages.

------
nawitus
For some reason this page is really slow on Firefox.

------
Numberwang
This looks amazingly good and well thought through.

------
jbverschoor
Site is super slow and jaggy on a macbook pro..

No demo's

~~~
alfonsodev
I was about to give up, but I found in documentation, one of the last link on
the side bar, is Components, there you can see a demo of good list of
components.
[http://blueprintjs.com/docs/#components](http://blueprintjs.com/docs/#components)

------
WhitneyLand
Since you guys are taking a lot of insults here I want to try and offer you
something constructive.

Having bugs is ok. Failing at mobile and performance is not. It melts away
your credibility because doing these things right is table stakes.

This is all compounded by the fact that it's a toolkit that serves as base for
other developers, rather than just a slow app.

Finally, your flippant response to criticism gives the impression that you
don't understand or care about craftsmanship.

However, thanks for making the contribution. Look forward to trying your next
major release.

~~~
CSDude
Not all things are supposed to be mobile. All the products we write are
supposed to run on a large display for our case.

~~~
robbrown451
I still can't imagine tying yourself to a system that precludes mobile. That
seems like a terribly bad idea at this point.

~~~
ethanbond
For certain applications, you're right that's an awful idea.

For others, it's an equally bad idea to limit your toolbox based on an
irrelevant criterion.

~~~
robbrown451
I question how truly limiting that is. I mean, if you have a framework or
library that has the restriction that it won't work well on mobile -- unless
there is a really good reason for that restriction -- it seems to me that that
framework/library probably isn't ready for prime time and will either gain
mobile support, or will soon disappear.

------
mcs_
why did you publish this on Saturday??? now i have no excuse to try to replace
react-material...

------
moondev
This is really slick and fresh looking. Almost inspires me to build something
with it

~~~
ethanbond
You should go for it! It actually _feels_ good to use, which is one of those
rarer qualities to come across in these sorts of libraries.

Disclaimer: I'm a designer at Palantir and have been using it for quite a
while.

------
milesdyson_phd
very neat, i am definitely going to be trying this out on a new side project

------
cryptozeus
Not loading on safari ios 9

------
yummybear
The text is garbled (on top of eachother) on safari ios.

------
samfisher83
Trying to load that site is slowing down my browser.

------
bytelayer
Is it possible to use this without React/NPM?

------
jasikpark
Smooth as butter in safari on my iPhone se.

------
andrethegiant
Very impressive! Keep up the good work.

------
alfonsodev
Thanks for this I see a great value on this, you got my github star.

------
harrisrobin
This is amazing!

------
sauronlord
Renders and scrolls slow

------
pokebowl
I saw no favicon and closed this thing immediately.

Seriously guys, it's 2016 and you still don't have a favicon. Not having a
favicon on your docs page is plain bad for a few reasons:

1\. I have zero context about your page. If I don't have that 20x20 square on
my tab anchoring me to reality, my 2 second attention span will have made me
forget where I am even before I load your page on my internet-connected
toaster oven's 7 segment display. Not. Cool.

2\. No support for 7 segment or e-ink displays. WTF?? How am I supposed to use
this for IoT applications, like my toaster oven[1] or my dishwasher.

3\. This is how it shows up on my kindle:
[http://67.media.tumblr.com/tumblr_lhw2rvgsnu1qzhofn.jpg](http://67.media.tumblr.com/tumblr_lhw2rvgsnu1qzhofn.jpg)
ARE YOU INCOMPETENT??

[1] See bullet point 1

[2]
[https://static.googleusercontent.com/media/research.google.c...](https://static.googleusercontent.com/media/research.google.com/en//archive/mapreduce-
osdi04.pdf)

[3] [http://jepsen.io/](http://jepsen.io/)

[4] [https://palantir.com/spying-on-my-shit](https://palantir.com/spying-on-
my-shit)

~~~
dang
> _I saw no favicon and closed this thing immediately. Seriously guys, it 's
> 2016 and you still don't have a favicon._

This is the sort of knee-jerk dismissal that the Show HN guidelines ask you to
avoid when commenting here:

[https://news.ycombinator.com/showhn.html](https://news.ycombinator.com/showhn.html)

Favicons have their importance but it's just rude to swipe someone's entire
work off the table this way.

Edit: Doh. Carry on.

~~~
DanBC
I mean, it's obviously satire, and it's taking a shot at something you've
previously said is damaging to HN.

[https://news.ycombinator.com/item?id=9238739](https://news.ycombinator.com/item?id=9238739)

I'd agree that pokebowl's comment is a suboptimal way of getting that point
across.

~~~
dang
> _obviously_

Oops. I completely missed that.

This is what comes of moderating in haste.

------
AzzieElbab
Safe to say it sux.

~~~
dang
Please don't post uncivil, unsubstantive comments to Hacker News. We ban
accounts that do this repeatedly.

[https://news.ycombinator.com/newsguidelines.html](https://news.ycombinator.com/newsguidelines.html)

[https://news.ycombinator.com/newswelcome.html](https://news.ycombinator.com/newswelcome.html)

------
macattack728
Cool stuff

------
lai
TBH, I expected more from what's supposed to be a Palantir project. I mean
come on, why is the site not mobile-first?

~~~
bearly
99% of our use cases are desktop-only – we build analytical tools. Our focus
is on making those experiences great.

