Web App

Access AFFiNE from any browser with the web application at app.affine.pro.

The AFFiNE web app provides full access to all features directly in your browser, with no installation required. Access your workspace from anywhere at app.affine.pro.

Browser Support

AFFiNE works best in modern browsers:

Chrome

Version 90+

Firefox

Version 88+

Safari

Version 14+

Edge

Version 90+

Brave

Latest version

Arc

Latest version

For the best experience, we recommend Chrome or Edge (Chromium-based browsers).

Quick Start

1. Visit app.affine.pro

   Open app.affine.pro in your browser

2. Sign in or continue as guest

   Create an account for cloud sync, or use locally without an account

3. Create your first workspace

   Choose local-only or cloud-synced workspace

4. Start creating

   Begin writing, drawing, and organizing

Features

Full Feature Parity

The web app includes all AFFiNE features:

• Block-based editor: Rich text, code, embeds, and more
• Edgeless whiteboard: Infinite canvas for visual thinking
• Databases: Table, kanban, and gallery views
• Real-time collaboration: Work with others simultaneously
• AI assistant: Writing help and content generation
• Local-first storage: Data stored in your browser

Progressive Web App (PWA)

Install AFFiNE as a PWA for an app-like experience:

Chrome/Edge

1. Visit app.affine.pro
2. Click the install icon in the address bar
3. Click “Install” in the popup

Safari

1. Visit app.affine.pro
2. Tap the Share button
3. Select “Add to Home Screen”

Firefox

1. Visit app.affine.pro
2. Click the three-dot menu
3. Select “Install AFFiNE”

PWA Benefits:

• Standalone window (no browser UI)
• Desktop/home screen icon
• Offline access
• Faster loading
• Native feel

Offline Support

The web app works offline using service workers:

• All data cached in IndexedDB
• Full editing capability offline
• Automatic sync when reconnected
• Background sync for updates

Storage

Browser Storage

The web app stores data in your browser:

// Storage breakdown
IndexedDB/
  ├── workspaces/          # Workspace metadata
  ├── docs/                # Document CRDT data
  └── blobs/               # Images and attachments

LocalStorage/
  ├── user-settings        # User preferences
  └── ui-state             # UI state (sidebar, etc.)

CacheStorage/
  └── app-assets           # App code and assets

Storage Limits

Browser storage quotas vary:

Browser	Typical Limit	Notes
Chrome	~60% of disk	Up to 80% available disk
Firefox	~50% of disk	User can increase
Safari	~1GB	Can request more
Edge	~60% of disk	Same as Chrome

Browser storage can be cleared by:

• Clearing browser data
• Private/incognito mode ending
• Storage pressure (automatic eviction)

Always enable cloud sync or regular backups for important data.

Managing Storage

View and manage storage:

1. Settings → Storage
2. See usage by workspace
3. Clear cache
4. Export workspaces

Performance

Optimization

The web app is optimized for performance:

• Code splitting: Load only what’s needed
• Lazy loading: Images and components load on demand
• Virtual scrolling: Handle large documents
• Service workers: Fast caching and offline access
• Web Workers: Offload heavy computation
• WebAssembly: Fast CRDT operations (when available)

Large Workspaces

For workspaces with many documents or large files:

• Enable cloud sync to offload data
• Close unused documents
• Use collections to organize
• Clear cache regularly
• Consider desktop app for better performance

Browser Features

Keyboard Shortcuts

Full keyboard shortcut support in browsers:

Shortcut	Action
Ctrl/⌘ + K	Quick search
Ctrl/⌘ + N	New page
Ctrl/⌘ + S	(Auto-saved)
Ctrl/⌘ + Z	Undo
Ctrl/⌘ + Shift + Z	Redo
Ctrl/⌘ + B	Bold
Ctrl/⌘ + I	Italic
/	Slash commands

Copy/Paste

Rich content copy/paste:

• Text formatting: Preserves bold, italic, links
• Images: Paste from clipboard
• Tables: Copy from spreadsheets
• Code: Syntax highlighting preserved
• Blocks: Copy entire blocks between pages

Drag & Drop

• Drag images from desktop
• Drop files to upload
• Reorder blocks by dragging
• Drag between browser windows

Self-Hosting

You can host the web app on your own infrastructure:

docker run -d \
  --name affine \
  -p 3010:3010 \
  -v affine-data:/app/data \
  ghcr.io/toeverything/affine-selfhosted:stable

See our self-hosting guide for details.

Security

HTTPS Only

AFFiNE requires HTTPS for:

• Service worker registration
• Clipboard access
• Camera/microphone access
• Secure cookie handling

Content Security Policy

Strict CSP prevents XSS attacks:

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'unsafe-inline';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  connect-src 'self' wss: https:;

Authentication

• Secure cookie-based sessions
• CSRF token protection
• HTTPOnly cookies
• SameSite=Strict
• Regular session rotation

Troubleshooting

App Won’t Load

Clear browser cache

1. Open browser settings
2. Privacy → Clear browsing data
3. Select cached images and files
4. Clear data and reload

Disable browser extensions

Some extensions interfere with AFFiNE:

• Ad blockers (whitelist app.affine.pro)
• Privacy tools (allow cookies and storage)
• Script blockers (allow JavaScript)

Check browser compatibility

Ensure your browser is up to date:

• Chrome/Edge: Version 90+
• Firefox: Version 88+
• Safari: Version 14+

Sync Issues

1. Check network

   Ensure you have a stable internet connection

2. Verify account

   Make sure you’re signed in with a cloud account

3. Check sync status

   Look for sync indicator in the sidebar

4. Force refresh

   Ctrl/⌘ + Shift + R to force reload

Performance Issues

Reduce browser load

• Close unused tabs
• Disable unnecessary extensions
• Clear browser cache
• Restart browser

Optimize AFFiNE

• Close unused workspaces
• Reduce image sizes
• Clear AFFiNE cache in settings
• Use desktop app for large workspaces

Development

Build the web app locally:

1. Install dependencies

   yarn install
   
2. Start dev server

   yarn workspace @affine/web dev
   
3. Open browser

   Visit http://localhost:8080

Related Resources

Desktop App

Native app with better performance

Mobile Apps

iOS and Android applications

Self-Hosting

Host your own AFFiNE instance

Browser Extensions

Extend browser functionality