5 ms·

Show HN: Starboard Observable – An open source ObservableHQ notebook editor

156 points by protoduction 5y ago

kowlo 5y ago
Amazing! I will keep my eye on this project in future and contribute if I can. The current development dependency on ObservableHQ is unacceptable for me and many others... so this is a game changer.
- endergen 5y ago
  Out of curiosity, why is it unacceptable. It’s a great product with founders who have given much to opensource.
  - patates 5y ago
    Many people cannot (or aren't allowed to) author stuff in the open and/or hosted somewhere else, so being able to self-host is a must. Doesn't take anything away from the awesome product they built, it's just what it is.
  - mirekrusin 5y ago
    Personally I love observablehq and cannot use it at work as it's all sensitive information. I'd love to replace big chunks of administration/maintenance/inspection/reporting ui/scripts/whatnot with live notebooks. Best option atm seems to be Pluto or Jupyter. ObservableHQ like instance with some basic auth controls would be perfect.
    - tlarkworthy 5y ago
      You can add login with Firebase see https://observablehq.com/@tomlarkworthy/firebase https://observablehq.com/@tomlarkworthy/firebase or a full example https://observablehq.com/@tomlarkworthy/chat-application https://observablehq.com/@tomlarkworthy/chat-application
    - d--b 5y ago
      I am building https://www.jigdev.com https://www.jigdev.com for this exact reason. It embeds an observable runtime in a standalone electron app. The interface is not a notebook but rather a dashboard where you can add observable nodes of various sizes. It also has tabs. I find it a lot more manageable for large notebooks, and a lot more user-friendly for business use cases. Also the standalone app means you can connect to databases and filesystems directly, and avoid CORS for rest apis. If you’re interested in becoming an early adapter, drop me a line at the email on the website. I’ll be happy to prioritize features that you’d need.
FractalHQ 5y ago
I love this! Any chance for Svelte support? Ive found Svelte to be the most elegant and powerful way to author JS, CSS, and HTML. Would make a great combo!
- framecowbird 5y ago
  I think Svelte is tricky because it requires a compile step, I don't know whether the compile is fast enough to make it feel seamless.
  - akvadrako 5y ago
    It should be under 10ms - it's just calling a function that takes a string and outputs JS code.
  - mmmateo 5y ago
    You can see how fast it compiles in the browser at https://svelte.dev/repl https://svelte.dev/repl
- j-f1 5y ago
  Looks like someone figured out how to use Svelte inside of Observable a while ago — see https://observablehq.com/@ajbouh/svelte-experiments https://observablehq.com/@ajbouh/svelte-experiments
j-pb 5y ago
Typed cells is a step backwards. ObservableHQs extensive use of JS template literals makes for a much clearer UI and flexible system with a better user experience. I hope that the folks at observable realize at some point that they should be a GitHub like service in a Notebook ecosystem instead of a monolythic platform.
crimsoneer 5y ago
So as I guy who does DS in R/Python, is this... JavaScript? Is that a thing?! Am I an idiot?
- dash2 5y ago
  It says you can have python cells via Pyodide.
- protoduction 5y ago
  Yes, this is Javascript. Or well, at least it's web (JS+HTML+CSS). The difference between this and Jupyter (which I assume you may be familiar with) is that this doesn't talk to a backend server. Most other notebooks do (Jupyter, Livebook, rmarkdown, Spyder, VSCode+Jupyter), which has benefits and disadvantages. Everything here is in-browser and within a sandboxed iframe, which has the benefit that I can post a notebook where you can actually make changes/interact to an audience of millions without having to spawn a container per user. But also you can embed a notebook on your blog, it's just a webpage. With WebAssembly being a thing now you can even have Python cells through Pyodide (which includes common scientific packages such as numpy, pandas, matplotlib), and from Python you can interact with Javascript code in the dom. So you could make a notebook that is something like: "Drop your CSV file, parse it using Pandas, visualize it using matplotlib". That's actually really powerful for distributing small programs (<1k LoC) to people who don't have Python installed on their PC. The about page has some more thoughts on all of this. [0]: https://starboard.gg/about https://starboard.gg/about
seism 5y ago
Reminds me of the great TiddlyWiki, a self contained, open source, and very hackable knowledge base. This project will be great for instruction and portable reproducible science, if it takes off. I'll give it a try and chip in via GitHub.
enahs-sf 5y ago
This looks super handy. Any way to get starboard notebook into a react app?
- protoduction 5y ago
  The host-it-yourself easiest method is to use starboard-wrap [0], it provides a custom HTML element that wraps the sandboxed iframe. Documentation is a bit lacking, but I'm happy to help out. It should work in any framework. Alternatively you can create your notebook in starboard.gg and embed it using a standard iframe. It depends a bit on what you want your app to do, if you want to integrate "tightly" with the notebook the first will be the better choice. [0]: https://github.com/gzuidhof/starboard-wrap https://github.com/gzuidhof/starboard-wrap
cxr 5y ago
> I'd also appreciate name suggestions for the project (slowly I'm moving away from Starboard) Keep the name Starboard, create a plugin that does 80% of what casual users who only use Excel for making simple tables want, and then call that Cellboat. The resulting files should be completely self-contained, just like an xlsx; no need to have a copy of Microsoft Office, just an ordinary web browser.

