Examples

Sample .brfr files demonstrating various features.

Manifest Examples

These are the manifest.json contents. To create a working .brfr file, place the manifest in a ZIP archive with an empty media/ folder (or add referenced images).

Minimal (text only)

The simplest valid brief: title screen and one content step.

{
  "version": "0.10",
  "id": "11111111-1111-4111-8111-111111111111",
  "title": "Minimal Example",
  "steps": [
    {
      "id": "step-1",
      "elements": [
        {
          "type": "text",
          "content": "Minimal Example",
          "preset": "title",
          "align": "center"
        }
      ]
    },
    {
      "id": "step-2",
      "elements": [
        {
          "type": "text",
          "zone": "top",
          "content": "Hello World",
          "preset": "heading"
        },
        {
          "type": "text",
          "content": "This is the simplest possible brief with just text elements."
        }
      ]
    }
  ]
}

Three-Zone Layout

Demonstrates top/center/bottom zone positioning.

{
  "version": "0.10",
  "id": "22222222-2222-4222-8222-222222222222",
  "title": "Zone Layout Demo",
  "steps": [
    {
      "id": "step-1",
      "elements": [
        {
          "type": "text",
          "zone": "top",
          "content": "TOP ZONE",
          "preset": "heading",
          "align": "center",
          "color": "#3b82f6"
        },
        {
          "type": "text",
          "content": "CENTER ZONE",
          "preset": "title",
          "align": "center"
        },
        {
          "type": "text",
          "content": "Elements without a zone property appear here.",
          "align": "center",
          "color": "#909090"
        },
        {
          "type": "text",
          "zone": "bottom",
          "content": "BOTTOM ZONE",
          "preset": "heading",
          "align": "center",
          "color": "#10b981"
        }
      ]
    }
  ]
}

Image with Annotations

Shows annotation types on an image. Requires media/photo.jpg in archive.

{
  "version": "0.10",
  "id": "33333333-3333-4333-8333-333333333333",
  "title": "Annotation Demo",
  "steps": [
    {
      "id": "step-1",
      "elements": [
        {
          "type": "text",
          "zone": "top",
          "content": "Annotation Types",
          "preset": "heading",
          "align": "center"
        },
        {
          "type": "image",
          "media": "media/photo.jpg",
          "alt": "Sample image with annotations",
          "annotations": [
            {
              "type": "circle",
              "cx": 0.3,
              "cy": 0.4,
              "r": 0.1,
              "color": "#ef4444"
            },
            {
              "type": "arrow",
              "x1": 0.7,
              "y1": 0.2,
              "x2": 0.5,
              "y2": 0.4,
              "color": "#3b82f6"
            },
            {
              "type": "label",
              "x": 0.3,
              "y": 0.4,
              "content": "1",
              "background": "#ef4444"
            },
            {
              "type": "rect",
              "x": 0.6,
              "y": 0.6,
              "width": 0.25,
              "height": 0.2,
              "color": "#10b981"
            }
          ]
        },
        {
          "type": "text",
          "zone": "bottom",
          "content": "Circle, arrow, label, and rectangle",
          "align": "center",
          "color": "#909090"
        }
      ]
    }
  ]
}

Row Layout

Demonstrates horizontal grouping with the row element.

{
  "version": "0.10",
  "id": "44444444-4444-4444-8444-444444444444",
  "title": "Row Layout Demo",
  "steps": [
    {
      "id": "step-1",
      "elements": [
        {
          "type": "text",
          "zone": "top",
          "content": "Stats Overview",
          "preset": "heading",
          "align": "center"
        },
        {
          "type": "row",
          "layout": "even",
          "gap": 16,
          "items": [
            {
              "type": "text",
              "content": "42",
              "preset": "hero",
              "align": "center",
              "color": "#10b981"
            },
            {
              "type": "text",
              "content": "87%",
              "preset": "hero",
              "align": "center",
              "color": "#3b82f6"
            }
          ]
        },
        {
          "type": "row",
          "layout": "even",
          "gap": 16,
          "items": [
            {
              "type": "text",
              "content": "Completed",
              "preset": "small",
              "align": "center",
              "color": "#909090"
            },
            {
              "type": "text",
              "content": "Success Rate",
              "preset": "small",
              "align": "center",
              "color": "#909090"
            }
          ]
        }
      ]
    }
  ]
}

SVG Element

Inline vector graphics with the svg element.

{
  "version": "0.10",
  "id": "55555555-5555-4555-8555-555555555555",
  "title": "SVG Demo",
  "steps": [
    {
      "id": "step-1",
      "elements": [
        {
          "type": "text",
          "zone": "top",
          "content": "Vector Graphics",
          "preset": "heading",
          "align": "center"
        },
        {
          "type": "svg",
          "content": ""
        },
        {
          "type": "text",
          "zone": "bottom",
          "content": "SVG must include viewBox attribute",
          "align": "center",
          "color": "#909090"
        }
      ]
    }
  ]
}

Creating a .brfr File

1. Create a folder with manifest.json and a media/ subfolder
2. Add any referenced images to media/
3. ZIP the contents (not the parent folder)
4. Rename from .zip to .brfr

# macOS / Linux
cd my-brief-folder
zip -r ../my-brief.brfr manifest.json media/

# Windows PowerShell
Compress-Archive -Path manifest.json, media -DestinationPath ..\my-brief.zip
Rename-Item ..\my-brief.zip my-brief.brfr