responsively-org / responsively-app

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

Responsively App

A must-have devtool for web developers for quicker responsive web development. 🚀

Save time by becoming 5x faster!

Download Now (free!): responsively.app

Responsively App

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

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 option to add custom devices.
5. One-click screenshot all your devices.
6. Hot reloading supported for developers.

Please visit the website to know 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 -

Browser Extension

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

• Download for Chrome
• Download for Firefox
• Download for Edge

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/12?fullscreen=true.

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! 👋

Contributors ✨

Thanks go to these wonderful people (emoji key):

Manoj Vivek 💻 ⚠️ 📆	Suresh P 💻 ⚠️ 📆	Sigit Prabowo 💻	Leon Feng 📖	Kishore S 💻
José Javier Rodríguez Zas 💻 ⚠️	Roman Akash 💻	Romain Francony 💻	AARYAN-MAHENDRA 💻	Andy 💻
Ryan Pais 💻 ⚠️	Jonathan 💻	Gema Anggada ✌︎ 💻	jonathanurias96 💻	Federico Alecci 💻
Abduraimov Muminjon 📖	Víctor Lázaro 💻	Kavita Nambissan 💻	Prashant Palikhe 💻	Jaune Sarmiento 🖋
Diego Vieira 💻	Ajaykumar 💻	Kiruba Karan 💻	Sebastián Rodríguez 💻	Karthick Raja 💻
Johnny Zabala 💻	Ross Moody 🎨	Mehrdad Shokri 🚇	Abdelhak Akermi 💻	Carlos Perez 💻
Jayant Arya 💻	John Rawlins 💻	lepasq 💻	mrfelfel 💻	gorogoroumaru 💻
Rui Saraiva 💻	Mehmet Bakirci 💻	Julien Bertazzo Lambert 💻	Dinesh Balaji 💻	MedBMoussa 💻
Lucie Vrsovska 💻	Jakub Cabak 💻	Palakurthi Durga Kiran Kumar 💻	Karl Labrador 💻	Rishi Kumar Chawda 💻
Carlos Rafael de Oliveira Carneiro 💻	Zach Hoskins 💻	KIWAN KIM 💻	Andreas 💻	Panu Valtanen 💻
Dustin Dauncey 💻	heagan01 💻	Sahil Jangra 💻	Jay Carlson 💻	Michael Padilla 💻
Andreas Steinkellner 💻	aniknia 💻	Wayne Rocha 💻	crbon 💻	Mohammad S 💻
Reshad Sadik 💻	Kwesi Ansah 💻	Monalisa Sahoo 💻	Mitesh Tank 💻	Ryan 💻
jayway 💻	Alex Fernandez 💻	Danial Gharib 💻	Alexander Menk 📖	Tunahan Gediz 📖
Jeff Bowen 💻	Param Birje 💻	Prajjwal Yadav 📖	Steven Cabrera 💻	negar nasiri 💻
Gaurav Singh 💻	Nishidh Jain 💻	Samiksha Mishra 📖	Len Dierickx 💻	Suraj Bobade 💻

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

responsively-app's Issues

Add toolbar option to clear the cookies and local storage for the devices.

Full refresh shortcut

In Chrome I can do a full refresh with CTRL+SHIFT+r
It would very useful to have that available in the app as well, or pls let me know if I'm just not able to find the same functionality.
Currently I can't test CSS changes because the app just keeps the cached CSS.

Windows download through Chrome detects Virus when downloading

this appears when downloading the last .exe from Releases section

Can you prevent it if this is not a virus?

Multi-screenshot duplicates info on the largest screen

I'm not exactly sure what's going wrong, but I think there's an issue with syncing the scroll for full-page screenshots.

Here's with 4 portrait devices: iphone 6/7/8 plus, iphone x, ipad, laptop. Browsing https://www.freedomhot.com

The laptop one has duplicated parts of the screen (probably because it already reached the bottom of the page?)

Localhost - iPad - 2020-25-5 at 9 55 05 PM
Localhost - Laptop - 2020-25-5 at 9 55 05 PM

When I add a kindle fire hdx to the list (actually the "laptop" crashed during screenshot. But closing it and relaunching)... the kindle fire hdx is now OK, but both the ipad and laptop are messed up.

Freedomhot - Laptop - 2020-25-5 at 9 59 28 PM
Freedomhot - iPad - 2020-25-5 at 9 59 28 PM
Freedomhot - Kindle Fire HDX - 2020-25-5 at 9 59 28 PM

I made sure I started the scrolls all the way on top, no funny interactions to change the state.

