Skip to main content
FocusFlow Logo FocusFlow

How to Use FocusFlow

Get started in seconds with plug-and-play, powerful customizations.

Coming in v2.10.0

Coming soon

The next release adds three new ways to keep your reading on track: a Reading List for saving pages, To-Do lists for quick tasks (Pro), and an Account that syncs your settings across devices.

Reading List

Save any page to your Reading List and come back to it later — like bookmarks, but built for reading. Free for everyone, no account needed.

How to Save a Page

Option A — From Reader Mode

  1. Open Reader Mode on the page you want to save.
  2. Click the Reading List button (📌) in the Reader Mode top bar.
  3. The button confirms with "Saved ✓" and the page is added to your list.

Option B — From the Sidebar

  1. Open the popup → click Advanced Settings.
  2. Switch to the Lists tab.
  3. Click Save current page.

Option C — Right-Click Menu

  1. Right-click anywhere on the page.
  2. Go to FocusFlow → Save to Reading List.

Manage Your List

  1. Open the popup → click Advanced Settings → Lists tab.
  2. Click a saved page to reopen it, or tick the check to mark it as read.
  3. Use Clear all to remove every saved page at once.

To-Do Lists PRO

Keep quick tasks handy while you read. The To-Do widget sits right at the top of the sidebar, always visible — and your tasks sync with the FocusFlow web app.

How to Use

  1. Open the popup → click Advanced Settings.
  2. Find the To-Do card at the top of the sidebar — above the tabs.
  3. Type a task in the input box and click Add.
  4. Tick a task to mark it completed, or use Clear completed to tidy up.
  5. Sign in to your account and your tasks stay in sync with the FocusFlow web app.

Account & Sync

Create a free FocusFlow account with email or Google, then use Sync Settings (Pro) to back up your settings and profiles and restore them on any device.

How to Sign In

  1. Open the popup → click Advanced Settings.
  2. Switch to the More tab (fourth tab, three-dots icon).
  3. In the Account card, sign in with email and password or Sign in with Google. Need an account first? Click Create account.
  4. Once signed in, toggle Sync Settings (Pro) and click Sync now to back up your settings and profiles.

Tip: Signing in is free for everyone — only the Sync Settings toggle itself requires a Pro license.

Getting Started

1

Install the Extension

Navigate to the Chrome Web Store, Firefox Add-ons, or Edge Add-ons and click the 'Add' button. Confirm the installation in your browser prompt.

2

Pin FocusFlow

Click the puzzle piece icon in your toolbar, find FocusFlow, and click the pin icon so it's always accessible.

3

Use the Quick Tools Popup

Click the FocusFlow icon to open the popup. Toggle the reading ruler, focus line, color overlay, and Bionic Reading with a single tap. Press ⌥⇧D (Option+Shift+D) any time to open the popup on the current page.

4

Open the Advanced Sidebar

Tap the Advanced Settings button at the bottom of the popup to open the sidebar. You'll find four tabs — Typography, Visual Aids, Reading, and More — with profiles, site settings, font size limits, keyboard shortcuts, and a live preview of every change.

Typography

Control the font, size, and spacing of text across every website. These settings live in the Popup and the Sidebar → Typography tab.

Font Family

Choose from six accessible fonts optimised for readability: OpenDyslexic (weighted bottoms to anchor letters), Lexend (variable font for reading proficiency), Atkinson Hyperlegible (maximises character distinction), Inter (clean, modern sans-serif), Open Sans (humanist sans-serif built for screen legibility), and Roboto (neutral, highly legible sans-serif). All fonts are free.

How to Use

Option A — From the Popup

  1. Click the FocusFlow icon in your browser toolbar to open the popup.
  2. Find the Font section with six pill-shaped chips: OpenDyslexic, Lexend, Atkinson, Inter, Open Sans, Roboto.
  3. Click the chip for the font you want — the active chip highlights in purple.
  4. The font applies to the current page instantly.

