iamgraeme/reflex

Reflex

Make responsive websites without the guesswork.

Reflex is a free, open-source Mac app that makes it easy to see how responsive websites look at different screen sizes. Made for people who are tired of manually resizing their browser.

Download

Download latest version (MacOS)

Having issues installing?

Features:

Preview your website across as many sizes as you want
Screenshot individual screens or all at once
Synchronized interactions (scrolling, clicks, form inputs)
Chromium DevTools built-in

Check out our upcoming features and feature requests. If you have an idea that you didn't see it in either of those places, you can create a new issue for it!

Contributing

This project is made possible by open-source contributors: View Contributors

If you would like to add to the project, take a look at the planned projects page and the open issues. Pull requests, bug reports and feature requests are welcome!

Developing

Requirements:

Node
Yarn (1.x)

Please note: The dev branch represents the latest works-in-progress, and should always be used for new development/pull requests. The master branch holds the latest public release code.

Getting Started

Clone the project to your computer:

$ git clone https://github.com/nwittwer/reflex.git
$ cd reflex

Install dependencies:
```
$ yarn install
```
Compile and watch for changes:
```
$ yarn run dev
```

Building

To compile an executable app, run the following command:
```
$ yarn run build
```
This will output several files inside of the build/ folder. You can directly run the .app or .exe file inside of build/.

Release

Update the version in the project's package.json file (e.g. 1.2.3)
Commit that change (git commit -am v1.2.3)
Tag your commit (git tag v1.2.3). Make sure your tag name's format is v*.*.*. Your workflow will use this tag to detect when to create a release
Push your changes to GitHub (git push && git push --tags)
Github Actions will run the build only for commits to master and dev branches
If the build is successful and a Github Release is in draft for the same version, the Github Action will notarize (Mac only) and upload the build artifacts to the Github Release directly.

https://github.com/samuelmeuli/action-electron-builder#releasing

Env vars required:

CSC_LINK: base64-encoded .p12 file
CSC_KEY_PASSWORD: optional password
GH_TOKEN: Github token
APPLEID: Apple ID
APPLEIDPASS: App-specific password for Apple ID

Debugging

CMD/CTRL + Shift + I will open the Chrome DevTools inside of the Electron instance.

Technologies used

FAQ

Help installing for MacOS
1. Download from the Releases page
2. Move the Application to your Applications folder
3. Open the application by double-clicking the icon
4. If asked if you would like to open the application that was downloaded from the Internet, confirm. This is a standard MacOS security feature.
Does Shift work on Windows OS? At the moment, only the Mac version is being supported/tested, as it requires a large amount of effort to add another OS to support. With more help, most or all of this project could work on the web, MacOS, and Windows.
How can I check for updates? The app will automatically check for updates when it is opened. If an update is available, it will be downloaded automatically. The next time you open the app, you'll be using the latest version!
Find a bug? Please look at the issues, and file a new one if it hasn't already been reported.

License

MIT

iamgraeme / reflex