
Show HN: Starboard – Fully in-browser literate notebooks like Jupyter Notebook - protoduction
https://starboard.gg
======
protoduction
Hi HN, I developed Starboard over the past months.

Cell-by-cell notebooks like Jupyter are great for prototyping, explaining and
exploration, but their dependence on a Python server (with often undocumented
dependencies) limits their ability to be shared and remixed. Now that browsers
support dynamic imports, it has become possible to create a similar workflow
entirely in the browser.

That motivated me to build Starboard Notebook, a tool I wished existed. It's:

* Run entirely in the browser, there is no server or setup, it's all static files.

* Web-native, so no widget system is necessary. There is nearly no magic, it's all web tech (HTML, CSS, JS).

* Stores as a plaintext file, it will play nicely with version control systems.

* Hackable: the sandbox that your code gets run in contains the editor itself, so you can metaprogram the editor itself (e.g. adding support for other languages such as Python through WASM).

* Open source ([https://github.com/gzuidhof/starboard-notebook](https://github.com/gzuidhof/starboard-notebook)).

You can import any code that targets the browser directly (e.g. puts stuff on
the window object), or that has exports in ES module format.

I'm happy to answer any questions!

~~~
angleofrepose
Thanks for sharing, this is a cool project.

I've been working on something similar on and off for a while, and I've found
the space to be fascinating and somewhat puzzling. Most of the first questions
I try to ask about these in browser notebooks don't have clean answers. In no
particular order:

\- Do you have any ideas about solving logic errors? As it stands right now a
while(true) loop crashes the page and consecutive re-openings of the page for
a short while (in chrome). What about things like document.body.innerHTML = ""
(you actually seem to handle this pretty gracefully, I'll see if I can poke
more holes in this another time). For what it's worth none of the online
notebooks I've seen have a satisfactory solution to infinite loops, loop
timeouts are too blunt an instrument and crashing the tab can take the browser
minutes to recover.

\- Is there a particular reason you use eval rather than the new Function
constructor? From what I've read using new Function is much more performant,
and other than different scoping a better choice than eval. Can't find the
link at the moment, but it was wrapped up in the mdn[1] design docs for their
codebox examples.

\- I see you're using the first codemirror 6[2] beta release, how are you
liking it? I really enjoy the interface so far.

\- Do you have any favorite resources or inspirations about why you went about
building a hackable offline local first notebook environment? I particularly
like the experiments at Ink and Switch[3]. (many related hn submissions). As
well as webstrates[4].

My attempt at this game is to break out of the notebook style single column
layout and embrace an art board style canvas, which is a rather radical idea
in that it is not obvious what that should look like or how basic interactions
like hierarchies or execution order should look, but fun to explore. I also
desperately want to prevent crashing as a result of logic errors and workflow
footguns(like deleting DOM elements or overwriting storage), to that end I
have a separate storage of scripts to rebuild a "safe boot" interface, but
there is more thinking to be done here.

I look forward to poking around your code some more soon. Thanks for posting.

[1]: [https://developer.mozilla.org/en-US/](https://developer.mozilla.org/en-
US/) [2]: [https://codemirror.net/6/](https://codemirror.net/6/) [3]:
[https://www.inkandswitch.com/](https://www.inkandswitch.com/) [4]:
[https://www.webstrates.net/](https://www.webstrates.net/)

Edited out a question about your motivations. I reread your comment and the
about page and I realized my motivations are similar to yours. While
observable doesn't have a few of your key points, it is a fantastic product.
The reason I don't settle on it is that I'm interested in experimenting with
the environment outside of a notebook-with-cells interface.

~~~
rewq4321
> As it stands right now a while(true) loop crashes the page

> [...] I also desperately want to prevent crashing as a result of logic
> errors

I could be wrong here, but I think the new Site Isolation stuff in Chromium[0]
may mean that you can sandbox an iframe to a different origin, so that the
main threads of the top frame and the iframe aren't synced. So the iframe
where the code is running would freeze, but the main frame would still be
responsive. Again, I may have misinterpreted this because I only read about it
in passing, and it was a while ago.

[0] [https://www.chromium.org/Home/chromium-security/site-
isolati...](https://www.chromium.org/Home/chromium-security/site-isolation)

~~~
angleofrepose
A brief skim through that doc looks like it is about a kind of security that's
not relevant to my project. I'm trying to protect the user from themselves
while simultaneously giving the user full power over the document.

Web workers are interesting and relevant to this use case, however the almost
total isolation doesn't lend itself to manipulating the DOM without the user
explicitly writing a custom API to interpret the worker's messages. So, back
to the same problem.

Thanks for the link.

I'll do some digging into chrome's sandbox[1]:

[1]:
[https://chromium.googlesource.com/chromium/src/+/master/docs...](https://chromium.googlesource.com/chromium/src/+/master/docs/design/sandbox.md)

------
wokwokwok
Hm.

So, without a kernel that can do heavily lifting, you're limited to basically
what you get when have the browser console open; ie. html + js.

Is that the idea? A better / structured browser console?

Or am I missing something?

I mean, I completely appreciate the benefit of notebooks; but if you're
limited to running code inside your browser window sandbox... how do you do
anything useful with it?

How do you import a dataset?

> const data = await
> fetch(`[https://api.exchangerate.host/timeseries?start_date=2020-01-...](https://api.exchangerate.host/timeseries?start_date=2020-01-01&end_date=${today}`\);)

Is great for trivial public datasets, but CORS is going to forbid you from
loading any personal/private data right?

unpkg can give you public packages, but if you have any personal code, how do
you use it?

It seems like you basically end up with an empty sandbox.

~~~
brainless
I somehow felt very similarly. In that this is a very cool project, but what
does it really solve. People who work with data also actually need Python, do
you really expect me to recreate all the Py libs in JS now?

I am really curious what was the author's thinking process here with regards
to solving the problem, what in fact was even the problem. Perhaps the author
could share their thoughts.

Edit: grammar

~~~
brainless
After looking at [https://starboard.gg/about](https://starboard.gg/about)
things are clearer now. The use-cases are clear and I can see the audience it
targets.

~~~
SiempreViernes
Can you explain it, because even after reading the about page I think your
objections in the first post stand unchallanged.

~~~
oarsinsync
To me it looks like while Jupyter is good with Big Data, this may be good with
Small Data that doesn't need the overhead that is Jupyter, but saves the need
to reinvent all the wheels yourself manually.

I'm looking at this and comparing it to the situation I find myself in with
looking for a syslog collector. I want something that can collect all my
syslog and present them in a web UI in a sensible way.

My options appear to be limited to commercial solutions, ELK (Elastic,
Logsearch, Kibana), or text files. There's no middle ground. I have ~20 VMs +
containers, and no way to view all of their logs in a central sensible manner
unless I roll my own (or buy more hardware to be able to run the ELK cluster).

~~~
wokwokwok
but, but... how?

I feel like I must be missing something here; you want to aggregate your
syslog data; you have a bunch of files and a web browser.

Now what?

You beat your keyboard against the monitor while your browser sandbox
steadfastly refuses to load your local file system files? [1]

You write your own server that serves data and the open source core? [2]

Yay, you now have the dubious honour of having re-invented jupyter notebooks,
only, you had to roll it yourself, and it's insecure and really not very good
compared to an existing mature product.

What can you _actually do_ with this, that you can't do by right clicking on
your browser window and picking 'inspect', and then clicking on 'console'?

You can certainly make interactive blog posts; absolutely, I 100% acknowledge
that as a blog plugin, when you have already got a server to host your
content, this would be pretty awesome.

If you _do_ want to run your own databricks / notebook SAS, then I also see it
as being a really great kickstart for you, absolutely.

However, out of the box? I'm... like, I think this is interesting, but I don't
see how I could actually use it.

[1] - [https://stackoverflow.com/questions/50007055/fetch-
request-t...](https://stackoverflow.com/questions/50007055/fetch-request-to-
local-file-not-working)

[2] - [https://github.com/gzuidhof/starboard-
notebook](https://github.com/gzuidhof/starboard-notebook)

~~~
protoduction
I don't have all the questions yet and there are definitely things that a
Jupyter notebook does much better.

As for interacting with local files: I imagine a CLI tool that spawns a
webserver that will serve local notebook files and perhaps the files in
folders you point it at. Or: you generate a notebook file with the data baked
into it (as a JSON blob or something).

As for security: I think the browser sandbox is a lot more safe than running
Python (Jupyter) with a lot of dependencies you will have to verify.

And finally: you need to be able to get the data into the browser. For a
company the most 'scalable' would probably be self-hosting Starboard and
(setting up CORS to) allow reading from various datasources from your internal
network, or otherwise authenticating the requests from notebooks.

Another thing that has worked well for me in the past with other web tools:
support drag and drop. You drop in the file you want to visualize.

In the end Starboard notebook is a tool for creating a small website that you
can instantly share, without needing a backing Python server always on, and
without the need of any build tooling (webpack, what have you). It's good for
small web tools, articles and tutorials. I hope this makes it a little bit
more clear!

~~~
wokwokwok
Yep, make sense.

The ability to basically drag and drop a file (eg. csv) onto the notebook to
vendor it as part of the static notebook that other people could then access
would be the bridge that I was looking for and couldn't find.

------
kbouck
How does this compare with Observable?

[https://observablehq.com/](https://observablehq.com/)

~~~
fzaninotto
Observable is not JavaScript
[https://observablehq.com/@observablehq/observables-not-
javas...](https://observablehq.com/@observablehq/observables-not-javascript)

~~~
TeMPOraL
It's still JavaScript, just implicitly transformed to execute in a different
way than it would if you put all the cells you've written in a single file.

If I write a macro in Common Lisp that packages my code in a lambda,
establishes a bit of dynamic context around its execution, and perhaps walks
the code itself to modify some of its contents, this doesn't make uses of that
macro "not Lisp". Yet that's what's happening here, just with less elegant
machinery as JS doesn't have proper macros.

------
LeonidBugaev
Combine it with [https://github.com/iodide-
project/pyodide](https://github.com/iodide-project/pyodide) (Python and bunch
of scientific libs compiled to webasm), and you will get really nice lite
Jupiter alternative which can cover 90% of use cases.

------
Equiet
Great work!

I'm the founder of Deepnote ([https://deepnote.com/](https://deepnote.com/)).
We're working on a data science notebook (primarily focused on Python), happy
to share what we've learned. I couldn't find any contact info on the website,
feel free to message me at jakub@deepnote.com.

------
yetanotheruser8
This is actually useful. I like this better than Codesandbox for just messing
around with some data cleanup or something hacky and quick. I'm sure it's on
the list, but I wouldn't be opposed to some Dark-mode.

------
jvanvugt
Cool project! Using Monaco for the editor makes it much more pleasant for
writing code than Jupyter notebooks

------
fomojola
I really like it! Have you given any thought to server-side execution? One of
the things I think is missing from Jupyter is a clean, standard way of doing
timed execution of a notebook: there are a number of paid solutions, but
nothing out of the box (that I could find; spent a few days searching).
Conceivably one could string together puppeteer or something similar, but it
would be great to be able to run "node starboard_runner.js <notebook file>"
and have the results output to stdout or saved to a file.

~~~
paulgb
> One of the things I think is missing from Jupyter is a clean, standard way
> of doing timed execution of a notebook

Have you looked at nbconvert with the ExecutePreprocessor? I use it (with a
light wrapper) from cron for sending automatic email reports and generating
static dashboards. It might do what you're looking for.

------
an4rchy
Neat idea. I was checking out the roadmap and was curious, do you have any
plans to monetize in the future?

Also, I hadn't realized there was a category of 'Open Startups', that's pretty
cool.

~~~
ipsum2
It's awesome that they publish their analytics openly:
[https://plausible.io/starboard.gg](https://plausible.io/starboard.gg)

~~~
solidasparagus
But the data is kind of crappy. The same user coming back in two different
days is considered two unique users.

~~~
protoduction
In a way that's an important feature. I don't want to (be able to) track
individual users, and I don't think I have to.

I don't have to tailor ads to the visitor or something, I just want accurate
enough stats in aggregate.

------
smashah
The concept of Jupiter notebook for python was always kinda wild to me. Great
that now there's an option for JS. Looking forward to using it! Great work!

~~~
conradludgate
Jupyter notebooks exist for way more than python. You can run any language
kernel for it. Js, rust, go, c etc all have kernels

~~~
faebi
I even used a ruby kernel once and had a pretty neat data science experience
with it.

------
MR4D
The fact that this runs in my iPhone is impressive. That feature alone makes
it worth spending more time on.

Good job!

------
spicyramen
I didn't get if you can run Python code? I use TensorFlow quite often and
would be interested in trying it

~~~
protoduction
Not yet, but it's near the top of my to-do list

------
haneefmubarak
How does this compare to RunKit?

[https://runkit.com/](https://runkit.com/)

~~~
rewq4321
Starboard is all client-side, whereas runkit is all server-side (node.js). A
closer comparison would probably be Observable[0]. I love the "just HTML and
CSS" philosophy of Starboard, but I'm not really qualified to have an opinion
here because my work doesn't involve notebooks that much.

[0] [https://observablehq.com](https://observablehq.com)

------
chrisweekly
Awesome! Created free acct, looking fwd to building stuff with this!

------
znt
This has great potential.

You planning to seek funding to work on this full time?

~~~
protoduction
I am not sure yet. I am working on this full-time, but it's my own savings
that keep me fed so that's not very sustainable.

I am not sure what makes the most sense in terms of monetization in the longer
term. I think it's a difficult for many open source projects.

------
fghhfg
> static files + Stores as a plaintext file

check TiddlyWiki

------
tetris11
I'm not going to mention org-mode, because Im bigger than that but really I'm
not and org-mode org-mode org-mode

~~~
bloopernova
This is more org-babel, though. Which is org-mode. Hm.

I'm honestly just happy that Literate Programming is being hacked on, shared,
discussed, and criticized. Living documents just seem so much closer to the
promise of hypertext and the original web than what we have now.

