
Show HN: Kajero – Interactive JavaScript notebooks - JayOtter
http://www.joelotter.com/kajero/
======
JayOtter
Source:
[https://github.com/JoelOtter/kajero](https://github.com/JoelOtter/kajero)

~~~
rajington
really nice, was just looking at trying to use Jupyter but their JS kernels
gave me issues. Being able to use arbitrary packages would be nice, babel
transpiling would also be cool.

~~~
JayOtter
I looked into Babel but the standalone package is (comparatively) massive.
Could be an optional extension, possibly.

I think it has potential for use as a way to write documentation for JS
libraries, so being able to use arbitrary packages is certainly something I'd
like to add. :)

~~~
WorldMaker
One option to allow arbitrary packages that plays well with a gist-hostable
style of notebook is to make use of the JSPM CDN (details towards the bottom
of [http://jspm.io/](http://jspm.io/)). I've used that for little gh-pages
hosted experiments in the past. It can be a powerful way to access both the
GitHub and NPM ecosystems of JS libraries.

The JSPM CDN could also provide a way to load transpilers like Babel, Traceur,
Closure, and Typescript.

~~~
JayOtter
This looks really useful. Could be just what I need - thanks a lot. :)

------
rafa2000
Upvoted. Running from source. Checking sources to see how to add more
libraries. Hope we can use transpilers like coffeescript, truescript, scalajs,
clojurejs and others to code on it. This looks like the perfect friendly
Frankenstein monster to join all javascript modules and transpilers in one
single running notebook.

------
primitivesuave
I've been playing with developing a similar block-based editor, this was some
tremendous inspiration in terms of UI and functionality. I especially like how
blocks are rendered until you click on them, and they re-render when you blur
the markdown input field. Being able to inject data sources into the document
is brilliant. I really appreciate you open-sourcing your work, and I will
definitely do the same with mine!

One thing we are both doing is relying heavily on icons to indicate the
different kinds of blocks that can be added. To make the role of each icon
more apparent, I added a tooltip on hover. This may be useful here as well,
e.g. for the code blocks there is an icon that cycles between fa-refresh and
fa-users that I didn't immediately understand.

Thanks again for this fantastic contribution!

~~~
JayOtter
There should be tooltips on hover already. :) Best of luck with your project!

------
rrherr
Awesome, thanks for sharing! A JavaScript notebook with D3 is just what I've
been wanting. I'm wondering, what are the pros & cons of Kajero compared to
using JavaScript in Jupyter or Beaker?
[https://news.ycombinator.com/item?id=10127540](https://news.ycombinator.com/item?id=10127540)

------
peternicky
Ever seen tonicdev.io? Is it possible to use npm packages in notebooks?

~~~
JayOtter
Yup, Tonic is super cool. This is more for presenting data than demoing
libraries, but I'd like it to be as useful as possible for many things.

If you save it as an HTML file you can obviously add your own client-side JS.
Node packages are a ways off right now though - would need to think about how
to do it as it's all client-side.

~~~
caffeinewriter
Perhaps Browserify would be something that would work in this use case.
Awesome job!

In addition, it might be cool to have in-line substitution of data. For
example, in your analytics notebook[0], I noticed you referenced the number in
text afterwards, but if Kajero was pulling from a live data source, it'd be
neat to do something like this:

    
    
        Predictably, most came from the US ({{data.analytics[0]}}). There were also a lot ({{data.analytics[1]}}) from the UK - this is probably mainly due to it being posted on my Facebook page, with these hits being from friends rather than internet randoms.
    

[0]:
[http://www.joelotter.com/kajero/?id=3dfe6ba41741626a95b3a717...](http://www.joelotter.com/kajero/?id=3dfe6ba41741626a95b3a7170508d169)

~~~
primitivesuave
I second this - would be nice to have some kind of handlebars or nunjucks
integration
([https://mozilla.github.io/nunjucks/](https://mozilla.github.io/nunjucks/)).

~~~
JayOtter
Agreed, this would be excellent. I'll look into it. Thanks!

------
nwrk
Great idea and great execution! Extremely useful. Thank you

------
zyxley
Any chance of adding something where code blocks can have some kind of styling
applied to them (for example, partial widths)?

Combine that with 'hidden' code blocks and there could be some interesting
territory here for non-technical hobbyist data display stuff, like RPG
character sheets.

------
gtf21
Great idea! Might use this for some of our internal documentation.

~~~
JayOtter
That sounds cool - do let me know if you do anything interesting with it. :)

------
whacker
looks awesome!

A link to installation instructions would be nice.

------
genericacct
Where is the save button?

~~~
JayOtter
It's in the editor view, beside the undo button, at the top-right.

It's not visible if no changes have been made (if the consensus is that's a
bad idea I'm happy to change it).

~~~
nkrisc
If no changes have been made since the last save you could replace the save
button with a message that states something to that effect.

~~~
JayOtter
That sounds about right. Might fade it out and have that as the tooltip.

~~~
WickyNilliams
Disabled button is preferable to hiding

