Web Editor Guide¶

The LooK web editor provides a visual interface for creating and editing demo videos with enterprise-grade features.

Starting the Editor¶

look serve

By default, this opens http://localhost:3847 in your browser.

Options¶

# Use a different port
look serve -p 8080

# Don't open browser automatically
look serve --no-open

Interface Overview¶

Header Navigation¶

The header includes: - Logo - L👀K Studio branding - Navigation - Editor, Templates, Docs tabs - API Status - Visual indicator showing API connection status - Settings - Configure API keys and preferences

┌─────────────────────────────────────────────────────────────┐
│  L👀K Studio    Editor | Templates | Docs      [API] [⚙️]  │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│                     Preview Canvas                          │
│                                                             │
├─────────────────────────────────────────────────────────────┤
│  ◀ ▶ ⏸  [0:00 / 0:25]  ━━━━━━━●━━━━━━━━━━━━━━━━  🔊      │
├─────────────────────────────────────────────────────────────┤
│                     Timeline Track                          │
└─────────────────────────────────────────────────────────────┘

Main Sections¶

1. Preview Canvas - Real-time preview of your demo
2. Playback Controls - Play, pause, scrub through video
3. Timeline - Visual editing of clips, effects, and zoom
4. Sidebar - Script editor, markers, and settings tabs

First-Run Onboarding¶

When you first open the editor, a guided tour highlights key features:

1. URL Input - Where to enter your website URL
2. Templates - Pre-built demo configurations
3. Settings - API key configuration
4. Export - Export your finished demo

You can restart the tour from Settings → About → "Restart Tour".

Settings & API Configuration¶

Click the ⚙️ Settings button or the API Status indicator to open settings.

API Keys Tab¶

Configure your AI service credentials:

API keys are stored securely in your browser's localStorage and sent with each API request.

Connection Status¶

The settings panel shows real-time connection status: - 🟢 Connected - API key validated - 🟡 Checking - Validating connection - 🔴 Error - Connection failed - ⚫ Not configured - No API key set

Preferences Tab¶

Templates¶

Access pre-built demo configurations from the Templates tab:

Click a template to apply its optimized settings, then enter your URL to start.

Creating a New Project¶

From URL¶

1. Enter your website URL in the input field
2. Click Generate Demo for AI-automated recording
3. Or click Live Record for manual control

From Templates¶

1. Click Templates in the header
2. Select a template that matches your use case
3. Enter your URL
4. Click Generate Demo

Timeline Editing¶

Playback Controls¶

Zoom Keyframes¶

Zoom keyframes control when and where the camera zooms in.

Adding a Zoom Keyframe: 1. Scrub to the desired time 2. Click the + Zoom button 3. Adjust zoom level (1.0 - 3.0) 4. Set focus point by clicking on preview

Editing Zoom: - Drag keyframes on timeline to reposition - Double-click to edit properties - Right-click to delete

Cursor Trail¶

The timeline shows cursor movement as a path. You can: - Adjust cursor smoothing - Modify click effect timing - Hide cursor for specific sections

Settings Panel¶

Video Settings¶

Cursor Settings¶

Click Effects¶

Voice Settings¶

Keyboard Shortcuts¶

Press Shift + ? to view all keyboard shortcuts in the editor.

Playback¶

Editing¶

View¶

Navigation¶

Exporting¶

Quick Export¶

1. Click Export button
2. Choose preset (YouTube, Twitter, etc.)
3. Click Export

Custom Export¶

1. Click Export → Custom
2. Configure:
3. Resolution
4. Bitrate
5. Format
6. Audio settings
7. Choose output location
8. Click Export

Export Presets¶

Project Management¶

Saving Projects¶

Projects auto-save to:

~/.look-demo/projects/<project-id>/

Manual save: Ctrl/Cmd + S

Opening Projects¶

# List all projects
look projects

# Open specific project
look edit abc12345

Project Files¶

Each project contains:

<project-id>/
├── project.json     # Project metadata
├── recording.mp4    # Raw recording
├── cursor.json      # Cursor data
├── analysis.json    # AI analysis
├── script.txt       # Voiceover script
└── exports/         # Exported videos

Tips & Best Practices¶

Smooth Zoom Transitions¶

• Use 800-1000ms transition duration
• Don't zoom more than 2x in one transition
• Match zoom to voiceover emphasis

Cursor Visibility¶

• Use contrasting cursor color
• Enable glow on busy backgrounds
• Increase size for mobile-focused demos

Click Effects¶

• Keep duration short (300-500ms)
• Match color to your brand
• Use consistent effect throughout

Script Editing¶

• Keep sentences short
• Match pacing to video
• Emphasize key features

Troubleshooting¶

Video Won't Play¶

• Check browser console for errors
• Ensure FFmpeg processed video correctly
• Try a different browser

Timeline Lag¶

• Reduce preview quality
• Close other applications
• Use a shorter preview section

Export Fails¶

• Check disk space
• Verify FFmpeg is installed
• Check console for error details

API Access¶

The editor runs on a local API server. For programmatic access:

# Base URL
http://localhost:3847/api

# Endpoints
GET  /api/projects          # List projects
GET  /api/projects/:id      # Get project
POST /api/projects          # Create project
PUT  /api/projects/:id      # Update project
DELETE /api/projects/:id    # Delete project
POST /api/render            # Start render
GET  /api/render/:id/status # Check render status

See API.md for full documentation.