Volto Hydra Documentation

A Visual Headless CMS using Plone as a server, providing true visual editing with drag-and-drop blocks and editable text — with any frontend stack you choose.

Why Hydra?

  • Visual + True Headless + Open Source — a unique combination in the CMS space
  • Framework agnostic — Next.js, Nuxt.js, Astro, plus server-only stacks (PHP, Django, Rails, Laravel) via the server-render pattern
  • Quick visual editing — enable it with simple HTML data attributes, no React or Vue required in your frontend
  • Omni-channel — switch between multiple frontends mid-edit
  • Enterprise features — versioning, i18n, workflow, and automated content rules
  • Customisable — both the admin interface and block definitions are fully configurable

Try the online demo

The fastest way to feel what Hydra does is to log into the hosted demo and edit a real page against a real frontend.

Open <https://hydra.pretagov.com>, log in, then:

  • Open user preferences (bottom-left).
  • Pick one of the preset frontends, or paste in your own frontend URL.
  • Edit any page — every change updates the live preview.

The default preset is a Nuxt.js frontend deployed as an SSG to demonstrate scale-to-zero editing on free hosting. An Astro example demonstrates the server-render pattern for static-first frameworks. See Build a frontend › Deployment patterns.

To run Hydra locally against your own frontend, see the Run Locally section of the project README.

Grid-image block

The Grid block allows adding multi-column blocks. A grid block can contain between one and four columns of different blocks. Text, teasers, images and videos can be added in a grid block.

How Hydra Works

Instead of combining editing and rendering into one framework and codebase, these are separated and during editing a two way communication channel is opened across an iframe so that the editing UI is no longer part of the frontend code. Instead a small JS file called hydra.js is included in your frontend during editing that handles the iframe bridge communication to Hydra which is running in the same browser window.

Button

The button block shows a button for which a link (internal or external) can be stored. The button can be displayed left, right or center and have a background color.

block-mode.png

Containers

A container block holds other blocks inside it — sliders, columns, accordions, grids, generic sections. The blocks inside are called its children. Containers can be nested (a column inside a row inside a section).

News Item

The News Item content type can be used to display News content on the website.