ResponsiveView

Test responsive layouts across multiple device viewports simultaneously.

Overview

ResponsiveView is an Electron desktop application that helps developers test their websites and web applications across different screen sizes and devices. It displays multiple viewports side by side, allowing you to see how your responsive design looks on various devices at once.

Features

• Multiple device viewports (mobile, tablet, desktop)
• Device presets (built-in + configurable)
• Synchronized scrolling
• Screenshots (visible area / full page)
• Recent URLs

Getting Started

Prerequisites

• Node.js 16+
• npm

Setup

1. Clone this repository:

git clone https://github.com/kodzamani/ResponsiveViewApp.git
cd ResponsiveViewApp

2. Install dependencies:

npm install

Usage

Development

Start the application:

npm start

Build

Build for your current platform:

npm run build

Platform-specific builds:

npm run build:win    # Windows
npm run build:linux  # Linux
npm run build:mac    # macOS

Test

Run tests:

npm test

Run unit tests only:

npm run test:unit

How to Use

1. Launch the app with npm start
2. Click New Preview and enter a URL (e.g. example.com)
3. Enable/disable viewports from Devices
4. Use Sync scroll and Screenshot options as needed

Architecture

This project follows a clean architecture pattern:

• Domain: core logic (presets, validation, scroll sync)
• Infrastructure: Electron IPC & window management
• Renderer: UI

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

Development Guidelines

• Keep changes small and readable
• Add/update tests when applicable

---

If you liked this project, don’t forget to star it.

MIT License · LICENSE
Created by Aygün AKYILDIZ · GitHub