Welcome to Warhol!

Published on 22.07.2020 by Peter Kröner and Hans Christian Reinl

© Unsplash, Clint McKoy

Today is the day Warhol finally opens its doors to the public 🎉!

Warhol is a set of tools and services that turn pattern libraries into tests for your web project's design. Warhol analyzes the styles on example components in your pattern library and then compares them to your production web page. Unlike other design testing tools, Warhol does not rely on screenshots and pixel-by-pixel comparisons. Instead, it performs its tests on the HTML and CSS used by both the pattern library and the production web page. This makes Warhol fast enough to run tests right inside your browser and provides the flexibility to ensure that an example component with example content and a real-life production component do in fact, for all intents and purposes, look the same.

You can sign up for free now and upgrade to a paid tier later to unlock additional collaboration features.

Sign up for free now
No credit card required.

What is Warhol?

In this first public release Warhol consists of three main components:

  • A web app in which you can manage your account, your team and configure pattern libraries.
  • A background data collection service that visits your pattern library with a remote-controlled browser to analyzes your component's markup and styles.
  • A Chrome browser extension that downloads the data collected by the background service and then compares the styles used in the pattern library with any other web page.

The workflow with which you use the aforementioned three core components is quite straightforward:

  1. Build a pattern library! A pattern library is a web page containing example implementations of the components that make up your web project's design system. A pattern library does not need to be complete to work with Warhol! You can get started with a color palette or a single component.
  2. Use the web app to configure the pattern library by writing a few lines of JSON. This JSON points Warhol's background service to your pattern lib page pages and the component examples contained within.
  3. Wait a few seconds for the background service to analyze your pattern library
  4. Log into the Chrome browser extension, download the pattern library data and start debugging your production web page!

You can check out our (slightly outdated) video to see the workflow in action:

All of the above is limited to the current version of the Chrome browser (desktop) at the moment, but we are on our way to support more browsers and platforms. For a deeper look into Warhol's background (and as a training exercise for your German language skills) also check out the episodes about Warhol on the Working Draft and UI Engineering podcasts.

How do I get started?

Our extensive tutorial takes you from zero to design testing hero in no time. It explains Warhol's basic concepts, shows you how to install the browser extension, explains how you can set up a pattern library, takes you through your first design tests and discusses all of Warhol's features and limitations. You can get a personal account without collaborative features for free, so you can just sign up now and tackle the tutorial! The rest of the documentation covers every topic from configuring components to serving your pattern library from localhost.

If something breaks or if you need help, just tweet at us @wearewarhol, send a mail hello@warhol.io or join our Slack community.

Frequently asked questions

  • Why should I use Warhol and not Service X? Warhol shines when it comes to speed and developer experience. Because Warhol analyzes CSS and HTML instead of screenshots, it is lightning fast and provides actionable error reports that give web developers the information they need to crush one design bug after the other.
  • Does it work with tech stack X? As long as tech stack X outputs web pages, the answer is yes. Warhol analyzes CSS and HTML and whether this HTML and CSS hand-crafted markup poetry or generated by the latest JavaScript framework, like React or Vue, does not make a difference.
  • What else can and can't Warhol do? Warhol is very young project and as such, there are some things that it can't do at the moment. Some missing features are on our roadmap while others are definitely out of scope. Learn more about Warhol's features and limitations!
  • And who are you, exactly? We, Hans and Peter are two dudes from Germany who were looking for a side project to work on for quite a while. When someone suggested that someone build a bookmarklet to analyze a web pages color palette, they built a proof of concept with some JavaScript and two iframes. This proof of concept suggested that such a tool could do way more than just check for color palette consistency. Two years later, two iframes and 50 lines of JavaScript have turned into several web services, a Chrome browser extension and just under 100.000 lines of code, all of which make up Warhol.

Read more FAQ in our docs!.

What's next?

There are a million things that we could add to Warhol, but the next big feature is going to be automated tests. You can have Warhol find design bugs on any page today, but you have to use the browser extension to do so. Soon you will be able to let Warhol itself do all the error finding, so that all you need to concern yourself with is fixing whatever problem Warhol finds.

In the meantime, we'd like to hear your feedback! Sign up, play around, and let us know what you think. Whenever something breaks or messes up your workflow, use the feedback forms in the web app or the browser extension or just tweet at us @wearewarhol! You can also send your complaints or feature requests to hello@warhol.io and hang out in our Slack channel.

Written by

Peter Kröner

Trainer for frontend technologies, podcaster @workingdraft.


Written by

Hans Christian Reinl

Software Architecture and Development is my passion. I love agile methodologies. Co-hosting @workingdraft


More from the blog