Show HN: Kajero – Interactive JavaScript notebooks | Hacker News Reader

Show HN: Kajero – Interactive JavaScript notebooks

joelotter.com

217 pointsJayOtter28 comments

Source: https://github.com/JoelOtter/kajero

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.

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. :)

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/). 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.

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

If Babel is too big, [Bublé](https://news.ycombinator.com/item?id=11704472) was just on the front page...

I saw, actually! Worth a look.

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.

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!

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

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

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

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.

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

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

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

Have you seen https://wzrd.in ?

I hadn't, thanks!

Great idea and great execution! Extremely useful. Thank you

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.

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

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

looks awesome!

A link to installation instructions would be nice.

Where is the save button?

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

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.

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

Disabled button is preferable to hiding

Reply on news.ycombinator.com