Docs Developer Site
Developer Docs CMS reference docs next Front-end integration

Front-end integration

Contents

Enonic is a Headless CMS: it manages and delivers content through APIs and leaves rendering to your front-end. This page explains how the CMS output is consumed in a front-end and the toolkits Enonic provides to make it easier.

Headless model

Content is queried through the GraphQL API (Guillotine), which returns structured data for your renderer:

  • Content — content types, fields and references exposed as typed GraphQL fields.

  • Media — URL components for files served by the Image API and Attachment API.

  • Rich text — a processedHtml string plus typed images, links and macros fields. See Rich text.

  • Pages — the component tree of a page (parts, layouts and fragments). See Sites and Pages.

A front-end fetches this data and maps it to its own components, routes and markup. With Guillotine 9, concatenate the public API or media base URL with each media URL object’s path and queryString. Rewrite rich-text placeholders from the structured reference data before rendering. See Guillotine’s URL documentation.

Official toolkits

Enonic CMS can be used with any front-end framework. To avoid hand-writing the mapping, Enonic publishes and maintains:

  • Enonic React components — render rich text, pages and components, with hooks for overriding how links, images and macros are rendered. See the @enonic/react-components package.

  • Next.xp — a Next.js integration providing page rendering, routing, preview and visual-editor support out of the box. See the Next.xp documentation.

For the full list of supported toolkits, starters and examples, see the Frameworks section and Enonic templates and starters.

Rolling your own

If you integrate a framework the official toolkits don’t cover, your renderer has to handle the Enonic-specific output:

  • Rich-text references — rewrite link placeholders to your routes, replace image references with responsive <img>/<picture> tags served by the Image API, and render editor-macro placeholders. Each is keyed by a ref that matches a data-*-ref attribute in processedHtml. See Links, Images and Macros.

  • Pages — walk the page component tree and map each part, layout and fragment descriptor to a component. See Sites and Pages.

  • Images — request each size through Guillotine and build Image API URLs from the returned URL components. See Image API.

  • Visual editing — to support the Content Studio page editor, emit the DOM markers it expects and initialize the @enonic/page-editor module. See Visual page editor. The official toolkits handle this automatically.

The React SPA tutorial is a hands-on walkthrough of consuming the APIs in a React front-end.

Contents

Contents