Skip to main content

Welcome to Flow Browser

This guide will walk you through your first experience with Flow Browser, from the onboarding process to mastering the core features.
If you haven’t installed Flow Browser yet, head over to the Installation Guide first.

First Launch: Onboarding

When you launch Flow Browser for the first time, you’ll be greeted with a simple onboarding wizard:
1

Welcome Screen

Flow Browser will introduce you to its core concepts:
  • Profiles: Separate browsing identities with different settings
  • Spaces: Organize tabs within a profile for different tasks
  • Sidebar: Quick access to navigation and controls
2

Create Your First Profile

You’ll be prompted to create your first profile. Think of profiles as completely separate browsing environments:
  • Work profile (with work-related extensions)
  • Personal profile (for casual browsing)
  • Development profile (with developer tools)
Each profile has its own history, cookies, extensions, and settings.
3

Complete Setup

Once you complete the onboarding, Flow Browser will create your first Space and you’re ready to browse!

Understanding the Interface

Flow Browser features a minimalist, sidebar-based interface:
┌─────────────┬──────────────────────────────────────┐
│   Sidebar   │       Main Browser Window            │
│             │                                      │
│  Spaces     │  ┌────────────────────────────────┐  │
│  • Work     │  │  Address Bar (Omnibox)         │  │
│  • Personal │  └────────────────────────────────┘  │
│             │                                      │
│  Tabs       │      Web Content Area                │
│  □ Tab 1    │                                      │
│  □ Tab 2    │                                      │
│  □ Tab 3    │                                      │
│             │                                      │
│  Settings   │                                      │
└─────────────┴──────────────────────────────────────┘

Key Interface Elements

Sidebar

The left sidebar provides access to spaces, tabs, bookmarks, history, and settings. It can be configured to auto-hide or remain visible.

Omnibox

The address bar doubles as a search box and command palette. Type to search, navigate, or access browser commands.

Spaces Switcher

Switch between different workspaces to organize your tabs by context (e.g., Work, Research, Shopping).

Tab List

Vertical tab list showing all tabs in the current space. Tabs can be put to sleep to save resources.

Essential Features

Creating and Managing Tabs

Flow Browser provides multiple ways to create and manage tabs:
Cmd/Ctrl + T        # New tab
Cmd/Ctrl + W        # Close tab
Cmd/Ctrl + Tab      # Next tab
Cmd/Ctrl + Shift+T  # Reopen closed tab

Tab Persistence

Flow Browser automatically saves your tabs and restores them when you restart:
The tab persistence system runs in the background, writing changes to disk every ~2 seconds. You’ll never lose your open tabs, even if the browser crashes.
Implementation detail from the source:
// From src/main/browser.ts
import { tabPersistenceManager } from "@/saving/tabs";

// Start tab persistence flush interval
tabPersistenceManager.start();

Sleep Tabs

Save system resources by putting inactive tabs to sleep:
  1. Right-click an inactive tab
  2. Select “Sleep Tab”
  3. The tab’s memory is freed while preserving its state
  4. Click the tab to wake it up instantly
Sleeping tabs will need to reload when you access them again. Any unsaved form data may be lost.

Using Spaces

Spaces help you organize tabs by context:
1

Create a Space

Click the + icon in the Spaces section of the sidebar, or use the command palette.
2

Name Your Space

Give it a meaningful name like “Work”, “Research”, or “Shopping”.
3

Switch Between Spaces

Click on a space name to switch to it. All tabs in that space will be restored.
4

Organize Your Workflow

Each space maintains its own tab collection, so you can keep different projects completely separate.
Example Workflow:
Profile: Work
  ├─ Space: Project A
  │  ├─ Documentation tabs
  │  ├─ GitHub issues
  │  └─ Local development
  ├─ Space: Project B
  │  └─ Related tabs
  └─ Space: Email & Calendar
     └─ Productivity tabs

Installing Extensions

Flow Browser supports Chrome extensions directly from the Chrome Web Store:
1

Navigate to Chrome Web Store

Open chrome.google.com/webstore in Flow Browser.
2

Browse and Install

Find the extension you want and click “Add to Chrome” (yes, it works in Flow!).
3

