Brfr Wiki

Community documentation for the mobile-first visual brief creator

What is Brfr?

Brfr (pronounced "briefer") is a mobile-first tool for creating swipeable visual step-by-step guides. Think of it as a middle ground between PowerPoint (designed for projectors) and social media stories (ephemeral) - optimized for reference materials you access on your phone while doing physical tasks.

Key characteristics:

• Mobile-first: Designed for 4.5"-9" touchscreens you have with you
• Local-first: Your briefs live on your device. No account required for basic use.
• Offline-capable: Works without internet once loaded
• Self-contained: Each .brfr file contains everything - no external dependencies
• Always dark: Pure black background for outdoor visibility and battery life

Getting Started

First Launch

1. Go to brfr.app on any device
2. On mobile, add to your home screen for the best experience
3. Tap the + button to create your first brief

Basic Workflow

1. Capture - Take photos or add images for each step
2. Annotate - Add text, arrows, highlights
3. Organize - Arrange steps in order, group into folders
4. Share - Export as .brfr file or publish a link

No Account Needed

You can create, edit, and export briefs without ever creating an account. Your briefs are stored locally in your browser. Account creation is only needed for cloud sync and permanent sharing links.

Creating Briefs

Editing Modes

Brfr adapts its editor based on your screen size and the complexity of your brief:

Mode	When	Best For
Capture Mode	Phone (<900px)	Quick photo + caption briefs
EWIC Mode	Phone, complex brief	Editing text/images on existing briefs
Standard Mode	Desktop (>=900px)	Full editing with three-panel layout

The Step Filmstrip

At the bottom of the editor, the filmstrip shows all your steps as thumbnails. Tap to jump to any step. Drag to reorder.

Zones

Each step has three vertical zones where elements can be placed:

Zone	Behavior	Best For
Top	Anchored to top, shrinks to fit	Titles, step numbers
Center	Fills remaining space, centered	Main content, images
Bottom	Anchored to bottom, shrinks to fit	Captions, navigation hints

Undo/Redo

In Standard Mode (desktop), undo and redo are available:

• Ctrl+Z or Cmd+Z - Undo
• Ctrl+Y or Cmd+Shift+Z - Redo

Elements Reference

Briefs are made of steps, and steps contain elements. There are four element types:

Text Element

For headings, body text, captions, and labels.

Property	Options
Preset	heading, subheading, body, caption, label
Alignment	left, center, right
Zone	top, center (default), bottom
Color	Any hex color (default: #ffffff)

Image Element

For photos, screenshots, diagrams.

Property	Options
Fit	contain (default), cover, fill
Zone	top, center (default), bottom

SVG Element

For icons, simple diagrams, scalable graphics. Inline SVG code renders at any size without pixelation.

Row Element

For side-by-side content: image comparisons, stat cards, icon grids.

Property	Options
Layout	equal (default), auto
Gap	Spacing between items in pixels
Items	Array of text or image items

Sharing & Cloud

Ways to Share

Method	Requires Account	Link Duration
Export .brfr file	No	N/A (local file)
Temporary link	Yes (free)	30 days
Permanent link	Yes (paid)	Forever*

*As long as brfr.page operates

Cloud Sync

With an account, your briefs sync across devices automatically. Pull down on the library to manually refresh.

Exporting

• Single brief: Long-press a brief card, tap Export
• All briefs: Menu > Backup All

Exported .brfr files can be imported on any device or shared directly via messaging apps.

Folder Sharing

Paid users can share entire folders as collections. The shared link shows all briefs in the folder, updating when you push changes.

The .brfr File Format

A .brfr file is a renamed ZIP archive containing:

my-brief.brfr
+-- manifest.json    # Content and structure
+-- media/           # Images and media files
    +-- photo1.jpg
    +-- diagram.svg

The manifest.json defines the brief structure, steps, and elements. The format is intentionally simple and human-readable.

Troubleshooting

App Not Loading / Stuck

1. Force refresh: Ctrl+Shift+R (or Cmd+Shift+R)
2. Clear site data in browser settings
3. Use the force update page: brfr.app/update

Briefs Disappeared

Briefs are stored in browser IndexedDB. They can disappear if:

• You cleared browser data or cache
• You're using a different browser or device
• Private/incognito mode was used (data doesn't persist)

Solution: Restore from a .brfr backup if you have one. Enable cloud sync to prevent future loss.

Sync Not Working

1. Check that you're signed in (avatar visible in header)
2. Pull down on the library to force sync
3. Tap the cloud icon to see sync status
4. Check your internet connection

Images Not Displaying

• Large images may take time to load
• Corrupted images in imported .brfr files won't display
• Try re-adding the image from your device

Can't Find a Feature

Brfr has different editing modes depending on screen size. Some features are only available in Standard Mode (desktop, >= 900px viewport). Try using a larger screen.

Keyboard Shortcuts

Available in Standard Mode (desktop):

Shortcut	Action
Ctrl+Z	Undo
Ctrl+Y	Redo
Ctrl+Shift+Z	Redo (alternate)

In the viewer:

Key	Action
Arrow Up / Arrow Down	Previous / Next step
Space	Next step
Home	First step
End	Last step

Contributing to This Wiki

This wiki is community-maintained. If you find errors, have improvements, or want to add content:

1. Fork the brfr.wiki repository
2. Make your changes
3. Submit a pull request

Guidelines

• Keep it factual and concise
• Test any procedures you document
• Don't add feature requests or bug reports here (use GitHub Issues)
• Screenshots should use the dark theme