0

responsively-org/responsively-app

View on GitHub

A modified web browser that helps in responsive web development. A web developer's must have dev-tool.

25,1501,396TypeScriptcontributions-welcomedesktop-appdeveloper-toolselectrongood-first-issuehacktoberfestjavascriptopensource-alternativereactreduxresponsiveresponsive-web-designweb-developmentUpdated 1d ago
README

Responsively App

A modified browser built using Electron that helps in responsive web development.

Quick Demo

Features

  1. Mirrored User-interactions across all devices.
  2. Customizable preview layout to suit all your needs.
  3. One handy elements inspector for all devices in preview.
  4. 30+ built-in device profiles with the option to add custom devices.
  5. One-click screenshots on all your devices.
  6. Hot reloading is supported for developers.

Please visit the website to learn more about the application - https://responsively.app

Download

The application is available for Mac, Windows and Linux platforms. Please download it from responsively.app

Alternatively, MacOS users can use brew

brew install --cask responsively

Also, Windows users can use chocolatey

choco install responsively

or winget:

winget install ResponsivelyApp

Linux users using an RPM Package Manager can use rpm

sudo rpm -i https://github.com/responsively-org/responsively-app/releases/download/v[VERSION]/Responsively-App-[VERSION].x86_64.rpm

otherwise, download an AppImage from the releases page

Follow us on Twitter for future updates - Twitter Follow

Browser Extension

Install the handy browser extension to easily send links from your browser to the app and preview instantly.

MCP Server (AI coding agents)

Responsively App ships a built-in Model Context Protocol server, so AI coding agents like Claude Code and Cursor can drive the app while you build — load your dev server, switch device previews, interact with pages, and visually verify responsive layouts with per-device screenshots.

Install the app, launch it once, then connect from Claude Code:

claude mcp add responsively -- npx -y @responsively/mcp

Or add to Cursor's .cursor/mcp.json:

{
  "mcpServers": {
    "responsively": {"command": "npx", "args": ["-y", "@responsively/mcp"]}
  }
}

The app is launched on demand — connecting an agent session doesn't open it; the first tool call starts it automatically (and it stays open afterwards). If it's already running, it's reused.

Available tools:

| Tool | Description | | --- | --- | | get_app_state | Current URL, page title, layout, zoom and active devices | | navigate | Load a URL in all device previews (waits for the page to load) | | list_devices | Full device catalog, including custom devices | | set_active_devices | Change which devices are previewed, by id or name | | screenshot | Capture one or all device previews as JPEG images | | read_page | Read a preview's page text and interactive elements with CSS selectors | | click | Click an element (trusted mouse event; mirrors across previews) | | type_text | Type into a form field with real keystrokes, optionally press Enter |

Screenshots capture the visible viewport and are downscaled to at most 1000px wide.

The app's MCP server listens on http://127.0.0.1:12720/mcp (localhost only) whenever the app is running. If your MCP client can't run npx, connect to it directly — but you'll need to have the app running yourself:

claude mcp add --transport http responsively http://127.0.0.1:12720/mcp

Environment variables understood by @responsively/mcp:

| Variable | Purpose | | --- | --- | | RESPONSIVELY_APP_PATH | Path to a custom app install (auto-detected otherwise) | | RESPONSIVELY_MCP_PORT | Port of the app's MCP server (default 12720) | | RESPONSIVELY_MCP_BRIDGE | Direct path to a bridge cli.js (development override) |

Linux note: the app ships as an AppImage, so launch it once before first agent use — that's how the CLI learns where it lives.

Issues

If you face any problems while using the application, please open an issue here - https://github.com/responsively-org/responsively-app/issues

Roadmap

Here is the roadmap of the desktop app - https://github.com/responsively-org/responsively-app/projects/

Gold sponsors 🥇

Become a sponsor and have your company logo here

Contribute

To get started with contributing your awesome ideas to Responsively, follow the comprehensive guide here!

Get in touch

Come say hi to us on Discord! :wave:

Contributors ✨

Thanks go to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind are welcome!

Comments0

No comments yet. Set the tone — say what you would want to know.