Audio & videoCAN I VIBECODE
Rendemo?
BUILD FIRST
- One specific customer type and one primary use case
- A vertical slice that completes the main job without manual workarounds
- Visible limits, review steps, and a fallback when an external dependency fails
LEAVE FOR LATER
- Broad third-party integrations
- High-scale collaboration, syncing, and permissions
- Automation that can cause harm without human review
RESEARCH NOTES
What this tool actually does.
Rendemo is a web tool for creating interactive product walkthroughs. A Chrome extension captures a browser tab, window, or screen (optional mic/camera) and uploads the recording; it preserves clicks, navigation, visual state, and cursor because it captures the real HTML of the app, not just video. The studio lets non-technical users turn one capture into a guided demo in an iframe on a marketing site (no code) or an overlay tour on the live app, anchoring steps to markers in source via data-mode='tour'. Publishing uses one script tag (embed.js with data-demo) that works in plain HTML, React, Vue, and Svelte. The same recording can also export as MP4 as a safety net for browser chrome and moments HTML cannot reproduce. Tours defined in code can be verified in CI so a UI change that breaks a tour fails the build. Pricing is flat per workspace: free, $39/mo Pro, $129/mo Scale, custom Enterp
RESEARCHED BUILD PROMPT
Give this to your coding agent.
Build a replacement for Rendemo, an interactive product-demo platform. Core workflow: a user records a real browser workflow via a Chrome extension; an online studio imports the capture, lets the creator trim and annotate steps, and publishes one of two modes from the same capture — a guided demo (an isolated iframe replay shown on a marketing page) or an overlay tour (markers anchored over the live product). Both publish through a single async script tag; the same capture can also be exported as MP4.
Requirements:
- Chrome extension (Manifest V3): capture tab/window/screen with optional mic/cam, upload to workspace; record DOM snapshot plus interaction events (click, input, navigation, scroll, cursor) so playback is a replayed HTML session, not a video.
- Studio: list captures, trim/edit steps, add titles/descriptions, choose publish mode, preview, publish/revoke.
- Embed: one <script> tag with data-demo and optional data-mode='tour'; support plain HTML, React, Vue, Svelte; sandbox the guided-demo iframe; tour mode requires developer-added marker selectors/attributes in the target app.
- Video export: render the same interaction to MP4 via a headless browser.
- Code-defined tours + CI: allow tour definitions in YAML/JS, verify target selectors exist in CI, and fail the build if a UI change breaks a tour.
- Backend: lightweight workspace auth, demo storage, basic view/step-completion analytics.
Implementation approaches: Node/TypeScript backend with Postgres or SQLite; extension in Manifest V3; replay as an iframe with injected script that restores the captured DOM snapshot and replays the recorded events; embed script as a UMD/ESM bundle; MP4 export with Playwright or similar headless Chrome.
Do not copy Rendemo's brand, logo, site design, or UI text; use a fresh name and neutral styling. Explicitly out of scope: real-time video editor, mobile app, multi-project analytics, billing/payment integration, and enterprise SSO.
Deliver a README covering setup (extension build, dev server, DB migration, embed test page) and important limitations: heavy SPA state that does not survive snapshot restore, pages behind auth, strict CSPs blocking injection, XSS risks of replaying foreign HTML, and fidelity limits of video export.