Option B — From the Sidebar

  1. Open the popup → click Advanced Settings at the bottom.
  2. In the sidebar, you'll land on the Typography tab (first tab).
  3. Under the Font section, click one of the six font chips.
  4. Below the font chips, use the Apply To pills to choose whether the font applies to Text Only or the Entire Page.

Font Size

Scale text up or down across the page. The range is 80% to 220%, and FocusFlow uses browser zoom under the hood so the page layout stays intact.

How to Use

Option A — From the Popup

  1. Click the FocusFlow icon in your browser toolbar to open the popup.
  2. Find the Font Size stepper row (below the font chips).
  3. Press − to decrease or + to increase the size. The current value (e.g. 110%) is displayed between the buttons.

Option B — From the Sidebar

  1. Open the popup → click Advanced Settings.
  2. Go to the Typography tab → Advanced section.
  3. Use the Font Size stepper (same −/+ controls).
  4. Optionally set Min and Max pixel limits in the fields below the stepper to prevent text from becoming too small or too large.

Line Height, Letter & Word Spacing

Fine-tune the vertical and horizontal spacing of text to reduce visual crowding and improve readability. These controls are only available in the sidebar.

How to Use

  1. Open the popup → click Advanced Settings.
  2. Go to the Typography tab → Advanced section.
  3. You'll see three sliders:
    • Line Height — ranges from 1.0 to 3.0 (default 1.6). Increase to add more vertical space between lines.
    • Letter Spacing — ranges from 0px to 8px (default 0px). Increase to space out individual characters.
    • Word Spacing — ranges from 0px to 10px (default 0px). Increase to add gaps between words.
  4. Drag any slider and watch the Live Preview panel at the bottom update in real time.

Tip: These sliders are hidden when Font Only mode is enabled, since Font Only applies only the font without altering spacing.

Font Only Mode

Apply an accessible font (like OpenDyslexic) across a web page without altering any of the page's original size, spacing, or layout.

How to Use

Option A — From the Popup

  1. Click the FocusFlow icon in your browser toolbar to open the popup.
  2. In the Quick Tools grid, tap the Font Only button (the "Tt" icon).
  3. The button highlights when active. Tap again to turn it off.

Option B — From the Sidebar

  1. Open the popup → click Advanced Settings.
  2. Go to the Typography tab → Options section.
  3. Toggle the Font Only switch on. The description reads "Apply font without changing size or spacing".
  4. When Font Only is enabled, the Advanced sliders (line height, letter/word spacing) are hidden automatically.

Profiles

Save your current combination of font, size, spacing, and feature toggles as a named profile. Switch between profiles with one click to adapt to different reading contexts.

How to Use

  1. Open the popup → click Advanced Settings.
  2. Go to the Typography tab — the Profiles section is at the very top.
  3. To save a profile: Type a name (e.g. "Night Reading") in the text field and click Save.
  4. To switch: Click any saved profile in the list. Your settings instantly update.
  5. To delete: Hover over a profile and click the delete icon that appears.

Tip: Create separate profiles for day vs. night, work vs. casual reading, or different websites.

Visual Aids

Overlays and visual enhancements that reduce glare, improve focus, and make it easier to track lines. Found in the Popup → Quick Tools and the Sidebar → Visual Aids tab.

Reading Ruler

A coloured horizontal bar that follows your cursor to help you track lines, similar to using a physical ruler on printed text.

How to Use

Option A — From the Popup

  1. Click the FocusFlow icon in your browser toolbar to open the popup.
  2. In the Quick Tools grid, tap the Ruler button (the ruler icon, first in the row).
  3. The button highlights when the ruler is active. Tap again to turn it off.

Option B — From the Sidebar (with customisation)

  1. Open the popup → click Advanced Settings.
  2. Switch to the Visual Aids tab (second tab, eye icon).
  3. Find the Reading Ruler card and toggle the switch on the right to enable it.
  4. Choose a Ruler Color from the five swatches below (Yellow, Mint, Pink, Blue, or Lavender).

