---
url: /en/docs/string-transformations.md
description: >-
  Use string transformations in Sveltia CMS to manipulate and format content
  values.
---

# String Transformations

String transformations allow manipulating and formatting string values in your content entries. These transformations can be applied in various contexts, such as generating summaries or formatting dates.

::: tip Note for Netlify/Decap CMS users

In Netlify/Decap CMS, this feature is known as **summary string transformations**. We simply refer to them as **string transformations** because, in Sveltia CMS, they can be used in multiple contexts beyond just entry summaries.

:::

## Available Contexts

String transformations can be applied in the following contexts:

* [Entry Collection](/en/docs/collections/entries): the `summary`, `slug`, `path`, `preview_path` options
* [Compute Field](/en/docs/fields/compute): the `value` option
* [Hidden Field](/en/docs/fields/hidden): the `default` option
* [List Field](/en/docs/fields/list): the `summary` option
* [Object Field](/en/docs/fields/object): the `summary` option
* [Editor Components](/en/docs/api/editor-components): the `summary` option

::: info Future Plans

More contexts may be added in future releases.

:::

## Syntax

String transformations are applied using the following syntax:

```
{{value | transformation_name}}
```

or with arguments:

```
{{value | transformation_name(arguments)}}
```

Where:

* `value`: The original string value to be transformed. This is typically a field name enclosed in double curly braces (e.g., `{{title}}`).
* `transformation_name`: The name of the transformation to apply (e.g., `upper`, `lower`, `truncate`).
* `arguments`: Optional arguments required by certain transformations, enclosed in parentheses.

Multiple transformations can be chained together by separating them with a pipe (`|`). The output of one transformation serves as the input for the next. For example:

```
{{value | transformation1 | transformation2(arguments)}}
```

### Notes on Syntax Rules

There are some syntax rules to keep in mind when using string transformations:

* String arguments must be enclosed in single quotes.
* Numeric arguments should not be quoted.
* No spaces are allowed between the transformation name and the opening parenthesis.
* No spaces are allowed after the starting curly braces (`{{`) or before the ending curly braces (`}}`).
* A space is required before and after the pipe character (`|`).

We might relax some of these rules in future releases.

## Available Transformations

### `upper`

Transform the string to uppercase.

```
{{value | upper}}
```

Configuration example:

::: code-group

```yaml [YAML]
summary: '{{title | upper}}'
```

```toml [TOML]
summary = "{{title | upper}}"
```

```json [JSON]
{
  "summary": "{{title | upper}}"
}
```

```js [JavaScript]
{
  summary: "{{title | upper}}",
}
```

:::

### `lower`

Transform the string to lowercase.

```
{{value | lower}}
```

Configuration example:

::: code-group

```yaml [YAML]
summary: '{{title | lower}}'
```

```toml [TOML]
summary = "{{title | lower}}"
```

```json [JSON]
{
  "summary": "{{title | lower}}"
}
```

```js [JavaScript]
{
  summary: "{{title | lower}}",
}
```

:::

### `slugify`

Convert the string to a URL-friendly slug.

```
{{value | slugify}}
```