Great Work! Thanks for making this!

@manojVivek Thanks for Making this man! 🎉

Well done bruv!

Add "Help -> About" menu

primary driver: there is no way I can see in which version the app is currently installed ?

possible additional infos in this menu could be

• version of the app
• link to the website
• link to the github repo
• link to the docs
• credits for the author

Alt-click not mirrored

For development mode, I set up that alt-click on a button would fill some data in, for validation to see the next step.
I see that it only works in the screen I clicked in.

I guess it's copying the click, but not any modifiers - alt, meta, ctrl, etc.

Reload when anchor is added in url

For example if you are in example.com and you click on a link who go to example.com#example all device reload the page. If #example is added by javascript it's the same issue.

Thanks for this tool.

Responsive test

Desktop Vertical- and Horizontal Scrollbar also on Non-Desktop-devices

First: "Responsively" is a great idea.

Issue: Normal desktop scrollbars are also on non-desktop devices

Threat identified on Windows 10

I downloaded the release ResponsivelyApp-Setup-0.1.4.exe and when I executed the app, Windows Defender triggered an action. I'm sure that your project is not a 'malware' or something like that, but I think is important make a patch for this issue.

FHD resolution doesn't work

When I select a HD resolution, this isn't added (or created) and all the devices are selected automatically.

Windows Defender alert on Trojan:Win32/Fuery.C!cl on version 0.1.4

Add a screenshots gallery to the sidebar

Upgrade electron to latest version

Add option to proceed to website (unsafe) as Chrome does when ERR_CERT_AUTHORITY_INVALID

Firstly, great app! thanks!
It would be great, especially when developing a website, that when the error ERR_CERT_AUTHORITY_INVALID is received, it can be ignored (optionally) as it can be done in Chrome

CTRL + R not working on other applications if resposnively is opened

If responsively is opened and not a active window, CTRL + R does not work on other active applications.
Had my bash opened and was trying reverse search using CTRL + R. Reverse search was not triggered, On closing responsively, it worked. Looks like reloading in this issue is causing the issue

Third-party sign in via Google doesn't work

Navigate to this web site:

https://www.invisiblesolutionslenses.com

Click "Lenses" in top navigation.

Click "Sign Up or Log In" button.

Click "Sign in with Google".

Can't sign in. Either page keeps re-drawing, or Google complains that the browser is not secure.

Add option to modify device network settings

Provide option for the following:

1. Turn network offline.
2. Throttle network speed.
3. Clear network cache.

Add a smooth scroll for Responsively page

Adding a CSS scroll-behavior: smooth on the HTML tag would make the website to scroll smoothy when the Nav links are clicked.

Adding a new device moves all devices from Inactive Devices column to Active Devices column, does not add new device

Description

When adding a new device, after filling out the device info and clicking "Add", all devices from the Inactive Devices column are immediately moved to Active Devices column. The new device is not actually created. Furthermore, when I drag-and-drop the devices back to the Inactive Devices column, the device card disappears. The behavior from the home screen accurately reflects what devices are in the Active Devices column, but the Inactive Devices column remains empty until restarting the program.

App Details

Responsively version 0.1.5
MacOS 10.15.4

Steps to Reproduce

1. In sidebar, under DEVICES, click CUSTOMIZE
2. From Manage Devices screen, click + NEW DEVICE
3. Add device information (seemingly any combination of information and options selected yield the same results)
4. Click ADD - this will move all device cards from Inactive to Active and new device is not created
5. Click and Drag any device card from Active column to Inactive column and they disappear.

Local certificates

How can I get to settings to be able to disable certificate verification for local certs?

Add responsive mode to freely resize the viewport

In the Chrome dev tool, there is a mode that lets you freely resize your viewport

Add new device does not work

When I want to add a new device, it is not added, plus it moves all inactive devices to the active devices column.
I'm working on macOs

Scroll event doesn't get sent to other devices when mouse is already on a device when it loads.

Create a browser extension to open the app from the browser with the current page URL

Side-by-side compare designs with the running app

Screenshot capture throws an error for local html files loaded from `File` -> `Open HTML file`

Include checksum file for the binaries in the release assets

latest-linux.yml contains the sha512 checksum of AppImage 0.1.3 instead of 0.1.4

By the way very useful project! thank you very much for your effort.

Window wont refresh if any input is passed by mistake on codepen.io.

What's the issue?

When testing my pen for responsiveness using you app. I came across a bug in which if I accidently edit the pen in any window. Then that window will stop refreshing. Until app is restarted.

Expected behaviour?