Focus Line

Dims everything on the page except the line you are currently reading, creating a spotlight effect that keeps your attention locked on a single line.

How to Use

Option A — From the Popup

  1. Click the FocusFlow icon in your browser toolbar to open the popup.
  2. In the Quick Tools grid, tap the Focus button (the circle-info icon, second in the row).
  3. The button highlights when active. Tap again to turn it off.

Option B — From the Sidebar

  1. Open the popup → click Advanced Settings.
  2. Switch to the Visual Aids tab (second tab, eye icon).
  3. Find the Focus Line card (below Reading Ruler) and toggle the switch on the right.

Color Overlay

Places a semi-transparent colour tint across the entire page to reduce glare and visual stress — especially helpful for users with Scotopic Sensitivity Syndrome or Irlen Syndrome.

How to Use

Option A — From the Popup

  1. Click the FocusFlow icon in your browser toolbar to open the popup.
  2. In the Quick Tools grid, tap the Overlay button (the layers icon, third in the row).
  3. The button highlights when active. Tap again to turn it off.

Option B — From the Sidebar (with customisation)

  1. Open the popup → click Advanced Settings.
  2. Switch to the Visual Aids tab (second tab, eye icon).
  3. Find the Color Overlay card and toggle the switch on the right.
  4. Choose an Overlay Color from the five swatches (Yellow, Mint, Pink, Blue, or Lavender).
  5. Drag the Opacity slider (5% – 50%) to control how strong the tint appears.

Themes (Light / Dark / Sepia / Dusk)

FocusFlow includes four built-in themes to reduce screen glare, minimise eye strain, and provide the most comfortable reading environment for the extension UI and Reader Mode.

How to Use

  1. In the Popup or the Sidebar, click the theme icon in the top-right header.
  2. Each click cycles through Light, Dark, Sepia, and Dusk.
  3. In Reader Mode, the theme toggle also appears in the top bar.
  • Light Theme: Clean, high-contrast black-on-white — suited for bright environments.
  • Dark Theme: Soothing light-on-dark — ideal for night reading or light-sensitive users.
  • Sepia Theme: Warm paper-toned background that reduces glare for long reading sessions.
  • Dusk Theme: Soft twilight palette that dims the screen further for late-night reading.

Reading Aids

Features that actively assist the reading process — from reformatting text to reading it aloud. Found in the Popup → Quick Tools and the Sidebar → Reading tab.

Bionic Reading

Automatically bolds the first half of every word to create artificial fixation points, guiding your eyes rapidly through text. Many users with ADHD or dyslexia find this dramatically improves reading speed and comprehension.

How to Use

Option A — From the Popup

  1. Click the FocusFlow icon in your browser toolbar to open the popup.
  2. In the Quick Tools grid, tap the Bionic button (the bold "B" icon, fourth in the row).
  3. The button highlights when active. The page text is instantly reformatted with bolded fixation points.
  4. Tap again to turn it off and restore the original text.

Option B — From the Sidebar

  1. Open the popup → click Advanced Settings.
  2. Switch to the Reading tab (third tab, book icon).
  3. Find the Bionic Reading card at the top and toggle the switch on the right.
  4. A live preview below the card shows how the bionic formatting looks: "This method facilitates the reading process…"

Text-to-Speech (TTS)

Give your eyes a rest and listen to the page content instead. FocusFlow uses your browser's built-in speech synthesis to read text aloud.

How to Use

  1. Open the popup → click Advanced Settings.
  2. Switch to the Reading tab (third tab, book icon).
  3. Find the Text-to-Speech card and toggle the switch on the right.
  4. Once enabled, select any text on the page. A small speaker icon (🔊) will appear near your selection.
  5. Click the speaker icon to have FocusFlow read the selected text aloud.

AI Reading Assistant PRO

