Welcome to Warhol!
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.
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:
- 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.
- 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.
- Wait a few seconds for the background service to analyze your pattern library
- 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.
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.
- 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!
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 firstname.lastname@example.org and hang out in our Slack channel.