> ## Documentation Index
> Fetch the complete documentation index at: https://docs.autype.com/llms.txt
> Use this file to discover all available pages before exploring further.

# References & Anchors

> Cross-reference headings, images, charts, and tables with automatic numbering — using anchors and three display modes.

Internal references let you create clickable links to headings, images, charts, and tables within your document. References are automatically resolved with correct numbering at render time.

## Defining anchors

### Heading anchors

Add `{#anchor-id}` at the end of a heading:

```markdown theme={null}
# Introduction {#intro}
## Methods {#methods}
### Data Analysis {#data-analysis}
```

### Image anchors

Add an `anchor` attribute to an image:

```markdown theme={null}
![Diagram](image.png){anchor=fig-diagram caption="System Architecture"}
```

### Chart anchors

Add an `anchor` attribute to a chart directive:

```markdown theme={null}
:::chart{type="bar" anchor="chart-sales" caption="Sales 2024"}
labels: Q1, Q2, Q3, Q4
dataset: Sales | 100, 150, 200, 175 | #3b82f6
:::
```

### Table anchors

Add an `anchor` attribute to a table directive:

```markdown theme={null}
:::table{caption="Fee Schedule" anchor="tab-fees"}
| Service | Monthly | Annual |
|---------|---------|--------|
| Basic   | €10     | €100   |
| Pro     | €25     | €250   |
:::
```

### Anchor ID rules

* Must start with a letter (a–z, A–Z)
* Can contain letters, numbers, underscores, and hyphens
* Must be unique within the document
* Examples: `intro`, `fig-1`, `section_2`, `data-analysis`

***

## Referencing anchors

There are three display modes for internal references:

### Auto mode

Use empty brackets `[]` to automatically show the target's numbered prefix and title:

```markdown theme={null}
See [](#intro) for more details.
```

Renders as: *See Section 1 Introduction for more details.*

### Template mode

Include `{num}` in the link text — it gets replaced with the target's number:

```markdown theme={null}
As shown in [Figure {num}](#fig-diagram), the architecture...
Refer to [Table {num}](#table-data) for the full dataset.
See [Section {num}](#methods) for methodology.
```

Renders as:

* *As shown in Figure 1, the architecture...*
* *Refer to Table 2 for the full dataset.*
* *See Section 2 for methodology.*

### Custom mode

Provide any text without `{num}` — it's displayed as-is:

```markdown theme={null}
For sales data, refer to [the chart below](#chart-sales).
As discussed [earlier](#intro), the results are clear.
```

Renders as:

* *For sales data, refer to the chart below.*
* *As discussed earlier, the results are clear.*

***

## Summary

| Syntax                   | Mode     | Description                  | Example Output             |
| ------------------------ | -------- | ---------------------------- | -------------------------- |
| `[](#anchor)`            | Auto     | Numbered prefix + title      | "Section 2.1 Introduction" |
| `[Text {num}](#anchor)`  | Template | Replaces `{num}` with number | "Figure 1"                 |
| `[Custom Text](#anchor)` | Custom   | Shows your text as-is        | "Custom Text"              |

***

## Validation

Autype validates references at render time:

* **Duplicate anchors** — two elements with the same anchor ID will cause a validation error
* **Broken references** — references to non-existent anchors will cause a validation error

<Tip>
  Use descriptive anchor IDs like `fig-architecture` or `sec-methodology` to make your document source readable and avoid accidental duplicates.
</Tip>