Appearance

Reference Library ​

Organize mood boards, character references, location photos, and visual inspiration in a dedicated canvas view.

What is the Reference Library? ​

The Reference Library is a visual workspace for storing and organizing reference images that inspire your storyboard. Unlike beats (which appear in your timeline), references are pure visual notes that help you maintain consistency and spark creativity.

Perfect for:

  • Character design references
  • Location inspiration photos
  • Mood boards and color palettes
  • Costume and prop references
  • Architectural details
  • Lighting and composition ideas

Accessing the Reference Library ​

Switching Views ​

At the top of the Node View area, you'll see two tabs:

  • Beats - Your timeline canvas (default)
  • References - Your reference library canvas

Click References to switch to the library view. Each view maintains its own zoom and pan state, so you can organize references independently from your beats.

Creating References ​

Method 1: Drag & Drop Images (Fastest) ​

  1. Drag one or more images from your file explorer
  2. Drop them onto the References canvas
  3. Images are created automatically in a 3-column grid layout
  4. Each reference is centered on your drop position

Tip: You can drag 10+ images at once - EmberBoard will arrange them in a neat grid!

Method 2: Double-Click ​

  1. Double-click anywhere in the References view
  2. An empty reference placeholder appears centered on your cursor
  3. Drag an image onto it to add a picture

Method 3: Paste Images from Clipboard ​

  1. Copy an image (screenshot, browser image, etc.)
  2. Switch to References view
  3. Press Ctrl + V
  4. A new reference is created with your image

Note Nodes ​

In addition to reference images, the Reference Library supports Note Nodes - resizable text boxes with markdown support for annotations, documentation, and mixed-media organization.

What are Note Nodes? ​

Note nodes are dedicated text areas that live alongside your reference images. They're perfect for:

  • Quick sticky notes - Ideas, reminders, questions
  • Detailed documentation - Character bios, scene descriptions, story notes
  • Mixed organization - Combine notes with related reference images
  • Project planning - Outline acts, track ideas, brainstorm
  • Markdown formatting - Headers, lists, bold/italic, code blocks

Creating Note Nodes ​

Method 1: Keyboard Shortcut (Fastest)

  1. Press the N key
  2. A new note appears at the center of your viewport
  3. Click to select and start typing

Method 2: Toolbar Button

  1. Click the Note button in the bottom-left toolbar
  2. Note appears at center of viewport
  3. Select to begin editing

Tip: Notes are subject to the same 2000 node limit (combined with references and beats).

Editing Notes ​

Note nodes have two display modes that switch automatically based on selection:

Edit Mode (Node Selected):

  • Shows a textarea with raw markdown text
  • Type freely with all markdown syntax
  • Title editable in Properties Panel
  • Resize by dragging corner handles

View Mode (Node Not Selected):

  • Shows rendered markdown as formatted HTML
  • Headings, lists, and formatting displayed
  • Read-only preview of your content
  • Click to enter edit mode again

This dual-mode design lets you write markdown naturally and see the rendered result instantly.

Markdown Support ​

Note nodes support full CommonMark markdown syntax:

Text Formatting:

markdown
**bold text**
*italic text*
`inline code`

Headings:

markdown
# Heading 1
## Heading 2
### Heading 3

Lists:

markdown
- Unordered list item
- Another item
  - Nested item

1. Ordered list item
2. Second item

Code Blocks:

markdown
```
Code block with syntax
```

Note: Markdown is rendered safely - HTML tags are escaped for security.

Resizing Note Nodes ​

Note nodes are fully resizable to fit your content:

  1. Select the note - Corner handles appear
  2. Drag any corner - Resize freely in all directions
  3. Release - New size is saved to project

Default size: 300px × 200px Tip: Make notes wider for long text, taller for lists and documentation.

Customizing Note Appearance ​

Select a note to access properties in the Properties Panel:

Title

  • Give notes descriptive names
  • Shows in a header bar at the top of the note
  • Example: "Character Arc - Alice", "Scene 3 Notes"

Border Color

  • Choose from 10 preset colors
  • Or use custom color picker
  • Adds a colored border for visual categorization
  • Great for grouping notes by character, scene, or topic

