Resource Binding

To use Resource Binding, Server Side Processing Instructions must be enabled.

Resource Binding allows a Pagelove document to declare site-wide queries and bind their results to named variables that can be used by templates and other server-side processors.

Traditional web applications split data across databases, APIs, and frontend code.

Resource Binding removes this boundary:

Data lives in HTML.
Queries use CSS selectors.
Integration happens inside documents.

This allows applications to be expressed as directly inspectable, linkable, and manipulable documents, without introducing a separate query language or data layer.

Instead of fetching data from APIs or databases, Pagelove evaluates CSS selectors across the site graph (the full set of HTML documents that make up an application) and exposes the matching elements directly to the document.

This makes HTML the data store, the query language, and the integration surface.

Enabling Resource Binding

Resource Binding is enabled by declaring the Pagelove Resource namespace in a document. Resource binding still requires server side processing to be triggered through the declaration of the https://pagelove.org/1.0 namespace.

<html xmlns:p="https://pagelove.org/1.0" xmlns:resource="https://pagelove.org/1.0/Resource">

Bindings are declared as attributes using this namespace.

Declaring a Binding

A resource binding is declared by adding a namespaced attribute to any element:

resource:<name>="<css-selector>"

Where:

<name> is the variable name that will be exposed to templates.
<css-selector> is a standard CSS selector.

The result of the selector is a collection of matching elements across the whole site graph.

Example

The following document binds all schema.org/Person items in the site to a variable named contacts and renders them using a Liquid template:

<!doctype html>
<html lang="en"
      xmlns:resource="https://pagelove.org/Resource"
      xmlns:pagelove="https://pagelove.org/1.0">

<head>
    <title>Contacts List</title>
</head>

<body resource:contacts="[itemtype='http://schema.org/Person']"
      pagelove:template="text/liquid">
    <ul>
        {% for contact in contacts %}
        <li>{{ contact.name }}</li>
        {% endfor %}
    </ul>
</body>
</html>

In this example:

The selector [itemtype='http://schema.org/Person'] is evaluated across all documents in the site.
The matching elements are bound to the variable contacts.
The template iterates over contacts to render the list.

Semantics

Resource bindings have the following properties:

Site-wide – selectors operate across the entire site graph.
Structural – results are HTML elements, not deserialized records.
Live – bindings are evaluated at render time.
Read-only – bindings expose data for rendering and processing; mutation is performed via HTTP methods.

Notes

Bindings may be declared on any element; scope is determined by the template processor.
Multiple bindings may be declared on the same element.
Invalid selectors result in a request failure during document processing.