## Documentation index

This index lists every available documentation page and its Markdown source.

- [Documentation](https://veta.varavel.com/docs/index.md)
  - [Getting Started](https://veta.varavel.com/docs/getting-started/index.md)
  - [Installation](https://veta.varavel.com/docs/installation/index.md)
  - [Guides](https://veta.varavel.com/docs/guides/index.md)
    - [Project Structure](https://veta.varavel.com/docs/guides/project-structure/index.md)
    - [Configuration](https://veta.varavel.com/docs/guides/configuration/index.md)
    - [Pages](https://veta.varavel.com/docs/guides/pages/index.md)
    - [Data](https://veta.varavel.com/docs/guides/data/index.md)
    - [Markdown](https://veta.varavel.com/docs/guides/markdown/index.md)
    - [Templates](https://veta.varavel.com/docs/guides/templates/index.md)
    - [Components](https://veta.varavel.com/docs/guides/components/index.md)
    - [Filters](https://veta.varavel.com/docs/guides/filters/index.md)
    - [Assets And Tailwind CSS](https://veta.varavel.com/docs/guides/assets-and-tailwind/index.md)
    - [Themes](https://veta.varavel.com/docs/guides/themes/index.md)
    - [Development Server](https://veta.varavel.com/docs/guides/development-server/index.md)
    - [Build And Output](https://veta.varavel.com/docs/guides/build-and-output/index.md)
    - [Deployment](https://veta.varavel.com/docs/guides/deployment/index.md)
  - [Reference](https://veta.varavel.com/docs/reference/index.md)
    - [CLI Reference](https://veta.varavel.com/docs/reference/cli/index.md)
    - [Config Reference](https://veta.varavel.com/docs/reference/config/index.md)
    - [Page Generators Reference](https://veta.varavel.com/docs/reference/page-generators/index.md)
    - [Template Context Reference](https://veta.varavel.com/docs/reference/template-context/index.md)
    - [Troubleshooting](https://veta.varavel.com/docs/reference/troubleshooting/index.md)
  - [API](https://veta.varavel.com/docs/api/index.md)
    - [JavaScript API](https://veta.varavel.com/docs/api/javascript/index.md)
    - [File API](https://veta.varavel.com/docs/api/files/index.md)
    - [HTTP Client](https://veta.varavel.com/docs/api/http-client/index.md)
    - [Parse API](https://veta.varavel.com/docs/api/parse/index.md)
    - [Template Functions](https://veta.varavel.com/docs/api/template-functions/index.md)
    - [Environment And Console](https://veta.varavel.com/docs/api/environment-and-console/index.md)
    - [Markdown Frontmatter](https://veta.varavel.com/docs/api/frontmatter/index.md)


## Documentation content

The documentation for the current page follows, reproduced verbatim.


# Filters

Filters transform values inside templates. Veta includes built-in filters and can load custom JavaScript filters from `filters/`.

## Built-In Filters

### `json`

Serializes a value as JSON:

```html
<script type="application/json">
  {{ data.site | json }}
</script>
```

### `base64_encode`

Encodes a string as Base64:

```html
{{ "hello" | base64_encode }}
```

### `base64_decode`

Decodes a Base64 string:

```html
{{ "aGVsbG8=" | base64_decode }}
```

Invalid Base64 input fails the build.

### `markdown`

Renders a string as Markdown:

```html
{{ page.summary | markdown }}
```

The output is trusted HTML.

### Parse Filters

Parse filters convert strings into structured template values:

```html
{% set site = load_data("data/site.json") | parse_json %}
{% set navigation = load_data("data/navigation.yaml") | parse_yaml %}
{% set theme = load_data("data/theme.toml") | parse_toml %}
{% set post = load_data("content/post.md") | parse_markdown %}
```

`parse_markdown` parses YAML or TOML frontmatter and returns `{ content, frontmatter }`. It does not render Markdown to HTML; use `markdown` for rendering. This Pongo API is distinct from JavaScript `parse.markdown(text)`, which returns `{ frontmatter, content, html }` with the rendered body in `html`.

## Custom JavaScript Filters

Create `filters/titlecase.js`:

```js
export default function({ data }, input) {
  return String(input)
    .split(" ")
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
    .join(" ");
}
```

Use it in a template:

```html
<h1>{{ page.title | titlecase }}</h1>
```

The filter file name becomes the filter name. `filters/titlecase.js` becomes `titlecase`.

## Filter Parameters

Filters can receive one parameter:

```html
{{ page.title | prefix:"Post: " }}
```

```js
export default function(runtime, input, parameter) {
  return `${parameter}${input}`;
}
```

When a filter is called without a parameter, the third argument is `null`-like from the JavaScript side.

## Runtime Context

Custom filters receive the JavaScript runtime context as the first argument:

```js
export default function({ data, env }, input, parameter) {
  return `${data.site.name}: ${input}`;
}
```

Filters are synchronous. Promises are not supported.

## Directory Rules

`filters/` is flat. Nested filter directories are not supported.

Every filter file must end in `.js`.