Documentation

Everything you need to know about using Skrybbl — the free, open-source maths notebook for students.

Overview

Skrybbl is a desktop notebook application built for maths, physics, and engineering students. It provides WYSIWYG equation editing, live computation, graph plotting, symbolic algebra, and diagram support — all in a distraction-free interface with no internet requirement.

Documents are saved as .skrybbl files (JSON format) and can be exported to LaTeX, Markdown, HTML, or PDF at any time.

Installation

Download the latest Skrybbl-Setup.exe from the releases page. Run the installer — no sign-in or account is required. The app works entirely offline.

Requirements: Windows 10 or later. Approximately 85 MB of disc space.

Notebooks & Pages

Each notebook contains one or more pages. Use the sidebar to navigate between pages, add new ones, rename, reorder (drag and drop), or delete them.

The notebook title and page titles are both editable. Changes are auto-saved after 2 seconds of inactivity whenever the notebook has a file path.

Text Formatting

The editor supports standard rich-text formatting through keyboard shortcuts and the toolbar:

Block-level elements include three heading levels, bullet lists, ordered lists, blockquotes, code blocks, and horizontal rules.

Slash Commands

Type / anywhere in the editor to open the slash menu. Start typing to filter. Available commands:

• Heading 1 / 2 / 3 — Insert headings
• Bullet List — Unordered list
• Ordered List — Numbered list
• Quote — Blockquote
• Code Block — Syntax-highlighted code
• Divider — Horizontal rule
• Inline Math — Inline equation
• Block Math — Display equation
• Compute — Live computation field
• Image — Insert image from file picker
• Graph — Function graph plot

Context Menu

Right-click in the editor for a context menu with formatting, insertion, link, and clipboard actions. The available options adapt to your current selection.

Links

Select text and press Ctrl L to insert a hyperlink. A bubble popup appears where you can type or paste a URL. Click "Apply" or press Enter to confirm. To remove a link, click "Remove" in the bubble, or use the context menu.

Inline Maths

Insert inline equations that flow within your text. There are three ways to create them:

• Press Ctrl Shift E
• Type / and select "Inline Math"
• Type $...$ — wrapping any text in dollar signs automatically converts it to an inline equation

Inline maths are rendered with MathLive, providing a WYSIWYG LaTeX editing experience. Click on any equation to edit its LaTeX source.

Block Equations

Display equations are centred, full-width blocks. Create them by:

• Press Ctrl Shift M
• Type / and select "Block Math"
• Type $$ at the start of a line

Block equations support optional numbering and labels. When numbered, they can be cross-referenced elsewhere in the document using equation references.

Equation References

Reference a numbered equation by its label. When the document is exported, these references resolve to the correct equation number, just like \ref{} in LaTeX.

Live Computation

Compute fields evaluate mathematical expressions in real time using math.js. Create one by:

• Press Ctrl Shift =
• Type = (equals followed by a space) at the start of a line
• Type / and select "Compute"

Type any expression and the result appears instantly. Supported: arithmetic, trigonometric functions, logarithms, square roots, matrix operations (e.g. det([1,2;3,4])), unit conversions, and more.

Symbolic Algebra

Symbolic blocks let you perform algebraic operations on expressions using Nerdamer. Available operations:

• Simplify — Reduce an expression to simplest form
• Expand — Expand products and powers
• Factor — Factorise an expression
• Solve — Solve for a variable
• Differentiate — Symbolic differentiation
• Integrate — Symbolic integration

Each operation takes an expression and an optional variable (defaults to x).

Graph Plotting

Plot mathematical functions inline in your notebook. Insert a graph via the slash menu (/graph). Each graph supports:

• Multiple functions with solid or dashed line styles
• Configurable x and y domain ranges
• Optional grid lines
• Optional title
• Adjustable width and height

Graphs are rendered using function-plot (built on d3.js) and are included as SVGs in HTML exports.

Diagrams

Create diagrams using Mermaid syntax. Type your diagram code and it renders as an SVG preview. Supports flowcharts, sequence diagrams, state diagrams, Gantt charts, and more.

Handwriting Recognition