The transformation converts the string based on the [global slug options](/en/docs/collections/entries/slugs#global-slug-options).

Configuration example:

::: code-group

```yaml [YAML]
summary: '{{title | slugify}}'
```

```toml [TOML]
summary = "{{title | slugify}}"
```

```json [JSON]
{
  "summary": "{{title | slugify}}"
}
```

```js [JavaScript]
{
  summary: "{{title | slugify}}",
}
```

:::

For example, if the `title` field has the value `Hello, World! This is a Test`, the result will be:

```
hello-world-this-is-a-test
```

### `truncate`

Truncate the string to a specified length, optionally adding a suffix.

```
{{value | truncate(<length>)}}
```

```
{{value | truncate(<length>, '<suffix>')}}
```

The `length` argument specifies the maximum number of characters to keep. If the string exceeds this length, it will be truncated. The optional `suffix` argument allows you to specify a string to append to the truncated string (e.g., an ellipsis).

Configuration examples:

::: code-group

```yaml [YAML]
summary: '{{content | truncate(100)}}'
```

```toml [TOML]
summary = "{{content | truncate(100)}}"
```

```json [JSON]
{
  "summary": "{{content | truncate(100)}}"
}
```

```js [JavaScript]
{
  summary: "{{content | truncate(100)}}",
}
```

:::

::: code-group

```yaml [YAML]
summary: "{{content | truncate(100, '...')}}"
```

```toml [TOML]
summary = "{{content | truncate(100, '...')}}"
```

```json [JSON]
{
  "summary": "{{content | truncate(100, '...')}}"
}
```

```js [JavaScript]
{
  summary: "{{content | truncate(100, '...')}}",
}
```

:::

### `default`

Provide a default value if the original value is null or empty.

```
{{value | default('<default_value>')}}
```

The `default_value` is returned if the original value is null or an empty string; otherwise, the original value is returned.

Configuration example:

::: code-group

```yaml [YAML]
summary: "{{description | default('No description available.')}}"
```

```toml [TOML]
summary = "{{description | default('No description available.')}}"
```

```json [JSON]
{
  "summary": "{{description | default('No description available.')}}"
}
```

```js [JavaScript]
{
  summary: "{{description | default('No description available.')}}",
}
```

:::

It’s possible to fall back to another field’s value using a nested template:

::: code-group

```yaml [YAML]
preview_path: "/{{fields.slug | default('{{fields.title}}')}}/"
```

```toml [TOML]
preview_path = "/{{fields.slug | default('{{fields.title}}')}}/"
```

```json [JSON]
{
  "preview_path": "/{{fields.slug | default('{{fields.title}}')}}/"
}
```

```js [JavaScript]
{
  preview_path: "/{{fields.slug | default('{{fields.title}}')}}/",
}
```

:::

### `ternary`

Choose between two values based on the truthiness of the original value.

```
{{value | ternary('<true_value>', '<false_value>')}}
```

The `true_value` is returned if the original value is truthy; otherwise, the `false_value` is returned.

Configuration examples:

::: code-group

```yaml [YAML]
summary: "{{is_private | ternary('Private', 'Public')}}: {{title}}"
```

```toml [TOML]
summary = "{{is_private | ternary('Private', 'Public')}}: {{title}}"
```

```json [JSON]
{
  "summary": "{{is_private | ternary('Private', 'Public')}}: {{title}}"
}
```

```js [JavaScript]
{
  summary: "{{is_private | ternary('Private', 'Public')}}: {{title}}",
}
```

:::

::: code-group

```yaml [YAML]
summary: "{{title}} – {{featured | ternary('Featured', 'Regular')}} Event"
```

```toml [TOML]
summary = "{{title}} – {{featured | ternary('Featured', 'Regular')}} Event"
```

```json [JSON]
{
  "summary": "{{title}} – {{featured | ternary('Featured', 'Regular')}} Event"
}
```

```js [JavaScript]
{
  summary: "{{title}} – {{featured | ternary('Featured', 'Regular')}} Event",
}
```

:::

::: code-group

```yaml [YAML]
summary: "{{title}} {{published | ternary('', '(DRAFT)')}}"
```

```toml [TOML]
summary = "{{title}} {{published | ternary('', '(DRAFT)')}}"
```

```json [JSON]
{
  "summary": "{{title}} {{published | ternary('', '(DRAFT)')}}"
}
```

```js [JavaScript]
{
  summary: "{{title}} {{published | ternary('', '(DRAFT)')}}",
}
```

:::

### `date`

Format a date string, with an optional timezone.

```
{{value | date('<format>')}}
```

```
{{value | date('<format>', '<timezone>')}}
```

The `format` argument specifies the desired date format using [Day.js formatting tokens](https://day.js.org/docs/en/display/format).

The optional `timezone` argument allows you to specify the time zone for formatting. It only supports `utc` for Coordinated Universal Time. If no timezone is provided, the local timezone will be used.

If an invalid date is provided, an empty string will be returned.

Configuration examples:

::: code-group

```yaml [YAML]
summary: "{{publish_date | date('YYYY-MM-DD')}}"
```

```toml [TOML]
summary = "{{publish_date | date('YYYY-MM-DD')}}"
```

```json [JSON]
{
  "summary": "{{publish_date | date('YYYY-MM-DD')}}"
}
```

```js [JavaScript]
{
  summary: "{{publish_date | date('YYYY-MM-DD')}}",
}
```

:::

::: code-group

```yaml [YAML]
summary: "{{publish_date | date('YYYY-MM-DD', 'utc')}}"
```

```toml [TOML]
summary = "{{publish_date | date('YYYY-MM-DD', 'utc')}}"
```

```json [JSON]
{
  "summary": "{{publish_date | date('YYYY-MM-DD', 'utc')}}"
}
```

```js [JavaScript]
{
  summary: "{{publish_date | date('YYYY-MM-DD', 'utc')}}",
}
```

:::

::: warning Breaking change from Netlify/Decap CMS

Sveltia CMS (and Decap CMS 3.1.1) has replaced the Moment.js library with Day.js for date formatting and parsing. Since [Day.js tokens](https://day.js.org/docs/en/display/format) are not 100% compatible with [Moment.js tokens](https://momentjs.com/docs/#/displaying/format/), this could be a breaking change in certain cases. Check your date/time format if you’re migrating from Netlify CMS or earlier versions of Decap CMS.

:::

## Examples

### Summary with Multiple Transformations

The below example demonstrates how to use multiple string transformations in the `summary` option of a collection:

::: code-group

```yaml [YAML]
collections:
  - name: blog
    label: Blog
    summary: "{{title | upper}} — {{publish_date | date('YYYY-MM-DD')}} — {{body | truncate(20, '...')}}"
    fields:
      - name: title
        label: Title
        widget: string
      - name: publish_date
        label: Publish Date
        widget: datetime
      - name: body
        label: Body
        widget: richtext
```

```toml [TOML]
[[collections]]
name = "blog"
label = "Blog"
summary = "{{title | upper}} — {{publish_date | date('YYYY-MM-DD')}} — {{body | truncate(20, '...')}}"

[[collections.fields]]
name = "title"
label = "Title"
widget = "string"

[[collections.fields]]
name = "publish_date"
label = "Publish Date"
widget = "datetime"

[[collections.fields]]
name = "body"
label = "Body"
widget = "richtext"
```

```json [JSON]
{
  "collections": [
    {
      "name": "blog",
      "label": "Blog",
      "summary": "{{title | upper}} — {{publish_date | date('YYYY-MM-DD')}} — {{body | truncate(20, '...')}}",
      "fields": [
        {
          "name": "title",
          "label": "Title",
          "widget": "string"
        },
        {
          "name": "publish_date",
          "label": "Publish Date",
          "widget": "datetime"
        },
        {
          "name": "body",
          "label": "Body",
          "widget": "richtext"
        }
      ]
    }
  ]
}
```

```js [JavaScript]
{
  collections: [
    {
      name: "blog",
      label: "Blog",
      summary: "{{title | upper}} — {{publish_date | date('YYYY-MM-DD')}} — {{body | truncate(20, '...')}}",
      fields: [
        {
          name: "title",
          label: "Title",
          widget: "string",
        },
        {
          name: "publish_date",
          label: "Publish Date",
          widget: "datetime",
        },
        {
          name: "body",
          label: "Body",
          widget: "richtext",
        },
      ],
    },
  ],
}
```

:::

It will transform the `title` to uppercase, format the `publish_date` to `YYYY-MM-DD`, and truncate the `body` to 20 characters with an ellipsis. For example, if an entry has the following values:

::: code-group

```yaml [YAML]
title: My First Blog Post
publish_date: 2024-06-15T10:30:00Z
body: This is the content of my first blog post. It has a lot of interesting information
```

```toml [TOML]
title = "My First Blog Post"
publish_date = 2024-06-15T10:30:00Z
body = "This is the content of my first blog post. It has a lot of interesting information"
```

```json [JSON]
{
  "title": "My First Blog Post",
  "publish_date": "2024-06-15T10:30:00Z",
  "body": "This is the content of my first blog post. It has a lot of interesting information"
}
```

:::

The resulting summary will be:

```
MY FIRST BLOG POST — 2024-06-15 — This is the content...
```

### Chaining Transformations

You can chain multiple transformations together by separating them with a pipe (`|`). For example, to convert a title to uppercase and then truncate it to 10 characters, you can use:

::: code-group

```yaml [YAML]
summary: "{{title | upper | truncate(10, '...')}}"
```

```toml [TOML]
summary = "{{title | upper | truncate(10, '...')}}"
```

```json [JSON]
{
  "summary": "{{title | upper | truncate(10, '...')}}"
}
```

```js [JavaScript]
{
  summary: "{{title | upper | truncate(10, '...')}}",
}
```

:::