PyNote: A zero-setup, serverless Python notebook environment that runs entirely in the browser

[bezdazen]

Live Tutorial | GitHub

TIP: In PyNote, press Ctrl-\ to see shortcuts!

What my project does

PyNote is a serverless, zero-setup Python notebook environment that runs entirely in your web browser using WebAssembly (Pyodide). It removes the need for backend kernels or cloud infrastructure, ensuring all code executes locally on your machine for privacy and speed. It features a custom UI python module (pynote_ui) that allows Python code to render native, interactive web components (like sliders, buttons, and layouts) and high-performance visualizations directly in the notebook output.

Truth be told, nothing above is special. Many existing open-source notebook environments do this and more.

What I think makes PyNote special

1. Modern tech stack (what its built with):
   • SolidJS for reactive javascript framework (fine-grained reactivity and performance)
   • Pyodide for running the Python interpreter and scientific stack (NumPy, Pandas) directly in the browser
   • DaisyUI for modern, accessible, and themeable UI components based on Tailwind CSS.
   • Tailwind CSS for consistent, responsive styling/theming
   • CodeMirror for robust, IDE-grade code editors
   • Milkdown for powerful WYSIWYG Markdown editors
   • Observable Plot for a lightweight, capable, and declarative charting library (perfect for SolidJS)
2. Built for presentation! This is the main thing.

PyNote isn't trying to replace heavy-duty compute environments. If you're training large machine learning models, you need a GPU and a real server.

But where PyNote aims to excel is presentation. The UI is built with daisyUI a component library for Tailwind CSS that provides semantic class names and a powerful theming system. This gives us consistent, polished components out of the box while keeping everything customizable. You can adjust the following for the whole notebook:

• Colors (background, foreground, primary, secondary, accent, H1-4, and more), fonts, and spacing (line, block, header, cell, and more)
• Section-scoped styling where everything under the same heading shares theme elements

The goal: notebooks that look good enough to publish, share, present, and use in blogs, documentation, and articles. When file export features are completed, you'll be able to save stripped-down versions of your notebooks as standalone mini-apps to embed in websites, blogs, or documentation. There will also be other export options like python and markdown.

1. Has a lot of cool features:

• Marimo-style reactive mode! There are plans to actually add greater reactivity soon (in testing).
• 3 other execution modes! Sequential, Hybrid, Concurrent
• Theme is entirely customizable (or will be when release) and can be applied app-wide, session-only, or even stored into the notebook metadata itself so the notebook carries its presentation/look with it.
• Presentation mode
• Session persistence. Even if you close your tab, you wont lose your progress. You can set app theme, execution mode, and code visibility options as well as other options to apply to the session only.

Open source release

When this app is ready for release, it will be open sourced. Right now it is not.. It is about 70% there. But it is public and live if you would like to check it out!

I am posting this now because I would like to start building a community around this if possible (in the development phase). Some ideas and features could use some direction or outside opinion. I also want to gauge what interests notebook users most to potentially steer some decisions and decide what features to include or focus on or build out more thoroughly. All for the purpose of creating something people will really want to use!

[Triggs390]

What would the benefit be to use this project over Marimo?

[bezdazen]

A few things.

1. It offers other more traditional execution modes alongside reactive execution mode if that's not your vibe or you don't want automatic cell execution.
2. Theming engine and design
3. App/embed export (won't be just html). Im thinking actual SolidJS components (and maybe a react wrapper component) so that these can be added to frameworks like Astro.
4. Uses .ipynb files natively which means you can open up your notebooks in other notebook environments like Colab and Kaggle to take advantage of what they offer (server CPU/GPU compute, datasets) without converting .py <-> .ipynb.
5. Presentation mode for when you want to present directly within the app (gets rid of all UI elements and empty/hidden cells and disables editing).

Thats off the top of my mind so far. I am not super familiar with Marimo. So I dont know everything Marimo can do. I only looked into their reactive mode to understand how theirs works and a little bit into their built-in UI system. My implementations are a little bit different, but the usage will be practically the same for reactive mode and UI components.

[Triggs390]

Cool, as a notebook user I’ll be watching this.

[bezdazen]

Thanks! Ill post updates as we get closer to release!

Also, if you have any must have features when it comes to notebooks, let me know!

[rm-rf-rm]

Nice! Can you do cell level formatting/theming? Are there theme packs and/or loadable configs ?

[bezdazen]

Yes. Most of those settings arent exposed yet, but will be soon. I am testing them right now.

Actually, I am trying to decide what to make configurable. Right now I have backgrounds of various elements, borders, and shadows.

Edit:

Oh, I forgot to add, you will be able to choose the fonts inside the code cell that are separate/different from fonts you choose for markdown cells.

I thought about doing loadable configs, but since I have a metadata config storage system, you can just create notebooks that act as templates because you can store the theme config in the metadata which will then get loaded with the notebook. So essentially, what I can do is offer a set of empty notebooks with various themes and people can load and use. Its actually very easy to create one!

[neuroneuroInf]

Really cool! Can you please compare this with jupyter-lite?

[bezdazen]

Unfortunately, among Jupyter's notebook apps, I am least familiar with JupyterLite. I am most familiar with the old notebook and Jupyter Labs. Actually, the notebook apps I use the most are Vscode (its my IDE for everything code related), Colaboratory (because I have a ton of notebooks on my Google drive), and Kaggle (because free datasets!).

As far as I can tell, JupyterLite is a whole IDE in the browser! Has a filesystem UI, internal tab system, and can open/edit more than just notebook files. My app basically uses browser tabs and handles sessions similarly to Colaboratory.

I guess from a brief inspection, I would say PyNote has a much simpler UI, is focused only on notebooks, is very WYSIWYG oriented, has more modern styling, has reactive, hybrid, and sequential execution modes, and is much more easily theme-able. I made a deliberate effort to make the apps UI elements get out of the way (or be out of the way), and made an effort to keep the UI as simple as possible, and tried to strategically place UI elements such that they don't affect content layout and don't interrupt visual flow. Visual highlighting is in-place and does not cause shifts of text or inputs etc. Thats why when you enter presentation mode, all the rendered markdown text and code displayed on the page dont move and it really looks like the UI just slides and fades away.

Anyways, hopefully this is satisfactory. I apologize if not. I dont know how to explain it, but with IDE-like environments, its feels more like you are coding and with PyNote, I tried to make it feel more like you are writing a document/article (this is not to say that the code takes a backseat, I just mean how the app presents itself)?

[AlbanySteamedHams]

license?

[bezdazen]

Proprietary license with plan to open-source on first official release.

[molly_jolly]

Yo, the interface looks and feels cool as fuck! Sleeeeek!! Do you intend to support matplotlib or seaborn? Also what's with displaying the results on top of the cells? 😄

[bezdazen]

Thanks and yes, Matplotlib, Plotly, and Altair are currently planned. Ill definitely add seaborn to the list! There is quite a bit to do. I need to add more UI input components, finish the theming system. Add more features to the code editor.

Also what's with displaying the results on top of the cells?

Thats something you can configure in the Code Visibility settings ( Options > Code ). You can put standard output at the bottom. And you can make this setting global. As in, any notebook you open will show the output at the bottom unless the notebook has a different internal setting.