Manage Extensions

Access installed extensions via:
  • Settings > Extensions
  • Or navigate to flow://extensions
Extensions are installed per-profile. If you have multiple profiles, you’ll need to install extensions separately for each one.
Flow’s extension support is powered by:
{
  "electron-chrome-extensions": "@iamevan/[email protected]",
  "electron-chrome-web-store": "@iamevan/[email protected]"
}

Using the Command Palette

The command palette (omnibox) is your gateway to everything in Flow Browser:
Just start typing:
how to use flow browser
Press Enter to search with your default search engine.

Built-in Ad Blocking

Flow Browser includes a native ad blocker powered by Ghostery:
// From package.json dependencies
"@ghostery/adblocker-electron": "^2.14.1"
Features:
  • Blocks ads and trackers automatically
  • No configuration needed
  • Faster page loads and reduced bandwidth usage
  • Privacy protection out of the box
To manage ad blocking:
  1. Go to Settings > Privacy
  2. Toggle ad blocking on/off
  3. Customize blocking rules (advanced)

Multiple Profiles

Profiles provide complete isolation between browsing sessions:
// From src/main/controllers/profiles-controller/index.ts
import { profilesController } from "@/controllers/profiles-controller";

// Create a new profile
const success = await profilesController.create(
  "My Work Profile",  // Profile name
  true                 // Create default space
);

When to Use Profiles

Work vs Personal

Keep work browsing completely separate from personal browsing with different extensions and settings.

Multiple Accounts

Manage multiple accounts for the same service without logging in and out.

Development

Create a profile specifically for web development with developer extensions.

Testing

Test websites with different configurations or extension setups.

Special URLs

Flow Browser provides special internal URLs for accessing features:
URLDescription
flow://settingsBrowser settings
flow://extensionsManage extensions
flow://gamesOffline games
flow://aboutAbout Flow Browser

Keyboard Shortcuts

Master these shortcuts to boost your productivity:
ShortcutAction
Cmd/Ctrl + TNew tab
Cmd/Ctrl + WClose tab
Cmd/Ctrl + Shift + TReopen closed tab
Cmd/Ctrl + TabNext tab
Cmd/Ctrl + Shift + TabPrevious tab
ShortcutAction
Cmd/Ctrl + NNew window
Cmd/Ctrl + Shift + NNew profile window
Cmd/Ctrl + QQuit Flow Browser
ShortcutAction
Cmd/Ctrl + ,Open settings
Cmd/Ctrl + Shift + IOpen DevTools
Cmd/Ctrl + Shift + DeleteClear browsing data

Viewing PDFs

Flow Browser includes a built-in PDF viewer powered by @pdfslick/react:
  • Click any PDF link to view it in-browser
  • No additional plugins required
  • Smooth scrolling and zooming
  • Text selection and search

Privacy Settings

Configure your privacy preferences:
1

Open Settings

Click Settings in the sidebar or press Cmd/Ctrl + ,
2

Navigate to Privacy

Find the Privacy section in settings
3

Configure Options

  • Enable/disable ad blocking
  • Manage cookies and site data
  • Configure Do Not Track
  • Clear browsing data

Troubleshooting Common Issues

Try clearing the cache:macOS/Linux:
rm -rf ~/Library/Application\ Support/Flow/Cache
Windows:
del /s /q %APPDATA%\Flow\Cache
  1. Check if the extension is installed for your current profile
  2. Navigate to flow://extensions to verify
  3. Try reinstalling the extension
  4. Check the developer console for errors (Cmd/Ctrl + Shift + I)
Use the Sleep Tabs feature:
  1. Right-click inactive tabs
  2. Select “Sleep Tab”
  3. Consider using fewer extensions
  4. Close unused spaces
The tab persistence system should work automatically. If it’s not working:
  1. Check file system permissions
  2. Ensure sufficient disk space
  3. Check the console for errors in development mode

Next Steps

Now that you’re familiar with the basics, explore more:

Explore Features

Dive deep into all Flow Browser features

Customize Settings

Personalize your browsing experience

Contribute

Help improve Flow Browser

Need help? Visit our feedback portal or check out the GitHub repository for support.

Build docs developers (and LLMs) love