The <video-piper-editor> web component

Let people on your site trim, stitch and splice your videos with the same timeline editor the Video Piper app has: drag clips to reorder them, drag their edges to trim, split, cut a section out, and pick crossfades. Save makes one new video in your account (the originals are untouched), and the editor shows its progress. Your API key stays on your server: the page gets an edit token for the videos you choose.

// 1. Your server: an endpoint that makes a token (POST /edit-tokens with your API key)
app.post("/api/edit-token", async (req, res) => {   // check the user is signed in, as you need
  const videoIds = await videosThisUserMayEdit(req.user.id);   // your own lookup: up to 20 of your finished videos
  const r = await fetch(`${API}/edit-tokens`, { method: "POST",
    headers: { Authorization: `Bearer ${API_KEY}`, "Content-Type": "application/json" },
    body: JSON.stringify({ videoIds, expiresIn: 900, maxSeconds: 600, metadata: { userId: String(req.user.id) } }) });
  res.status(r.status).json(await r.json());   // { token: "vpe_…", expiresAt, videoIds }
});

// Program.cs (ASP.NET Core 8+), set up as in the recorder's example above.
// A one-edit token for <video-piper-editor token-url="/api/edit-token">.
app.MapPost("/api/edit-token", async (ClaimsPrincipal user, IHttpClientFactory http) =>
{
    var userId = user.FindFirstValue(ClaimTypes.NameIdentifier) ?? "anonymous";
    var videoIds = new[] { "VIDEO_ID" };  // the videos this user may edit: up to 20, yours, finished
    using var response = await http.CreateClient("videopiper").PostAsJsonAsync("edit-tokens", new
    {
        videoIds, expiresIn = 900, maxSeconds = 600, metadata = new Dictionary<string, string> { ["userId"] = userId },
    });
    return Results.Content(await response.Content.ReadAsStringAsync(), "application/json", statusCode: (int)response.StatusCode);
});  // add .RequireAuthorization() so only your signed-in users get tokens

<!-- 2. Your page: the editor asks token-url for a token when it loads -->
<script src="https://videopiper.com/editor/editor.js"></script>
<video-piper-editor token-url="/api/edit-token"></video-piper-editor>
<script>
  document.querySelector("video-piper-editor")
    .addEventListener("vp-edit-done", (e) => console.log("new video", e.detail.videoId, e.detail.status));
</script>

• Events (they bubble): vp-edit-ready ({videoIds}: the editor has loaded), vp-edit-created ({videoId}: Save made the edit), vp-edit-done ({videoId, status}: processing finished; status is SUCCEEDED or a failure) and vp-edit-error ({code, message}, with a message fit to show). You also get the usual video.ready webhook for the new video, with the token's metadata.
• After Save it shows progress, then the finished video. If <video-piper> (/player/player.js) is on the page it plays the result with it; otherwise with a plain video element.
• Styling: it fills its container's width and follows the visitor's light or dark setting. Theme it with the CSS custom properties --vp-bg, --vp-panel, --vp-text, --vp-muted, --vp-line, --vp-accent, --vp-accent-soft, --vp-ok and --vp-bad, e.g. video-piper-editor { --vp-accent: #e11d74; }. Its styles live in its shadow root and never touch your page. The keyboard shortcuts (space, arrows, S, I, O, Delete) work only while the editor has focus.
• Size: editor.js includes the editor itself (about 80 KB compressed), so load it only on the pages that use it.
• Your allowed domains apply as usual: the previews only play on your sites.

Edit tokens

POST /edit-tokens (with your API key, from your server) makes a token for editing the videos you name into exactly one new video:

{ "videoIds": ["3f2a…", "9c1b…"],  // 1 to 20 of your finished videos
  "expiresIn": 900,                // 60 to 86400 seconds; default 900
  "maxSeconds": 600,               // the longest the result may be (after crossfades)
  "title": "Highlights",           // the new video's name
  "metadata": { "userId": "42" } } // set on the new video, for your webhooks and listings
→ 201 { "token": "vpe_…", "expiresAt": 1790910405, "videoIds": ["3f2a…", "9c1b…"] }

• What the browser can do with it, and nothing more: read those videos' length, size, a signed playback link, poster and filmstrip frames (GET /edit-session); create one edit whose clips use only those videos, at most maxSeconds long; and read the status of the video that edit made. Anything else (listing or deleting videos, other videos, uploads, your account, making tokens) answers 403 EDIT_TOKEN_SCOPE; a second edit, 409 EDIT_TOKEN_USED; an edit longer than maxSeconds, 400 EDIT_TOO_LONG. A refused edit leaves the token usable.
• You decide the rest. The new video's name and metadata come from the token, whatever the browser sends, and the browser can't ask for a higher quality, captions or redactions.
• The videos must be yours and finished when you make the token (404 NOT_FOUND, 409 EDIT_SOURCE_NOT_READY, with details naming each).
• It's shown once (only a hash is kept), expires on its own, and once its edit exists it keeps working for that video's status for 24 hours. The new video is processed and billed like any edit made with your key, on any plan, and the token counts toward your key's rate limits. Your Account page has these snippets filled in with your addresses, and a place to try the editor.