Skip to content

3.6-beta.3 ⚡

Release preview

We started working on Kirby 3.6 in April and want to take you with us on our journey from now on.

This release is maybe the most important one since 3.0. The v3 foundation is still holding up and we see endless possibilities to extend it and keep it growing. But we also want to make sure that we don't carry along old baggage. We've learned a ton from all the projects you build and the plugins you develop, and there are things in our architecture that could be better, simpler – more aligned with Kirby's philosophy.

With 3.6, we want to get rid of the bad parts and move forward with some fantastic new parts. 3.6 is the door opener for all your feature requests that are currently blocked. We don't want to think about Kirby 4 right now. We want to make Kirby 3 even more awesome and more stable – for years to come.

We are taking some bigger steps with this release that introduce breaking changes. That's why we want you to have full insight in our roadmap, in the state of the alpha and beta and hear your feedback as early as possible.

We hope you'll enjoy the beta!

– The Kirby team

  • alpha

    July 2nd

  • beta

    September 21st

  • launch



Our architecture for the future

We’ve spent the last months working on a brand new backend architecture for the Panel. Moving from a single page application to a more traditional approach with a simplified server-rendered backend. The new architecture is inspired by Inertia.js and simplifies our Panel and Panel plugins in ways that we’ve never dreamed of. Learn more ›

Panel view definition in PHP
  'pattern' => 'todos',
  'action'  => function () {
    return [
      'component' => 'k-todo-view',
      'props' => [
        'title' => 'Todos',
        'todos' => [
          'Buy milk',
          'Try Kirby 3.6'

View component in Vue.js
  <k-header>{{ title }}</k-header>
    <li v-for="(todo, index) in todos" :key="index">
      {{ todo }}

export default {
  props: {
    title: String,
    todos: Array
  • Drastically reduced bundle size

    With the move to Fiber, we massively reduce the complexity and bundle size of the Panel. We shaved off more than 100kb of uncompressed JavaScript and will likely manage to shave off even more. 🤯

  • Super simple plugins

    Panel plugins were already extremely powerful, but quite complex to build. With the new backend architecture, we handle many tasks on the server. Building views, dialogs and more is therefore far easier now. No need to be a Vue.js expert anymore.

  • Better performance

    With the smaller bundle size and fewer requests, the Panel becomes more performant for everyone, and will stay fast and lean even with a growing number of features and plugins. New views and dialogs no longer add to the bundle size. It’s the JS diet we’ve been looking for.

  • Future proof

    The new architecture paves the way for many fantastic features that have not been possible before.


Total: 808.36 KB

457.04 KB
351.32 KB


Total: 687.27 KB

383.11 KB KB
304.16 KB KB
-121.09 KB
less JS

Panel areas

The plugin API you’ve been dreaming of

Our new Fiber architecture splits the Panel in areas: site area, users area, settings area, etc. You can create your own areas and build entire applications on top of the Panel. Learn more ›

Kirby::plugin('yourname/todos', [
  'areas' => [
    'todos' => function () {
      return [
        'label' => 'Todos',
        'icon'  => 'check',
        'menu'  => true
        'dialogs' => [
          'todos/create' => [
            'load' => function () { ... },
            'submit' => function () { ... }
        'views' => [
            'pattern' => 'todos',
            'action' => function () { ... }
  • Custom routes

    Building custom views with your own routes is now as simple as routing for your Kirby site. Define props for your view components and don't worry about API endpoints, state management or any other complex stuff. Just start building.

  • Your own dialogs in seconds

    Dialogs can now also be defined in PHP and opened with a simple JS call $dialog("my-dialog"). Create form dialogs, text dialogs or confirmation dialogs to delete entries. It’s so much fun.

  • Access control made simple

    You want your own permissions for your shiny new Panel area? No problem. It’s automatically handled for you. Deny access for individual roles and the Panel will lock users out that are not allowed in.

  • No more API endpoint hassle

    With Fiber, you return exactly the kind of data you need for your Panel components. No more multiple API calls or custom API routes. Write some PHP and be done.

Panel UI

More customizable than ever

Of course this release is not just about Fiber. We’ve refactored our Panel CSS and started building new layout types to give you even more control.

A screenshot of the new cardlets layout

    type: pages
    template: note
    layout: cardlets
  • New cardlets →

    They are finally here! We showed them off more than a year ago and now their time has come. Cardlets can be used everywhere instead of lists or cards. They are the perfect mixture between visual and text content.

  • Copy & paste for blocks →

    With 3.6, you can now copy and paste blocks between block and layout fields and even import blocks from HTML or text. This lifts the blocks field on an entirely new level in terms of usability.

  • New formats for the writer field →

    Enable headings and list block formats for your writer fields and simplify WYSIWYG editing for your users.

  • New icons →

    Select from 48 brand new icons. Improve your fields, plugins and more with recognizable visuals.

  • CSS variables →

    Every little detail of the Panel is now defined as a CSS variable. What’s great about that? You can overwrite our variables in your panel.css. Custom Panel themes just got so much easier.

  • It’s all in the details →

    An improved duplicate dialog, a new email dialog for writer fields, customizable navigation options, a customizable favicon and more. We’ve improved tons of smaller Panel details in this release.

WebP & AVIF Support

Serve smaller and better images

Our image processing API finally supports WebP and AVIF as better alternatives for your JPEGs or PNGs. Learn more ›

$image->thumb(['width' => 200, 'format' => 'webp']);

  '400vw'  => ['width' => 400, 'format' => 'webp'],
  '800vw'  => ['width' => 800, 'format' => 'webp']
  '1200vw' => ['width' => 1200, 'format' => 'webp']

Better Panel image settings

Improve your previews with custom queries

You can now set custom backgrounds, icons, images and more for your pages via blueprint settings. Learn more ›

  back: "{{ page.panelBack }}"

# or

  back: "linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);"

There’s more …

This release is packed with features

Find out more about each of them in our early 3.6 docs

Get involved