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.

Advanced

Advanced topics for optimising your Hydra integration: lazy loading the bridge, authentication, and preventing reloads.

Accordion

The accordion contains other blocks in an accordion behavior layout.

accordion-edit.png

Hydra demo (homepage hero)

Homepage hero loop showing live editing, formatting, drag-and-drop, container selection, and the frontend switcher.

Adding and moving blocks

The block chooser, slash menu, and drag handles are part of Hydra and look the same everywhere. What you can pick from those choosers — the list of block types — comes from your site's design system. One site might offer "Lead paragraph", "Pull quote", "Stat highlight"; another might just have "Text" and "Image". Mechanic is identical.

Another Page

Cultivar sweet irish and irish flavour cinnamon foam crema percolator caffeine aftertaste mountain.