Vibe code your own Loom

You can vibe code your own Loom. Start with a tab recording, an upload, and a share link. The catalog calls Loom that loop, not a transcoding studio.

You pay $15–$24 a month. The verdict is “Great internal tool”.

Last time I wrote about building a YNAB alternative. That was a regular backlog post. This one is a teardown.

Vibe code your own Loom as a clip

The Loom page splits the work into three rows.

The first row is 10 hours. Tab recording, upload, share link. That is getDisplayMedia, a WebM blob, an object in R2, and a watch page. You can vibe-code this.

The second row is 1 week. Comments, folders, library search, retakes. Still your team. A timestamp on a comment, a folder name, a search box.

The third row is 1 month and up. Desktop capture, AI transcription, video editing. Skip that row.

If you tell an agent to “clone Loom”, it aims at the third row. The useful v1 is the first one.

Here is the shape of the data. Nothing else has to exist at 10 hours.

const recording = {
  id: 'rec-pricing-walkthrough',
  ownerId: 'U-flavio',
  title: 'Pricing page walkthrough',
  status: 'ready',
  mimeType: 'video/webm',
  durationMs: 184000,
}

const mediaFile = {
  recordingId: 'rec-pricing-walkthrough',
  objectKey: 'recordings/rec-pricing-walkthrough/source.webm',
  bytes: 12480000,
}

const shareLink = {
  recordingId: 'rec-pricing-walkthrough',
  slug: 'k7m2n9p4q1',
}

A recording, one file, one slug. Comments wait until the watch page plays.

The audience line on the page is a remote team sharing short screen recordings internally. If that is you, a tab, a blob, and a link are enough.

The same v1 also replaces Tella, Screen Studio, and Vidyard if what you wanted was “watch this click path”. Dropbox Transfer is the file cousin at $20–$32 a month. Vimeo is the hosted-player cousin at $20–$65. When the note has to sit on a frame, that is Frame.io at $15–$25.

How does Loom work

Loom publishes the encoding ladder, the desktop recording path, and the just-in-time media service. I am summarizing those pages, not reconstructing today’s cluster.

The browser capture API is the public start of a v1. getDisplayMedia() opens a picker. The user picks a tab, a window, or a screen. The permission cannot be remembered. The browser asks again every time. You must call it from a click, not from page load.

Feed that stream into MediaRecorder. A timeslice of 1000ms fires dataavailable about once a second. MDN is clear that the interval is not exact, so do not count chunks to get duration. Keep a clock.

async function startTabCapture() {
  const stream = await navigator.mediaDevices.getDisplayMedia({
    video: true,
    audio: true,
  })
  const chunks = []
  const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' })
  recorder.ondataavailable = (event) => {
    if (event.data.size > 0) chunks.push(event.data)
  }
  recorder.start(1000)
  return { recorder, chunks, stream }
}

Stop the tracks when you stop the recorder. The sharing indicator stays on until you do.

Their encoding settings split the product by client. The Chrome extension writes DASH with WebM. Video is VP8 or VP9 at a 30fps target, up to 1080p. Audio is Opus. Desktop apps write HLS with TS, H.264, and AAC, up to 4K. Uploaded files can be MP4, MOV, WebM, and a few others. Loom rejects anything over 60fps, over 4096 × 2160, over 4GB, or over 12 hours. Downloads come back as MP4.

A 10-hour v1 stays on the Chrome path. One WebM is enough if the watch page is the same browser that recorded it.

Privacy settings are public, workspace, or restricted. Anyone with the link, anyone logged into the workspace, or a named email list. Sharing with specific people is the restricted mode. An archived privacy page says the CDN uses signed URLs that expire. The watch page URL stays stable. The bytes URL does not. Password-protected videos only get a signed URL after the password is right.

The catalog’s guardrail is the same rule. Consent before capture. Signed URLs for every private video. A guessed object key returns 404 and no bytes.

