InstaDemoX
GitHubInteractive product demo creation platform for SaaS companies.
Overview
InstaDemoX empowers marketing and sales teams to create highly interactive product walkthroughs by capturing DOM states rather than recording heavy video files.
The Problem
Creating engaging product demonstrations requires significant engineering resources to build custom sandboxes, or forces users to watch non-interactive video recordings.
System Architecture
Engineering Trade-offs
Opted for DOM capturing instead of video recording. This reduced storage costs by 99% and allowed interactivity, but required writing complex CSS mutation observers to handle dynamic styling.
Lessons Learned & Future
Production Learnings
Shadow DOM boundaries break standard serialization libraries. Had to write custom traversal logic to capture modern web components.
Future Improvements
Adding AI-generated voiceovers synchronized with the user's click path.
Database Layer
Supabase (PostgreSQL) for storing serialized DOM nodes, user accounts, and analytics events.
API Design
REST API for managing demo assets. Lightweight analytics ping endpoint for tracking user engagement inside the embedded player.
Security Decisions
1. Implemented strict HTML sanitization (DOMPurify) on the serialized DOM before rendering in the player to prevent Stored XSS attacks. 2. Enforced CORS policies on the embed player API.
Scale & Metrics
Embed player script is <30kb gzipped. Average demo loads in under 1 second.