Professional Storyboard Tool
Storyboard Studio
From first sketch to rough cut — in one tool.
Why FRAME
A focused canvas built for storyboarding. No layer panels, no file menus — just your idea on screen, immediately.
Every frame is a structured production record. Scene numbers, shot types, dialogue, and directorial notes are stored per frame and export cleanly into industry-standard XML.
FRAME is not just a sketchpad. It is a lightweight production management tool. Set timing, preview your animatic, and manage multiple boards — all without leaving the app.
Your boards follow you. Sign in to store your storyboards in the cloud and access them from any device — phone, tablet, or desktop.
Workflow
Open FRAME and start a new storyboard. Name the project, set the author, and choose your canvas format — 16:9 for film, 9:16 for social vertical, or 1:1 for square content. Your board is ready in under ten seconds.
Draw directly on the canvas with the pencil tool. Add new frames with CtrlN, duplicate with CtrlD, and navigate with the arrow keys. Set a duration per frame, then press Space to preview the animatic at any time. When the timing feels right, download it as an MP4 — the timeline at the bottom keeps your full sequence in view as you work.
The sidebar holds your production data. Assign a scene number, shot type (wide, medium, close-up, OTS, POV, and more), camera movement, dialogue, and directorial notes — all linked to the current frame. This is your shot list building itself as you draw.
Switch to Shot List mode to see all shots grouped by location across every board. Log multiple takes per shot and rate each one — the highest-rated shot is automatically selected when you export the XML to your NLE, so your editorial timeline reflects your best material from the start.
Configure your file naming convention in Settings to match your camera's actual shot files, then export the shot list as XML — ready to import directly into Final Cut Pro, DaVinci Resolve, or Premiere Pro with your highest-rated takes already in place.
Progressive Web App
FRAME is a PWA — a Progressive Web App. It runs entirely in your browser and can be installed directly to your home screen or desktop without an app store. Once installed, it works offline.
Scan to open on mobile
Point your phone camera at the code to open FRAME directly in your mobile browser — no typing required. Then follow the install instructions below for your device.
iOS 16.4 or later recommended for full PWA support. Data is stored in Safari's local storage — clearing Safari website data will remove your boards.
Once installed, FRAME runs full-screen without browser UI and works offline.
Supported on Samsung Internet with Android 9 or later.
No install icon? Click the ⋮ menu → Save and share → Install page as app.
Edge may also show an install prompt in the address bar automatically on first visit.
Requires Firefox 89 or later. Standalone window behaviour may vary by OS.
Documentation
| Action | Shortcut |
|---|---|
| Pencil tool | P |
| Eraser tool | E |
| Lasso selection | L |
| Undo | Ctrl Z |
| Redo | Ctrl Shift Z / Ctrl Y |
| New frame after current | Ctrl N |
| Duplicate current frame | Ctrl D |
| Play / Pause animatic | Space |
| Stop playback / cancel lasso | Escape |
| Previous frame | ← |
| Next frame | → |
| Save | Ctrl S |
| 2-finger swipe left | Undo |
| 2-finger swipe right | Redo |
| 3-finger swipe left | Previous frame |
| 3-finger swipe right | Next frame |
| 2-finger double-tap | Clear current frame |
The primary drawing instrument. Simulates pressure sensitivity based on pointer velocity — draw quickly for thin strokes, slowly for thick ones. Brush size is adjustable via the toolbar slider (1–60px). Supports any color set in the color palette.
Removes strokes from the canvas. Shares the size slider with the pencil tool. Best used at a larger size for blocking out areas, or small for precise corrections. Does not affect the underlying canvas background.
Draw a freeform selection boundary around any region of the canvas. Once closed, the selected area can be repositioned by dragging. Useful for moving a character or element without redrawing. Press Escape to deselect.
Flood-fills any bounded area with the currently active color. Click inside a closed shape to fill it instantly. Works best with the pencil tool to create solid tonal areas quickly. Respects existing stroke boundaries.
The toolbar provides quick-access color swatches for common values: black, a mid-grey, white, and a warm red. Click the dashed circle at the right of the palette to open the native OS color picker for a fully custom color.
Toggle compositional overlays on the canvas. The guides button cycles through rule-of-thirds grid, safe-area markers, and off. Guides are visual references only and do not appear in exported frames or video.
Controls the diameter of both the pencil and eraser tools. Drag left to reduce, right to increase. The range is 1px (fine detail) to 60px (broad stroke or fill). The current size is reflected by the cursor shape on canvas.
Enables or disables velocity-based pressure simulation. When active, stroke weight varies with drawing speed. When disabled, strokes are rendered at a consistent width equal to the current brush size — useful for precise linework.
When FRAME opens, you are presented with a new empty board. Use the Board panel in the sidebar to set your project name and author. These fields are included in all exports.
To change the canvas aspect ratio, open the Board settings and select from the available formats: 16:9 (standard film/TV), 9:16 (vertical/social), or 1:1 (square). This setting applies to the entire board and cannot be changed per-frame.
Frames are added sequentially. The active frame is always shown in the canvas area. The timeline at the bottom of the screen shows all frames as thumbnail strips — click any thumbnail to jump to it.
There is no limit to the number of frames per board. For long sequences, use the timeline scroll to navigate. The frame count and current position are shown in the toolbar status area.
The Frame panel in the sidebar holds all per-frame production data. Every field you fill in is saved automatically and included in exports.
Shot type and camera movement are set via icon grids in the sidebar — no typing required. These values feed directly into the XML export.
FRAME supports multiple storyboards in a single session. Each board is a completely independent project with its own frames, metadata, and export settings.
In the demo version, all data is stored in your browser's local storage. No account or login is required. Data persists between sessions but is cleared if browser storage is reset.
Set the duration for each frame in the Frame panel sidebar. Duration is entered in seconds and can be a decimal value (e.g. 1.5 for a one-and-a-half second hold).
Press Space or click the Play button in the toolbar to start playback. FRAME advances through frames at the specified durations, looping back to the start automatically. Press Space again or Escape to stop.
The video export uses the browser's MediaRecorder API to capture live canvas playback. FRAME plays through your sequence at the set frame durations and records the output directly to a video file.
Click the Export button in the toolbar and select Video to begin. A download prompt appears automatically when the export is complete.
The XML export produces a structured shot list document containing all frame metadata from the board. Each frame maps to a <frame> element with the following fields:
The XML file is valid and parseable by standard XML tools. It can be imported into production management software or used as a reference document for your shooting crew.
All exports use the full canvas resolution. The default canvas dimensions per format are:
The canvas renders at this resolution regardless of the size it appears on screen. For production use, these dimensions are suitable for editing timelines, pitch presentations, and animatic review. If higher resolution is required, this will be a configurable setting in a future version.
What's Coming
Roadmap is indicative. Priorities may shift. Feedback welcome.