Render Markdown Toggle

  • Enable (default): Content renders as formatted markdown when deselected
  • Disable: Content shows as plain text always
  • Useful if you want raw text without formatting

Organizing with Notes ​

Mixed Canvas Organization:

  • Position notes near related reference images
  • Create "annotation clusters" - note + references
  • Use notes as section headers for reference groups
  • Build mood boards with text descriptions

Example Layout:

┌─────────────────┐  ┌──────────┐  ┌──────────┐
│ Character: Alice│  │ Ref Img  │  │ Ref Img  │
│ - Age: 25       │  │ (costume)│  │ (face)   │
│ - Arc: Growth   │  └──────────┘  └──────────┘
│ - Traits: Shy   │
└─────────────────┘

Working with Note Nodes ​

Selecting Notes:

  • Click to select (same as references)
  • Shift + Click for multi-select
  • Selection shows corner resize handles

Moving Notes:

  • Click and drag to reposition
  • Multi-select moves all together
  • Position is purely organizational (no timeline impact)

Duplicating Notes:

  • Alt + Drag to duplicate while moving (hold Alt, then drag the node)
  • Right-click → Duplicate for copy in place (context menu)
  • Copies all content, title, color, and settings

Deleting Notes:

  • Delete key removes selected notes
  • Ctrl + Z to undo deletion
  • Works with single or multi-selection

Note Node Properties Panel ​

When a note is selected, the Properties Panel shows:

FieldDescription
TitleNote name (shown in header bar)
ContentFull markdown text content
Render MarkdownToggle for markdown rendering
Border ColorCustom color for the note border

Tip: The content field in the Properties Panel is debounced - changes save automatically after you stop typing.

Note Best Practices ​

Use Notes for Context:

  • Explain why you chose certain references
  • Document character relationships
  • Track plot points and story beats
  • Keep production notes and reminders