Three AI-powered reading tools that make hard text easier: Define gives instant plain-language definitions, Simplify rewrites difficult passages in short, simple sentences, and Summarize condenses long articles into a short plain-language summary that keeps every key point. Pro licenses include 1,000 AI credits per month (1 credit ≈ 1,000 characters); dictionary and cached answers are free.

How to Use

Option A — From the Right-Click Menu

  1. Select text on any page — a word, a sentence, or a whole section.
  2. Right-click the selection.
  3. Choose Define, Simplify, or Summarize from the FocusFlow menu.
  4. The answer appears instantly, in the same language as the text.

Option B — From the Sidebar

  1. Open the FocusFlow sidebar.
  2. Go to the AI Assistant tab and paste or select the text.
  3. Pick a tool: Define, Simplify, or Summarize.
  4. Your remaining monthly credits are shown with each result.

Reader Mode

A distraction-free, clean reading view that strips away ads, sidebars, and navigation clutter, leaving only the main article content.

How to Open

Option A — From the Popup

  1. Click the FocusFlow icon in your browser toolbar to open the popup.
  2. In the Quick Tools grid, tap the Reader button (the document icon, last in the row).
  3. Reader Mode opens immediately in the current tab.

Option B — From the Sidebar

  1. Open the popup → click Advanced Settings.
  2. Switch to the Reading tab (third tab, book icon).
  3. Find the Reader Mode card and click the purple Open button.

Option C — Keyboard Shortcut

  1. Press ⌥⇧R (Option+Shift+R) on any page to toggle Reader Mode.

Inside Reader Mode

  • Outline Panel: A sticky panel on the left auto-generates a table of contents from page headings. Click any heading to jump there.
  • Carousel Navigation: If the page has multiple articles or sections, use the Previous / Next arrows at the bottom.
  • Toggle Images: Use the Images toggle in the top bar to show or hide images.
  • Theme: Switch between Light and Dark mode using the moon/sun icon in the Reader Mode top bar.
  • Exit: Click the ✕ Close button in the top-right corner.

Settings

Control where and when FocusFlow is active, manage per-site preferences, and reset to defaults. Found in the Popup toggle bar and the Sidebar → More tab.

Global & Site Toggle

Control exactly where FocusFlow is active. Disable it globally, or just for specific websites you don't need it on.

How to Use

  1. Open the Popup or the Sidebar — the toggle bar is at the top of both.
  2. The Global toggle enables or disables FocusFlow across all websites.
  3. The This Site toggle overrides the global setting for the current domain only.
  4. FocusFlow remembers your site-specific preference — if you disable it on a domain, it stays off whenever you return.

Site-Specific Settings

Save your exact typography and feature configuration for individual websites. Each domain gets its own settings, so you never have to readjust sliders when switching tabs.

How to Use

  1. Open the popup → click Advanced Settings.
  2. Switch to the More tab (fourth tab, three-dots icon).
  3. The Site Settings card shows the current domain name.
  4. Click Save for this site to save your current typography, spacing, and feature settings exclusively for this domain.
  5. Click Apply to all sites to push the current settings to every website at once.

Smart Suggestions

When enabled, FocusFlow will prompt you to save your settings when you visit a new site and make adjustments — so you never lose a configuration you've spent time perfecting.

How to Use

  1. Open the popup → click Advanced Settings.
  2. Switch to the More tab (fourth tab, three-dots icon).
  3. Find the Smart Suggestions card and toggle the switch on.
  4. When active, you'll see a notification banner suggesting you save settings after making changes on a new site.

Reset Settings

Tweaked things too far? FocusFlow provides two levels of reset to get you back on track.

How to Use

  1. Open the popup → click Advanced Settings.
  2. Switch to the More tab (fourth tab, three-dots icon).
  3. Scroll to the Reset card at the bottom.
  4. Click Reset Typography to revert only font, size, and spacing to defaults (preserves theme, profiles, and feature toggles).
  5. Click Reset All Settings for a complete factory reset — wipes all custom configurations, site-specific overrides, and saved profiles.