HomeDocumentation

Getting started


What is ui-diff?

ui-diff is a tool that you and your team can use to quickly get a overview of what your website looks like on all of your environments and different pages in a few seconds. You can see what has changed on your local version when comparing against the live environment, and any other environment you have set up.

ui-diff was built with the mentality to limit the amount of setup and configuration as much as possible for the user. Therefore, we believe you will be up and running in just a couple of minutes after reading this.

Creating a new project

For us to know where to publish the screenshots of your application we need some sort of idenfication method on our end. The project is also where you are going to inspect and compare all screenshots. To create a project, simply to go to:

https://app.ui-diff.com/new-project

Integrate with your website

After creating your project on app.ui-diff.com you are ready to implement the module to your website or web app. To do this you simply run the following command inside of a terminal emulator when you are located inside of project directory.

yarn add ui-diff

or if you use npm:

npm install ui-diff

Configure ui-diff

Now when you have ui-diff installed on your website you are ready to configure what environments and pages ui-diff is going to run on. Create 2 new files in the root of your project.

touch ui-diff-config.js && touch ui-diff-pages.js

Now in ui-diff-config.js add the following content:

And in ui-diff-pages.js add the following content: