Why Add a Timer to Obsidian?

Obsidian is fantastic for organizing your thoughts, but let’s be honest — it’s a pretty static environment. Your notes sit there looking great, full of links and backlinks, but they don’t really do anything. You write stuff, you read stuff, and that’s about it.

A live timer changes that dynamic completely. Drop a timer into your daily note, your project page, or your canvas, and suddenly the workspace feels alive. You open the note, start the timer, and get to work — no alt-tabbing, no separate app, no excuses. The timer is right there, ticking away, keeping you honest. It turns a passive notes app into an active workspace.

CleanStopwatch works inside Obsidian as an iframe embed. No plugins needed, no signup, nothing to configure beyond pasting a URL into your note. If you can copy and paste, you can set this up in about thirty seconds.

What You’ll Need

Obsidian (any version — desktop or mobile)
A CleanStopwatch Embed URL (configure once, embed forever)

That’s literally it. No plugins to install, no settings to tweak, no permissions to grant. If you already have Obsidian installed, you’re about thirty seconds away from having a live timer in your notes.

Method 1: Embed in Any Note (No Plugins)

Obsidian supports inline iframes right out of the box using standard Markdown embed syntax. Here’s what the code looks like:

<iframe src="https://cleanstopwatch.com/embed?mode=pomodoro&color=3b82f6" width="400" height="250"></iframe>

Here’s how to get it into your note:

Open any note in Obsidian.
Paste the iframe code above into the note.
Switch to Reading View to see the live timer.

That’s the whole process. The timer is fully interactive — start, pause, reset — right there inside your note. No page reloads, no weird iframe issues.

Customize First

Before you embed, open the Configurator to pick your mode, colors, and size. The free tier gives you 5 preset themes, 2 sounds, and up to 120 minutes max duration. Pro unlocks custom accent colors (full hex picker), 13 themes, and 16 sounds. The Configurator spits out a URL with all your settings baked in, so you can grab the final embed code and paste it into Obsidian without touching any HTML directly.

One thing to keep in mind: the free tier shows ads. If those bother you, Pro removes them and adds the customization options. But for testing out whether this workflow works for you, the free tier is plenty.

Reading View vs Live Preview

Here’s the one gotcha: Obsidian’s Reading View shows iframes as live embeds. Live Preview shows the raw HTML code instead. That’s normal — it’s not broken, it’s just Obsidian’s editing mode. Just flip to Reading View to use the timer. If you’re a Live Preview person, this means you’ll need to toggle views when you want to start the timer. A small friction, but worth knowing about upfront.

Tips for the Embed

You can tweak the width and height attributes in the iframe code to get the size right. The timer auto-scales its font to fit the container, so it stays readable even at smaller sizes. About 300x200px is a good starting point — big enough to read easily, small enough to not dominate your note.

Method 2: Add to Obsidian Canvas

Obsidian Canvas is the visual playground for brainstorming, planning, and dashboards. It’s perfect for putting a timer front and center alongside your other notes. Here’s how:

Create a new Canvas.
Drag a Web Page card from the card menu (or Cmd/Ctrl + click on an empty spot and pick Paste URL).
Paste your CleanStopwatch Embed URL into the URL field.
Resize the card to fit your layout.

The timer card stays live on the canvas. You can move it around, resize it, and position it wherever it makes sense. Use it in a study dashboard, a project board, or a focus workspace. Because Canvas is visual, you can arrange things exactly how you want them — timer in the corner, main notes in the center, task list off to the side.

One advantage of using Canvas over a regular note: the timer doesn’t interfere with your typing. In a regular note, clicking the iframe moves focus away from the text. On a Canvas, the timer card is isolated, so you can click it, start it, and then click another card to keep working without anything weird happening.

Method 3: Using the Iframe Plugin (Optional)

If you want something cleaner than raw HTML, the community plugin Obsidian Iframe lets you embed iframes with a simple codeblock syntax:

