Responsively App

Responsively App is a purpose-built desktop browser for web developers that renders your website in multiple device viewports at once. Instead of tediously switching between browser DevTools presets or physically resizing a window, you get a unified panel showing every screen size side by side, all reacting to your changes in real time.

At its core, the app embeds real Chromium-based webviews inside an Electron shell, so rendering is pixel-accurate — not emulated. Interactions are synchronized via BrowserSync: scroll one device and every other scrolls with it; click a link and all devices navigate together. This eliminates the repetitive manual testing loop that eats hours of every responsive-design cycle.

The tool ships with over 30 built-in device profiles spanning iPhones, iPads, Android handsets and tablets, and common desktop breakpoints. A custom device manager lets you add your own dimensions with DPR, touch capability, and user agent settings. Multiple preview layouts — flex wrap, masonry, and individual focus mode — adapt to different workflow preferences. Full-page screenshots across all devices are captured with a single click.

Responsively App is fully free and open source under the AGPL-3.0 license, with pre-built installers for macOS, Windows, and Linux available through the project website or package managers like Homebrew, Chocolatey, and winget.

What You Get

• Synchronized multi-device preview - Every device viewport renders your site simultaneously and stays in sync: scrolling, clicking, form inputs, and navigation all propagate instantly to every other device in the panel.
• 30+ built-in device profiles with custom device support - Preconfigured profiles for iPhones, iPads, Android devices, and common desktop resolutions, plus a device manager UI for adding custom dimensions, DPR, user agents, and touch capabilities.
• Design overlay comparison - Import a mockup image and place it as a transparent overlay on top of a device preview with an adjustable clip divider, or display it side-by-side for pixel-level design-to-implementation comparison.
• One-click full-page screenshots for all devices - Capture viewport or full-page screenshots of every device in your active suite simultaneously, saved automatically to a configurable output directory.
• Unified element inspector - Open a single DevTools inspector panel that works across all device previews at once, letting you hover over elements and inspect computed CSS without switching contexts.
• Color blindness simulation - Apply deuteranopia, protanopia, tritanopia, and other color vision deficiency filters to device previews for accessibility testing without external tools.
• Preview suites and multiple layouts - Save named groups of devices as suites for quick context switching, and choose between flex-wrap, masonry, or individual focus layouts to match your current workflow.
• Browser extension for instant page sending - A companion extension for Chrome, Firefox, and Edge sends the current tab URL directly to the app for immediate multi-device preview.

Common Use Cases

• Mobile-first layout validation - A frontend developer finishes implementing a new CSS grid layout and opens it in Responsively to simultaneously verify breakpoints across iPhone SE, iPhone 15, iPad, and a 1440px desktop, catching overflow issues before they hit staging.
• Design handoff comparison - A UI developer imports a Figma export as a design overlay on the 390px device preview and drags the clip divider to compare the implementation pixel-by-pixel without leaving the browser.
• Accessibility review across form factors - A QA engineer enables deuteranopia simulation on all previews to verify that color contrast and visual hierarchy remain clear for color-blind users across mobile and desktop.
• Client demos - A freelance developer demonstrates a new website to a client by showing all device sizes reacting to navigation in real time, making the responsive behavior tangible without needing physical devices.
• Screenshot documentation for design specs - A product team generates full-page screenshots of a component across eight device sizes with one click, embedding them directly into a Notion or Confluence page for stakeholder review.

Under The Hood

Architecture Responsively App is organized as a three-layer Electron application: a main process handling native OS responsibilities — window management, IPC registrations, browser-sync orchestration, screenshot capture, app updates, and web permissions — a Redux-backed React renderer driving the UI, and a shared common module containing device definitions, constants, and cross-boundary utilities. Inter-process communication is enforced through a typed preload bridge that exposes a window.electron API object to the renderer, creating a hard boundary between Chromium and Node.js execution contexts. Redux Toolkit slices manage state for device management, devtools docking, ruler and guide overlays, design overlays, and UI preferences, each slice persisting its own state to electron-store through direct store calls wired into slice reducers. The architecture is cleanly modular and navigable, though integration between slices relies on shared Redux selectors rather than formal service abstractions.

