# Available Data

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`](https://docs.realmacsoftware.com/elements-docs/elements-language/component/hooks.js/available-data/rw.props)                         | UI control values from properties.json                  |
| [`rw.responsiveProps`](https://docs.realmacsoftware.com/elements-docs/elements-language/component/hooks.js/available-data/rw.getresponsivevalues) | Responsive property values by breakpoint                |
| [`rw.collections`](https://docs.realmacsoftware.com/elements-docs/elements-language/component/hooks.js/available-data/rw.collections)             | Component collections data                              |
| [`rw.project`](https://docs.realmacsoftware.com/elements-docs/elements-language/component/hooks.js/available-data/rw.project)                     | Project-level settings                                  |
| [`rw.page`](https://docs.realmacsoftware.com/elements-docs/elements-language/component/hooks.js/available-data/rw.page)                           | Current page information                                |
| [`rw.node`](https://docs.realmacsoftware.com/elements-docs/elements-language/component/hooks.js/available-data/rw.node)                           | Component instance data (always available in templates) |
| [`rw.component`](https://docs.realmacsoftware.com/elements-docs/elements-language/component/hooks.js/available-data/rw.element)                   | Component metadata and asset paths                      |
| [`rw.theme`](https://docs.realmacsoftware.com/elements-docs/elements-language/component/hooks.js/available-data/rw.theme)                         | Theme configuration including breakpoints               |
| [`rw.pages`](https://docs.realmacsoftware.com/elements-docs/elements-language/component/hooks.js/available-data/rw.pages)                         | Site navigation page tree                               |

## Basic Example

```javascript
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:

```javascript
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:

```html
<!-- 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:

```javascript
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;
```