156 points by protoduction 5y ago

Amazing! I will keep my eye on this project in future and contribute if I can. The current development dependency on ObservableHQ is unacceptable for me and many others... so this is a game changer.

endergen 5y ago
Out of curiosity, why is it unacceptable. It’s a great product with founders who have given much to opensource.
- patates 5y ago
  Many people cannot (or aren't allowed to) author stuff in the open and/or hosted somewhere else, so being able to self-host is a must. Doesn't take anything away from the awesome product they built, it's just what it is.
- mirekrusin 5y ago
  Personally I love observablehq and cannot use it at work as it's all sensitive information. I'd love to replace big chunks of administration/maintenance/inspection/reporting ui/scripts/whatnot with live notebooks. Best option atm seems to be Pluto or Jupyter. ObservableHQ like instance with some basic auth controls would be perfect.
  - tlarkworthy 5y ago
    You can add login with Firebase see https://observablehq.com/@tomlarkworthy/firebase https://observablehq.com/@tomlarkworthy/firebase or a full example https://observablehq.com/@tomlarkworthy/chat-application https://observablehq.com/@tomlarkworthy/chat-application
  - d--b 5y ago
    I am building https://www.jigdev.com https://www.jigdev.com for this exact reason. It embeds an observable runtime in a standalone electron app. The interface is not a notebook but rather a dashboard where you can add observable nodes of various sizes. It also has tabs. I find it a lot more manageable for large notebooks, and a lot more user-friendly for business use cases. Also the standalone app means you can connect to databases and filesystems directly, and avoid CORS for rest apis. If you’re interested in becoming an early adapter, drop me a line at the email on the website. I’ll be happy to prioritize features that you’d need.

FractalHQ 5y ago

I love this! Any chance for Svelte support? Ive found Svelte to be the most elegant and powerful way to author JS, CSS, and HTML. Would make a great combo!

framecowbird 5y ago
I think Svelte is tricky because it requires a compile step, I don't know whether the compile is fast enough to make it feel seamless.
- akvadrako 5y ago
  It should be under 10ms - it's just calling a function that takes a string and outputs JS code.
- mmmateo 5y ago
  You can see how fast it compiles in the browser at https://svelte.dev/repl https://svelte.dev/repl
j-f1 5y ago
Looks like someone figured out how to use Svelte inside of Observable a while ago — see https://observablehq.com/@ajbouh/svelte-experiments https://observablehq.com/@ajbouh/svelte-experiments

j-pb 5y ago

Typed cells is a step backwards. ObservableHQs extensive use of JS template literals makes for a much clearer UI and flexible system with a better user experience. I hope that the folks at observable realize at some point that they should be a GitHub like service in a Notebook ecosystem instead of a monolythic platform.

crimsoneer 5y ago

So as I guy who does DS in R/Python, is this... JavaScript? Is that a thing?! Am I an idiot?

dash2 5y ago
It says you can have python cells via Pyodide.
protoduction 5y ago
Yes, this is Javascript. Or well, at least it's web (JS+HTML+CSS). The difference between this and Jupyter (which I assume you may be familiar with) is that this doesn't talk to a backend server. Most other notebooks do (Jupyter, Livebook, rmarkdown, Spyder, VSCode+Jupyter), which has benefits and disadvantages. Everything here is in-browser and within a sandboxed iframe, which has the benefit that I can post a notebook where you can actually make changes/interact to an audience of millions without having to spawn a container per user. But also you can embed a notebook on your blog, it's just a webpage. With WebAssembly being a thing now you can even have Python cells through Pyodide (which includes common scientific packages such as numpy, pandas, matplotlib), and from Python you can interact with Javascript code in the dom. So you could make a notebook that is something like: "Drop your CSV file, parse it using Pandas, visualize it using matplotlib". That's actually really powerful for distributing small programs (<1k LoC) to people who don't have Python installed on their PC. The about page has some more thoughts on all of this. [0]: https://starboard.gg/about https://starboard.gg/about

seism 5y ago

Reminds me of the great TiddlyWiki, a self contained, open source, and very hackable knowledge base. This project will be great for instruction and portable reproducible science, if it takes off. I'll give it a try and chip in via GitHub.

enahs-sf 5y ago

This looks super handy. Any way to get starboard notebook into a react app?

protoduction 5y ago
The host-it-yourself easiest method is to use starboard-wrap [0], it provides a custom HTML element that wraps the sandboxed iframe. Documentation is a bit lacking, but I'm happy to help out. It should work in any framework. Alternatively you can create your notebook in starboard.gg and embed it using a standard iframe. It depends a bit on what you want your app to do, if you want to integrate "tightly" with the notebook the first will be the better choice. [0]: https://github.com/gzuidhof/starboard-wrap https://github.com/gzuidhof/starboard-wrap

cxr 5y ago

> I'd also appreciate name suggestions for the project (slowly I'm moving away from Starboard) Keep the name Starboard, create a plugin that does 80% of what casual users who only use Excel for making simple tables want, and then call that Cellboat. The resulting files should be completely self-contained, just like an xlsx; no need to have a copy of Microsoft Office, just an ordinary web browser.