> For the complete documentation index, see [llms.txt](https://docs.realmacsoftware.com/elements-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.realmacsoftware.com/elements-docs/elements-language/component/hooks.js/available-functions/rw.addanchor.md).

# rw\.addAnchor

The `rw.addAnchor()` function registers a custom anchor ID for your component, making it available in the link picker's "Anchor" menu so users can link directly to this component.

## Syntax

```javascript
rw.addAnchor(anchorId);
```

## Parameters

| Parameter  | Type   | Description                                        |
| ---------- | ------ | -------------------------------------------------- |
| `anchorId` | String | The anchor ID to register (without the `#` symbol) |

## Basic Example

```javascript
const transformHook = (rw) => {
    const { customId } = rw.props;
    
    if (customId && customId.length > 0) {
        rw.addAnchor(customId);
    }
};

exports.transformHook = transformHook;
```

## Complete Pattern

When using anchors, you typically also need to set the `id` attribute on the root element:

```javascript
const transformHook = (rw) => {
    const { customId } = rw.props;
    
    // Set the ID on the root element
    rw.setRootElement({
        as: 'section',
        class: 'my-component',
        args: {
            id: customId || undefined
        }
    });
    
    // Register the anchor for the link picker
    if (customId && customId.length > 0) {
        rw.addAnchor(customId);
    }
};

exports.transformHook = transformHook;
```

## How It Works

1. User sets a custom ID in the component's properties (e.g., "contact-form")
2. Your hook calls `rw.addAnchor('contact-form')`
3. The anchor appears in the link picker's Anchor menu
4. When selected, it creates a link like `#contact-form`
5. Clicking the link scrolls to your component

## Example with Fallback

```javascript
const transformHook = (rw) => {
    const { customId } = rw.props;
    const { id } = rw.node;
    
    // Use custom ID if provided, otherwise use node ID
    const anchorId = customId || id;
    
    rw.setRootElement({
        as: 'div',
        args: { id: anchorId }
    });
    
    // Only register custom IDs (not auto-generated node IDs)
    if (customId && customId.length > 0) {
        rw.addAnchor(customId);
    }
};

exports.transformHook = transformHook;
```

## Notes

* Only call `addAnchor` when you have a valid, non-empty ID
* The anchor ID should match the `id` attribute on your root element
* Anchors are automatically available to other pages in the same project
* Users can link to anchors using the standard link picker interface


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.realmacsoftware.com/elements-docs/elements-language/component/hooks.js/available-functions/rw.addanchor.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.