PageTree 2.4: a block page editor for October CMS, with Live preview and Frontend editing

Show and Tell
, , , ,
#1

Hi everyone,

I’d like to introduce PageTree, a plugin for October CMS 4.2+ that lets content editors build and update pages from blocks. A live preview shows each page inside your own theme layout.

How it started

I’m a developer in a company that runs many websites, and I built PageTree to make my own daily work easier.

At first, in 2024, it was a small Linktree-style plugin, for quick link pages. It kept growing as my colleagues started using it every day, and it became a real page editor.

The idea that guided it is a simple editor with limits set by developers. Developers decide which blocks exist, which fields they have and how they render in the theme. Editors then build and update pages on their own, quickly, without being able to break the design or go outside what the site was built for. Feedback from my colleagues has been very good. They pick it up quickly, and I spend much less time on small content changes.

For editors

  • A visual editor inside the October Editor: a searchable block library, drag and drop, and blocks you can duplicate, hide, or copy and paste between pages (and even between sites :wink: ).
  • Live preview in the theme layout, at desktop, tablet and mobile widths. You can open it in a separate window, for example on a second screen.
  • Editing in the preview: click a text to edit it in place, select a block to move it or open its form.
  • Editing on the website: a backend user clicks Edit page on the live site. They can edit texts in place, move, hide, duplicate or delete blocks, open a block form in a side panel, and save everything at once. Draft and scheduled pages can be checked on the website before they go live, while visitors still get a 404.
  • History: every save is kept as a version, per language. You can preview any version and restore it, and name important versions.
  • Publishing: active flag, publication switch and scheduled publication.
  • Layouts: a Section block with 1 to 4 columns, and a Grid Container block that builds CSS Grid layouts visually.

For developers

  • Blocks are plain PHP classes with a YAML form and a Twig template. Any plugin can register its own blocks withregisterBlocks(), and create:block scaffolds new ones.
  • The pagetreeEditable Twig filter makes any field of your own blocks editable in place.
  • Every frontend component registered by your plugins can be placed on a page as a block, with its properties editable in a form.
  • Custom blocks from the back-office (superusers): a form builder, data sources (Tailor entries or plugin models) and a Twig template.
  • Blocks and version history can also be used in your own models.
  • No CMS page files: pages are resolved from their URL.

SEO and languages

  • Meta tags with a search result preview, Open Graph and Twitter cards, canonical, robots, hreflang, JSON-LD, and a sitemap exclusion flag.
  • RainLab.Translate (translated titles, URLs, blocks and SEO) and October multisite.

Compatibility

  • PageTree 2.x works with October CMS 4.2+ and PHP 8.2+. PageTree 1.x is still maintained (fixes only) for October 3.7 and 4.1. but we recommand to use the latest version.
  • PageTree adds a page type and replaces nothing: your theme, CMS pages, Tailor, menus and media library keep working as usual.

Links

v2.4 - Frontend Editing

PageTree is my take on content editing in October CMS. I also have a lot of admiration for the work done by Renick and OFFLINE on their own content plugins, and it’s great to see the ecosystem growing in this direction.

Feedback, bug reports and ideas are very welcome. I’d especially like to hear which blocks or integrations you’d find useful next.

Thanks for reading!