```iframe
url: https://cleanstopwatch.com/embed?mode=countdown&duration=600&color=a855f7


This keeps your source tidy and avoids raw HTML cluttering up your notes. If you have a lot of embeds or you just prefer clean markdown, this is the way to go.

Other plugins that work well:

- **Custom Frame** — opens embeds in a dedicated sidebar pane. Handy for keeping the timer visible while you browse other notes. The sidebar stays open even as you navigate between notes, so the timer keeps running.
- **Advanced Embed** — gives you more control over how embeds look and behave. Useful if you want to tweak the styling.

That said, you don't need any of these. The basic iframe approach in Method 1 works perfectly fine. The plugins are nice-to-haves, not requirements.

## Use Cases for Obsidian

### Daily Journal

Drop a countdown at the top of your daily note. Set it to 25 minutes for a morning writing sprint. When the timer goes off, you stop — no overthinking, no rewriting the same paragraph five times. The constraint actually helps you write more, not less. There's something about a ticking clock that cuts through perfectionism.

### Project Page

Embed a stopwatch on your active project page. Before you start working, hit start. The timer keeps you honest about how much time you're actually spending. It's easy to feel like you spent all day on something when really you only put in an hour of focused work. The stopwatch doesn't lie.

### Study Dashboard

Build a canvas with a Pomodoro timer card, your class notes linked as cards, and a task list. Open this canvas when you're ready to study. You've got everything: a timer to structure your session, your notes to study from, and a list of what to tackle next. All in one place, no window switching.

The Pomodoro timer is especially nice here because it runs in the background of your canvas. You focus on your notes, and the timer quietly handles the work/break cycle. When the break notification pops up, you stand up, stretch, and get back to it.

### Meeting Notes Template

Add an iframe embed to your meeting notes template. Set it to a countdown matching your usual meeting length (say, 30 minutes). When people see the timer ticking on the projected screen, it subtly nudges everyone to stay on track. I've seen this cut meeting times by a solid 20%.

| Template Section | Content |
|-----------------|---------|
| Header | Timer embed (countdown, 30 min) |
| Agenda | Bullet list of topics |
| Notes | Blank space for live notes |
| Action Items | Checkboxes for follow-up |

### Weekly Review

Embed a countdown in your weekly review note. Set it to 60 minutes. Go through your week, process your inbox, update your projects. When the timer goes off, you're done. Weekly reviews have a tendency to expand to fill whatever time you give them. A hard boundary keeps them efficient.

## Tips for Obsidian

**Use keyboard shortcuts.** In Reading View, the timer responds to Space (start/pause) and R (reset). Once the embed is focused, these work without clicking the timer directly. For stopwatch mode, L records a lap. Learn these and you'll barely notice the interaction.

**Keep the embed small.** 300x200px is plenty to see the time clearly without taking over your note. The timer auto-scales its font to fit the container, so it stays readable. If you need it bigger, bump it up — but you'll be surprised how small it can go before it's hard to read.

**Lock your note.** If the timer keeps losing focus when you type nearby, open the note in a new pane or use a canvas card to isolate the embed. On Canvas, this problem doesn't exist at all, which is one of the reasons I recommend it for active timer use.

**Match your theme.** CleanStopwatch has dark and light modes that play nice with Obsidian's default themes. Use the [Configurator](/configurator) to pick colors that blend with your vault. If you use a custom Obsidian theme, you can match the accent color exactly (Pro feature) for a seamless look.

**Create templates.** If you find yourself embedding the timer in the same kinds of notes over and over, create an Obsidian template with the iframe already in it. Then every new daily note or project page starts with a timer ready to go.

## Troubleshooting

**Embed shows a blank space in Reading View.** Make sure the URL starts with `https://cleanstopwatch.com/embed?`. That endpoint serves the interactive timer widget. If you accidentally use the main timer URL, it won't work as an embed.

**Timer doesn't respond to clicks.** Check that you're in **Reading View**, not Live Preview. Click the embed once to focus it — you might see a subtle border appear — then hit Space to start. If it still doesn't work, try clicking directly on the timer's start button.

**Embed is too large for the pane.** Shrink the `width` and `height` attributes in the iframe code. The timer stays usable down to about 200x100px, though I wouldn't go smaller than that.

**Canvas card shows "Web Page" instead of the timer.** Canvas cards load external pages in a frame. This can fail if Obsidian's security settings block external embeds. Try adding `https://cleanstopwatch.com` to Obsidian's allowed sites list in the settings.

**Works on desktop but not mobile.** Obsidian mobile has limited iframe support. It depends on your device and browser engine. Test it on mobile in Reading View — some devices restrict embedded content by default, and there's not much you can do about that beyond using a different device.

**The timer resets when I switch notes.** That's expected. The iframe reloads when it loses the page context. It's not a bug — it's just how Obsidian handles embeds. Start the timer when you're ready to work, not before.

## Comparison

| Feature | CleanStopwatch in Obsidian | Other Obsidian Timer Plugins |
|---------|---------------------------|------------------------------|
| Plugin required | No (native iframe or optional plugin) | Yes |
| Custom colors | Full hex picker (Pro) or 5 free themes | Varies |
| Modes | Stopwatch, Countdown, Pomodoro | Usually Pomodoro only |
| Canvas support | Yes (Web Page card) | Rarely supported |
| Keyboard shortcuts | Space, R, F, L | Depends on plugin |
| Desktop notifications | Yes | Sometimes |
| Sync across devices | Timer is per-session | Depends on plugin |
| Setup time | ~30 seconds | 5-15 minutes |
| Ads on free tier | Yes | Usually not |

The main takeaway: CleanStopwatch is faster to set up than any Obsidian timer plugin. You don't need to browse the community plugin list, install something, configure it, and learn its quirks. You paste one line of HTML and you're done. If an Obsidian plugin gives you more features and you want those, great — but if you just need a timer in a note, this is the shortest path.

## Quick Start

1. Open [CleanStopwatch Configurator](/configurator)
2. Select your mode and colors
3. Copy the iframe code
4. Paste into any Obsidian note (Reading View)
5. Start the timer and begin working

Start embedding: [cleanstopwatch.com/configurator](/configurator)