Note

Update 2026-07-14: Lots of new additions to multiple UI areas:

• Files and Data - manage the in-browser filesystem from a side panel or dialog: upload, create folders, rename, drag-and-drop to organize, and read it all from Python (press Ctrl-. in the app)
• Advanced theme configuration - new theme dialog sections for cell borders and shadows, UI borders and typography, and per-token syntax colors, with themes savable into the notebook file itself
• Mobile support - responsive layout with a bottom cell-action drawer and click-to-move cell reordering for editing on the phone
• Markdown toolbar upgrades - formatting buttons show their active state, list buttons toggle and convert between bullet/numbered lists, and cursor position now survives toolbar actions and table insert/delete
• Coding interview prep - a new interactive built-in notebook series
• Under the hood - Pyodide upgraded from 0.26 to 0.29, large files split up and the codebase reorganized, and unit + end-to-end (Playwright) test suites added

Check out the new interactive interview coding preparation series!

Note

Update 2026-02-19: Major UI component enhancements! 🎨

• New .options() method for all 10 components - cleaner post-initialization property updates with method chaining support
• Layout control for Toggle & Checkbox - align (left/center/right), spaced (space-between), reverse (order reversal)
• Background property for all components - supports boolean, theme presets ("primary", "secondary"), custom colors ("#ff0000"), and full CSS ("linear-gradient(...)")
• Full reactivity for all component properties - automatic updates when prop values change
• Select component - parameter renamed from options= to choices= for better API clarity

All changes are backward compatible.

Note

Update 2026-02-09: Added a suite of new UI components for the pynote_ui module:

• New components: form, toggle, input, textarea, and more
• Full integration with PyNote's theming system
• Extra features: size presets, theme-based color options, border styles, show/hide functionality
• Form component includes flexible layout options (like Group component) for arranging child components in rows or columns with customizable spacing
• Form submission handling support

Check out the updated tutorial sections: Interactive UI Part 1 and Interactive UI Part 2!

Note

Update 2026-02-05: Added a suite of editing bells and whistles to the code editor including:

• Autocomplete suggestions with type info
• Function signature help while typing
• Multi-cursor support and multi-selection editing
  • Bracket matching and auto-closing
  • Match selection highlighting
  • Multi-match selection
• Find and replace
• Duplicate line/selection
• Line operations (move up/down, delete line)
• Tooltips for hover info about modules, functions, classes, and variables

PyNote Notebook Editor

Important

Copyright © 2026 Anas Bouzid. All Rights Reserved. This project is currently in development. Open-source release is planned for the future.

Live Tutorial | GitHub

Tip

In PyNote, press Ctrl-\ to see shortcuts!

What is PyNote?

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.

Highlights

• Zero setup: go to pynote-notebook.vercel.app and start writing Python right away. No login, no account, no install.
• Serverless: Python runs in your browser via WebAssembly. There is no remote kernel to connect to and no backend to stand up (or pay for).
• Private: your code and data never leave your machine.
• Sandboxed: WebAssembly gives Python execution a natural security boundary. Code runs inside the browser sandbox in a separate worker thread, with no access to your filesystem and no way to touch the page directly, which makes opening untrusted notebooks a lot less scary.
• Interactive: build sliders, toggles, forms, and layouts straight from Python with pynote_ui. No frontend code, and components are live objects: set a property from Python and the UI updates in place, no cell re-run.
• Reactive: a marimo-style reactive mode tracks which cells depend on which variables and re-runs dependent cells automatically. Three more execution modes (Sequential, Hybrid, Concurrent) when you want manual control.
• Themeable: colors, fonts, spacing, borders, shadows, all of it. Your theme can be saved into the notebook file itself so it carries the look wherever it goes.
• Built for presentation: presentation mode, per-cell code visibility, and section-scoped styling where everything under a heading shares theme elements.
• Charts: a declarative plotting API built on Observable Plot. Charts follow the notebook theme automatically.
• A real code editor: autocomplete with type info, signature help, hover tooltips, multi-cursor editing, find and replace, line operations, and more.
• WYSIWYG markdown editor: edit markdown cells rich-text style (Milkdown) with a formatting toolbar, tables, captions, and cell splitting at the cursor.
• Files built in: a Files and Data panel for the in-browser filesystem. Upload, organize, and read files from Python.
• Nothing lost: sessions persist across tab closes and refreshes, and undo/redo covers structural changes as well like adding, moving, and deleting cells.
• Works on your phone: responsive layout with a mobile cell-action drawer for editing on small screens.
• Learn by doing: interactive tutorials built as notebooks, right in the app. Press Ctrl-\ for keyboard shortcuts.

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.

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

Setup and Usage

To run the project locally:

1. Clone the repository: `git clone
2. Navigate to the project directory: cd pynote-notebook-editor
3. Install dependencies: npm install
4. Start the development server: npm run dev
5. Open your browser and go to http://localhost:5173 to see the app in action!

Open source release

When this app is ready for release, it will be open sourced. But repo is public and PyNote is live if you would like to check it out!