Draw maths equations by hand and convert them to LaTeX using MyScript iink. This feature requires a free API key from developer.myscript.com (2,000 free recognitions per month).

Configure your keys in Settings (gear icon in the toolbar). Once connected, use the handwriting overlay to draw and insert equations.

Code Blocks

Insert syntax-highlighted code blocks via the slash menu or toolbar. Supports all common languages through highlight.js (lowlight). Tab inserts two spaces, Shift Tab removes leading indentation.

Images

Insert images three ways:

• Slash menu: /image opens a file picker
• Paste an image from the clipboard
• Drag and drop an image file into the editor

Images are stored as base64 within the notebook file. You can resize images by adjusting the width attribute.

Find & Replace

Press Ctrl F to open the find bar. Type to search — all matches are highlighted in the document with the active match emphasised.

• Enter — Next match
• Shift Enter — Previous match
• Click the expand arrow to reveal replace controls
• Replace — Replace current match
• All — Replace all matches at once

Command Palette

Press Ctrl K to open the command palette. Search through all available commands by name, category, or keyword. Navigate with arrow keys, execute with Enter, close with Escape.

Commands are organised into categories: File, Edit, Insert, View, Export, and Theme.

Focus Mode

Press Ctrl Shift F to toggle focus mode. This hides the sidebar and provides a distraction-free writing environment.

Tabs

Open multiple notebooks simultaneously using tabs. Each tab maintains its own notebook, file path, and dirty state independently. If you open a file that is already open in another tab, Skrybbl switches to that tab instead of creating a duplicate.

Tabs can be reordered by dragging. Close a tab by clicking its close button — if it is the last tab, a fresh empty notebook replaces it.

Version History

Skrybbl automatically creates snapshots on every auto-save. You can also create snapshots manually. Open the version history panel to browse, select, and restore any previous snapshot. Up to 50 snapshots are retained per notebook.

Themes

Six built-in themes with no accent colours — just clean typography against carefully chosen backgrounds:

• Dark — Deep black (#0a0a0a)
• Light — Near white (#fafafa)
• Midnight — Blue-tinted dark (#0b0d14)
• Paper — Warm sepia (#f5f0e8)
• Nord — Polar night (#2e3440)
• Green — Terminal green (#080c08)

Cycle through themes using the toolbar button or the command palette. Your choice persists across sessions via local storage.

Editor Fonts

Three editor font options: Mono (default), Sans, and Serif. Click the font button in the toolbar to cycle, or set it from the command palette. Your preference is saved.

Spellcheck

Browser-native spellchecking is enabled by default. Toggle it via the command palette or settings. The setting persists across sessions.

Export to LaTeX

File → Export as LaTeX generates a complete .tex document with:

• Proper \documentclass, amsmath, and amssymb packages
• Pages as \section*{} blocks
• Inline maths as $...$, block equations as \[...\] or numbered equation environments
• Compute fields as expression = result text
• Lists, blockquotes, code blocks, and formatting marks correctly converted

Export to Markdown

Exports a .md file with standard Markdown syntax. Maths are represented using dollar-sign delimiters ($...$ and $$...$$), compatible with most Markdown renderers that support LaTeX (GitHub, Obsidian, Notion, etc.).

Export to HTML

Generates a self-contained HTML file with embedded KaTeX for maths rendering and highlight.js for code syntax highlighting. Supports light/dark mode via prefers-color-scheme. Graph plots are included as inline SVGs.

Export to PDF

Exports via the HTML pipeline, then uses Electron's built-in print-to-PDF. The result is a nicely formatted document with rendered equations and graphs.

All Keyboard Shortcuts

File

Formatting

Maths & Insertion

View & Navigation

File Format

.skrybbl files are JSON documents with the following structure:

• version — Schema version (currently 1)
• title — Notebook title
• pages — Array of page objects, each containing an id, title, content (TipTap JSON), and timestamps
• activePageId — Currently selected page
• snapshots — Optional array of version history snapshots (up to 50)
• createdAt / updatedAt — ISO timestamps

The content field uses the TipTap (ProseMirror) JSON format, making it straightforward to parse or transform programmatically.