Markdown for Structure:

  • Use headings (##) for sections
  • Bullet lists for quick points
  • Code blocks for script snippets or technical notes

Color Coding:

  • Blue notes for character info
  • Green notes for locations
  • Yellow notes for story beats
  • Purple notes for technical/production

Combine with References:

Character Sheet (note) ──┬── Facial ref image
                         ├── Costume ref image
                         └── Action pose ref

Reference Node Design ​

Reference nodes are visually distinct from beat nodes with a "photo board" aesthetic:

Adaptive Sizing ​

Unlike beats (which use fixed aspect ratios), reference nodes match the shape of their images:

  • Square images create square nodes (1:1)
  • Wide panoramas create wide nodes (3:1, 2:1)
  • Portrait photos create tall nodes (9:16, 2:3)

Size constraints:

  • Width: 150-400 pixels
  • Height: 100-500 pixels
  • Aspect ratio always preserved

This creates a natural "photo board" feel where each reference has its unique shape.

Minimal Chrome ​

References use an image-first design:

  • No header bar - image fills the entire node
  • Title overlay - appears on hover with gradient background
  • Tags - show on hover above title (pill badges)
  • Thin border - 1px normally, 3px when selected
  • Image fill - uses objectFit: cover (may crop, no letterboxing)

Hover over any reference to see its title and tags.

Organizing References ​

Title ​

Give each reference a descriptive name:

  • "Victorian Interior - Dark Wood"
  • "Character - Facial Expression Study"
  • "Sunset Color Palette"

Titles appear as overlays when you hover over references.

Notes ​

Use the notes field in the Properties Panel to add:

  • Where you found the image
  • What inspired you about it
  • How you plan to use it
  • Details to remember

Tags (with Autocomplete) ​

Organize references with tags for easy mental grouping:

  • Character names - "alice", "villain", "sidekick"
  • Locations - "forest", "city", "interior"
  • Moods - "dark", "whimsical", "tense"
  • Types - "costume", "lighting", "composition"

Adding tags:

  1. Select a reference
  2. Type tags in the Properties Panel (comma-separated)
  3. Press Enter or blur to save
  4. Tags appear as colored pill badges on hover

Autocomplete:

  • EmberBoard remembers tags you've used
  • Double-click the tag field to see all previous tags
  • Start typing for fuzzy-matched suggestions
  • Arrow keys (↑/↓) to navigate, Enter to select

Example:

Tags: character, costume, victorian, female

These become colored pills that show when hovering over the reference.

Selecting and Moving References ​

Single Selection ​

  • Click any reference to select it
  • Selection border becomes thicker (3px blue)
  • Properties Panel updates to show reference details

Multi-Selection ​

  • Shift + Click to add references to selection
  • Shift + Drag box around multiple references (box selection)

Moving References ​

  • Click and drag any reference to reposition it
  • Multiple selected - they all move together
  • No timeline impact - positions are purely organizational

Unlike beats, reference positions don't affect any sequence or timeline. Arrange them however makes sense visually!

Sending References as Beats ​

This is the key feature that connects references to your storyboard.

Method 1: Send to End (Fastest) ​

  1. Right-click a reference
  2. Select "Send as Beat (Add to End)"
  3. A new beat is created at the end of your timeline
  4. EmberBoard automatically switches to Beats view
  5. The new beat is selected and ready to edit

Method 2: Send at Position ​

  1. Right-click a reference
  2. Select "Send as Beat (Add at Position)"
  3. The beat is created after your currently selected beat
  4. View switches to Beats
  5. New beat is selected

What gets transferred:

  • ✅ Image - Full image with all processing
  • ✅ Title - Becomes beat title
  • ✅ Notes - Copied to beat script
  • ✅ Color - Custom color (if set)
  • ✅ Image adjustments - Offset and scale

The reference remains in your library - this is a copy, not a move!

Workflow Example: ​

  1. Build a reference library of location photos
  2. As you storyboard, right-click references → Send as Beat
  3. The beat gets the image, you add timing and script
  4. Keep the reference for future projects or variations

Editing Reference Properties ​

Select a reference to see its properties:

Image Controls ​

  • Upload image - Replace or add an image
  • Offset X/Y - Crop/reframe the image
  • Scale - Zoom in on details (0.5x to 2x)

Custom Color ​

  • Choose from 10 preset colors
  • Or use custom color picker
  • Adds a subtle accent (shows on hover)
  • Great for categorizing by project, character, or mood

Deleting References ​

Single Delete ​

  1. Select a reference
  2. Press Delete
  3. Reference is removed (with undo support)

Multi-Delete ​

  1. Select multiple references (Shift + Click)
  2. Press Delete
  3. All selected references are removed

Undo with Ctrl + Z if you change your mind!

Duplicate References ​

Create variations of existing references:

Method 1: Alt + Drag ​

  1. Select a reference
  2. Hold Alt key
  3. Drag to new position
  4. Release to create duplicate

Method 2: Context Menu ​

  1. Right-click a reference
  2. Select "Duplicate"
  3. Copy appears offset from original

Duplicates copy everything: image, title, notes, tags, and settings.

Image Processing ​

All reference images are automatically optimized:

  • 2 megapixel limit - Resized if larger (same as beats)
  • Quality preserved - Smart downsampling
  • Format agnostic - Supports PNG, JPEG, WebP, GIF, BMP

This keeps your project file size manageable while maintaining visual quality.

Reference Library Best Practices ​

Build Your Library First ​

Before storyboarding:

  1. Gather all your reference images
  2. Drop them into the Reference Library
  3. Tag and organize them
  4. Then start creating beats from your favorites

This gives you a visual palette to work from.

Use Descriptive Tags ​

Good tags:

  • "main-character", "forest-scene", "night-lighting"
  • "costume-inspiration", "color-palette", "action-pose"

Avoid:

  • Generic tags like "ref" or "image"
  • Too many tags per reference (3-5 is ideal)

Group Visually ​

Even though position doesn't matter, organize references in visual clusters:

  • All character refs in one area
  • Location refs in another
  • Color palettes together
  • Action poses grouped

Title Everything ​

A good title makes it easy to:

  • Find references later
  • Remember why you saved it
  • Know what transferred when sending as beat

Regular Cleanup ​

Periodically review your library:

  • Remove unused references
  • Merge similar ones
  • Update tags as your project evolves

Keyboard Shortcuts ​

ShortcutAction
NCreate new note node
Double-click (canvas)Create empty reference
Ctrl + VPaste image as new reference
DeleteDelete selected node(s)
Shift + ClickMulti-select nodes
Shift + DragBox select nodes
Alt + DragDuplicate node
Right-clickOpen context menu

See Keyboard Shortcuts for the complete list.

Viewport Navigation ​

The References view uses the same navigation as the Beats view:

ControlAction
Ctrl + Scroll wheelZoom in/out
Middle mouse buttonPan around canvas
Scroll wheelScroll vertically
Fit View buttonFrame all references (bottom-left controls)

Tip: Each view (Beats and References) remembers its own zoom and pan position.

Reference vs Beat Nodes ​

Understanding the differences helps you use each effectively:

FeatureBeat NodeReference Node
PurposeTimeline sequenceVisual inspiration
DimensionsFixed by project aspect ratioAdaptive to image shape
HeaderAlways visible title barHover overlay only
TimelineAppears in playbackNever in timeline
ExportIncluded in exportsNot exported
ScriptFull script fieldNotes field only
DurationRequiredNot applicable
PositionDetermines sequenceOrganizational only

Common Workflows ​

Character Consistency ​

  1. Create references for each character (multiple angles)
  2. Tag with character name
  3. When storyboarding scenes, send references as beats
  4. Modify as needed while keeping original reference

Location Library ​

  1. Gather photos of each location
  2. Tag by location name and time of day
  3. Use as visual reference while drawing storyboards
  4. Send as beat for establishing shots

Mood Board ​

  1. Collect color palette images
  2. Arrange them visually in clusters
  3. Reference while choosing beat colors
  4. Send favorite moods as beats for key moments

Alternate Versions ​

  1. Create reference of concept A
  2. Duplicate it
  3. Drop different image on duplicate for concept B
  4. Send preferred version as beat when decided

Project File Storage ​

References are saved in your project file:

  • Per-project - Each project has its own library
  • Portable - References travel with your project
  • Optimized - Images compressed to 2MP
  • Base64 encoded - No external dependencies

When you share a project file, the recipient gets all your references too.

Limitations ​

Current limitations (planned for future releases):

  • No search/filter - Manually scan to find references
  • No sorting - Manual organization only
  • No folders - Flat organization (tags help!)
  • 2000 node limit - Combined beats + references per project

Tips and Tricks ​

Rapid Reference Building ​

  1. Collect 20+ inspiration images in a folder
  2. Select all in file explorer
  3. Drag entire batch onto References view
  4. EmberBoard creates them in a grid automatically

Tag Templates ​

Create a consistent tag vocabulary:

  • Characters: "char-name", "char-villain", "char-hero"
  • Locations: "loc-interior", "loc-exterior", "loc-city"
  • Moods: "mood-dark", "mood-bright", "mood-tense"

Prefixes make autocomplete more useful!

Visual Hierarchy ​

Position your most important references:

  • Center - Key inspirations
  • Edges - Supporting references
  • Top - Character/location refs
  • Bottom - Mood/color refs

Reference + Beat Shelf ​

Combine with the Beat Shelf for maximum flexibility:

  1. Send reference as beat
  2. Try it in timeline
  3. If not working, move beat to shelf
  4. Reference remains available for future attempts

Troubleshooting ​

Reference Not Showing Image ​

  • Check that image was fully loaded when dropped
  • Try re-dropping the image onto the reference
  • Ensure image format is supported (PNG, JPEG, WebP, GIF, BMP)

Slow Performance with Many References ​

  • Keep library under 100 references per project
  • Use smaller source images (EmberBoard downsamples anyway)
  • Consider splitting into multiple projects by scene/act

Lost References After Switch ​

  • References are per-project (not global)
  • Check that you're in the correct project
  • Use File → Open to load saved project

Send as Beat Not Working ​

  • Ensure reference has an image (not empty placeholder)
  • Check you have permission to create beats (under node limit)
  • Try sending to end first (simpler path)

Next Steps ​