# Responsively App — Mirrored Multi-Device Browser for Web Developers

> A modified browser that displays a web page on multiple device viewports simultaneously with synchronized scrolling, clicking, and navigation for responsive web development.

## Install

Save in your project root:

# Responsively App — Mirrored Multi-Device Browser for Web Developers

## Quick Use
```bash
# Homebrew (macOS)
brew install --cask responsively

# Or download from the website / GitHub Releases
# for Windows (.exe), macOS (.dmg), and Linux (.AppImage)
```

## Introduction
Responsively App is a desktop browser built for responsive web development. It renders a URL across multiple device viewports side by side with synchronized interactions. When you scroll, click, or type in one viewport, all others mirror the action, letting you test responsive designs across breakpoints in a single window.

## What Responsively App Does
- Displays a web page across multiple device viewports simultaneously in one window
- Synchronizes scrolling, clicking, typing, and navigation across all viewports
- Provides a built-in device toolbar with presets for phones, tablets, and desktops
- Includes an element inspector and devtools for debugging each viewport
- Captures screenshots of individual or all viewports for sharing

## Architecture Overview
Responsively is an Electron application that uses multiple embedded Chromium webviews to render the same URL at different resolutions. A coordination layer intercepts DOM events (scroll, click, input) in one webview and replays them in all others. The device manager stores viewport dimensions, user agent strings, and pixel ratios for preset devices.

## Self-Hosting & Configuration
- Download the installer for your platform from GitHub Releases or the project website
- Add custom device profiles with specific width, height, and user agent in the device manager
- Toggle horizontal or vertical layout depending on your screen orientation
- Use the built-in screenshot tool to capture all viewports in one click
- Configure network throttling to simulate slow connections across devices

## Key Features
- Mirrored interactions keep all device views in sync during testing
- 30+ preset device profiles covering popular phones, tablets, and desktops
- One-click screenshot of all viewports for quick design reviews
- Hot reload detection works with development servers like Vite and webpack-dev-server
- Built-in browser devtools accessible per viewport

## Comparison with Similar Tools
- **Chrome DevTools device mode** — emulates one device at a time; Responsively shows many simultaneously
- **Sizzy** — similar multi-viewport concept but commercial; Responsively is free and open source
- **Polypane** — paid development browser with accessibility checks; Responsively focuses on free responsive testing
- **Browser resizing extensions** — manually resize one window; Responsively automates multi-device preview
- **BrowserStack** — cloud-based real device testing; Responsively is local and instant with no account required

## FAQ
**Q: Does Responsively use real device rendering?**
A: It uses Chromium with device emulation (viewport size, user agent, pixel ratio), which is the same engine behind Chrome DevTools device mode.

**Q: Can I test pages behind authentication?**
A: Yes. Since it is a real browser, you can log in normally and the session persists across all viewports.

**Q: Does it work with hot module replacement?**
A: Yes. It detects HMR from tools like Vite, webpack, and Next.js and refreshes all viewports automatically.

**Q: Is Responsively free?**
A: Yes. It is free and open source under the AGPL-3.0 license.

## Sources
- https://github.com/responsively-org/responsively-app
- https://responsively.app/

---
Source: https://tokrepo.com/en/workflows/dc7f9b81-4384-11f1-9bc6-00163e2b0d79
Author: AI Open Source