# openscreen | Sid | Knowledge Base | Instagit Create stunning demos for free. Open-source, no subscriptions, no watermarks, and free for commercial use. An alternative to Screen Studio. GitHub Stars: 17.1k Repository: https://github.com/siddharthvaddem/openscreen --- ## Articles ### [How OpenScreen Integrates dnd-timeline for Drag-and-Drop Region Management](/siddharthvaddem/openscreen/openscreen-timeline-integration-dnd-timeline-drag-drop-regions) Discover how OpenScreen integrates dnd timeline for drag-and-drop region management. Learn about global state, callbacks, and video constraints. - Tags: deep-dive - Published: 2026-04-03 ### [How OpenScreen Stores and Restores Recording Sessions Between Application Launches](/siddharthvaddem/openscreen/openscreen-recording-session-storage-restoration) Learn how OpenScreen stores and restores recording sessions using JSON manifest files, ensuring your progress is saved and accessible across application launches. - Tags: internals - Published: 2026-04-03 ### [How OpenScreen Uses PixiJS for Video Playback, Compositing, and Rendering Effects](/siddharthvaddem/openscreen/openscreen-pixijs-usage-video-playback-compositing-rendering) Discover how OpenScreen uses PixiJS for efficient video playback, stunning compositing, and advanced rendering effects. Learn about its powerful 2D rendering capabilities. - Tags: deep-dive - Published: 2026-04-03 ### [How OpenScreen's Electron IPC Bridge Enables Secure Main-Renderer Communication](/siddharthvaddem/openscreen/openscreen-electron-ipc-bridge-communication) Discover how OpenScreen's Electron IPC bridge uses contextBridge and ipcRenderer to securely connect React renderer to Node.js functionality in the main process. - Tags: internals - Published: 2026-04-03 ### [How Shadow Intensity, Border Radius, and Padding Work as Visual Effects in OpenScreen](/siddharthvaddem/openscreen/openscreen-visual-effects-shadow-border-padding) Learn how OpenScreen applies shadow intensity border radius and padding as visual effects using CSS drop-shadow filters PixiJS masks and viewport scaling for stunning graphics. - Tags: deep-dive - Published: 2026-04-03 ### [What Is Cursor Telemetry in OpenScreen? Mouse Movement Tracking and Replay Explained](/siddharthvaddem/openscreen/openscreen-cursor-telemetry-mouse-movement-tracking-replay) Discover cursor telemetry in OpenScreen. Learn how this mouse movement tracking and replay feature captures and stores coordinate data for enhanced screen recording analysis. - Tags: deep-dive - Published: 2026-04-03 ### [How OpenScreen Generates Zoom Suggestions from Cursor Movement](/siddharthvaddem/openscreen/openscreen-zoom-suggestions-automatic-zoom-regions) Discover how OpenScreen analyzes cursor movement and dwell periods to automatically generate smart zoom suggestions during video playback for improved user engagement. - Tags: internals - Published: 2026-04-03 ### [How OpenScreen Calculates and Applies Aspect Ratios for Different Export Dimensions](/siddharthvaddem/openscreen/openscreen-aspect-ratio-calculation-export-dimensions) Discover how OpenScreen calculates and applies aspect ratios for various export dimensions. Learn how it converts labels to numeric values and computes even pixel dimensions. - Tags: internals - Published: 2026-04-03 ### [How OpenScreen Export Quality Presets Affect Video Resolution and Bitrate](/siddharthvaddem/openscreen/openscreen-export-quality-presets-resolution-bitrate) Understand how OpenScreen export quality presets source medium and good impact video resolution and bitrate. Learn how settings affect pixel count and visual fidelity. - Tags: deep-dive - Published: 2026-04-03 ### [Understanding the Coordinate System for Zoom Focus Points in OpenScreen](/siddharthvaddem/openscreen/openscreen-zoom-focus-points-coordinate-system-clamping) Learn the 0-1 coordinate system for OpenScreen zoom focus points. Discover how values are clamped within safe margins to prevent out-of-bounds viewing. - Tags: deep-dive - Published: 2026-04-03 ### [How OpenScreen's Wallpaper System Supports Solid Colors, CSS Gradients, and Custom Images](/siddharthvaddem/openscreen/openscreen-wallpaper-system-backgrounds) Learn how OpenScreen's wallpaper system supports solid colors, CSS gradients, and custom images by treating the wallpaper prop as a generic CSS background value. - Tags: internals - Published: 2026-04-03 ### [How Keyboard Shortcuts Are Configured and Matched Against User Input in OpenScreen](/siddharthvaddem/openscreen/openscreen-keyboard-shortcuts-configuration-matching) Discover how OpenScreen configures keyboard shortcuts and matches them against user input. Explore its type-safe system for efficient key binding and conflict validation. - Tags: internals - Published: 2026-04-03 ### [Understanding the i18n Architecture in OpenScreen: How Locales Are Loaded and Switched](/siddharthvaddem/openscreen/openscreen-i18n-architecture-locale-management) Explore OpenScreen's i18n architecture. Learn how it efficiently loads and switches locales using Vite, React context, and a minimal translation module for seamless internationalization. - Tags: internals - Published: 2026-04-03 ### [How OpenScreen's Undo/Redo System Tracks Editor State Changes with useEditorHistory](/siddharthvaddem/openscreen/openscreen-undo-redo-system-useeditorhistory) Discover how OpenScreen's undo/redo system tracks editor state changes using useEditorHistory. Learn about its past-present-future stack and state update methods. - Tags: internals - Published: 2026-04-03 ### [How OpenScreen Speed Regions Enable Variable Playback Speed from 0.25x to 2x](/siddharthvaddem/openscreen/openscreen-speed-regions-variable-playback-speed) Discover how OpenScreen speed regions enable variable playback speed from 0.25x to 2x. Learn how this editing primitive adjusts playback and recalculates duration for seamless high-quality video. - Tags: deep-dive - Published: 2026-04-03 ### [Motion Blur Implementation in OpenScreen: Smooth Pan and Zoom Effects Explained](/siddharthvaddem/openscreen/openscreen-motion-blur-implementation-pan-zoom) Discover how OpenScreen achieves smooth pan and zoom with motion blur. Learn about the PixiJS MotionBlurFilter and custom physics engine for real-time camera velocity blur. - Tags: deep-dive - Published: 2026-04-03 ### [Webcam Compositing Layout Presets in OpenScreen: Picture-in-Picture and Vertical-Stack](/siddharthvaddem/openscreen/openscreen-webcam-compositing-layout-presets) Explore OpenScreen's webcam compositing layout presets like picture-in-picture and vertical-stack to control how webcam feeds integrate with your screen content during recordings. Optimize your video. - Tags: how-to-guide - Published: 2026-04-03 ### [How OpenScreen Implements Crop Regions for Video Recordings: A Technical Deep Dive](/siddharthvaddem/openscreen/openscreen-crop-region-implementation-hiding-video) Discover how OpenScreen uses normalized coordinates for crop regions in video recordings. Learn about Pixi.js sprite positioning, masking, and canvas clipping for accurate previews and exports. - Tags: deep-dive - Published: 2026-04-03 ### [How Annotation Regions in OpenScreen Support Text, Images, and Figure Overlays with Styling](/siddharthvaddem/openscreen/openscreen-annotation-regions-text-image-figure-styling) Discover how OpenScreen annotation regions unify text, image, and figure overlays with precise styling support. Explore canvas export and live UI rendering capabilities. - Tags: how-to-guide - Published: 2026-04-03 ### [OpenScreen Project File Format: JSON Structure and Electron Persistence](/siddharthvaddem/openscreen/openscreen-project-file-format-persistence) Discover OpenScreen's project file format. Learn how projects are saved as readable JSON documents using Electron for seamless persistence and easy data management. - Tags: internals - Published: 2026-04-03 ### [How OpenScreen Handles MP4 Encoding with Quality-Based Bitrate](/siddharthvaddem/openscreen/openscreen-video-export-mp4-encoding-quality-bitrate) Discover how OpenScreen optimizes MP4 encoding with quality-based bitrate for efficient video export. Learn about hardware-accelerated H.264 and WebCodecs integration. - Tags: internals - Published: 2026-04-03 ### [OpenScreen Zoom Depth Levels and Scale Factors: Complete Developer Guide](/siddharthvaddem/openscreen/openscreen-zoom-depth-levels-and-scale-factors) Explore OpenScreen's six zoom depth levels and scale factors from 1.25x to 5.0x. This developer guide details available zoom options for your OpenScreen projects. - Tags: developer-guide - Published: 2026-04-03 ### [How OpenScreen Manages Multiple Timeline Region Types: Zoom, Trim, Speed, and Annotations Simultaneously](/siddharthvaddem/openscreen/how-openscreen-manages-multiple-timeline-region-types) Discover how OpenScreen masterfully handles zoom, trim, speed, and annotation regions by managing them in EditorState and compositing them via FrameRenderer for seamless playback and export. - Tags: internals - Published: 2026-04-03