Pomodoro Timer

Boost productivity with the Pomodoro Technique. Work in focused 25-minute intervals with strategic breaks.

A configurable Pomodoro timer — 25-minute focus blocks with 5-minute breaks by default, and a longer break every fourth round. It counts your completed sessions for the current sitting, and audio chimes signal each transition so you know to switch even if you've looked away. Useful for deep-work sessions, study blocks, and breaking through afternoon energy slumps. Times and counts stay in your browser, not on a usage-tracking server.

Work

Session 1 of 4

Settings

25

Work

5

Short Break

15

Long Break

Session Progress

You are on session 1of 4. After completing 4 work sessions, you'll get a long break.

Runs right inside your browser tab. No uploads. Your files stay private.

What is the Pomodoro Technique?

The Pomodoro Technique, named after the tomato-shaped kitchen timer Francesco Cirillo used as a university student in the late 1980s, breaks work into 25-minute focused intervals separated by 5-minute short breaks. After four cycles, you take a longer 15-30 minute break. The fixed cadence reduces decision fatigue and creates artificial deadlines that combat the Zeigarnik effect — the tendency to ruminate on incomplete tasks.
This timer uses setInterval ticking every 250 ms inside a useEffect hook. Rather than decrementing a counter on each tick, it records a target end time via performance.now() when the timer starts or resumes. Each tick computes remaining = Math.round((endTime − performance.now()) / 1000) and updates the display. Because the display derives from wall-clock difference rather than tick count, background-tab throttling cannot cause drift.
Browsers throttle setInterval and setTimeout in inactive (background) tabs — Chrome reduces them to at most once per second and Firefox/Safari can throttle further. Because this timer computes remaining time from performance.now() on every tick rather than decrementing a counter, a 25-minute Pomodoro completes in real wall-clock time even when the tab is backgrounded or the machine sleeps briefly.
When a session ends, the timer plays a notification chime via the Web Audio API (AudioContext + an oscillator node). The AudioContext is created on demand and closed after the beep to avoid accumulating open audio contexts.
Audio playback policies in Chrome and Safari require a user interaction before any sound can play. The first Pomodoro you start counts as that interaction, so subsequent sessions can play the bell automatically. Some macOS browsers also require the system sound to be unmuted, which is independent of the page's mute state.
Customization is stored in component state for the session — work, short-break, and long-break durations are sliders/inputs that adjust the seconds-per-phase. There's no persistence to localStorage in this build, so closing the tab resets everything to defaults.
Pomodoro is most effective when you treat the 25-minute interval as inviolable: silence Slack, close email, and resist the urge to switch tasks mid-Pomodoro. If interrupted, restart the Pomodoro from zero rather than crediting a partial session — the technique's original protocol explicitly recommends this.

Common Use Cases

01

Deep work sessions

Focus on a single task for 25 minutes, batch shallow tasks (email, Slack) into the breaks.

02

Study sessions

Time-box reading, problem sets, or memorization. Spaced repetition + breaks improves retention versus marathon sessions.

03

Writing and creative work

Use the timer to overcome blank-page paralysis — commit to writing for one Pomodoro, then judge whether to continue.

04

Coding sprints

Pair the timer with a focused coding goal so you don't drift into Twitter/Reddit between bug fixes.

Frequently Asked Questions

Cirillo found 25 minutes long enough to make real progress on a task but short enough to defer interruptions to the break. There's no neurological magic to the number — research on attention spans suggests anywhere from 20 to 50 minutes works, so feel free to adjust the duration to your task type.
Step away from the screen. Stand up, stretch, drink water, look at something more than 20 feet away to rest your eyes. Avoid context-switching to a different cognitively demanding task — that defeats the purpose of the recovery interval.
Yes. The Settings panel exposes work duration, short-break duration, and long-break duration. Common variants include 50/10 (Ultradian rhythm) and 90/20 (deep work). Pick what fits your task; the bell rings whenever the chosen duration elapses.
The timer automatically transitions to a long break (default 15 minutes). The counter resets after the long break and the cycle starts over. This matches Cirillo's original protocol, which uses the long break as a hard cognitive reset.
Yes. The timer records a target end time using performance.now() when it starts or resumes. Each tick computes remaining time from the difference between that target and the current clock, so browser throttling of background tabs cannot cause drift. You will hear the beep the next time you interact with the page after the session ends, even if the tab was backgrounded when it finished.
Browser autoplay policies (Chrome, Safari) require a user interaction before audio can play on a page. The first Start click satisfies that gesture; from then on the bell plays automatically at session end.
Not in this build. Settings live in React component state for the lifetime of the tab. Closing or refreshing the tab resets to defaults. Save your preferred durations in your password manager or notes if you change them often.
The original protocol says: discard the in-progress Pomodoro, return to it later, and restart from zero. Counting partial sessions weakens the technique because the 25-minute window is what creates the focus pressure. The Reset button in the UI handles this.
No. Everything — the timer, settings, session count — runs in your browser memory only. There's no analytics on session start/end and no cloud sync.
Maintained by the WebToolVerse teamLast updated Suggest an edit

Advertisement