Shylesh Monceey
Available — Bangalore - senior design leadership roles
← Pandora’s Box
Experiment · Video editing · Built with Claude Code

Open Canvas — a video editor shaped like a canvas.

A Figma-style, node-based video editor that runs in the browser. Footage sits on an infinite canvas as nodes, you wire it into frames, and every frame gets its own timeline. Here is what that model buys, and the small decisions that shaped it.

Type · Experiment Runs · In the browser Stack · Next.js + React Export · MP4, up to 4K
01 / The canvas

Everything lives on one surface. Footage included.

The model

Most editors keep media in a bin — a list in a corner, where a clip is a filename until you scrub it. Here every asset is a node on the canvas, with its thumbnail, its kind and its duration on its face.

You wire those nodes into frames, the compositions that get exported. A wire is the real relationship between a clip and where it is used, so you can read what feeds each frame straight off the canvas.

The Open Canvas editor: five media nodes in a column on the left, wires fanning out into three chained frames named Opening, Split compare and End card, with a sticky note and the timeline along the bottom.
01 The working surface — media nodes on the left, three frames chained left to right, each transition named on its wire. The footage is synthetic, generated for these screenshots.
02 / Containers

Nothing gets cropped before you have seen it.

The decision

A frame can take a layout — split screens, talking-head overlays, grids — and each slot in it is a container. Media dropped into a slot used to fill it. Filling means cropping, and cropping on arrival throws away part of every clip before anyone has looked at it. It is worst with a tall phone video in a wide slot.

So media now arrives whole, and cropping waits until you ask for it.

A slot that crops on sight makes a decision you have not made yet.

Reframing

The eight handles drag the picture’s own box, anchored on the side opposite the one you grab. The container works as a mask, so nothing can squash or stretch the image. Only one set of handles is ever on screen, and Esc walks back out one level per press.

A container selected inside a frame: a floating selection bar over the canvas, and a properties panel on the right with fit, position, size, role, rotation, corner, opacity, fill and blur controls.
02 Two surfaces, one set of values — the floating bar for what you adjust with your hands on the canvas, the panel for what you set once and leave.
03 / The timeline

A real editing timeline, for every frame.

Why it exists

Node editors tend to stop at the graph, which works until a clip needs to start four and a half seconds in and fade out over half a second. So each frame has its own track timeline under the canvas: stacked video tracks, audio beneath them, filmstrips on the video and waveforms on the audio.

The tracks use the labels editors already know — V1 V2 A1. Trim, split, speed, fades and volume sit where you would expect them.

The timeline: a B-roll clip on track V2, an Establishing wide clip with visible fade ramps on V1, and a Music bed audio clip with a waveform on A1.
03 The Cutdown frame — B-roll on V2, a wide shot with its fade ramps drawn on V1, a music bed on A1.
04 / Sequences

Chain frames and they export as one video.

The rule

Link one frame to the next and they play through as one piece, and export as one file. The transition lives on the wire between them, labelled with its type and length, so the rhythm of an edit reads without pressing play.

Unlinked frames each export on their own. There is no separate sequence object to keep in sync — the wire is the sequence.

A transition selected between two frames, with a picker offering cross fade, slide left, slide right, slide up, wipe and cut.
04 Select a wire to pick its transition — cross fade, slides, wipe or a hard cut.
05 / Reach

The same project, on a phone.

Below 820px

The canvas takes the whole window. The properties panel and the timeline become sheets on a thumb rail, and two fingers pinch-zoom the canvas. Same project file, same graph, same export.

Open Canvas at phone width: the canvas fills the screen with media nodes and wires, tool rails on the left edge, and a thumb rail of controls at the bottom right.
05 390 × 844 — canvas edge to edge, controls under the thumb.
A tool flyout opened from the left rail of the editor, over the node canvas.
06 Tools open from the left rail, kept apart from the Saved rail above — getting back into your work is a different job from adding to it.
06 / Output

What actually comes out of the export.

Rendered, not captured

These two frames came from the render path, not from the preview. Export records the canvas in real time — MP4 with H.264 and AAC where the browser can record it, WebM otherwise — at 30 fps, up to 4K. Editing and export run on your machine; footage only leaves it if you choose to save it to your account.

Rendered frame: a wide teal clip letterboxed in the main area, with a vertical warm-toned clip filling a narrow panel on the right.
07 Opening — the talking-head layout, 1280 × 720
Rendered frame: the words Open Canvas in white on a near-black background.
08 End card, 1280 × 720
The export menu open in the top right corner of the editor, over the node canvas.
09 Export — one file per chain; unlinked frames each get their own.
On icons

There is no emoji anywhere in the interface. Every glyph is a stroked SVG from one 24 × 24 sprite — 87 symbols drawn in the current text colour — so the interface follows its theme and looks the same on every machine.

117
Engine modules, split out of what began as one 15,267-line HTML file
202
Of 241 commits co-written with Claude Code
87
Interface icons, all from a single SVG sprite
More in Pandora’s Box

Let’s build something good.

shylesh@npl.live