Why patterns/components UI fails - and how it can be fixed


I started working with Patterns a few years ago and for some reason I abandoned the user interface for where you can preview the patterns. I did not know the reason for it.

Component kit

Not that long ago I started to build Kirby Component Kit. It’s inspired by Patterns and has a UI (user interface) as well. I think the UI is even better than Patterns, but still, I stopped using the UI.

Summery: In both cases I stopped using the UI for the patterns/components. I still love the way to bundle things as components. I’ve also read stories from other people also abandoned the UI part in similar tools.

Why it continues to fail

I have a few ideas why I think the UI part fails.

We need to go to the tool first

To do something at all you need to leave the site and go to the tool first. It’s not much work but it needs to be done.

You need a configuration file for the preview

In most cases you need to setup this preview file with some custom data that should populate the preview. That can feel like double work, change the data in two places.

Iframes are harder to inpect

In both tools you preview the component in an iframe to keep the navigation around. You can also view the raw pattern but it’s an extra click and it results in going back and forth a lot. Not very super smooth.

You don’t see what you get

The components will show what they are supposed to show, but it may still be different in the real site with real scenarios. The tool is kind of an emulator for the real thing. So why use an emulator when it’s easier to see and inspect the real site directly?

How it can be fixed

We go back to basics and remove the UI completely and just browse the site.

Do I miss anything? Yes, I miss the possibility to inspect a single component. I don’t want to go to a tool where I can find my component. I want to find my component even faster than that so here is what I did.

Shortcut key to open menu

On any page I can now press ALT+ C as in “component” which will open a menu, right on the site. I never need to leave the current page. If I change my mind I can click the backdrop or ALT + C again to toggle (see image down the page).


To make the shortcut and the menu work I need to inject a snippet that contains HTML, CSS and JS. It’s only injected if I’m logged in or on a localhost environment.

Even works inside the components

The shortcut menu also works inside the component. It means that from one component I can go to another one really fast.

Brower inspector works better

Now the browser inspector works better because we don’t have an iframe. When we look at the component, the component is all we see.

In my quick test it looks like this:

Preview options file

About the double work with having a preview file. In my test my options.php file looks like this:

return [
  'page' => page('about'),
  'values' => [
    'hello' => 'world'

It will load the values from the controller of the page about with additional values. But you don’t need a preview options file at all. If no file is used, the values from the controller of the page home will be used.


My idea of this is to improve it so that everyone can use it in a very simple way. I will go with a MIT license this time.

What do you think? Do you agree or not? What’s your own experience?

Almost the same as you. Built my website using patterns, liked it a lot but actually didn’t used the patterns page that much for the reasons your mentioned.

1 Like

I think it really comes down to how many people work on a project or how many different people are going to maintain it. When you do all that stuff by your own you don’t really need the overview because you pretty much know what is going on.

But I find it much more approachable for colleagues when there is some kind of visual hint on what is going on in a specific pattern.

I tend to agree. For a larger company a UI could possibly be a good thing. For a single person with quite fast development, I think the UI can hold back the project.

My new workflow - improved

You already got a screenshot of how it may look like. Now I’ve made something useful of this idea. So far it’s working really well. I can change component really fast and because I’m not in a tool, it’s easier to test the component on a mobile device and switch between components.

For tricky situations I can use config.php and preview.php. With tricky I mean when using a route or when the component get data from a parent component.

  1. The config file works similar to a controller, but for the preview only.
  2. If the preview file exists, it will be loaded instead of component.php in the preview.

Except from the UI it has what my Kirby Component Kit has.

Chrome developer tools

A really crazy idea, but what if… instead of having the components in a menu, load them inside a new tab in the Chrome developer tools?

I have no experience of coding extensions for Google Chrome but in my mind it would be neat.