Docs

Learn about the key concepts behind Hydra's visual headless CMS architecture. Each section covers a major area of how Hydra works and how to integrate it with your frontend.

How Hydra Works

How Hydra separates editing from rendering using an iframe bridge, and a guide to building a frontend

Live Preview

How to set up hydra.js, receive live updates, and define custom block types

Visual Editing

Add data attributes to your rendered HTML to enable progressively richer visual editing features.

Custom Blocks

Define custom block types, schema enhancers, and block conversion mappings.

Container Blocks

How to use blocks_layout and object_list widgets for containers, with rendering examples

Listings & Dynamic Blocks

Using expandListingBlocks with a fetchItems map for listings, paging, and dynamic content