Export Settings - Complete Guide
Export your whiteboard animations as high-quality videos with customizable resolution, frame rate, and quality settings. This guide covers the complete export workflow from settings to final download.
Overview
The Export system renders your animation frame-by-frame and encodes it into a video file. The hidden export stage captures each frame at your specified resolution and assembles them into an MP4 or WebM video.
EXPORT WORKFLOW
┌─────────────────────────────────────────────────────────────────────────┐
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ Configure │ ─▶ │ Render │ ─▶ │ Download │ │
│ │ Settings │ │ Frames │ │ Video │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │
│ Resolution Frame-by-frame MP4/WebM file │
│ Frame Rate capture + encode ready to share │
│ Quality │
│ Format │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Opening the Export Dialog
File → Export or File → Export Video
Method 2: Keyboard Shortcut
| Platform | Shortcut |
|---|
| Windows/Linux | Ctrl+Shift+E |
| macOS | ⌘+Shift+E |
Export Dialog Interface
┌──────────────────────────────────────────────────────────────────────────┐
│ Export [X] │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ Resolution │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ 1080p (1920×1080) ▼ │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
│ Frame Rate │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ 30 fps (Standard) ▼ │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
│ Quality │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ High (10 Mbps) - Best quality ▼ │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
│ Format │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ MP4 (H.264) - Best compatibility ▼ │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
├──────────────────────────────────────────────────────────────────────────┤
│ [ Cancel ] [ Export ] │
└──────────────────────────────────────────────────────────────────────────┘
Resolution Settings
Choose your output video dimensions:
| Preset | Dimensions | Use Case |
|---|
| 4K | 3840 × 2160 | Professional/broadcast (Pro plan) |
| 1080p | 1920 × 1080 | YouTube, presentations (recommended) |
| 720p | 1280 × 720 | Fast iteration, web sharing |
| 480p | 854 × 480 | Previews, low bandwidth |
Resolution Selection
RESOLUTION PRESETS
┌─────────────────────────────────────────────────────────────────────────┐
│ │
│ 4K (3840×2160) ████████████████████████████ 8.3 megapixels │
│ Pro plan only │
│ │
│ 1080p (1920×1080) ████████████████ 2.1 megapixels │
│ ★ Recommended for YouTube │
│ │
│ 720p (1280×720) █████████████ 0.9 megapixels │
│ Fast exports, web sharing │
│ │
│ 480p (854×480) ███████ 0.4 megapixels │
│ Previews only │
│ │
└─────────────────────────────────────────────────────────────────────────┘
For YouTube uploads, use 1080p at minimum. YouTube compresses videos, so higher source quality preserves more detail.
Plan Limitations
| Plan | Max Resolution | Notes |
|---|
| Free | 720p | Includes watermark |
| Pro | 1080p | No watermark |
| Enterprise | 4K | No watermark, priority rendering |
Frame Rate Settings
Control animation smoothness:
| Frame Rate | Description | File Size Impact |
|---|
| 24 fps | Cinema - Filmic motion | Smallest |
| 30 fps | Standard - Balanced (recommended) | Medium |
| 60 fps | Smooth - Fluid animations | Largest |
Frame Rate Selection
FRAME RATE OPTIONS
┌─────────────────────────────────────────────────────────────────────────┐
│ │
│ 24 fps (Cinema) │
│ ├── Classic film look │
│ ├── Slightly choppy motion │
│ └── Best for artistic/stylized content │
│ │
│ 30 fps (Standard) ★ RECOMMENDED │
│ ├── Industry standard for web video │
│ ├── Good balance of smoothness and file size │
│ └── Works well for most animations │
│ │
│ 60 fps (Smooth) │
│ ├── Ultra-smooth motion │
│ ├── Best for fast camera movements │
│ └── 2x file size vs 30 fps │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Higher frame rates double or triple export time and file size. Use 30 fps unless you have specific requirements for smoother motion.
Quality Settings
Control video bitrate and file size:
| Quality | Bitrate | Use Case |
|---|
| Low | 2 Mbps | Small files, web previews |
| Medium | 5 Mbps | Balanced quality and size |
| High | 10 Mbps | Best quality, larger files |
Bitrate Comparison
QUALITY LEVELS
┌─────────────────────────────────────────────────────────────────────────┐
│ │
│ High (10 Mbps) │
│ ████████████████████████████████████████ │
│ • Sharpest details on fine strokes │
│ • Minimal compression artifacts │
│ • ~75 MB per minute at 1080p │
│ │
│ Medium (5 Mbps) │
│ ████████████████████ │
│ • Good quality for most uses │
│ • Some compression on complex scenes │
│ • ~38 MB per minute at 1080p │
│ │
│ Low (2 Mbps) │
│ ████████ │
│ • Smaller file sizes │
│ • Visible compression on detailed areas │
│ • ~15 MB per minute at 1080p │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Avoid Low quality for final deliverables. Low bitrate causes visible compression artifacts, especially on thin strokes and detailed SVG paths.
Choose your output video format:
| Format | Codec | Compatibility | Use Case |
|---|
| MP4 | H.264 | Universal | YouTube, social media, presentations |
| WebM | VP8 | Web browsers | Web embedding, HTML5 video |
FORMAT COMPARISON
┌─────────────────────────────────────────────────────────────────────────┐
│ │
│ MP4 (H.264) ★ RECOMMENDED │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ ✓ Plays everywhere (YouTube, Vimeo, social media) │ │
│ │ ✓ Best compression efficiency │ │
│ │ ✓ Hardware acceleration on most devices │ │
│ │ ✓ Supported by all video editors │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
│ WebM (VP8) │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ ✓ Open format, royalty-free │ │
│ │ ✓ Good for web embedding │ │
│ │ ✗ Limited support on older devices │ │
│ │ ✗ Some video editors don't support it │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Export Progress
Progress Modal
┌──────────────────────────────────────────────────────────────────────────┐
│ ⏳ Exporting... [X] │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ ████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ 47% │
│ │
│ Frames: 423 / 900 │
│ Elapsed: 1:24 │
│ Estimated: ~1:30 remaining │
│ │
├──────────────────────────────────────────────────────────────────────────┤
│ [ Cancel ] │
└──────────────────────────────────────────────────────────────────────────┘
Export Phases
| Phase | Description |
|---|
| Settings | Configure export options |
| Exporting | Rendering frames (shows progress) |
| Complete | Download ready |
| Error | Export failed (shows error message) |
Export Complete
Success State
┌──────────────────────────────────────────────────────────────────────────┐
│ ✅ Export Complete [X] │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ Your video is ready! │
│ │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ 📁 my-animation.mp4 │ │
│ │ │ │
│ │ Resolution: 1920×1080 │ │
│ │ Duration: 30 seconds │ │
│ │ Size: 45.2 MB │ │
│ │ Render time: 2:15 │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
├──────────────────────────────────────────────────────────────────────────┤
│ [ Close ] [ Download ] │
└──────────────────────────────────────────────────────────────────────────┘
Browser Compatibility
Export works best on Chrome and Edge. Other browsers may have limitations with video encoding.
Browser Support
| Browser | Support | Notes |
|---|
| Chrome | ✅ Full | Recommended |
| Edge | ✅ Full | Recommended |
| Firefox | ⚠️ Limited | May have encoding issues |
| Safari | ⚠️ Limited | WebM not supported |
Why Chrome/Edge?
The export system uses the MediaRecorder API with H.264 encoding. Chrome and Edge have the best support for this API with hardware acceleration.
BROWSER ENCODING SUPPORT
┌─────────────────────────────────────────────────────────────────────────┐
│ │
│ Chrome / Edge │
│ ├── ✓ H.264 hardware encoding │
│ ├── ✓ VP8/VP9 encoding │
│ ├── ✓ High bitrate support │
│ └── ✓ Stable long exports │
│ │
│ Firefox │
│ ├── ✓ VP8 encoding only │
│ ├── ✗ No H.264 (patent reasons) │
│ └── ⚠️ May fail on long videos │
│ │
│ Safari │
│ ├── ✓ H.264 encoding │
│ ├── ✗ No WebM support │
│ └── ⚠️ Limited MediaRecorder API │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Recommended Settings
For YouTube
| Setting | Value |
|---|
| Resolution | 1080p (1920×1080) |
| Frame Rate | 30 fps |
| Quality | High (10 Mbps) |
| Format | MP4 |
For Fast Previews
| Setting | Value |
|---|
| Resolution | 720p (1280×720) |
| Frame Rate | 30 fps |
| Quality | Medium (5 Mbps) |
| Format | MP4 |
For Professional Delivery
| Setting | Value |
|---|
| Resolution | 1080p or 4K |
| Frame Rate | 30 fps (or 24 for cinema) |
| Quality | High (10 Mbps) |
| Format | MP4 |
For Web Embedding
| Setting | Value |
|---|
| Resolution | 720p (1280×720) |
| Frame Rate | 30 fps |
| Quality | Medium (5 Mbps) |
| Format | WebM (or MP4 with fallback) |
File Size Estimation
Approximate file sizes at High quality:
| Resolution | 30 sec | 1 min | 5 min |
|---|
| 4K | ~150 MB | ~300 MB | ~1.5 GB |
| 1080p | ~38 MB | ~75 MB | ~375 MB |
| 720p | ~17 MB | ~35 MB | ~175 MB |
| 480p | ~8 MB | ~15 MB | ~75 MB |
Actual file sizes vary based on animation complexity. Simple animations compress better than detailed scenes with many simultaneous animations.
Pre-Export Checklist
Before exporting, verify these items:
PRE-EXPORT CHECKLIST
┌─────────────────────────────────────────────────────────────────────────┐
│ │
│ [ ] Preview entire animation with Play button │
│ [ ] Check all scenes render correctly │
│ [ ] Verify audio sync (if using audio) │
│ [ ] Test hand animations complete properly │
│ [ ] Check camera movements are smooth │
│ [ ] Verify no missing assets (broken images) │
│ [ ] Save project before exporting │
│ │
│ OPTIONAL: │
│ [ ] Export a short test (first 5 seconds) to verify settings │
│ [ ] Check sharpness on fine strokes in test export │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Troubleshooting
| Cause | Solution |
|---|
| Browser not supported | Switch to Chrome or Edge |
| Insufficient memory | Close other tabs, reduce resolution |
| Project not saved | Save project and try again |
Export Stalls at Percentage
| Cause | Solution |
|---|
| Complex scene rendering | Wait longer, or simplify scene |
| Memory exhausted | Export in smaller segments |
| Browser tab inactive | Keep tab focused during export |
Video Has Missing Frames
| Cause | Solution |
|---|
| Animation not precomputed | Play through animation before export |
| Worker timeouts | Reduce animation complexity |
| Browser throttling | Keep browser tab active |
Audio Out of Sync
| Cause | Solution |
|---|
| Variable frame rate | Use constant frame rate (30 fps) |
| Audio loaded late | Ensure audio fully loaded before export |
| Timeline mismatch | Verify audio track timing in timeline |
Low Quality Output
| Cause | Solution |
|---|
| Low quality setting | Use "High" quality |
| Low resolution | Use 1080p or higher |
| Heavy compression | Check upload platform re-encoding |
Blurry Strokes
| Cause | Solution |
|---|
| Resolution too low | Export at 1080p minimum |
| Quality too low | Use High (10 Mbps) bitrate |
| Scaled-up content | Use source SVGs at export resolution |
Export Telemetry
The export system tracks these events for diagnostics:
| Event | Data |
|---|
export.start | Settings, timestamp |
export.progress | Completed frames, total frames |
export.complete | Duration, bytes, frame count |
export.error | Error message, phase |
Keyboard Shortcuts
| Shortcut | Action |
|---|
Ctrl+Shift+E / ⌘+Shift+E | Open Export dialog |
Escape | Close dialog (settings phase only) |
Enter | Start export (when in settings) |
Best Practices
For Sharp Lines
- Export at 1080p or higher
- Use High quality (10 Mbps)
- Ensure source SVGs are vector, not rasterized
For Smooth Animations
- Use 30 fps minimum
- Precompute LUTs before export (Play through once)
- Keep browser tab active during export
For Small File Sizes
- Use 720p for web sharing
- Use Medium quality for previews
- Keep animations under 2 minutes per export
For Consistent Results
- Always use Chrome or Edge
- Close unnecessary browser tabs
- Don't switch tabs during export
File Locations
| Component | Path |
|---|
| Export Progress Modal | frontend/src/components/dialogs/ExportProgressModal.tsx |
| Export System | frontend/src/features/export/app/ExportSystem.tsx |
| Hidden Export Stage | frontend/src/plugins/exporter-video-hiddenstage/HiddenExportStage.tsx |
| Export Telemetry | frontend/src/telemetry/exportTelemetry.ts |