Focus Embed

Focus Embed is a free, zero-dependency count-up and Pomodoro timer for Obsidian, Excalidraw, iframe-compatible Markdown readers, local use, and self-hosting.

Open the timer | Open the compact embed

What it does

• Counts up from 00:00 for open-ended focus sessions.
• Runs configurable Pomodoro focus, short-break, and long-break cycles.
• Offers minimal, notebook-inspired doodle, and precision-oriented professional themes.
• Offers blue, green, amber, rose, and Excalidraw purple colorways.
• Saves preferences in the browser without an account.
• Converts settings into a shareable URL and iframe snippet.
• Works from static files without runtime dependencies or a build step.

Focus Embed does not turn Markdown into an executable format. Obsidian and other compatible readers display the timer webpage inside an HTML iframe. A reader that blocks iframes can still link to the standalone timer.

One-click Excalidraw integration

The repository includes a zero-dependency Excalidraw Automate script that inserts the hosted timer into the active canvas with one Command Palette action. It arrives as a 560×650 interactive embed centered at the last pointer position, already configured for count-up mode with the Doodle theme and Excalidraw purple appearance.

See the installation and community-contribution instructions to install it manually or prepare it for the official Excalidraw script library.

How the files fit together

Both HTML entry points load the same files from assets/:

• assets/styles.css contains the layout, responsive rules, dark mode, themes, and colorways.
• assets/config.js validates settings, URL parameters, and local preferences.
• assets/timer.js contains the timestamp-based count-up and Pomodoro engine.
• assets/app.js connects the engine to the controls, keyboard shortcuts, sound, and embed builder.

index.html adds the public landing content. embed.html uses the same timer as a compact iframe view. All three themes use native CSS and locally available system font fallbacks, so they add no runtime dependency or font download.

Embed the hosted timer

Paste this HTML directly into an Obsidian note:

<iframe
  title="Focus Embed timer"
  src="https://ker102.github.io/focus-embed-timer/embed.html?mode=pomodoro&amp;theme=minimal&amp;accent=blue"
  width="100%"
  height="520"
  style="border:0;border-radius:16px"
  loading="lazy">
</iframe>

Open the note in Reading view to use the interactive timer. Obsidian documents webpage embedding with the HTML iframe element in its HTML content guide.

For Excalidraw, create a web embed and use the same embed.html URL. The Excalidraw for Obsidian project documents its embedding support.

Self-host locally

Clone or download this repository. You can open embed.html directly in a browser, or start a local static server from the repository folder:

python -m http.server 4173 --bind 127.0.0.1

Then open:

http://127.0.0.1:4173/

The compact local embed URL is:

http://127.0.0.1:4173/embed.html

The local server must be running when another application loads that URL. Direct file access needs no server, but some applications block file:// iframe sources for security.

Host your own public copy

Fork the repository, enable GitHub Pages with GitHub Actions, and the included workflow will publish the static files. Any static host can serve the same repository without modification.

No environment variables, package installation, server runtime, or database are required.

URL parameters

The embed page accepts these parameters:

Parameter	Values	Default
mode	countup, pomodoro	countup
theme	minimal, doodle, professional	minimal
accent	blue, green, amber, rose, purple	blue
focus	1-180 minutes	25
shortBreak	1-60 minutes	5
longBreak	1-120 minutes	15
cycles	1-12 focus sessions	4
autoBreaks	1 or 0	0
autoFocus	1 or 0	0
sound	1 or 0	1

Example:

https://ker102.github.io/focus-embed-timer/embed.html?mode=pomodoro&theme=doodle&accent=green&focus=45&shortBreak=10&longBreak=30&cycles=3&sound=0

Unknown options are ignored. Numeric values are clamped to documented limits.

Keyboard controls

Key	Action
Space	Start, pause, or resume
R	Reset the current mode
1	Select count up
2	Select Pomodoro

Keyboard shortcuts are disabled while a form control, link, button, or settings summary has focus.

Privacy and data

Focus Embed includes no analytics, advertising, user accounts, or tracking cookies. Timer settings are stored in browser localStorage. The app makes no application-level network request after its static files load.

Your chosen hosting provider may retain ordinary server access logs according to its own policy.

Accessibility

• Semantic buttons, labels, output, progress, and live status regions.
• Visible keyboard focus and keyboard shortcuts.
• Curated accent colors with readable button contrast.
• Responsive layouts for narrow iframe sizes.
• System light and dark color preferences.
• Reduced-motion support.
• Timestamp-based timing that remains accurate after background-tab throttling.

Development

The browser runtime has no dependencies. Tests use the test runner included with Node.

npm test

Run a coverage report:

npm run test:coverage

Project structure

index.html          Landing page and full timer
embed.html          Compact iframe entry point
assets/timer.js     Timestamp-based timer engine
assets/config.js    URL and local settings
assets/app.js       Browser controller
assets/styles.css   Themes and responsive layout
tests/              Dependency-free test suite

Limitations

• Interactive embeds require a Markdown reader that permits HTML iframes.
• A local localhost embed only works while its local server is running.
• Browser privacy settings can prevent preference storage or clipboard access. The timer itself still works.
• Completion sound depends on browser audio permissions.

Contributing and security

Contributions are welcome. Read CONTRIBUTING.md before opening a pull request. Report security problems through the process in SECURITY.md.

Author and license

Focus Embed is created and maintained by Ker102. It is released under the MIT License.

Last updated: August 2, 2026.