Snapify is a self-hostable screen recording and video sharing platform designed as an open-source alternative to Loom. It enables users to record their screen, tab, or any application with no account required, generate public links to share recordings, and delete or un-list videos after a set time. Ideal for engineering teams, support staff, and remote collaborators who need to share visual context without compromising data ownership.
Built with Next.js and TypeScript, Snapify uses Prisma for database management, GitHub OAuth for authentication, and AWS S3 (via Backblaze B2) for secure video storage. It supports deployment on Vercel or any Node.js environment, with full control over data via self-hosting options and environment-driven configuration for databases and cloud storage.
What You Get
- Unlimited Screen Recordings - Record your screen, browser tab, or any application with no account needed and no usage limits.
- Public Video Links - Share recordings via a direct URL; recipients can watch without signing in or creating an account.
- Time-Limited Video Expiry - Set recordings to auto-delete or become un-listed after a specified timeframe for privacy control.
- External Video Upload - Upload and share pre-recorded videos in common formats, extending functionality beyond live recording.
- Self-Hosting Support - Deploy on your own infrastructure using Docker, Vercel, or any Next.js environment with full data control.
- AWS S3 / Backblaze B2 Integration - Store videos securely in private buckets using AWS-compatible endpoints with key-based authentication.
Common Use Cases
- Reviewing code changes asynchronously - Engineers record screen demos of bug fixes or feature implementations to share with reviewers without scheduling meetings.
- Onboarding new team members - Support and engineering teams upload walkthroughs of internal tools to accelerate knowledge transfer.
- Providing visual customer support - Support agents record step-by-step solutions to common issues and share links with customers for self-service resolution.
- Documenting internal processes - Teams record and archive workflows, UI interactions, or system behaviors as reference videos accessible via permanent links.
Under The Hood
Architecture
- Next.js App Router enforces a clean separation between server and client layers, with API routes organized under dedicated server directories and powered by tRPC for end-to-end type safety
- State management is thoughtfully partitioned using Jotai for local UI state and React Query for server state, preventing global state bloat and ensuring predictable data flows
- Authentication and billing systems are modularized with NextAuth and Stripe integrations, while UI components follow a composition model with reusable, utility-driven modules like VideoLayout
- Dependency injection is achieved through React context and tRPC client instantiation, with Prisma ORM and environment variables abstracted to maintain clean server-side boundaries
Tech Stack
- Modern SSR/SSG stack built on Next.js, React 18, and TypeScript, leveraging server components and the App Router for optimized rendering
- Prisma serves as the primary ORM with PostgreSQL/MySQL support, tightly integrated with NextAuth for seamless authentication state management
- Tailwind CSS and shadcn/ui form the foundation of a consistent, themable UI, enhanced with custom utility classes and accessible components from Radix UI and Lucide icons
- AWS SDK handles S3 uploads and presigned URLs, while Upstash Redis and QStash enable caching and event-driven workflows with minimal external dependencies
- tRPC powers type-safe client-server communication, reducing boilerplate and enabling real-time data interactions, complemented by Playwright for comprehensive E2E testing
- Dockerized deployment via multi-stage Node.js containers ensures consistent, production-ready builds with optimized resource usage
Code Quality
- Extensive end-to-end testing with Playwright validates critical user flows including authentication, billing, and video operations with realistic interactions
- Strong component-based organization separates UI, state, and API concerns, though some logic remains tightly coupled with presentation layers
- Comprehensive TypeScript usage ensures type safety across the entire stack, including custom module declarations and typed API hooks
- Robust error handling employs conditional rendering and user-friendly alerts, with fallbacks for browser feature detection rather than complex error classes
- Consistent naming and modular file structures promote maintainability, with atomic state atoms and utility functions logically grouped by feature
- Linting and type checking are implicitly enforced through the Next.js and TypeScript toolchain, though explicit configuration is not visible
What Makes It Unique
- Seamlessly integrates VidStack with Radix UI and Lucide icons to build a cohesive, accessible video control system with state-driven animations and tooltips
- Implements real-time video rename and delete operations with optimistic UI updates via React Query, eliminating unnecessary page reloads
- Designs a context-aware paywall system that adapts dynamically to user actions (recording vs. uploading) and embeds PostHog analytics directly into subscription flows
- Leverages Next.js App Router and atomic state to create a fluid, non-refreshing video workflow from capture to storage
- Builds a browser-native screen recording flow with embedded Stripe checkout that triggers paywalls based on user intent rather than static feature locks
- Uses Upstash Redis for server-side rate limiting, enabling scalable usage control without relying on third-party services