Tech Stack Electron 40.x provides the desktop shell, embedding real Chromium webviews for pixel-accurate rendering of each device viewport without proxies or emulation. React 18 with TypeScript drives the renderer process, using Redux Toolkit for predictable state management and electron-store for persistent local configuration with JSON schema validation. Webpack 5 maintains separate production and development build pipelines for both main and renderer processes. BrowserSync is embedded as a runtime server that injects synchronization scripts into loaded pages, enabling real-time mirroring of scroll, click, and input events across all device webviews. Tailwind CSS 3 handles component styling. Playwright runs the full end-to-end test suite against the packaged Electron binary, while Vitest with Testing Library covers unit and slice-level tests. Native distribution targets macOS (arm64 and x64 via electron-builder), Windows (NSIS installer), and Linux (AppImage and RPM).

Code Quality The project has comprehensive Playwright end-to-end coverage with 29 spec files validating cross-device interaction mirroring, device manager operations, screenshot capture, keyboard shortcuts, file watching, color blindness simulation, insecure SSL handling, address bar behavior, and error recovery. Unit tests using Vitest exist for Redux slices handling design overlays and store migrations, with realistic mocking of the electron-store API. TypeScript is applied throughout with strict module aliasing resolving renderer, main, common, and store paths without relative imports. ESLint enforces React, React Hooks, accessibility, and import-ordering rules, committed through lint-staged pre-commit hooks. Error handling in device webviews includes typed error states surfaced as user-visible overlays. Some technical debt is visible in a commented-out main App.test.tsx body and type cast workarounds for third-party library incompatibilities.

What Makes It Unique The synchronized interaction model is the defining technical contribution: BrowserSync is embedded directly as a runtime server that injects its synchronization client into every loaded page, causing scroll position, click coordinates, form inputs, and navigation to broadcast across all Electron webviews simultaneously. This produces testing behavior that browser DevTools device emulation cannot replicate — genuine parallel rendering with real engine behavior. The design overlay system adds a distinct capability: a mockup image can be positioned as a transparent layer over a live device preview with a draggable clip divider that reveals or hides portions of the implementation behind the design, with scroll position mathematically translated to keep the overlay image aligned with the webview content. These two features together address a workflow gap that no other open-source responsive testing tool covers with equivalent depth.

Self-Hosting

Responsively App is released under the GNU Affero General Public License v3.0 (AGPL-3.0). In plain terms, this means you can use, modify, and distribute the application freely, including for commercial development work. The important AGPL distinction from MIT or Apache is the network-use clause: if you modify the application and make it available over a network to others, you must also publish your modifications under the same license. For the vast majority of developers using this as a desktop tool for their own workflow, the AGPL places no practical restrictions on how you use it.

The operational reality of Responsively App is straightforward — it is a local desktop application, not a service you host. There is no server to provision, no database to manage, and no infrastructure to maintain. Installation is a single binary download or package manager command, and updates are delivered automatically through the built-in Electron updater. The application stores all configuration (device suites, preferences, bookmarks, history) in a local electron-store JSON file on the user’s machine. There are no user accounts, no data sent to external servers, and no licensing servers to authenticate against.

There is no paid or cloud tier for Responsively App. What you download is the complete product. The project is sustained through open-source contributions and optional sponsorship via Open Collective. The trade-off compared to commercial browser testing services like BrowserStack or LambdaTest is that Responsively tests only in the Chromium engine embedded in your Electron version — it does not give you access to Safari, Firefox, or real device hardware. For teams that need cross-engine validation or actual mobile device testing, a cloud testing service would need to complement rather than replace Responsively App.