Introduction to PageBuilder Engine

Here is a ~3 minutes introduction video explains what PageBuilder is, its components and how it fits with rest of Arc XP ecosystem in a fun analogy:

In short, PageBuilder Engine is an engine that dynamically crafts and serves webpages to your readers. PageBuilder Engine was built to provide the following benefits:

PageBuilder Engine works in concert with PageBuilder Editor and the rest of the Arc XP ecosystem to allow authors and editors to configure how the content on their website is viewed.

PageBuilder Engine can be used by many different stakeholders, but we’ll identify four of the main ones below:

Readers are the end-users of your product. They are the consumers of web pages produced by PageBuilder Engine’s rendering engine.

Authors are the creators of content consumed by PageBuilder Engine. They might not interact with PageBuilder Engine directly, but the stories, images, videos and other media they create are integral to PageBuilder Engine.

Editors may or may not be actual newsroom editors; for PageBuilder Engine’s purposes, an editor is anyone who uses PageBuilder Editor to configure layouts, pages and templates, URL matchers, and more.

Developers are the programmers who create Feature Packs on behalf of clients. Their code will control the look, feel, and function of the web pages produced by the PageBuilder Engine.

PageBuilder Engine’s architecture borrows many ideas from what is being referred to as the JAMstack - that means it’s a combination of JavaScript code, API content, and Markup (in our case, provided by React and JSX). It’s a different approach to rendering web pages from the “traditional” model of server-side-only rendered content provided directly by a database, although PageBuilder Engine does still provide server-side rendering as part of its framework.

PageBuilder Engine uses inputs from various sources to dynamically create webpages in real-time and deliver them to end users quickly and efficiently.

First, PageBuilder Engine requires content; this can include text, images, videos, audio, and other multimedia content that you want to deliver to your readers. In a typical Arc implementation, most content will come from a source like content-api, which might include stories written by authors in Composer, photos added to Photo Center, videos added to Video Center, and more. However, you can also consume content from external sources, for instance, a weather API like Apple's WeatherKit or a Nutrition API like Nutritionix, as long as it can be consumed in JSON format.

Next, PageBuilder Engine relies on code provided by a Feature Pack. Feature Packs are written as React components that can be universally rendered on both the server and client into HTML web pages. Components in a Feature Pack are used to display content, as well as provide functionality to the user. Feature Packs have defined guidelines for how they should be structured and how they consume content, which are outlined further in the API documentation.

Finally, PageBuilder Engine needs some configuration from options set in PageBuilder Editor. These configurations include which features from the Feature Pack should exist on a page or template, where those features should live, which URL patterns should route to those pages and/or templates, and which content sources each page or template should pull from. Editors and developers will typically work within PageBuilder Editor to create new pages and templates, change layout configurations, add resolvers (URL matchers), and more. You can think of these configuration options as the glue that ties content and code together to create a structured web page.

This documentation is primarily for developers of PageBuilder Engine Feature Packs. It covers how to create, maintain, develop, and deploy a Feature Pack, as well as different recipes to utilize all the capabilities offered in PageBuilder Engine.

In this “getting started” guide, we’ll create a small Feature Pack using PageBuilder Engine for a website that displays basic information about movies. Even though your Feature Pack is probably dealing with content from a news source like Arc’s Content API, the steps we’ll take and techniques we’ll use are applicable to any PageBuilder Engine Feature Pack.

This documentation doesn’t cover how to use the other tools, libraries, or frameworks that work in conjunction with PageBuilder Engine. With that in mind, developers using this guide should have (or be willing to learn):

▶ Next: Creating A Feature Pack