Productivity · Weekend build
Build your own Loom
Record screen, share link, receive “nice!” comment. Loom charges $15–$24 per person per month — that’s $180–$288 a year per person — for something you can replace with focused software of your own. Here is the honest scope, the honest timeline, and the exact prompt to hand your coding agent.
Who this replacement is for
This build targets a remote team sharing short screen recordings internally. The goal: record a browser tab or screen and share a private watch page quickly. If you need more than that, keep paying — the point of building it yourself is owning a tool shaped exactly like your workflow, not re-implementing a venture-funded roadmap.
Same build, different logo: this v1 also replaces Tella, Screen Studio and Vidyard — they all solve the same core job.
How long it actually takes
One number would be a lie, so here are three. Each tier is a real, usable product — pick the one that matches how much of Loom you actually use.
| Estimate | What you get |
|---|---|
| 10 hours | tab recording, upload, share link |
| 1 week | comments, folders, library search, retakes |
| 1 month+ | desktop capture, ai transcription, video editing — the part you should probably skip |
What a minimal Loom alternative needs
- screen, window, or tab capture with optional microphone
- recording timer, pause, resume, and retake
- upload progress and automatic share link
- watch page with title, transcript placeholder, comments, and reactions
- library with search, folders, and delete controls
Data model
Recording, MediaFile, Comment, Folder
Integrations
MediaRecorder API, R2 object storage
Capability context
Astro, Browser API, R2
The guardrail
Make recording consent explicit and use signed URLs for every private video.
Deliberate non-goals
Do not build desktop capture, AI transcription, video editing, or public discovery.
The complete build prompt
Copy this into your coding agent of choice. It is scoped for a useful v1 — journeys, screens, business rules, data model, security, tests, and acceptance scenarios included. Pick your stack:
You are building a production-ready software product named “Showtell”, a deliberately focused alternative to Loom. Build a complete, usable vertical slice—not a landing page, static mockup, or disconnected collection of components. WORKING AGREEMENT Before writing implementation code, produce a short technical plan that names the routes or pages, server actions or endpoints, data tables, important state transitions, authorization boundaries, background jobs, and external adapters. Resolve contradictions in favor of the narrow audience and non-goals below. Prefer a small, legible architecture over speculative abstraction, but do not omit persistence, validation, error handling, or tests. PRODUCT BRIEF Primary user: a remote team sharing short screen recordings internally. Primary outcome: record a browser tab or screen and share a private watch page quickly. Product principle: optimize the exact workflow below instead of copying the full breadth of Loom. A first-time user should understand what to do from the interface itself, without a tour or documentation. END-TO-END USER JOURNEYS Implement all of these flows through the real interface and persistent data layer: 1. An authenticated teammate chooses a browser tab, explicitly grants capture and optional microphone permission, records, pauses, resumes, reviews, and retakes once. 2. After stopping, the recording uploads with resumable progress, receives a title and folder, finishes processing, and produces a private share link. 3. A permitted colleague opens the watch page, plays the recording, comments at the current timestamp, reacts, and the owner later finds it through library search. SCREENS AND INFORMATION ARCHITECTURE Build these as coherent responsive views. Each screen must specify its primary action, secondary actions, visible status, validation feedback, empty state, loading or pending state, success confirmation, and recoverable failure state. 1. Recorder: source and microphone selection, consent explanation, permission status, live preview, elapsed timer, pause, resume, stop, discard, and retake actions. 2. Upload and processing: local playback review, title and folder fields, chunk progress, retry state, processing status, cancel action, and generated share-link confirmation. 3. Private watch page: title, owner, video player, playback position, signed-media state, timestamped comments, reactions, and copy-link action. 4. Recording library: searchable cards with thumbnail, duration, owner, folder, processing state, created date, move, rename, delete, and failed-upload recovery. CORE CAPABILITIES 1. screen, window, or tab capture with optional microphone 2. recording timer, pause, resume, and retake 3. upload progress and automatic share link 4. watch page with title, transcript placeholder, comments, and reactions 5. library with search, folders, and delete controls DETAILED BEHAVIOR AND BUSINESS RULES Treat these as server-enforced product requirements, not interface suggestions: 1. Begin capture only after explicit browser permission and an obvious recording state; stopping screen sharing must stop or clearly terminate the recording session. 2. Upload chunks with stable recording and chunk identifiers, verify ordering and size server-side, and make retries resumable without creating duplicate media files. 3. Require authentication and recording-level authorization before issuing short-lived signed URLs; never expose a permanent public R2 object URL. 4. Deleting a recording revokes new playback immediately, hides comments with it, and queues media-object cleanup while preserving a minimal audit event. DATA MODEL AND LIFECYCLE Design a small relational schema centered on Recording, MediaFile, Comment, Folder. Before implementing it, document: 1. Each table’s purpose, primary key, ownership or tenant boundary, timestamps, status fields, and important attributes. 2. Foreign keys, uniqueness constraints, check constraints, indexes needed by the named screens, and transaction boundaries for multi-record changes. 3. The allowed lifecycle or state transitions, who may trigger each transition, which transitions are terminal or reversible, and what audit history must remain immutable. 4. Archive, retention, and deletion behavior, including what happens to dependent records and external files. 5. Idempotency strategy for submissions, jobs, imports, notifications, webhooks, or retries where applicable. Use migrations rather than ad-hoc schema creation. Store time instants consistently and retain named timezone context whenever local schedules or dates matter. Never rely on a counter, disabled button, or client-side check to preserve a business invariant. USERS, AUTHENTICATION, AND PERMISSIONS Implement only the roles required by the stated audience. Make the ownership and visibility model explicit before coding. Enforce authorization in every server-side query and mutation, including search, exports, attachments, live updates, and guessed URLs—not merely by hiding controls. Use secure session defaults, protect state-changing requests, and provide an understandable signed-out, expired-session, and forbidden state. Seed distinct users when multiple roles are required so permissions can be demonstrated and tested. INTERACTION AND VISUAL DIRECTION The product should feel fast, calm, focused, and credible rather than like a generic admin template. Use a clear visual hierarchy, restrained color, readable typography, generous hit targets, and consistent placement for primary actions. Start with server-rendered HTML and progressively enhance only the interactions that benefit from it. The core workflow must remain understandable if enhancement fails. Start with server-rendered Astro pages and ordinary HTML forms. Use HTMX for form submissions, partial navigation, and server-driven updates, then Alpine.js only for small local browser state. The core workflow must remain understandable if either enhancement layer fails. Design mobile layouts intentionally instead of simply stacking desktop panels. Support keyboard navigation, visible focus, semantic landmarks, explicit labels, useful page titles, reduced-motion preferences, and screen-reader announcements for asynchronous results. Never use color alone to communicate state. Destructive actions require clear scope and confirmation; safe repeated actions should be idempotent. TECHNICAL DIRECTION Build this version with the AHA stack: Astro for routing, layouts, and server-rendered pages; HTMX for interactions that benefit from HTML fragment responses; and Alpine.js for small, local interface state. Prefer Cloudflare D1 for relational persistence, R2 for object storage, Workers for server endpoints and scheduled work, Durable Objects only for coordinated real-time state, and Workflows or Queues for durable background jobs—but only when the product requirements call for them. Keep domain rules in testable server-side modules instead of route handlers or UI components. Separate persistence, external providers, and background work behind small interfaces without building a framework. Prefer ordinary HTML forms and URLs for durable navigation; use optimistic interaction only when failure can be reconciled clearly. The product brief currently identifies Astro, Browser API, R2 as capability context. Preserve any required native, browser-only, edge, storage, real-time, or background-processing capability through a narrow adapter appropriate to the selected framework. If the core workflow genuinely requires native or browser APIs, keep that runtime as the primary execution surface rather than simulating inaccessible capabilities or inventing an unnecessary web surface. Integrate with MediaRecorder API and R2 object storage. For every integration: - List required environment variables in an .env.example without real secrets. - Add a small adapter with timeouts, normalized errors, and a deterministic local fake or development path. - Verify inbound signatures and deduplicate provider events where supported. - Keep credentials server-side, encrypt long-lived provider tokens at rest, and redact secrets and sensitive payloads from logs. - Define retry, backoff, and idempotency behavior for any side effect that can be repeated. SECURITY AND PRIVACY Make recording consent explicit and use signed URLs for every private video. Validate, normalize, and length-limit all untrusted input on the server. Escape rendered content by default, sanitize any intentionally accepted markup, rate-limit public or abuse-prone actions, and use private object storage plus short-lived authorized URLs for sensitive files. Collect the minimum personal data necessary for the named workflow. Document retention and deletion behavior. Add specific protections for the riskier surfaces in this app, such as uploads, redirects, outbound requests, email delivery, OAuth, webhooks, CSV import or export, and real-time connections. ACCEPTANCE SCENARIOS Automate these app-specific scenarios at the most appropriate level: 1. Given microphone permission is denied but screen capture is granted, when the user confirms silent recording, capture succeeds without repeatedly prompting for audio. 2. Given an upload loses connectivity halfway through, when connectivity returns, only missing chunks resume and the final recording contains one correctly ordered media file. 3. Given a recording is deleted while another viewer has the page open, when their signed URL expires or playback is refreshed, access is denied. TESTING Add focused unit tests for state transitions, authorization predicates, normalization, date or money calculations, and other risky domain rules. Add integration tests for persistence constraints and each external adapter’s success, timeout, retry, and rejection paths. Add at least one browser-level test for every end-to-end journey above, including one small-screen viewport. Tests must use isolated data and run through a documented single command. OPERATIONS AND FAILURE RECOVERY Add structured server logs with request, job, or event correlation IDs but no secrets or unnecessarily sensitive data. Make failures actionable in both the interface and logs. Background work must expose pending, succeeded, failed, and retrying states where relevant; do not silently swallow errors. Include safe database migration and rollback guidance, seed data, backup and restore notes, external-data cleanup behavior, and a basic health or diagnostic path appropriate to the stack. DELIVERABLES Ship the working application, migrations, representative seed data, tests, .env.example, and a concise README. The README must cover prerequisites, local setup, environment variables, migrations, seed and test commands, deployment, integration setup, backup and restore, security decisions, and known limitations. Seed data should exercise the happy path plus at least one empty, failed, overdue, expired, archived, or permission-restricted state relevant to the product. DEFINITION OF DONE The app is complete when a fresh developer can follow the README, create and migrate the database, run the app, sign in as each relevant role, complete every named journey using real persisted data, refresh without losing state, recover from common failures, and use the core interface on phone and desktop. All acceptance scenarios pass, permission boundaries are covered by tests, and no core screen is left as a placeholder. NON-GOALS Do not build desktop capture, AI transcription, video editing, or public discovery.
You are building a production-ready software product named “Showtell”, a deliberately focused alternative to Loom. Build a complete, usable vertical slice—not a landing page, static mockup, or disconnected collection of components. WORKING AGREEMENT Before writing implementation code, produce a short technical plan that names the routes or pages, server actions or endpoints, data tables, important state transitions, authorization boundaries, background jobs, and external adapters. Resolve contradictions in favor of the narrow audience and non-goals below. Prefer a small, legible architecture over speculative abstraction, but do not omit persistence, validation, error handling, or tests. PRODUCT BRIEF Primary user: a remote team sharing short screen recordings internally. Primary outcome: record a browser tab or screen and share a private watch page quickly. Product principle: optimize the exact workflow below instead of copying the full breadth of Loom. A first-time user should understand what to do from the interface itself, without a tour or documentation. END-TO-END USER JOURNEYS Implement all of these flows through the real interface and persistent data layer: 1. An authenticated teammate chooses a browser tab, explicitly grants capture and optional microphone permission, records, pauses, resumes, reviews, and retakes once. 2. After stopping, the recording uploads with resumable progress, receives a title and folder, finishes processing, and produces a private share link. 3. A permitted colleague opens the watch page, plays the recording, comments at the current timestamp, reacts, and the owner later finds it through library search. SCREENS AND INFORMATION ARCHITECTURE Build these as coherent responsive views. Each screen must specify its primary action, secondary actions, visible status, validation feedback, empty state, loading or pending state, success confirmation, and recoverable failure state. 1. Recorder: source and microphone selection, consent explanation, permission status, live preview, elapsed timer, pause, resume, stop, discard, and retake actions. 2. Upload and processing: local playback review, title and folder fields, chunk progress, retry state, processing status, cancel action, and generated share-link confirmation. 3. Private watch page: title, owner, video player, playback position, signed-media state, timestamped comments, reactions, and copy-link action. 4. Recording library: searchable cards with thumbnail, duration, owner, folder, processing state, created date, move, rename, delete, and failed-upload recovery. CORE CAPABILITIES 1. screen, window, or tab capture with optional microphone 2. recording timer, pause, resume, and retake 3. upload progress and automatic share link 4. watch page with title, transcript placeholder, comments, and reactions 5. library with search, folders, and delete controls DETAILED BEHAVIOR AND BUSINESS RULES Treat these as server-enforced product requirements, not interface suggestions: 1. Begin capture only after explicit browser permission and an obvious recording state; stopping screen sharing must stop or clearly terminate the recording session. 2. Upload chunks with stable recording and chunk identifiers, verify ordering and size server-side, and make retries resumable without creating duplicate media files. 3. Require authentication and recording-level authorization before issuing short-lived signed URLs; never expose a permanent public R2 object URL. 4. Deleting a recording revokes new playback immediately, hides comments with it, and queues media-object cleanup while preserving a minimal audit event. DATA MODEL AND LIFECYCLE Design a small relational schema centered on Recording, MediaFile, Comment, Folder. Before implementing it, document: 1. Each table’s purpose, primary key, ownership or tenant boundary, timestamps, status fields, and important attributes. 2. Foreign keys, uniqueness constraints, check constraints, indexes needed by the named screens, and transaction boundaries for multi-record changes. 3. The allowed lifecycle or state transitions, who may trigger each transition, which transitions are terminal or reversible, and what audit history must remain immutable. 4. Archive, retention, and deletion behavior, including what happens to dependent records and external files. 5. Idempotency strategy for submissions, jobs, imports, notifications, webhooks, or retries where applicable. Use migrations rather than ad-hoc schema creation. Store time instants consistently and retain named timezone context whenever local schedules or dates matter. Never rely on a counter, disabled button, or client-side check to preserve a business invariant. USERS, AUTHENTICATION, AND PERMISSIONS Implement only the roles required by the stated audience. Make the ownership and visibility model explicit before coding. Enforce authorization in every server-side query and mutation, including search, exports, attachments, live updates, and guessed URLs—not merely by hiding controls. Use secure session defaults, protect state-changing requests, and provide an understandable signed-out, expired-session, and forbidden state. Seed distinct users when multiple roles are required so permissions can be demonstrated and tested. INTERACTION AND VISUAL DIRECTION The product should feel fast, calm, focused, and credible rather than like a generic admin template. Use a clear visual hierarchy, restrained color, readable typography, generous hit targets, and consistent placement for primary actions. Start with server-rendered HTML and progressively enhance only the interactions that benefit from it. The core workflow must remain understandable if enhancement fails. Render with React Server Components by default. Use Server Actions for authenticated form mutations and add Client Components only for interactions that genuinely require browser state, browser APIs, drag-and-drop, or live updates. The core workflow must remain understandable before client-side JavaScript finishes loading. Design mobile layouts intentionally instead of simply stacking desktop panels. Support keyboard navigation, visible focus, semantic landmarks, explicit labels, useful page titles, reduced-motion preferences, and screen-reader announcements for asynchronous results. Never use color alone to communicate state. Destructive actions require clear scope and confirmation; safe repeated actions should be idempotent. TECHNICAL DIRECTION Build this version with Next.js, the App Router, and TypeScript. Use Server Components by default, Server Actions for authenticated mutations, and Route Handlers for public APIs, OAuth callbacks, webhooks, feeds, uploads, and downloads. Use PostgreSQL through Drizzle ORM with versioned migrations and an isolated test database. Access S3-compatible object storage through a server-only adapter, and run slow or retryable work in a real job or workflow system instead of the request lifecycle. Keep domain rules in testable server-side modules instead of route handlers or UI components. Separate persistence, external providers, and background work behind small interfaces without building a framework. Prefer ordinary HTML forms and URLs for durable navigation; use optimistic interaction only when failure can be reconciled clearly. The product brief currently identifies Astro, Browser API, R2 as capability context. Preserve any required native, browser-only, edge, storage, real-time, or background-processing capability through a narrow adapter appropriate to the selected framework. If the core workflow genuinely requires native or browser APIs, keep that runtime as the primary execution surface rather than simulating inaccessible capabilities or inventing an unnecessary web surface. Integrate with MediaRecorder API and R2 object storage. For every integration: - List required environment variables in an .env.example without real secrets. - Add a small adapter with timeouts, normalized errors, and a deterministic local fake or development path. - Verify inbound signatures and deduplicate provider events where supported. - Keep credentials server-side, encrypt long-lived provider tokens at rest, and redact secrets and sensitive payloads from logs. - Define retry, backoff, and idempotency behavior for any side effect that can be repeated. SECURITY AND PRIVACY Make recording consent explicit and use signed URLs for every private video. Validate, normalize, and length-limit all untrusted input on the server. Escape rendered content by default, sanitize any intentionally accepted markup, rate-limit public or abuse-prone actions, and use private object storage plus short-lived authorized URLs for sensitive files. Collect the minimum personal data necessary for the named workflow. Document retention and deletion behavior. Add specific protections for the riskier surfaces in this app, such as uploads, redirects, outbound requests, email delivery, OAuth, webhooks, CSV import or export, and real-time connections. ACCEPTANCE SCENARIOS Automate these app-specific scenarios at the most appropriate level: 1. Given microphone permission is denied but screen capture is granted, when the user confirms silent recording, capture succeeds without repeatedly prompting for audio. 2. Given an upload loses connectivity halfway through, when connectivity returns, only missing chunks resume and the final recording contains one correctly ordered media file. 3. Given a recording is deleted while another viewer has the page open, when their signed URL expires or playback is refreshed, access is denied. TESTING Add focused unit tests for state transitions, authorization predicates, normalization, date or money calculations, and other risky domain rules. Add integration tests for persistence constraints and each external adapter’s success, timeout, retry, and rejection paths. Add at least one browser-level test for every end-to-end journey above, including one small-screen viewport. Tests must use isolated data and run through a documented single command. OPERATIONS AND FAILURE RECOVERY Add structured server logs with request, job, or event correlation IDs but no secrets or unnecessarily sensitive data. Make failures actionable in both the interface and logs. Background work must expose pending, succeeded, failed, and retrying states where relevant; do not silently swallow errors. Include safe database migration and rollback guidance, seed data, backup and restore notes, external-data cleanup behavior, and a basic health or diagnostic path appropriate to the stack. DELIVERABLES Ship the working application, migrations, representative seed data, tests, .env.example, and a concise README. The README must cover prerequisites, local setup, environment variables, migrations, seed and test commands, deployment, integration setup, backup and restore, security decisions, and known limitations. Seed data should exercise the happy path plus at least one empty, failed, overdue, expired, archived, or permission-restricted state relevant to the product. DEFINITION OF DONE The app is complete when a fresh developer can follow the README, create and migrate the database, run the app, sign in as each relevant role, complete every named journey using real persisted data, refresh without losing state, recover from common failures, and use the core interface on phone and desktop. All acceptance scenarios pass, permission boundaries are covered by tests, and no core screen is left as a placeholder. NON-GOALS Do not build desktop capture, AI transcription, video editing, or public discovery.
You are building a production-ready software product named “Showtell”, a deliberately focused alternative to Loom. Build a complete, usable vertical slice—not a landing page, static mockup, or disconnected collection of components. WORKING AGREEMENT Before writing implementation code, produce a short technical plan that names the routes or pages, server actions or endpoints, data tables, important state transitions, authorization boundaries, background jobs, and external adapters. Resolve contradictions in favor of the narrow audience and non-goals below. Prefer a small, legible architecture over speculative abstraction, but do not omit persistence, validation, error handling, or tests. PRODUCT BRIEF Primary user: a remote team sharing short screen recordings internally. Primary outcome: record a browser tab or screen and share a private watch page quickly. Product principle: optimize the exact workflow below instead of copying the full breadth of Loom. A first-time user should understand what to do from the interface itself, without a tour or documentation. END-TO-END USER JOURNEYS Implement all of these flows through the real interface and persistent data layer: 1. An authenticated teammate chooses a browser tab, explicitly grants capture and optional microphone permission, records, pauses, resumes, reviews, and retakes once. 2. After stopping, the recording uploads with resumable progress, receives a title and folder, finishes processing, and produces a private share link. 3. A permitted colleague opens the watch page, plays the recording, comments at the current timestamp, reacts, and the owner later finds it through library search. SCREENS AND INFORMATION ARCHITECTURE Build these as coherent responsive views. Each screen must specify its primary action, secondary actions, visible status, validation feedback, empty state, loading or pending state, success confirmation, and recoverable failure state. 1. Recorder: source and microphone selection, consent explanation, permission status, live preview, elapsed timer, pause, resume, stop, discard, and retake actions. 2. Upload and processing: local playback review, title and folder fields, chunk progress, retry state, processing status, cancel action, and generated share-link confirmation. 3. Private watch page: title, owner, video player, playback position, signed-media state, timestamped comments, reactions, and copy-link action. 4. Recording library: searchable cards with thumbnail, duration, owner, folder, processing state, created date, move, rename, delete, and failed-upload recovery. CORE CAPABILITIES 1. screen, window, or tab capture with optional microphone 2. recording timer, pause, resume, and retake 3. upload progress and automatic share link 4. watch page with title, transcript placeholder, comments, and reactions 5. library with search, folders, and delete controls DETAILED BEHAVIOR AND BUSINESS RULES Treat these as server-enforced product requirements, not interface suggestions: 1. Begin capture only after explicit browser permission and an obvious recording state; stopping screen sharing must stop or clearly terminate the recording session. 2. Upload chunks with stable recording and chunk identifiers, verify ordering and size server-side, and make retries resumable without creating duplicate media files. 3. Require authentication and recording-level authorization before issuing short-lived signed URLs; never expose a permanent public R2 object URL. 4. Deleting a recording revokes new playback immediately, hides comments with it, and queues media-object cleanup while preserving a minimal audit event. DATA MODEL AND LIFECYCLE Design a small relational schema centered on Recording, MediaFile, Comment, Folder. Before implementing it, document: 1. Each table’s purpose, primary key, ownership or tenant boundary, timestamps, status fields, and important attributes. 2. Foreign keys, uniqueness constraints, check constraints, indexes needed by the named screens, and transaction boundaries for multi-record changes. 3. The allowed lifecycle or state transitions, who may trigger each transition, which transitions are terminal or reversible, and what audit history must remain immutable. 4. Archive, retention, and deletion behavior, including what happens to dependent records and external files. 5. Idempotency strategy for submissions, jobs, imports, notifications, webhooks, or retries where applicable. Use migrations rather than ad-hoc schema creation. Store time instants consistently and retain named timezone context whenever local schedules or dates matter. Never rely on a counter, disabled button, or client-side check to preserve a business invariant. USERS, AUTHENTICATION, AND PERMISSIONS Implement only the roles required by the stated audience. Make the ownership and visibility model explicit before coding. Enforce authorization in every server-side query and mutation, including search, exports, attachments, live updates, and guessed URLs—not merely by hiding controls. Use secure session defaults, protect state-changing requests, and provide an understandable signed-out, expired-session, and forbidden state. Seed distinct users when multiple roles are required so permissions can be demonstrated and tested. INTERACTION AND VISUAL DIRECTION The product should feel fast, calm, focused, and credible rather than like a generic admin template. Use a clear visual hierarchy, restrained color, readable typography, generous hit targets, and consistent placement for primary actions. Start with server-rendered HTML and progressively enhance only the interactions that benefit from it. The core workflow must remain understandable if enhancement fails. Start with server-rendered Blade views and ordinary forms. Use Livewire for focused server-driven interactions and Alpine.js only for small local interface state. The core workflow must remain understandable without relying on a client-side application shell. Design mobile layouts intentionally instead of simply stacking desktop panels. Support keyboard navigation, visible focus, semantic landmarks, explicit labels, useful page titles, reduced-motion preferences, and screen-reader announcements for asynchronous results. Never use color alone to communicate state. Destructive actions require clear scope and confirmation; safe repeated actions should be idempotent. TECHNICAL DIRECTION Build this version with Laravel, PHP, Blade, Livewire, and Alpine.js. Use controllers and Blade forms for durable navigation, Livewire for focused interactions, Form Requests for validation, Policies and Gates for authorization, and small application actions or services for domain transitions. Use Eloquent with migrations, database constraints, and transactions; Laravel Storage for private S3-compatible files; queued Jobs for retryable work; the Scheduler for recurring work; and Notifications or Mail for email. Keep domain rules in testable server-side modules instead of route handlers or UI components. Separate persistence, external providers, and background work behind small interfaces without building a framework. Prefer ordinary HTML forms and URLs for durable navigation; use optimistic interaction only when failure can be reconciled clearly. The product brief currently identifies Astro, Browser API, R2 as capability context. Preserve any required native, browser-only, edge, storage, real-time, or background-processing capability through a narrow adapter appropriate to the selected framework. If the core workflow genuinely requires native or browser APIs, keep that runtime as the primary execution surface rather than simulating inaccessible capabilities or inventing an unnecessary web surface. Integrate with MediaRecorder API and R2 object storage. For every integration: - List required environment variables in an .env.example without real secrets. - Add a small adapter with timeouts, normalized errors, and a deterministic local fake or development path. - Verify inbound signatures and deduplicate provider events where supported. - Keep credentials server-side, encrypt long-lived provider tokens at rest, and redact secrets and sensitive payloads from logs. - Define retry, backoff, and idempotency behavior for any side effect that can be repeated. SECURITY AND PRIVACY Make recording consent explicit and use signed URLs for every private video. Validate, normalize, and length-limit all untrusted input on the server. Escape rendered content by default, sanitize any intentionally accepted markup, rate-limit public or abuse-prone actions, and use private object storage plus short-lived authorized URLs for sensitive files. Collect the minimum personal data necessary for the named workflow. Document retention and deletion behavior. Add specific protections for the riskier surfaces in this app, such as uploads, redirects, outbound requests, email delivery, OAuth, webhooks, CSV import or export, and real-time connections. ACCEPTANCE SCENARIOS Automate these app-specific scenarios at the most appropriate level: 1. Given microphone permission is denied but screen capture is granted, when the user confirms silent recording, capture succeeds without repeatedly prompting for audio. 2. Given an upload loses connectivity halfway through, when connectivity returns, only missing chunks resume and the final recording contains one correctly ordered media file. 3. Given a recording is deleted while another viewer has the page open, when their signed URL expires or playback is refreshed, access is denied. TESTING Add focused unit tests for state transitions, authorization predicates, normalization, date or money calculations, and other risky domain rules. Add integration tests for persistence constraints and each external adapter’s success, timeout, retry, and rejection paths. Add at least one browser-level test for every end-to-end journey above, including one small-screen viewport. Tests must use isolated data and run through a documented single command. OPERATIONS AND FAILURE RECOVERY Add structured server logs with request, job, or event correlation IDs but no secrets or unnecessarily sensitive data. Make failures actionable in both the interface and logs. Background work must expose pending, succeeded, failed, and retrying states where relevant; do not silently swallow errors. Include safe database migration and rollback guidance, seed data, backup and restore notes, external-data cleanup behavior, and a basic health or diagnostic path appropriate to the stack. DELIVERABLES Ship the working application, migrations, representative seed data, tests, .env.example, and a concise README. The README must cover prerequisites, local setup, environment variables, migrations, seed and test commands, deployment, integration setup, backup and restore, security decisions, and known limitations. Seed data should exercise the happy path plus at least one empty, failed, overdue, expired, archived, or permission-restricted state relevant to the product. DEFINITION OF DONE The app is complete when a fresh developer can follow the README, create and migrate the database, run the app, sign in as each relevant role, complete every named journey using real persisted data, refresh without losing state, recover from common failures, and use the core interface on phone and desktop. All acceptance scenarios pass, permission boundaries are covered by tests, and no core screen is left as a placeholder. NON-GOALS Do not build desktop capture, AI transcription, video editing, or public discovery.
You are building a production-ready software product named “Showtell”, a deliberately focused alternative to Loom. Build a complete, usable vertical slice—not a landing page, static mockup, or disconnected collection of components. WORKING AGREEMENT Before writing implementation code, produce a short technical plan that names the routes or pages, server actions or endpoints, data tables, important state transitions, authorization boundaries, background jobs, and external adapters. Resolve contradictions in favor of the narrow audience and non-goals below. Prefer a small, legible architecture over speculative abstraction, but do not omit persistence, validation, error handling, or tests. PRODUCT BRIEF Primary user: a remote team sharing short screen recordings internally. Primary outcome: record a browser tab or screen and share a private watch page quickly. Product principle: optimize the exact workflow below instead of copying the full breadth of Loom. A first-time user should understand what to do from the interface itself, without a tour or documentation. END-TO-END USER JOURNEYS Implement all of these flows through the real interface and persistent data layer: 1. An authenticated teammate chooses a browser tab, explicitly grants capture and optional microphone permission, records, pauses, resumes, reviews, and retakes once. 2. After stopping, the recording uploads with resumable progress, receives a title and folder, finishes processing, and produces a private share link. 3. A permitted colleague opens the watch page, plays the recording, comments at the current timestamp, reacts, and the owner later finds it through library search. SCREENS AND INFORMATION ARCHITECTURE Build these as coherent responsive views. Each screen must specify its primary action, secondary actions, visible status, validation feedback, empty state, loading or pending state, success confirmation, and recoverable failure state. 1. Recorder: source and microphone selection, consent explanation, permission status, live preview, elapsed timer, pause, resume, stop, discard, and retake actions. 2. Upload and processing: local playback review, title and folder fields, chunk progress, retry state, processing status, cancel action, and generated share-link confirmation. 3. Private watch page: title, owner, video player, playback position, signed-media state, timestamped comments, reactions, and copy-link action. 4. Recording library: searchable cards with thumbnail, duration, owner, folder, processing state, created date, move, rename, delete, and failed-upload recovery. CORE CAPABILITIES 1. screen, window, or tab capture with optional microphone 2. recording timer, pause, resume, and retake 3. upload progress and automatic share link 4. watch page with title, transcript placeholder, comments, and reactions 5. library with search, folders, and delete controls DETAILED BEHAVIOR AND BUSINESS RULES Treat these as server-enforced product requirements, not interface suggestions: 1. Begin capture only after explicit browser permission and an obvious recording state; stopping screen sharing must stop or clearly terminate the recording session. 2. Upload chunks with stable recording and chunk identifiers, verify ordering and size server-side, and make retries resumable without creating duplicate media files. 3. Require authentication and recording-level authorization before issuing short-lived signed URLs; never expose a permanent public R2 object URL. 4. Deleting a recording revokes new playback immediately, hides comments with it, and queues media-object cleanup while preserving a minimal audit event. DATA MODEL AND LIFECYCLE Design a small relational schema centered on Recording, MediaFile, Comment, Folder. Before implementing it, document: 1. Each table’s purpose, primary key, ownership or tenant boundary, timestamps, status fields, and important attributes. 2. Foreign keys, uniqueness constraints, check constraints, indexes needed by the named screens, and transaction boundaries for multi-record changes. 3. The allowed lifecycle or state transitions, who may trigger each transition, which transitions are terminal or reversible, and what audit history must remain immutable. 4. Archive, retention, and deletion behavior, including what happens to dependent records and external files. 5. Idempotency strategy for submissions, jobs, imports, notifications, webhooks, or retries where applicable. Use migrations rather than ad-hoc schema creation. Store time instants consistently and retain named timezone context whenever local schedules or dates matter. Never rely on a counter, disabled button, or client-side check to preserve a business invariant. USERS, AUTHENTICATION, AND PERMISSIONS Implement only the roles required by the stated audience. Make the ownership and visibility model explicit before coding. Enforce authorization in every server-side query and mutation, including search, exports, attachments, live updates, and guessed URLs—not merely by hiding controls. Use secure session defaults, protect state-changing requests, and provide an understandable signed-out, expired-session, and forbidden state. Seed distinct users when multiple roles are required so permissions can be demonstrated and tested. INTERACTION AND VISUAL DIRECTION The product should feel fast, calm, focused, and credible rather than like a generic admin template. Use a clear visual hierarchy, restrained color, readable typography, generous hit targets, and consistent placement for primary actions. Start with server-rendered HTML and progressively enhance only the interactions that benefit from it. The core workflow must remain understandable if enhancement fails. Start with server-rendered Rails views and ordinary forms. Use Turbo for navigation, submissions, and server-driven updates, then Stimulus only for small browser-side behavior. Do not turn the product into a client-side SPA, and keep the core workflow usable when enhancement fails. Design mobile layouts intentionally instead of simply stacking desktop panels. Support keyboard navigation, visible focus, semantic landmarks, explicit labels, useful page titles, reduced-motion preferences, and screen-reader announcements for asynchronous results. Never use color alone to communicate state. Destructive actions require clear scope and confirmation; safe repeated actions should be idempotent. TECHNICAL DIRECTION Build this version with Ruby on Rails and Hotwire: Turbo for navigation, form submissions, and server-driven updates, and Stimulus for small browser-side behavior. Use RESTful controllers with strong parameters and explicit authorization, with domain transitions in testable models or small application services. Use Active Record migrations plus database-level constraints and transactions; Active Storage with an S3-compatible service for private files; Active Job with a durable queue backend for retryable work; Action Mailer for email; and Action Cable only when live updates are required. Keep domain rules in testable server-side modules instead of route handlers or UI components. Separate persistence, external providers, and background work behind small interfaces without building a framework. Prefer ordinary HTML forms and URLs for durable navigation; use optimistic interaction only when failure can be reconciled clearly. The product brief currently identifies Astro, Browser API, R2 as capability context. Preserve any required native, browser-only, edge, storage, real-time, or background-processing capability through a narrow adapter appropriate to the selected framework. If the core workflow genuinely requires native or browser APIs, keep that runtime as the primary execution surface rather than simulating inaccessible capabilities or inventing an unnecessary web surface. Integrate with MediaRecorder API and R2 object storage. For every integration: - List required environment variables in an .env.example without real secrets. - Add a small adapter with timeouts, normalized errors, and a deterministic local fake or development path. - Verify inbound signatures and deduplicate provider events where supported. - Keep credentials server-side, encrypt long-lived provider tokens at rest, and redact secrets and sensitive payloads from logs. - Define retry, backoff, and idempotency behavior for any side effect that can be repeated. SECURITY AND PRIVACY Make recording consent explicit and use signed URLs for every private video. Validate, normalize, and length-limit all untrusted input on the server. Escape rendered content by default, sanitize any intentionally accepted markup, rate-limit public or abuse-prone actions, and use private object storage plus short-lived authorized URLs for sensitive files. Collect the minimum personal data necessary for the named workflow. Document retention and deletion behavior. Add specific protections for the riskier surfaces in this app, such as uploads, redirects, outbound requests, email delivery, OAuth, webhooks, CSV import or export, and real-time connections. ACCEPTANCE SCENARIOS Automate these app-specific scenarios at the most appropriate level: 1. Given microphone permission is denied but screen capture is granted, when the user confirms silent recording, capture succeeds without repeatedly prompting for audio. 2. Given an upload loses connectivity halfway through, when connectivity returns, only missing chunks resume and the final recording contains one correctly ordered media file. 3. Given a recording is deleted while another viewer has the page open, when their signed URL expires or playback is refreshed, access is denied. TESTING Add focused unit tests for state transitions, authorization predicates, normalization, date or money calculations, and other risky domain rules. Add integration tests for persistence constraints and each external adapter’s success, timeout, retry, and rejection paths. Add at least one browser-level test for every end-to-end journey above, including one small-screen viewport. Tests must use isolated data and run through a documented single command. OPERATIONS AND FAILURE RECOVERY Add structured server logs with request, job, or event correlation IDs but no secrets or unnecessarily sensitive data. Make failures actionable in both the interface and logs. Background work must expose pending, succeeded, failed, and retrying states where relevant; do not silently swallow errors. Include safe database migration and rollback guidance, seed data, backup and restore notes, external-data cleanup behavior, and a basic health or diagnostic path appropriate to the stack. DELIVERABLES Ship the working application, migrations, representative seed data, tests, .env.example, and a concise README. The README must cover prerequisites, local setup, environment variables, migrations, seed and test commands, deployment, integration setup, backup and restore, security decisions, and known limitations. Seed data should exercise the happy path plus at least one empty, failed, overdue, expired, archived, or permission-restricted state relevant to the product. DEFINITION OF DONE The app is complete when a fresh developer can follow the README, create and migrate the database, run the app, sign in as each relevant role, complete every named journey using real persisted data, refresh without losing state, recover from common failures, and use the core interface on phone and desktop. All acceptance scenarios pass, permission boundaries are covered by tests, and no core screen is left as a placeholder. NON-GOALS Do not build desktop capture, AI transcription, video editing, or public discovery.
Build just one piece
Not ready to replace all of Loom? Fine. These are the peculiar sub-problems hiding inside it — the parts that are actually interesting to build. Each one is a standalone prompt, scoped to an evening, no strings attached to the full build.
The upload that survives coffee-shop wifiStable chunk ids, gap-only resume, and exactly one media file.
Build resumable chunked upload for screen recordings. The connection will die at 94 percent; plan for it. The client slices the recording into fixed-size chunks, each tagged with a stable recording id and chunk index. Upload several in parallel with bounded concurrency; the server stores each chunk keyed by recording id and index, verifying declared sizes and rejecting mismatches. Chunk uploads are idempotent — re-sending an already-stored chunk is a cheap no-op acknowledged identically — which makes retry logic trivial: on reconnect, ask the server which indexes it holds and send only the gaps. Finalization is explicit: the client declares the total chunk count and a checksum; the server verifies every index is present and sizes sum correctly, assembles in index order, and produces exactly one media object. A duplicate finalize call finds the work done and returns the same answer. Abandoned partial uploads get garbage-collected after a deadline without ever touching completed recordings. Done when: cutting connectivity mid-upload and resuming transfers only the missing chunks, the assembled file is byte-identical to the source, and no retry storm can produce two media objects for one recording.
A recorder that respects the stop-sharing buttonA state machine that survives whatever the browser does next.
Build the recording lifecycle for a browser screen recorder: the state machine between the user and the capture API. States: idle, requesting permission, recording, paused, reviewing, uploading. The transitions the platform forces on you are the interesting ones. The browser's own stop-sharing button can end the stream at any moment, from any state — treat the track's ended event as a first-class stop that lands the user in review with everything captured so far, never a crash or a silent void. Microphone is optional and independently deniable: when screen capture is granted but the mic is denied, confirm once that a silent recording is intended and proceed — no permission re-prompt loop. Pause and resume must keep the elapsed timer honest: accumulate recording spans instead of subtracting wall-clock times. Show an unmissable recording indicator whenever frames are being captured. Retake discards cleanly — stop tracks, release blobs, back to idle — and navigating away mid-recording warns before unload. Done when: the browser-level stop button always yields a reviewable recording, mic denial produces exactly one confirmation and zero re-prompts, and the timer stays accurate through five pause-resume cycles.
Share links that expire mid-bingeShort-lived signed URLs that renew during playback and die on delete.
Build private video playback on signed URLs: links that authorize, expire, and actually revoke. Media objects are never public. The watch page authenticates the viewer, checks recording-level permission, and only then requests a playback URL — signed, short-lived (minutes, not days), scoped to that single object. The player must survive expiry mid-viewing: on a media error past the URL's lifetime, transparently fetch a fresh signed URL, resume at the same position, and only surface an error if re-authorization genuinely fails. Range requests matter — seeking depends on them working through the signed URL — so verify the signature scheme covers ranged reads. Deletion is the acid test: deleting a recording stops new URL issuance immediately. A viewer with the page already open gets cut off at their URL's natural expiry or their next seek, and the watch page then reports the recording gone instead of spinning. No permanent public object URL may exist anywhere: not in page source, not in logs, not in error messages. Done when: a leaked playback URL dies within minutes, seeking works throughout playback, and a deleted recording becomes unwatchable for everyone within one URL lifetime.
Comments pinned to the exact secondComments that seek, markers on the scrubber, and karaoke-style highlights.
Build timestamped comments for a video watch page: feedback pinned to the exact second it is about. The comment box captures the player's current time by default, with a toggle for general comments. Each timestamped comment stores seconds with decimals, renders as a marker on the scrubber, and its timestamp text (1:47) is a click-to-seek control everywhere it appears — in the comment list, in marker tooltips, and inline in comment bodies, where plain-text timecodes like 2:03 should be parsed into live links. The list offers two orderings: by video time for following along, and by posted time for catching up. As playback passes a comment's timestamp, that comment highlights and the comment rail scrolls in sympathy, like a karaoke lyric sheet. Edge cases: a comment at 8:12 on a video later trimmed to 6:00 clamps to the end with a note instead of seeking into the void, and markers within the same second cluster into one expandable marker. Done when: clicking any timestamp seeks precisely, markers sit at the correct positions along the full scrubber width, and playback highlights each comment as it becomes relevant.
Frequently asked questions
How long does it take to build your own Loom?
A basic version — tab recording, upload, share link — takes about 10 hours. Roughly 1 week gets you a solid v1 with comments, folders, library search, retakes. Matching everything Loom really does (desktop capture, ai transcription, video editing) is closer to 1 month+, which is exactly why you should scope down instead.
How much does Loom cost if I keep subscribing?
Loom runs $15–$24 per person per month on public paid plans, which is $180–$288 per year for every person on your team. A focused self-built replacement costs your build time plus close-to-zero hosting.
What stack should I use to build a Loom alternative?
The build prompt on this page ships in four flavors: the AHA stack (Astro, HTMX, Alpine.js), Next.js, Laravel, and Ruby on Rails. The capability context for this product is Astro, Browser API, R2. Pick the stack you already know — the scope matters more than the framework.
What features does a minimal Loom replacement need?
A useful v1 needs: screen, window, or tab capture with optional microphone; recording timer, pause, resume, and retake; upload progress and automatic share link; watch page with title, transcript placeholder, comments, and reactions; library with search, folders, and delete controls. Everything else is scope creep until you personally miss it.
What should I deliberately not build?
Do not build desktop capture, AI transcription, video editing, or public discovery.
Does this build also replace Tella, Screen Studio and Vidyard?
Yes. Loom, Tella, Screen Studio and Vidyard all solve the same core job — record a browser tab or screen and share a private watch page quickly. The scoped v1 on this page covers what most people use any of them for, so one focused build replaces whichever you currently pay for.