# How to Vibe Code Your Own Escourtly (and Stop Paying for It) > Record once. Share proof everywhere. - Site: https://escourtly.com - Category: Interactive Product Demos / PLG Marketing Tools - Platforms: Web app, Browser extension - Verdict: **Solid side project** (68/100 vibecodeable) - Estimated effort: 2-3 weeks part-time ## Verdict You can build a functional personal clone of Escourtly, but capturing raw HTML/CSS cleanly inside a Chrome extension and rendering it safely in sandboxed viewers requires careful DOM serialization engineering. The core loop consists of a Chrome extension capturing DOM nodes and CSS rules, a web editor for adding tooltips and blurs, and a viewer page that mounts the sanitized HTML snapshots inside isolated containers. While the web dashboard and editor are straightforward CRUD and canvas state tasks, getting the extension to reliably record live DOM trees without breaking relative asset paths or executing untrusted scripts on replay is genuinely tricky. For personal use, building this as a side project takes a couple of weeks, but maintaining cross-site capture compatibility across modern web apps will test your patience. ### What you can't replicate - The exact brand equity and existing user base of the solo founder - Native compatibility with every weird edge-case web application DOM structure out-of-the-box ## What it does Interactive product demo software that captures live HTML/CSS snapshots via a browser extension, turning user click-through flows into shareable sandboxed walkthroughs with AI annotations, custom branding, and cookieless funnel analytics. ### Core features - Chrome extension for DOM serialization and live event capture - HTML/CSS asset serialization and sandboxed viewer rendering - Visual editor canvas with drag-and-drop step reordering - CSS blur filter injection for PII/data redaction - AI vision/layout parsing for automated step descriptions - Cookieless funnel analytics and drop-off tracking - Custom branding presets and custom domain proxying ## The business ### Pricing - Free Plan: $0 — Creation tier for installing the extension, recording unlimited takes, and testing editor features. - Founder Plan (Pro): $49/mo — Distribution tier unlocking public publishing, custom domains, analytics, and CRM webhooks. Founded 2026. Team size: 1 (Solo founder). ## The hard parts - Reliably serializing external CSS stylesheets, relative asset paths, and fonts without breaking layout inside sandboxed viewer iframes - Replaying user input state (typing, hovers, form states) synchronously across isolated step snapshots - Managing precise coordinate mapping for draggable click hotspots and zoom focus frames - Architecting a performant Chrome extension manifest v3 background worker that intercepts DOM trees cleanly ## How to vibe code Escourtly ### Prerequisites - Node.js (free): Runtime for building the Next.js dashboard, extension build scripts, and backend API routes. - GitHub (free): Repository hosting and CI/CD deployment pipelines. - Google Chrome Developer Account (free): Required for sideloading and publishing the custom screen recording extension. ### Recommended AI tools - Claude Code: Best-in-class terminal coding agent for scaffolding the full-stack Next.js app and Chrome extension manifest v3 code. - Cursor: IDE for fine-tuning complex React canvas components, DOM sanitization logic, and visual editor controls. ### Stack - Frontend: Next.js with Tailwind CSS and Lucide React icons - Backend: Next.js Server Actions and API Routes - Database: Turso (SQLite at the edge for storing tours, steps, and analytics) - Auth: better-auth - Payments: Skip for personal use - Other: Vercel AI SDK for generating step descriptions via Anthropic API, PostHog for cookieless event and funnel analytics ### Hosting - Cloudflare (Hosting the Next.js viewer frontend, API routes, and storing raw HTML snapshot payloads on Cloudflare R2): $0-5/mo ### Build guide 1. **Project Scaffolding & Database Schema** — Initialize the Next.js project with Tailwind CSS, configure Turso database connectivity, and set up better-auth tables for user authentication. ``` Scaffold a new Next.js project with TypeScript, Tailwind CSS, and App Router. Set up Turso database integration using libSQL client with tables for users, tours (id, userId, title, themeConfig, createdAt), steps (id, tourId, stepOrder, htmlContent, cssAssets, selector, annotation, blurRules), and analytics_events (id, tourId, stepId, eventType, timestamp, sessionHash). Implement better-auth for secure user email/password login. Ensure strict TypeScript types across all database schemas. ``` 2. **Chrome Extension Recorder Core** — Build a Chrome extension manifest v3 background script and content script that serializes target DOM nodes, inline styles, and user click coordinates. ``` Create a Google Chrome extension (Manifest v3) with a popup UI containing a 'Record Tour' button. The content script should intercept click events, record target CSS selectors, outerHTML of the active viewport, and computed styles. Package this serialized step payload into a JSON object and POST it securely to our Next.js backend endpoint (/api/tours/import) with user authentication tokens. Handle network retries and display recording status states in the extension popup. ``` 3. **Visual Editor & Redaction Canvas** — Build the web editor dashboard allowing users to reorder captured steps, position click hotspots, and apply CSS blur filters to sensitive elements. ``` Build a dashboard page at /app/tours/[id]/edit using Next.js App Router. Render a drag-and-drop step reordering sidebar using HTML5 drag events or dnd kit. Display the active step's captured HTML inside an isolated sandboxed iframe. Add interactive floating toolbars on the iframe canvas allowing users to place click hotspot pins, configure tooltip text, and click DOM elements to apply high-performance CSS blur filters (backdrop-filter: blur(8px)) over PII. Save updates to the Turso database via server actions. ``` 4. **AI Annotation Engine Integration** — Integrate the Vercel AI SDK and Anthropic API to analyze step DOM selectors and automatically generate clear, concise user instructions. ``` Implement an API route at /api/ai/annotate that receives serialized DOM element snippets and user action logs for a step. Use the Vercel AI SDK with Anthropic Claude Sonnet to parse the target CSS selector and generate a concise, professional step description sentence in JSON format. Add an 'Auto-Generate with AI' button in the visual editor UI that invokes this endpoint and updates the step description state instantly. ``` 5. **Interactive Viewer & Sandboxed Player** — Build the public shareable player page that securely renders HTML snapshots, handles step progression, and applies custom brand styling. ``` Build a public viewer page at /tour/[id] that loads tour configuration and step data. Render the captured HTML snapshot inside a secure sandboxed iframe with scripts disabled for safety, while injecting custom CSS styles, theme colors, and font families based on the tour's custom branding settings. Build a floating step navigation overlay (Next/Back buttons, step counter, progress bar) that dynamically switches the displayed HTML snapshot and highlights active click hotspots. ``` 6. **Cookieless Analytics & Funnels** — Implement privacy-first view tracking and step-by-step conversion funnels without relying on tracking cookies or storing IP addresses. ``` Implement a lightweight telemetry client in the viewer page that logs anonymous session events (view, step_advance, cta_click) to the backend without setting cookies or storing user IP addresses (hash daily user fingerprints instead). Build an analytics dashboard at /app/tours/[id]/analytics that aggregates these logs into a step-by-step funnel showing completion rates, drop-off percentages, and average duration per step. ``` ### Cost vs paying **Starting costs (one-time):** - Custom domain (optional): $12/yr - Chrome Web Store developer registration fee: $5 one-time - Total: ~$17 one-time **Ongoing costs (monthly):** - Cloudflare Workers & R2 Storage: $0-5/mo - Turso Database: $0/mo - Anthropic API usage for AI annotations: ~$3/mo - Total: ~$3-8/mo - Paying for the SaaS instead: $49/mo - Build time: 45-60 hours - AI tool credits: ~$20/mo (Claude Pro / Cursor) - Break-even: 1 month ## Sources - [Escourtly Official Website & Landing Page](https://escourtly.com) - [Escourtly Docs - Plans and Billing](https://escourtly.com/docs/account/plans)