React4XP 6: A Modern Framework for Building Sites

At a recent Enonic Meetup, CTO Thomas Sigdestad unveiled the next major evolution in front-end development for Enonic: React4XP version 6.

This release marks a significant leap forward, giving developers a more modern, structured, and flexible way to build full-featured websites—using only React.

Whether you’ve worked with React4XP before or are exploring alternatives to frameworks like Thymeleaf or even Next.js, version 6 introduces several changes worth your attention.

See the presentation:

What Is React4XP?

React4XP is Enonic’s own approach to server-side rendering with React, built natively into XP. Unlike other frameworks like Next.js, which require hosting a separate Node.js server, React4XP apps run directly inside XP—making them easier to deploy, maintain, and scale.

Where Next.js might be more suitable for large decoupled systems, React4XP offers deep integration with XP’s content APIs, native preview support, and page caching.

It also features seamless compatibility with other Enonic features and apps such as SEO tools, sitemaps, and security headers. It’s ideal for teams that want to keep development streamlined while embracing modern frontend tooling.

What’s New in Version 6?

Version 6 is a complete rethinking of how React and Enonic XP should work together. Key changes include:

• Headless-ready structure: React4XP 6 lets you separate front-end code from XP schemas, giving you the flexibility to reuse or share front-end logic across multiple sites or projects.
• Unified rendering pipeline: Instead of running multiple micro React apps per page, version 6 runs a single React app across your site, improving performance and maintainability.
• New app bootstrap layer: You now control routing and page rendering through app.ts and app.tsx, offering fine-grained control over request handling.
• Standardized CSS Modules: CSS Modules are supported out of the box, simplifying styling consistency across components.
• TypeScript and improved build system: Development now benefits from stricter typing, faster builds, and better dev tooling.
• Component Registry and Data Fetcher: These two new concepts define how components get their data and render content. Each part of a page can declare its own data needs and rendering logic in a clean, declarative manner.

Live Demo Highlights

During the presentation, Thomas demonstrated how React4XP 6 can be layered on top of existing XP content.

Using the Headless Movie Database demo site, he showed how easily a React front-end can take over rendering—complete with instant preview updates and hot-reloading during development.

By simply attaching a new React app to an existing site, developers can migrate to modern rendering techniques without having to touch underlying content or data models.

How It Works

Under the hood, React4XP 6 works by intercepting rendering using a catch-all mapping that routes requests to your custom app.ts. This file acts as a bootstrapping point, pulling in contextual content and orchestrating how the page is rendered.

The process flows through:

1. Data Fetcher – Determines what content components on the page need and fetches it using dedicated "data processors."
2. Component Registry – Maps parts to their React components for server-side rendering.
3. Response Processor – Optionally modifies the final HTML, making it possible to inject things like CSP headers or SEO tags.
4. Client Rendering – Once delivered to the browser, the app boots React on the client side.

Everything is developer-friendly and fully customizable—ideal for teams that want control without the overhead of custom build systems.

Getting Started

You can start a new project using the updated starter:

enonic create my-site -r https://github.com/enonic/starter-react4xp6

This command gives you a working setup with React, TypeScript, CSS modules, and XP integration—all pre-wired for development. You'll also find full documentation and a detailed upgrade guide for those migrating from React4XP 5.

For teams upgrading, note that previous Thymeleaf integration and region handling are not supported in version 6. The cleanest path is to start fresh, port over your front-end code, and reimplement page components using the new Data Fetcher and Component Registry.

Coming Soon

While version 6 is feature-rich already, more is on the way. Enonic plans to:

• Merge Data Fetcher and Component Registry for even simpler configuration
• Add GraphQL support via Guillotine (for those preferring client-side data queries)
• Support features like link prefetching, hot module reload, and more dev speedups

As always, your feedback will shape these features. Whether you're a developer building marketing sites, complex apps, or admin interfaces, Enonic wants to hear what works and what can be better.

React4XP 6 is available now. It’s fast, flexible, and made for modern front-end development—right inside Enonic XP.

🚀 Ready to try it? Get started with React4XP 6 or explore the starter repo on GitHub.