What is Director's Desk?

Director's Desk is a single-file, self-contained production management tool built for filmmakers, directors, and creative teams. It runs entirely in your browser — no server, no account, no internet connection required after the file is downloaded.

Everything is stored locally in your browser's localStorage and can be exported or imported as a portable .json file. The entire application is one .html file — open it in any modern browser and start working immediately.

Feature Summary

Dashboard

The Dashboard is the first tab you see on launch. It auto-aggregates data from all other modules and shows:

Scripts

The Scripts module is a lightweight screenplay drafting environment. Each script record contains:

Formatting Toolbar

Inside the script editor, five quick-insert buttons follow standard screenplay conventions:

Story & Scenes

Scene breakdown follows traditional production design practice. Each scene record maps to a single shootable unit:

Status colours in the list: Planned grey · Shooting amber · Done green. The Dashboard progress bar reflects Done scenes automatically.

Team Resources

Each team member record stores contact and scheduling information:

Use the Role filter dropdown to quickly view only one department (e.g. show all Sound crew).

Equipment

Track every piece of gear your production needs or owns:

The Dashboard flags missing items in red so nothing falls through the cracks on shoot day.

Drawboard

The Drawboard is a full canvas drawing environment for storyboards, shot diagrams, location sketches, and production notes. It supports multiple boards — one per scene, per reel, or however you organise your work.

Drawing Tools

Toolbar Controls

Multi-Board Management

Create unlimited boards for a single production. Boards are listed as tabs at the top of the Drawboard toolbar.

Getting Started

Writing a Script

Using the Drawing Tools

Export & Import

The export/import system serialises your entire production database — all scripts, scenes, team members, equipment records, and Drawboard images — into a single portable JSON file.

Exporting

Importing

Architecture

Director's Desk is a pure vanilla implementation. No build toolchain, no package manager, no external dependencies whatsoever. The entire application ships as a single .html file.

Data Structure

The global state object is the single source of truth for all application data. It is serialised to JSON on every save and stored in localStorage under the key directorDesk.

// Global state object
var state = {
  scripts: [
    {
      id:      "uid_string",
      title:   "Script Title",
      status:  "draft" | "review" | "final",
      version: "v1.0",
      genre:   "Drama",
      notes:   "Synopsis...",
      content: "FADE IN:\n\nINT. ..."
    }
  ],
  scenes: [
    {
      id:       "uid_string",
      number:   "01",
      intExt:   "INT" | "EXT" | "INT/EXT",
      location: "Warehouse",
      time:     "DAY" | "NIGHT" | "DAWN" | "DUSK",
      status:   "planned" | "shooting" | "done",
      chars:    "JOHN, MARY",
      desc:     "Scene description...",
      notes:    "Director notes..."
    }
  ],
  team: [
    {
      id:           "uid_string",
      name:         "Full Name",
      role:         "DP",
      contact:      "email@example.com",
      availability: "available" | "partial" | "unavailable",
      notes:        "Bio / credits..."
    }
  ],
  equipment: [
    {
      id:       "uid_string",
      name:     "Sony FX3",
      category: "Camera",
      status:   "available" | "rented" | "missing",
      owner:    "Owned",
      notes:    "Serial: ABC123"
    }
  ],
  drawboards: [
    {
      id:        "uid_string",
      name:      "Board 1",
      imageData: "data:image/png;base64,...",
      // stored on board switch or export
      strokes:   [],  // reserved for future vector export
      texts:     []   // reserved
    }
  ]
};

Canvas Engine

The Drawboard uses the HTML5 Canvas 2D API directly. Key implementation decisions:

HiDPI / Retina Support

The canvas is scaled by window.devicePixelRatio so drawings appear sharp on all screens. The logical drawing coordinates match CSS pixels; the physical canvas buffer is multiplied by DPR.

db.dpr = window.devicePixelRatio || 1;
dbCanvas.width  = w * db.dpr;
dbCanvas.height = h * db.dpr;
dbCtx.scale(db.dpr, db.dpr);

Touch Input

Touch events are mapped to the same pointer handlers as mouse events using a thin wrapper. touch-action: none on the canvas prevents the browser from intercepting scroll or zoom gestures during drawing.

function dbTouchStart(e) {
  e.preventDefault();  // block browser scroll/zoom
  var t = e.touches[0];
  dbPointerDown({ clientX: t.clientX, clientY: t.clientY });
}

Shape Preview

Rectangles and ellipses show a live preview while dragging. Before the first pointer move, a full getImageData snapshot is taken. On each move, the snapshot is restored with putImageData before redrawing the shape at the new dimensions. On pointer-up, the final shape is committed.

Eraser

The eraser uses globalCompositeOperation = 'destination-out' to punch transparent holes into the canvas rather than painting white. This preserves transparency for clean PNG export.

Pencil vs Pen

Both tools use the same continuous path-drawing loop but differ in alpha and shadow:

Storage & Persistence

localStorage Key

All data is stored under a single key: directorDesk. The value is a JSON string of the complete state object.

Save Strategy

The save() function is called immediately after every mutation (form save, delete, board change). There is no debounce or batch — writes are synchronous and instant.

ID Generation

Every record gets a unique ID generated by combining timestamp base-36 encoding with 4 random alphanumeric characters:

function uid() {
  return Date.now().toString(36) +
         Math.random().toString(36).slice(2, 6);
}

Drawboard Persistence

Canvas image data is not continuously serialised on every stroke (that would be too slow). Instead, dbSaveCurrentBoard() is called in three situations: when switching boards, when creating a new board, and when clicking Export. The canvas is serialised as a data:image/png;base64 string stored in state.drawboards[i].imageData.

Text Tool

Script Editor

Form Dialogs

Production Workflow

A recommended order for setting up a new production from scratch:

Drawboard Pro Tips

Use Pencil for thumbnails, Pen for finals. The Pencil's lower opacity is perfect for fast rough storyboard thumbnails. Once you like a composition, switch to Pen and re-draw on top for clean lines.

Combine shapes and freehand. Use Rect and Circle to block out camera frames and subject areas, then use Pen to draw characters and details inside them.

Label everything with Text. Add scene numbers, shot codes, and lens notes directly onto the storyboard panels using the Text tool. Set font size to 14–16px for small annotations, 24–32px for shot headers.

One board per shot list. If you have many scenes, consider naming boards by shoot day rather than scene — "Day 1 — INT. Office", "Day 2 — EXT. Street". This mirrors how you'll actually work on set.

Script Writing Tips

Use the version field deliberately. Start at v0.1 for rough outlines. Promote to v1.0 when the structure is locked. Increment by 0.1 for minor revisions and 1.0 for full redrafts after notes.

Keep synopsis and content separate. The Notes / Synopsis field is for your quick reference — the one-paragraph pitch. The Script Content field is for the full screenplay. Don't duplicate between them.

Sharing with Your Team

Export the JSON and send it to your AD, DP, or producer. They import it on their machine, and immediately have full access to the script, scene breakdown, and storyboards. They can add team members, update equipment status, and re-export. You import their version and the data merges on load.