Kirby Playground

When building websites, I often create reusable UI components as Kirby snippets. In fact, it’s the first thing I do when starting a project. After that, I can simply play LEGO™ with my components.

Testing elements with different (worst case) content variants is key to creating a robust UI. For a long time, I used a special test template and put everything in there. You can find an example of that in the wild here: smart-transition.com/test

Depending on the project, these tests can get quite complex:

I also always have a “typography” test, with different formatting and heading sizes. This is especially helpful for testing fluid font sizes, the handling of worst-case word lengths or custom focus outlines.

My plugin

For a recent project, I had some time to develop a better solution. I created a simple plugin that provides a dedicated /playground route for component testing.

How it works

Here’s a simplified example to demonstrate how it works (mostly to show off the beautiful code highlighting thanks to Bogdan Condorachi’s Code Highlighter plugin).

Create a test in site/snippets/playground/button.php:

<div class="button-test">
  <button class="button button--primary">Primary Button</button>
  <button class="button button--secondary">Secondary Button</button>
  <button class="button" disabled>Disabled Button</button>
  <button class="button">Button with a super long label that will wrap on small screens</button>
</div>

Optionally add test-specific CSS in assets/css/playground/button.css:

.button-test {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

Now you can access playground/button to see your test.

The plugin automatically creates virtual pages for snippets in the playground folder and loads matching CSS files (optional). If you access /playground directly or visit a non-existing test, a list of links to available tests is returned. I also included optional authentication so only logged-in Panel users can access the tests.

It’s probably a bit too custom-tailored for my use-case, adding head and bottom snippets to the template. If I find a simple way to make this configurable, I will update the plugin.

A better way to test

Instead of cramming all test cases into a single template, I now have a clean, organized space to experiment with components. It’s still simple enough, making it a good fit for my website projects.

Do you use something similar? Let me know on Mastodon.