Available Data

Access data in your transform hook

The rw object passed to your transform hook provides access to various data sources. Most data needs to be passed to templates using rw.setProps(), except for node which is always available.

Quick Reference

Property	Description
rw.props	UI control values from properties.json
rw.responsiveProps	Responsive property values by breakpoint
rw.collections	Component collections data
rw.project	Project-level settings
rw.page	Current page information
rw.node	Component instance data (always available in templates)
rw.component	Component metadata and asset paths
rw.theme	Theme configuration including breakpoints
rw.pages	Site navigation page tree

Basic Example

const transformHook = (rw) => {
    // Access various data sources
    const { title, isVisible } = rw.props;
    const { items } = rw.collections;
    const { mode } = rw.project;
    const { id } = rw.node;
    const { assetPath } = rw.component;
    
    // Pass to templates
    rw.setProps({
        title,
        isVisible,
        items,
        isEditMode: mode === 'edit',
        nodeId: id,
        iconPath: `${assetPath}/icons/`
    });
};

exports.transformHook = transformHook;

Exposing Data to Templates

While the node object is automatically available, other data must be explicitly passed:

const transformHook = (rw) => {    
    // Expose project, page and component objects to the template
    rw.setProps({
        project: rw.project,
        page: rw.page,
        component: rw.component
    });
};

exports.transformHook = transformHook;

With this in place, you can access properties in your templates:

<!-- Project data -->
<title>{{project.title}}</title>

<!-- Page data -->
<h1>{{page.title}}</h1>
<p>Path: {{page.absolutePath}}</p>

<!-- Component data -->
<img src="{{component.assetPath}}/placeholder.png">

<!-- Node is always available -->
<div id="{{node.id}}">{{node.title}}</div>

Data Availability by Mode

Some data may differ between edit and preview modes:

const transformHook = (rw) => {
    const { mode } = rw.project;
    const { sharedAssetPath } = rw.component;
    const { image } = rw.props;
    
    // Show placeholder in edit mode when no image is set
    const displayImage = image?.image 
        ? image.image 
        : (mode === 'edit' ? `${sharedAssetPath}/images/placeholder.png` : null);
    
    rw.setProps({
        displayImage,
        hasImage: !!image?.image
    });
};

exports.transformHook = transformHook;