How Loom video encoding works

The skip row starts at the encoder.

A 2019 desktop post is the public history. The Chrome client topped out around 720p on Mac and 1080p on Windows before the CPU fell over. Desktop recording moved transmuxing onto the laptop. They bundled a slice of FFmpeg, took the OS .mp4, and wrote HLS. HLS is a playlist of files, not one blob. A bad last minute does not throw away the first two hours. They say customers had lost 3-hour recordings to a late error.

The Chrome extension could share a link immediately. Safari, mobile, and older browsers had to wait for a reprocess of the whole WebM. The longer the clip, the longer that wait.

Their 2022 just-in-time post is the other product. Loom is video messaging, not a streaming catalog. A person records many clips. A handful of people watch each one, usually within a day or two. Building every rendition up front wastes storage and time-to-view.

They put an AVServer behind CloudFront. A cache miss generates the playlist or segment on the way out. The CDN keeps that artifact for 24 hours. They do not persist the derived files. A revision id sits in the path. Processing notes live in Redis: trims, filters, later edits. A new edit mints a new revision id. The next watch is a cache miss and a new file.

Chrome DASH with WebM is not native on iOS AVPlayer. The same layer converts DASH to HLS on the fly, so an iPhone does not wait for a batch job.

Treat “the 2026 cluster is still AVServer on CloudFront” as an educated guess. The product rule is public: keep the source, make a rendition when someone watches.

A v1 does not need that ladder. Serve the uploaded WebM with a signed URL. Vimeo already names the skip row: adaptive transcoding, DRM, live. Their first row is the same shape as this one. Upload, branded player, unlisted link.

function signedWatchUrl(objectKey, expiresAt) {
  return `/media/${objectKey}?exp=${expiresAt}&sig=${sign(objectKey, expiresAt)}`
}

Put the expiry in the URL. Rotate the signature when the watch page loads. Do not list the bucket.

The comment timeline on a Loom video

Comments are the 1-week row, not the weekend.

Atlassian’s Loom comment object is public. A comment has content, author, createdAt, editedAt, videoId, and timestamp. That last field is seconds into the video. The relationship is “Loom video has Loom video comment”.

const comment = {
  id: 'cmt-00-42',
  recordingId: 'rec-pricing-walkthrough',
  authorId: 'U-sara',
  body: 'The CTA is still the old copy',
  atSecond: 42,
}

Seek the player to atSecond when someone clicks the row. Frame.io is this product if review is the job and recording is not. Their first row is uploads, timestamped comments, versions, and approval states.

Reactions and a transcript placeholder can wait. The catalog puts AI transcription on the skip row. A human title and a typed comment are enough.

The same skip row holds desktop capture and the editor. The 2019 post is why. Native windows, a camera bubble that follows you, 4K, and a stitch-and-trim pipeline. The 2022 post adds noise suppression, intros, watermarks, and layout after the fact. That is AVServer work. Leave it there.

A Loom alternative for one team

I would rebuild Loom for the five walkthroughs I already send after a call. One owner, one library, tab capture in the browser, and a watch page that does not list the rest of the folder.

Comments come after three people have used the link. Folders come when the library has twenty clips. I would not transcode.

Host it next to the product, on Node.js and Astro, with R2 for the file and D1 for the row, because that is the stack on the card. Use TanStack Start if React is your weekday language. Add a signed URL once the player works on localhost.

If the rent is “send a zip”, that is Dropbox Transfer, 3 hours for an upload and an expiry. If the rent is “host the demo on my domain”, that is Vimeo, 10 hours for an upload and a branded player. I wrote about vibe coding your own DocSend when the rent was a gated PDF.

Start with the first row

Go to Build your own Loom. Copy the Astro prompt, or TanStack Start if that is what you write.

Tell the agent the first estimate only: tab recording, upload, share link. Ten hours.

If the company already lives in 4K desktop capture and a workspace-wide review trail, keep paying.