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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.realmacsoftware.com/elements-docs/elements-language/component/hooks.js/available-data.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.