All windows should be in sync. If a window is recieving input then either input should be in sync too or atleast windows location/url should be in sync.

Steps to reproduce.

1. Open https://codepen.io/akashraj9828/full/eYpPEQq link in the app
2. Change anything on any window (eg. modify html on one window)
3. Try to navigate to another url or anything
4. The changed window will be stuck forever and wont update at all untill app restart.

How to solve?

What's happening is simply when we try to navigate away from an page that's recieving input. Browser Fires an alert which stops the flow until user makes its choice. But we cant see alerts in this application so that window is stuck there forever.

Solution: Ignore any alerts by browser and force sync b/w all the windows.

[BUG] Globally disables CTRL+R shortcut on ubuntu

When an instance of responsively-app is running it's no longer possible to use ctrl+r shortcut for other applications. Is it a bug or intended behavior?

Bookmarks

Page refresh & Local storage not persisting

Great tool! I've installed and attempted to get it working on a project.

I'm having an issue where, if I log in to my app, there is an additional navigation event and the local storage appears to be getting cleared. Am I missing something about the intended usage or perhaps setup for development? I would love to use this app, but it's currently unusable because I cannot persist a login status.

Thanks for your time!

Side-by-side compare two websites/URLs across devices

Application (.exe) is detected as a Virus.

https://www.virustotal.com/gui/file/3d30c93726eb92a087b9cb7086afadb0d27239e61cb99450344d0ae24c84e591/detection

Create a way to have a synchronized input

I tried using the app on our development site, but as soon as I get to our login page and text inputs are needed I have to do it for every browser.

It would be good to have a synchronized text input.

[Virus] Warning do not install this app!

Latest release contains a virus, and is triggering alerts on Windows 10.

Device manager Improvements

1. Right now, new devices cannot be added to the in-active list, fix the bug.
2. Refactor the device schema to support additional functionalities.
3. Add search functionality to filter the devices in the in-active list.
4. Add an option to delete the device added by the user.

screenshot save location?

Where is the screenshot save location?

CSS Media Query is being ignored

Great tool, but when I try it the CSS media query is not showing but on "real" browsers it is showing

@media only screen and (device-height: 1024px) and (device-width: 768px) and (orientation: portrait) {
}

Is it related to orientation: portrait ?
Is this known issue?

Reload CSS without reloading the page itself

First of all: this app is a must have for web development. Great work!

In Chrome I've got an extension called: CSS Reloader. This extension "will allow developers to reload CSS without reloading the page itself." I can set a hotkey (^(control) + R in my case for Mac) and the CSS will be retrieved and reloaded again without reloading the full page. This is way faster for me in a lot of cases then reloading the whole page. Is there a way to create this kind of feature for responsively? Would be great!

Quick search; I guess this is the git repo for the extension: https://github.com/auchenberg/css-reloader

Adding new device on Mac app doesn't work

I'm trying to add a new device but it doesn't get added. Also, if "Activate Preview" is checked, all the inactive devices are activated and I have to drag them all out to deactivate them.

Please add a license to this repo

First, thank you for sharing this project with us!

Could you please add an explicit LICENSE file to the repo so that it's clear
under what terms the content is provided, and under what terms user
contributions are licensed?

Per GitHub docs on licensing:

[...] without a license, the default copyright laws apply, meaning that you
retain all rights to your source code and no one may reproduce, distribute,
or create derivative works from your work. If you're creating an open source
project, we strongly encourage you to include an open source license.

Thanks!

include lighthouse metrics

When running all devices iphone 6/7/8 doesnt load

Maybe this is understandable but it would be a nicee to hhave, at 10% I can see all viewports/devices in one quick view

Add Windows installation using Chocolatey

Hi, you could make a choco package using Chocolatey to improve Windows installation and upgrading process.

https://chocolatey.org/docs/create-packages

Client Side routing support

When doing client side navigation, the whole page refreshes for all the devices.

Am I missing anything? Any way to get around this?

Add an option in the `Help` menu to list all available shortcuts.

UI for inspiration - https://dribbble.com/shots/2563576-Shortcuts-popup-in-Targetprocess

Add device emulation params for Mobile devices

Add the emulation parameters correctly for the devices with touchscreen capability to support touch events like tap, swipe etc. Right now only mouse events are supported by all devices.

Suggestion to add hotkeys

Hello there, first of all – thank You for the app, it's so good)

I just wanted to suggest to add those kind's of keyboard hotkeys and shortcuts, which we all are used to, like: Opt + Command + I for "Inspect Element"; "Zoom in/out" with Command + +/-; etc.

Thank You.