GithubHelp home page GithubHelp logo

diffux's Introduction


Build Status Code Climate Coverage Status Dependency Status

Are you worried that your CSS changes will break the current design in unexpected ways? Do you want to show a designer a page you've been working on, before and after your changes? Do you want to be able to quickly look back at how things looked a month or a year ago?

Diffux [dɪˈfjuːz] is a tool that generates and manages visual diffs of web pages, so that you can easily see even the subtlest effects of your code modifications.



Diffux requires:

  • ImageMagick
  • PostgreSQL
  • Redis
  • Ruby 2.0.0+

Mac OS X (Using Homebrew)

Below are some example installation instructions that might help you get Diffux up and running on Mac OS X using Homebrew.

# clone repo
git clone
cd diffux

# install dependencies
brew update
brew doctor
brew install imagemagick postgresql redis

# install gems
bundle install

# start postgres
pg_ctl -D /usr/local/var/postgres -l /usr/local/var/postgres/server.log start

# start redis

# create tables, load the schema, and run migrations
bundle exec rake db:setup

Initialize database configuration

Before you start the server for the first time, you need to tell Diffux about your database setup. This is done by copying config/database.yml.example to config/database.yml and editing to fit your environment.

  cp config/database.yml.example config/database.yml

Running the server

Diffux is a Rails app, so if you are familiar with that web framework the following should be fairly straightforward.

bundle exec rails s

Rails runs on port 3000 by default, so you should be able to fire up your browser with the following URL:


Running a worker

Snapshot creation and comparing is handled asynchronously, through Sidekiq workers. To start a worker, run:

bundle exec sidekiq

Running Diffux on Heroku

Diffux can run on Heroku. In order to do this, you will need an Amazon Web Services (AWS) S3 account to store the snapshots. You will need a "secret key" and a "access key" from Amazon. Once you have those values, you're all set! Follow these steps:

# clone repo
git clone
cd diffux

# create and configure the heroku application
heroku create [diffux] --buildpack
heroku addons:add heroku-postgresql
heroku addons:add rediscloud
heroku config:set \
  PHANTOMJS_PATH=/app/vendor/phantomjs/bin/phantomjs \
  AWS_SECRET_KEY=[secret-key] \

# deploy!
git push heroku master

# initialize the database
heroku run rake db:migrate

# add a worker thread to take snapshots and generate compared images:
heroku ps:scale worker=1

# done! you should now be able to access your application at
# http://[diffux]

Triggering sweeps

A sweep is a full set of snapshots taken for a project. You can trigger sweeps from a project in the web UI or through making a simple API call to /projects/{project_id}/sweeps/trigger. The API endpoint sends back a JSON object containing a url to a page showing the results of the newly created sweep. Remember: snapshotting is done asynchronously, so don't expect immediate results.

# Example of triggering a sweep using curl for a project with id=1
curl --header "Accept: application/json" \
     --header "Content-Type: application/json" \
     --data '{
               "title": "Deploy 1",
               "description": "Release Notes: Fixed layout bug",
               "delay_seconds": 20,
               "email": "[email protected]"
             }' \

More about the JSON data:

key required description
title Yes A name/short description of the sweep, e.g. the name of the release/deploy.
description No A longer description, e.g. the full release notes.
delay_seconds No Number of seconds to delay the sweep with. This could be useful if you have an async release process.
email No An email address to send a message to when the sweep is ready (all snapshots taken and compared).


Released under the MIT License.

diffux's People


flarnie avatar hellobelda avatar lencioni avatar lostmarinero avatar trotzig avatar wincent avatar




 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.