Pattern Lib URL


The field patternLibUrl in your configuration tells Warhol about the main URL (the "kitchen sink page") for your pattern library. If your pattern library has such a page with all components and colors, patternLibUrl is the only URL you have to configure. If your pattern library only has individual pages for colors, components and typography, you will have to provide these URLs individually in the respective configuration sections (see the docs on configuring components, themes, and specifically theme colors, theme typography and theme icons). The URLs for nested configuration sections override the URLs of their parent sections. An example:

{
  "patternLibUrl": "https://warhol.io/patterns",
  "breakpoints": [800, 1000],
  "theme": {
    "themeUrl": "https://warhol.io/patterns/theme",
    "colors": {
      "colorsUrl": "https://warhol.io/patterns/colors/theme",
      "sources": ".colors"
    },
    "typography": {
      "sources": ".typography"
    }
  },
  "components": [
    { "source": ".teaser", "componentUrl": "https://warhol.io/patterns/components/teaser" },
    { "source": ".button" }
  ]
}

The component .teaser has its own URL, but the component .button does not - Warhol will fall back to the patternLibUrl and try to find the component there. The field theme.typography does not have an own URL, but as its parent field theme has a themeUrl defined, this URL will serve as the URL for typography examples. The field theme.colors has its own colorsUrl defined, which takes precedence over theme.themeUrl and patternLibUrl.

The field patternLibUrl can in theory be omitted if each child element (component, theme and/or theme subsection) has its own URL defined, but in practice Warhol will still require you to define this field.

FAQ #

  • How can I protect my pattern library with a password? At the moment Warhol only really works with HTTP Basic Authentication. You can provide an URL with a username and password like https://username:password@example.com to enable Warhol to access your password-protected pattern library.
  • Why is this a required field even when I specify URLs for every subsection? The only reason is that we did not yet spend the time to make the form validation work properly in the web app. There's more important things to work on right now.

Join our Slack Community

Any question not answered yet? You want to get the latest information on Warhol and discuss new features? Join our Slack Community.