Pomodoro Widget

A simple, customisable digital clock-style Pomodoro timer designed for Notion embeds, the web and macOS.

Features

• Customisable focus and break durations
• Vintage 60s-inspired colour palette
• Sound effects for session transitions and controls
• Keyboard shortcuts for quick control
• Responsive and embeddable
• Saves preferences using localStorage

Getting Started

Installation

git clone https://github.com/markslorach/pomodoro.git
cd pomodoro
pnpm install

Development (Web)

To start the web app in development mode -

pnpm dev

To build the web app for production -

pnpm build

To preview the production build locally -

pnpm preview

Development (macOS)

Developing and building the timer as a native macOS application requires Tauri. This wraps the app in a lightweight desktop shell.

Prerequisites

• Rust
• Xcode Command Line Tools

Development

To run the macOS app in development mode -

pnpm tauri dev

Build

To create a production build of the macOS app -

pnpm tauri build

This will generate a .app bundle in the src-tauri/target/release/bundle/macos/ directory.

After building, a window will open allowing you to install the app directly into your Applications folder.

Embedding in Notion

You can embed the timer directly into your Notion pages using the following URL -

Embed URL: https://pomodoro.markslorach.com/

1. In Notion, type "/embed" and select the "Embed" block.
2. Paste the URL above into the embed block.
3. Resize the embed block as needed for the best fit.

Keyboard Shortcuts

Shortcut	Action
Space	Start/Pause timer
R	Reset timer
F	Switch to focus mode
B	Switch to break mode
S	Toggle settings panel
C	Toggle colour palette
Esc	Close settings/colour palette

Tech Stack

• React 19
• TypeScript
• Tailwind CSS
• shadcn/ui
• Vite
• Tauri

Acknowledgements

• @joshwcomeau/use-sound
• @bradgarropy/use-countdown
• @juliencrn/usehooks-ts