A video editor component your users can trim, stitch and splice in your app

What the editor component does

<video-piper-editor> embeds the same timeline editor that the Video Piper app uses. Your users arrange some of your finished videos into a new one: drag clips to reorder them, drag their edges to trim, split at the playhead, cut out a section, and pick a crossfade or a fade through black for each join. Pressing Save makes one new video in your account (the originals are untouched), and the editor shows its progress, then the finished video. If <video-piper> is on the page it plays the result with it; otherwise it uses a plain video element.

Behind it is the same edit model as the video trimming API: every gesture produces the clips an edit takes, so the result is frame-accurate, up to 50 clips with transitions of 0.1 to 3 seconds. Keyboard shortcuts (space, arrows, S, I, O, Delete) work while the editor has focus.

The edit token model

Like the recorder, the editor never sees your API key. Your server makes an edit token naming the videos the current user may edit:

// 1. Your server (Node.js): 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 }
});

<!-- 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>

Both come from the documentation, which also has an ASP.NET Core endpoint. The token body takes videoIds (1 to 20 of your finished videos), expiresIn (60 to 86400 seconds, default 900), maxSeconds (the longest the result may be), title (the new video's name) and metadata.

What a token can and can't do

The token is shown once, expires on its own, and once its edit exists it keeps working for that video's status for 24 hours. A second edit with the same token answers 409 EDIT_TOKEN_USED. The token counts toward your key's rate limits, and your allowed domains apply, so previews only play on your sites.

Attributes, events and styling

• Attributes: token-url (recommended; the editor POSTs to it when it loads, and asks again once at Save if the token expired) or token, and title for the editor's heading.
• Events (they bubble): vp-edit-ready, vp-edit-created, vp-edit-done and vp-edit-error, with a message fit to show.
• Theme: --vp-bg, --vp-panel, --vp-text, --vp-muted, --vp-line, --vp-accent, --vp-accent-soft, --vp-ok and --vp-bad, for example video-piper-editor { --vp-accent: #e11d74; }.
• Size: about 80 KB compressed, so load it only where it is used.

Your account page has these snippets filled in with your addresses, and a Try the editor button that makes a 15-minute token for your latest finished videos.

Which plans include the editor component

The editor component and its edit tokens work on every plan. The new video is processed and billed like any edit made with your API key, at your plan's quality, and counts toward your usage.

Usage beyond a paid plan is billed at $0.09 per processing minute, $0.15 per GB-month of storage and $0.55 per GB of delivery. Full details are on the pricing page.

In the documentation

• The video-piper-editor web component
• Edit tokens
• Trim, stitch and splice (edits)
• The video-piper web component (plays the result)
• Errors

Frequently asked questions