Search blocks by description or jump to a page.
A static video trim tool with a preview frame and timecode, a transport row, a filmstrip timeline with trim handles and playhead, and readout chips.
The source for every Application block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Video Trim Blueprint renders a trim tool as static markup for product-demo.mp4: a header with a Trim video title and the filename, then a Placeholder preview frame with a floating 00:12.4 / 00:48.0 timecode readout. A centered transport row holds back, pause, and forward buttons. Below it a filmstrip timeline lays eight frame cells in a ruled track, with dimmed regions on the trimmed ends, in and out handles, a rule of tick labels (00:00 through 00:48), and a playhead marker.
The In, Out, and Duration values sit in a chip row beside a Drag the handles hint, and Cancel and Apply trim close the footer. The whole block is zero-JS: no useState, no Radix, just markup and inline widths that screenshot correctly in every preview context.
Reach for this block as the trim step in a video upload or editing flow, replacing the Placeholder frames with your player element and wiring the handles and Apply trim button to your trim handler.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the post-upload video trim step. Other configurations:
Tip: keep the in, out, and duration chips visible; they confirm the selection length before a user commits the trim.