Skip to main content

PageBuilder Engine

PageBuilder Engine is the rendering service that delivers content to end users. Built on React, Engine consumes data from Arc XP's content system and third-party sources, processes that data, and renders it on a page. It supports server-side and client-side rendering and powers the display logic behind blocks and other feature components. Developers use Engine to build reusable components and implement custom functionality that drives performance and flexibility across sites.

PageBuilder Engine dynamically assembles and delivers web pages by combining structured content, React-based components, and configuration settings. It enables developers to build performant, composable, and interactive web experiences using modern web standards. The result is faster page loads for users and greater flexibility for teams managing content and layout.

Note

To learn more about how PageBuilder fits into the broader Arc XP ecosystem, review this brief video overview for a high-level introduction using a real-world analogy.

Benefits of PageBuilder Engine

PageBuilder Engine offers the following benefits:

  • Optimized performance through fast, dynamic rendering

  • Developer-friendly architecture using modern JavaScript and React

  • Composable pages that make it easy to create reusable, interactive components

  • Full ecosystem support, integrating seamlessly with other Arc XP tools

How PageBuilder Engine works

PageBuilder engine follows a JAMstack-inspired approach to page rendering, combining JavaScript (React), APIs (content and config), and Markup (JSX/HTML). While it supports client-side rendering, it also provides robust server-side rendering capabilities for performance and SEO.

Here's how it all comes together:

  1. Content sources

    Engine consumes content, such as articles, videos, and images, from Arc XP's content APIs (like Content, Photo Center, and Video Center) or external APIs (like Apple Weatherkit or Nutritionix), as long as the data is available in JSON format.

  2. Feature packs

    Developers create feature packs, which are modular sets of React components that define how content is rendered and interacted with. These components are structured to follow Arc XP's guidelines for universality, enabling them to render on both the server and client.

  3. Page configuration

    Editors use PageBuilder Editor to configure pages, including which components to place on a page, where they appear, and how they're populated with content. Configuration also includes URL matching, layout rules, and more, essentially binding content and components together to generate complete web pages.

Prerequisites

To use PageBuilder Engine effectively, you must have:

  • experience with HTML, CSS, JavaScript, and using the command line

  • proficiency in React and JSX

  • familiarity with Node.js, npm, and modern JavaScript tooling

  • a working knowledge of Docker

  • experience using PageBuilder Editor

Getting started

Refer to the following documentation:

In this section: