# Strife developer documentation

Source: https://strife.app/docs

This is the home of the Strife documentation.

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Tutorials</strong></td><td>Start here! The tutorials will get you started with Strife in no time.</td><td></td><td><a href="https://strife.app/docs/tutorials/getting-started.md">getting-started</a></td></tr><tr><td><strong>How-to Guides</strong></td><td>Step-by-step guides showing how to achieve common tasks in Strife</td><td></td><td><a href="https://strife.app/docs/how-to-guides/how-to-overview.md">how-to-overview.md</a></td></tr><tr><td><strong>Reference</strong></td><td>The gory details about Strife's SDKs, APIs and configuration</td><td></td><td><a href="https://strife.app/docs/reference/reference-overview.md">reference-overview.md</a></td></tr><tr><td><strong>Explanation</strong></td><td>Discussions and deep dives into key topics of Strife</td><td></td><td><a href="https://strife.app/docs/explanation/explanation-overview.md">explanation-overview.md</a></td></tr></tbody></table>

---

# Getting started

Source: https://strife.app/docs/tutorials/getting-started

Connect to the Strife API and interact with your data in a few steps:

To help you get started, we offer two quick start guides tailored to your preferred development environment. If you’re working with JavaScript, check out our **Node.js Getting Started** guide to set up your environment and run your first application. Prefer C#? Our **.NET Getting Started** guide walks you through installation, configuration, and building your first project.

**Choose the path that fits your background and start building today:**

- [Node.js](https://strife.app/docs/tutorials/getting-started/nodejs.md)

- [.NET](https://strife.app/docs/tutorials/getting-started/dotnet.md)

---

# Node.js

Source: https://strife.app/docs/tutorials/getting-started/nodejs

Connect to the Strife API and interact with your data in a few steps:

### 1. Install Strife SDK

```bash
npm i @strifeapp/strife ravendb
```

### 2. Create and initialize a Strife store

> [!NOTE]
> The environment settings were provided during onboarding.

```js
import { DocumentStore } from 'ravendb';

const certificate = import.meta.env.STRIFE_CERTIFICATE;

let authOptions = {
  certificate: Buffer.from(certificate, 'base64'),
  type: 'pfx',
  password: import.meta.env.STRIFE_CERTIFICATE_PASSWORD,
};

const store = new DocumentStore(
  import.meta.env.STRIFE_DATABASE_URLS.split(','),
  import.meta.env.STRIFE_DATABASE,
  authOptions
);

export default store.initialize();
```

### 3. Define a Collection

A [Collection](https://ravendb.net/docs/article-page/7.0/csharp/client-api/faq/what-is-a-collection) is a group of records, called Documents, that all share a common schema. You can define as many Collections as your application needs. Each Document in a Collection is stored in the Database based on the [Fields](https://strife.app/docs/reference/fields.md) that you define,  and is automatically queryable using a [Document session](https://ravendb.net/docs/article-page/7.0/nodejs/client-api/session/what-is-a-session-and-how-does-it-work).

> [!NOTE]
> A Collection in Strife should not confused with a Collection in RavenDB

```json
{
    "collection": "Articles",
    "fields": [
        {
            "label": "Heading",
            "editor": {
                "name": "str-input",
                "propertyName": "heading",
            },
        }
    ]
}
```

### 4. Query your pages

Using async await syntax:

```js
import store from '@/store/index';

const session = store.openSession();

let page = await session
  .query({ indexName: 'Content/ByUrl' })
 q  .whereEquals('url', '/about')
  .firstOrNull();

console.log(`Found page with ${page.heading}`);
```

Or promises:

```js
session.query({ collection: "Articles" })
  .all()
  .then((articles) => {
    if(articles.length) {
      articles.map(article => console.log(`${article.displayName} was published: ${article.publishedAt}`));
    } else {
      console.log('No articles found');
    }
  });
```

### 5. Query your Media

Using promises:

```javascript
await session.query({ collection: 'Files'})
  .whereEquals('mimeType', 'video/mp4')
  .all()
  .then(files => {
    if(files.length) {
      files.map(file => console.log(`${file.name} with size: ${file.size}`));
    } else {
      console.log('No files found');
    }
  });
```

### Search your Content

Using promises:

```javascript
await session.query({ indexName: "Content/FulltextSearch" })
    .search('fields', params.query)
    .orderByScore()
    .skip((params.page - 1) * PAGE_SIZE)
    .take(PAGE_SIZE)
    .all()
    .then(hits => {
        if(hits.length) {
          hits.map(hit => console.log(`${hit.displayName}`));
        } else {
          console.log('No hits');
        }
    });

```

### 6. Setup Real time preview

Use in web component by subscribing to the Strife studio's events and call the provided callback function.

```js
import { subscribe } from '@strifeapp/strife';

export default class Sections extends LitElement {

  static properties = {
    sections: { type: Array },
  };

  firstUpdated() {
    // Subscribe to Live Preview events using the`subscribe` function
    this.unsubscribe = subscribe((data) => {
      this.sections = data.sections;
    });
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    this.unsubscribe();
  }

  render() {
    return repeat(this.sections, (item) => item.id, (item, index) => {…});
  }
}
```

---

# .NET

Source: https://strife.app/docs/tutorials/getting-started/dotnet

Connect to the Strife API and interact with your data in a few steps:

### 1. Install Strife SDK

```bash
dotnet add package strife
```

### 2. Initialize Strife

> [!NOTE]
> The environment settings were provided during onboarding.

```json title="appsettings.json"
{
  "DocumentStoreSettings": {
    "Urls": "",
    "Database": "",
    "Certificate": "",
    "Password": ""
  },
  "Strife": {
    "Secret": "",
    "Workspace": "",
    "StartId": ""
  }
}
```

```csharp title="Program.cs"
using Strife;
using Strife.Routing;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddStrife();

var app = builder.Build();

app.UseRouting();

app.MapStrife();

app.Run();
```

### 3. Define a Collection and Template

A [Collection](https://ravendb.net/docs/article-page/7.0/csharp/client-api/faq/what-is-a-collection) is a group of records, called Documents, that all snapshot a common schema. You can define as many Collections as your application needs. Each Document in a Collection is stored in the Database based on the [Fields](https://strife.app/docs/reference/fields.md) that you define,  and is automatically queryable using a [Document session](https://ravendb.net/docs/article-page/7.0/nodejs/client-api/session/what-is-a-session-and-how-does-it-work).

Use the **Template Builder** in Strife Studio to define Collections and their templates. Then, create a corresponding C# model to represent your Collection in code.

> [!NOTE]
> A Collection in Strife should not confused with a Collection in RavenDB

```csharp
using Strife.Models;

public record BlogPost : Content {
    public string Heading { get; set; }
    public string Body { get;set; }
}
```

### 4. Rendering Content

When using the Strife SDK, content models are automatically resolved and passed to your controller actions without any manual fetching or lookup. Here's a typical example using an `BlogPostController`.

```csharp
using Microsoft.AspNetCore.Mvc;
using Strife.Binding;

public class BlogPostController : Controller
{
    public IActionResult Index([FromContentRoute] BlogPost content)
    {
        return View(content);
    }
}
```

#### How It Works

* **Automatic Content Binding**:\
  By using the `[FromContentRoute]` attribute, Strife automatically resolves and injects the correct `BlogPost` content based on the current route. You don't need to query for the content manually — it's handled for you.
* **Model-Driven Views**:\
  The resolved `BlogPost` instance is passed directly to the view, making it easy to render content using a strongly typed model.
* **Routing Integration**:\
  The system maps the incoming route to a specific content item (Document) and ensures that the correct type (e.g., BlogPost) is provided to your action.

Here’s a simplified example of how you might use the `BlogPost` model in a Razor view:

```cshtml
@model BlogPost

<h1>@Model.Heading</h1>
<div>@Model.Body</div>
```

By using `[FromContentRoute]`, you can focus on building views and logic without worrying about content retrieval. Strife takes care of resolving the right content based on the route and passing it into your controller actions.

### 5. Setup Real time preview

To enable real-time preview and connect your site to **Strife Studio**, include the Strife JavaScript SDK in your project.

Add the following to your HTML:

```html
<!DOCTYPE html>
  <html lang="sv">
    <head>
      <style>
        @@import 'https://unpkg.com/@@strifeapp/style' layer(strife);
      </style>
      <script type="module" defer>
        import 'https://unpkg.com/@@strifeapp/strife';
      </script>
    </head>
    <body>
```

Once connected, you can enable **Live Preview** in two ways:

* [**Using Strife Web Components**](https://strife.app/docs/reference/live-preview/web-components.md) for quick integration.
* [**Building a custom live preview implementation**](https://strife.app/docs/reference/live-preview/custom-live-preview-implementation.md) if you need more control over the preview experience.

This setup ensures that content editors can see real-time updates directly on the site as they work in Strife Studio.

#### Snapshots (optional)

Editors can hand a reviewer without a Strife account a **preview link** — `https://example.com/snapshot/{token}` — that shows a frozen, unpublished version of a document on your site for 7 days. Nothing to register: `MapStrife()` resolves the route, your controller receives the snapshot through `[FromContentRoute]` as usual, and `ContextService.GetSnapshot(HttpContext)` tells you when you are rendering one:

```csharp
var snapshot = _context.GetSnapshot(HttpContext);   // Strife.Services.SnapshotContext, or null
if (snapshot != null)
{
    // show a preview notice with snapshot.Name (render as text) and snapshot.ExpiresAt;
    // skip analytics and Open Graph tags
}
```

Expired, revoked or unknown links are your site's ordinary not-found. The route needs a `Content/ByUrl` index built from the `@strifeapp/strife` release that ships snapshots (run `strife push` after updating). Locale handling, the headers the SDK sets, and the CDN/analytics rules are in the [Snapshots](https://strife.app/docs/reference/snapshots.md) reference.

### 6. Querying and Searching

To **query** or **search** for documents, use the RavenDB client provided by the SDK. The `IDocumentStore` is available via **dependency injection** in your controllers and services.

Here’s an example of querying related documents in a controller:

```csharp
using Microsoft.AspNetCore.Mvc;
using Strife.Binding;

public class BlogListController : Controller
{
    private readonly IDocumentStore _store;
    public BlogListController(IDocumentStore store) {
        _store = store;
    }
    public IActionResult Index([FromContentRoute] BlogList content)
    {
        var viewModel = new BlogListViewModel(content);
        using (var session = _documentStore.OpenAsyncSession())
        {
            viewModel.CurrentPosts = await session.Query<BlogPost>(content.Posts);        
        }
        return View(viewModel);
    }
}.
```

> [!NOTE]
> `content.Posts` is assumed to be a list of BlogPost IDs stored in the `BlogList` document.
>
> Use `LoadAsync<T>()` when loading specific documents by ID, and `Query<T>()` for broader queries.

#### Full-Text Search Example

For more advanced search scenarios, such as full-text search with highlighting and scoring, you can query an index like this:

```csharp
var hits = await session.Query<Content_FullTextSearch.Result, Content_FullTextSearch>()
    .Search(x => x.SearchText, query, @operator: SearchOperator.And)
    .Highlight(x => x.SearchText, 100, 1, highlightingOptions, out Highlightings highlights)
    .OrderByScore()
    .Skip((page - 1) * pageSize)
    .Take(pageSize)
    .ProjectInto<SearchHit>()
    .Statistics(out QueryStatistics stats)
    .ToArrayAsync();
```

> [!NOTE]
> **Note:** A **full-text search index** (e.g., `Content_FullTextSearch`) **must be created manually** in RavenDB. Strife does **not** provide built-in search indexes — this allows you to define custom indexing logic suited to your content.

### Additional Resources

For more details on querying, indexing, and advanced search capabilities, see the [RavenDB official documentation](https://ravendb.net/docs/article-page/6.2/csharp/start/getting-started).

---

# Astro

Source: https://strife.app/docs/tutorials/astro

Build fast, flexible, and CMS-powered websites with Strife and Astro.

## Getting Started with Strife and Astro

This guide walks you through how to integrate Strife CMS into your Astro project using TypeScript.

> [!NOTE]
> **There's a newer, code-first alternative to steps 3–4 and 9 below.** [Strife CLI](https://strife.app/docs/reference/cli.md) lets you define templates with [`defineType`](https://strife.app/docs/reference/cli/schemas.md) instead of hand-written `Template` objects registered via the integration's `collections` option, and deploys them explicitly with `strife push` rather than lazily on first request. The Template-object approach on this page still works and isn't being removed, but `defineType` + `strife push` is the recommended path for new projects — see the [CLI reference](https://strife.app/docs/reference/cli.md) for the full picture, including [how credentials are provisioned automatically](https://strife.app/docs/reference/cli.md#bootstrapping-a-brand-new-project) instead of the six manual `.env` values in step 6.

***

### 1. Create a new Astro project

Start by creating a fresh Astro project:

```bash
npm create astro@latest
```

Follow the prompts to scaffold your site.

***

### 2. Install the Strife Astro Integration

Inside your Astro project, install the Strife integration:

```bash
npx astro add @strifeapp/astro
```

After running this, your `astro.config.mjs` will be updated automatically:

```javascript
import { defineConfig } from 'astro/config';
import strife from '@strifeapp/astro';

export default defineConfig({
  integrations: [strife()],
  output: 'server',
});
```

Strife requires `output: 'server'` because content is fetched at request time. The integration sets this automatically on install, and also pulls in `@strifeapp/types` so TypeScript users get full type safety without any extra install step.

From `@strifeapp/astro` 1.6.0 the integration caps the RavenDB client's in-memory response cache at 8 MiB (set `strife({ httpCache: { maxBytes } })` to change it). If your project also lists `ravendb` as its own dependency, keep it at 7.2.3 or later: older clients cannot be given a byte budget, so the integration limits them to 500 cached responses and logs a warning.

> [!WARNING]
> **Using an older version of the integration?** Until the updated Astro plugin ships, three things need to be done manually:
>
> 1.  **Install types manually** if `astro add` doesn't include them automatically:
>
>     ```bash
>     npm install -D @strifeapp/types
>     ```
> 2. **Add `output: 'server'`** to your `defineConfig({ ... })` call if it's missing after `astro add`.
> 3. **Add a `name` field** to every Template, matching its `collection` value (e.g. `name: 'Homes'` on the Homes template in the next step). Without it, all templates silently collide at the same storage key and only the last registered one survives.
>
> Once the new plugin version lands, all three are handled for you and these steps aren't needed.

***

### 3. Define your first Collection and Template

In Strife, content is structured via **Collections** and **Templates**. Each template describes the fields available for a collection item.

A typical site has a mix of **singleton** templates (one document per project — e.g. a Home page or Global Settings) and **multi-instance** templates (many documents — e.g. blog posts or product pages). Strife controls this with the `composable` field on the template.

> For more information on how templates and collections work, see the full [Strife Templates & Collections documentation](https://strife.app/docs/reference/templates.md).

> [!NOTE]
> **A quick note on "collections":** Strife uses the word "collections" in two places — the `collections` array on the `strife()` integration (the list of templates to register, see step 4) and the `collection` field on each Template (the RavenDB document collection name). Neither is related to Astro's native [content collections](https://docs.astro.build/en/guides/content-collections/) feature (configured via `src/content/` and `content.config.ts`). If you see a `Content config not loaded` warning at boot, that's Astro noticing you haven't set up its own content collections — it's safe to ignore if you're using Strife exclusively.

Start with a Home template for your site's root page. Create `src/collections/Home.ts`:

```typescript
import { type Template } from '@strifeapp/types';

const Home: Template = {
  displayName: 'Home',
  collection: 'Homes',
  templateType: 'dt',
  normalizedName: 'home',
  composable: false,  // singleton — only one Home document per project
  editors: [
    {
      label: 'Heading',
      editor: { name: 'str-input', type: 'text', propertyName: 'heading' },
    },
    {
      label: 'Description',
      editor: { name: 'str-textarea', type: 'text', propertyName: 'description' },
    },
  ],
};

export default Home;
```

Then add a Pages template for any other content — about, contact, marketing pages, anything that isn't a one-off. Create `src/collections/Pages.ts`:

```typescript
import { type Template } from '@strifeapp/types';

const Pages: Template = {
  displayName: 'Page',
  collection: 'Pages',
  templateType: 'dt',
  normalizedName: 'page',
  composable: true,  // multi-instance — editors can create many Pages
  editors: [
    {
      label: 'Heading',
      editor: { name: 'str-input', type: 'text', propertyName: 'heading' },
    },
    {
      label: 'Description',
      editor: { name: 'str-textarea', type: 'text', propertyName: 'description' },
    },
  ],
};

export default Pages;
```

The two templates illustrate the contrast: `Home` has `composable: false` (only one document allowed), while `Pages` has `composable: true` (editors can create many). Use `composable: false` for templates that should only ever have one document — Home, Global Settings, Footer config, etc. — and `composable: true` for repeatable content. See the templates reference for the full list of template properties.

> [!WARNING]
> **Singleton seeding:** for templates with `composable: false`, the single document needs to exist before your site can render it. Open Strife Studio → your team → Content, create a new Home document, and set its `url` to `/`.
>
> Future Strife versions auto-provision the root Home document when a team is created — so this specific step disappears. Other singleton templates you add later (Global Settings, Footer, etc.) follow the same manual-seed pattern and aren't auto-provisioned.

***

### 4. Register your Collection

Import your collection and register it in your Strife integration at `astro.config.mjs`

```javascript
import { defineConfig } from 'astro/config';
import strife from '@strifeapp/astro';
import Home from './src/collections/Home';
import Pages from './src/collections/Pages';

export default defineConfig({
  integrations: [strife({
    collections: [Home, Pages]
  })],
  output: 'server',
});
```

***

### 5. Create your Content Types

Define TypeScript interfaces matching each collection for strong typing when querying:

```typescript
import { type Content } from '@strifeapp/types';

export type Home = Content & {
  heading: string;
  description: string;
};

export type Page = Content & {
  heading: string;
  description: string;
};
```

In real projects these two might diverge — Home could have its own hero structure, Pages might be more flexible — but for the tutorial they share the same shape.

***

### 6. Add your Strife Credentials

Create a `.env` file in your project root with the credentials provided for your team:

```bash
# .env

# RavenDB client certificate — base64-encoded PFX bundle
STRIFE_CERTIFICATE=...

# Password protecting the PFX certificate above
STRIFE_CERTIFICATE_PASSWORD=...

# Comma-separated list of RavenDB node URLs
STRIFE_DATABASE_URLS=https://a.example.strife.ravendb.cloud

# Name of your team's RavenDB database
STRIFE_DATABASE=...

# Your team's unique identifier
TEAM_ID=...

# Signing secret used for preview and webhook payloads
SECRET=...
```

> [!NOTE]
> These six values are provided during your Strife onboarding. The same cert-based authentication model is used by the Node.js SDK — if you've set that up before, the values are the same.
>
> If you're using [Strife CLI](https://strife.app/docs/reference/cli.md) (`npx strife` / `strife .`), you won't need to set these six individually — the CLI packs the same information into a single `STRIFE_SECRET` value and writes it to `.env` for you. Both forms are read by the integration; use whichever your provisioning path gave you.

> [!WARNING]
> Treat every value above as a secret. Never commit `.env` to version control — add it to `.gitignore` if `npm create astro@latest` didn't do so already.

***

### 7. Enable TypeScript Module Declarations

To support type-safe access to Strife's document store, update or create `src/env.d.ts` (recent Astro starters auto-generate types in `.astro/` and don't ship a stub `env.d.ts`):

```typescript
/// <reference types="astro/client" />

declare module 'strife:store' {
  import type { IDocumentSession, IDocumentStore } from 'ravendb';
  export const store: IDocumentStore;
  export { IDocumentSession };
}
```

***

### 8. Query Content from Strife

You can now query your content directly from RavenDB via Strife. The same query pattern works for both singleton and multi-instance templates — it matches by URL:

```typescript
import { store } from 'strife:store';
import type { Home } from '../collections/Home';

const session: IDocumentSession = store.openSession();

// Returns the Home document for url='/'.
// For other URLs ('/about', '/contact', etc.), the same query returns
// whichever Page document has that url.
const home: Home = (await session
  .query({ indexName: 'Content/ByUrl' })
  .whereEquals('url', '/')
  .selectFields(['heading', 'description'])
  .firstOrNull()) as Home;
```

***

#### 9. Deploy your templates

> [!WARNING]
> Earlier versions of the integration deployed templates and the content index automatically, on the first request to a route that imported `strife:store`. That's no longer the case — the integration only connects to the database and reads content now. Deployment is explicit, via the CLI, as described below.

Templates and the `Content/ByUrl` query index are deployed with [Strife CLI](https://strife.app/docs/reference/cli.md):

```bash
npm install --save-dev @strifeapp/cli @strifeapp/strife
npx strife login
npx strife link
```

The templates you registered as `Template` objects in step 4 aren't picked up by `strife push` directly — `push` deploys schemas written with [`defineType`](https://strife.app/docs/reference/cli/schemas.md). If you're following this tutorial's `Template`-object approach, create your templates directly in Strife Studio instead (Settings → Templates) rather than via `push`, or see the [CLI reference](https://strife.app/docs/reference/cli.md) for defining them in code as `defineType` schemas instead of the `Template` objects used in steps 3–4.

Once your templates exist (via Studio or `defineType` + `push`), start the dev server as usual:

```bash
npm run dev
```

and visit the URL Astro prints (e.g. `http://localhost:4321/`).

***

#### 10. Add live preview (optional)

Strife Studio includes a preview iframe that mirrors your site as content is edited. With the integration installed, your islands can subscribe to updates:

```svelte
<!-- src/components/Hero.svelte -->
<script lang="ts">
  import { subscribe } from '@strifeapp/strife';
  import { onMount } from 'svelte';

  let { initial } = $props<{ initial: { heading: string; description: string } }>();
  let data = $state(initial);

  onMount(() => subscribe((next) => { data = next; }));
</script>

<h1>{data.heading}</h1>
<p>{data.description}</p>
```

This requires loading `@strifeapp/strife` eagerly in your root layout (otherwise the iframe handshake completes before subscribers are ready). For full setup, the data-shape reference, and framework-agnostic patterns, see [Custom Live Preview implementation](https://strife.app/docs/reference/live-preview/custom-live-preview-implementation.md).

***

#### Snapshots (optional)

Editors can hand a reviewer without a Strife account a **preview link** — `https://example.com/snapshot/{token}` — that shows a frozen, unpublished version of a document on your site for 7 days. The integration's snapshot middleware resolves the link; you add the page that renders it. Add `src/pages/snapshot/[token].astro`. A minimal version is below; the complete template, with the rules a snapshot page must follow, is in the [Snapshots](https://strife.app/docs/reference/snapshots.md) reference.

```astro
---
export const prerender = false;              // rendered on demand — never prebuilt
import Layout from '../../layouts/Layout.astro';

const { name, expiresAt, locale, content } = Astro.locals.snapshot!;
---
<Layout title={content.displayName ?? 'Preview'}>
  <aside role="status">{name ? `Preview “${name}”` : 'Preview'} — expires {expiresAt.toISOString()}</aside>
  <h1>{content.heading}</h1>
</Layout>
```

Expired, revoked or unknown links render your 404 page. The route needs a `Content/ByUrl` index built from the `@strifeapp/strife` release that ships snapshots (run `strife push` after updating), and the name must be rendered as text only. Locale prefixes, `snapshot.fields`, sites that resolve locale in their own middleware, and the CDN/analytics rules are in the [Snapshots](https://strife.app/docs/reference/snapshots.md) reference.

***

### 11. Choose a deployment adapter

`astro dev` works out of the box. For production builds (`astro build`), Astro needs an adapter that matches your deploy target. Strife doesn't require a specific one — pick whichever suits your hosting:

| Deploy target       | Adapter               | Install                    |
| ------------------- | --------------------- | -------------------------- |
| Self-hosted Node.js | `@astrojs/node`       | `npx astro add node`       |
| Vercel              | `@astrojs/vercel`     | `npx astro add vercel`     |
| Netlify             | `@astrojs/netlify`    | `npx astro add netlify`    |
| Cloudflare Workers  | `@astrojs/cloudflare` | `npx astro add cloudflare` |

See [Astro's deploy guides](https://docs.astro.build/en/guides/deploy/) for the full list and configuration details.

After installing an adapter, your `astro.config.mjs` will look something like:

```javascript
import { defineConfig } from 'astro/config';
import strife from '@strifeapp/astro';
import node from '@astrojs/node';           // or vercel, netlify, cloudflare…
import Homes from './src/collections/Homes';

export default defineConfig({
  integrations: [strife({ collections: [Homes] })],
  output: 'server',
  adapter: node({ mode: 'standalone' }),     // adapter-specific options vary
});
```

Push your repository to your chosen host and your Strife-powered Astro site is live.

---

# Quickstart

Source: https://strife.app/docs/tutorials/quickstart

Easy as 1, 2, 3!

---

# Next.js

Source: https://strife.app/docs/tutorials/next.js

Build an application using Next.JS and Strife

### Prerequisites

> [!WARNING]
> Before you read any further, make sure that you have a valid invite and received the welcome email.

Before you begin, ensure you have the following:

* A package manager (NPM)
* A [Next.js](https://nextjs.org/docs/getting-started/installation) app

### Installation

First, install the RavenDB Node.js client using NPM:

```bash title=">_ Terminal"
npm install ravendb --save
```

### Configuration

Add your RavenDB database configuration to the `.env.local` file in your Next.js app:

> [!NOTE]
> You may need to create `.env.local` if it does not exist.

```sh title=".env.local"
STRIFE_CERTIFICATE=xxx
STRIFE_CERTIFICATE_PASSWORD=xxx
STRIFE_DATABASE_URLS=xxx
STRIFE_DATABASE=xxx
```

### Create your first query

To request the home page based on the URL, create a query using the RavenDB Node.js client:

> [!NOTE]
> This query uses a predefined index called `Content/ByUrl`. The index is used to query content based on a relative URL.

```javascript title="src/app/page.js"
import { DocumentStore } from 'ravendb';

const certificate = process.env.STRIFE_CERTIFICATE;

const authOptions = {
  certificate: Buffer.from(certificate, 'base64'),
  type: 'pfx',
  password: process.env.STRIFE_CERTIFICATE_PASSWORD,
};

const store = new DocumentStore(
  process.env.STRIFE_DATABASE_URLS.split(', '),
  process.env.STRIFE_DATABASE,
  authOptions
);
store.initialize();

const session = store.openSession();
const query = session
  .query({ indexName: 'Content/ByUrl' })
  .whereEquals('url', '/');
  
const home = await query.firstOrNull();
```

### Real-Time Preview

#### Prepare the App for Real-Time Updates

Include the Strife JavaScript SDK using the [Script Component](https://nextjs.org/docs/pages/api-reference/components/script) in your Next.js app just before the end of the `<html>` tag in your `src/app/layout.js` file:

```javascript title="src/app/layout.js"
import Script from 'next/script'

// ...

<Script type="module" src="https://esm.sh/@strifeapp/strife@latest" />
```

#### Enable Real-Time preview

Locate the first paragraph in `src/app/page.js` and add the required attributes to enable real-time preview.

```html title="src/app/page.js"
<p is="str-p" data-field="heading" ...>
    {home.heading}
</p>
```

Congratulations! You have now seamlessly integrated real-time data updates into your Next.js application using the Strife JavaScript SDK. 🎉

---

# Create a dynamic employee list using the Chapters field

Source: https://strife.app/docs/tutorials/create-a-dynamic-employee-list-using-the-chapters-field

This tutorial provides step-by-step instructions for implementing the Chapters field using .NET and enabling the live preview.

In this tutorial, you will learn how to implement a dynamic employee list in Strife Studio. The example leverages the Chapters field and .NET (C#).

> [!WARNING]
> Ensure that the C# SDK is installed on your website. For detailed instructions, refer to [this how-to guide](https://strife.app/docs/how-to-guides/installing-c-sdk.md).

> [!NOTE]
> Please review the [Chapters field reference](https://strife.app/docs/reference/fields/chapters.md) and check the [Strife Web Components guide](https://strife.app/docs/reference/live-preview/web-components.md).

### Template

First, create a content template called 'Employee'. Add a couple of fields for displaying information about the employee; such as 'Name', 'Role', 'Image'.

<figure><img src="https://strife.app/docs/assets/Screenshot%202023-11-02%20at%2011.14.10.png" alt="" width="375"><figcaption><p>Employee Content Template</p></figcaption></figure>

Next, create a chapters field on your document template used by the page where you want to display employees. Open settings, name the field accordingly, e.g. 'employees', and restrict types to use only the 'Employee' Content Template.

<figure><img src="https://strife.app/docs/assets/Screenshot%202023-11-02%20at%2011.14.37.png" alt="" width="375"><figcaption><p>Chapters settings</p></figcaption></figure>

### Website

#### Backend

Create a model in your website that will hold the data.

```csharp
public class Employee {
    public string Name {get;set;}
    public string Role {get;set;}
    public Image Picture {get;set;}   
    ... 
}
```

Add a list property to your existing page model

```csharp
public class YourPageModel : Content {
    ...
    public List<Employee> Employees {get;set;} = new List<Employee>();
    ...
}
```

Your page model will now be populated with the employees added in the Strife Studio.

#### Frontend

Create a partial view called `_Employee.cshtml` in the _Shared_ folder.

```cshtml
@model Employee

<li class="card">
    <img is="str-img" data-field="picture" src="@Model?.Picture?.Source?.Url" alt="" width="128" height="128">
    <h3 is="str-h3" data-field="name">@Model?.Name</h3>
    <strong is="str-strong" data-field="role">@Model?.Role</strong>
</li>
```

Determine the location within your markup where you want to present the employee list. Utilize a container Strife Web Component and include the `is` and `data-field` attributes. Then, iterate through the employee data in your page model and employ the partial to perform server-side rendering of the content.

```cshtml
<ul is="str-ul" data-field="employees">
    @foreach (var employee in Model.Employees)
    {
        <partial name="_Employee" model="employee" />
    }
</ul>
```

To ensure the live preview functions correctly, it's essential to include an HTML template that contains the markup to be dynamically cloned when the user edits content in Strife Studio.

Begin by obtaining the ID for your content template, which can be found in the Content Template list. Click on the three dots and select 'Copy ID'. Next, navigate to your `_Layout.cshtml` file, and just before the closing `</body>` tag, add the following code snippet as shown below:

```cshtml
<template id="[Copied ID]">
    <partial name="_Employee" model="null" />
</template>
```

### Studio

To complete the setup, navigate to the corresponding page in Strife Studio. Within the Chapters field, add a couple of employee entries. Your website should now automatically add and display a preview of the employees as you edit them. Don't forget to publish your changes to make the content visible outside of Strife Studio.

**Congratulations**, you've successfully implemented a dynamic employee list with live preview functionality using the Chapters field in Strife. Enjoy the real-time editing experience and enhanced control over your content!

---

# Create a blog post list using the Collection field

Source: https://strife.app/docs/tutorials/create-a-blog-post-list-using-the-collection-field

In this tutorial, you'll find step-by-step instructions for implementing the Collection field using .NET and enabling the live preview.

In this tutorial, you will discover how to create an interactive blog post list within Strife Studio. This example utilizes the Collection field and .NET (C#).

> [!WARNING]
> Ensure that the C# SDK is installed on your website. For detailed instructions, refer to [this how-to guide](https://strife.app/docs/how-to-guides/installing-c-sdk.md).

> [!NOTE]
> Please review the [Chapters field reference](https://strife.app/docs/reference/fields/chapters.md) and check the [Strife Web Components guide](https://strife.app/docs/reference/live-preview/web-components.md).

### Template

Create two straightforward document templates for your blog: 'Blog List' and 'Blog Post', as illustrated in the screenshots below. Ensure that you include a `Collection` field in the 'Blog List'.

<div><figure><img src="https://strife.app/docs/assets/Screenshot%202023-11-02%20at%2008.16.43.png" alt=""><figcaption><p>Simple Blog List Template</p></figcaption></figure> <figure><img src="https://strife.app/docs/assets/Screenshot%202023-11-02%20at%2008.14.21.png" alt=""><figcaption><p>Simple Blog Post Template</p></figcaption></figure></div>

Now, create a page based on the 'Blog List' template within Strife Studio and proceed to compose a couple of sample posts using the 'Blog Post' template.

### Website

After you've created some content, head over to your website's code to configure the setup.

#### Backend

Generate straightforward page models for both the List and Post templates, as below.

```csharp
public record BlogList : Content
{
  public string Heading { get; set; }
  public CollectionDefinition Posts { get; set; }
}
```

```csharp
public record BlogPost : Content {
    public string Heading { get; set; }
    public string Body { get;set; }
}
```

Note that we are using the `CollectionDefinition` class to represent the `Collection` field. This class is part of the SDK and will be used for querying the blog posts.

In the blog list controller, utilize the `CollectionQuery` extension from the Strife SDK to query all posts that match the `CollectionDefinition` property. In the example below, we also use a ViewModel to extend the model sent to the Razor view.

```csharp
public async Task<IActionResult> Index([FromContentRoute] BlogList content)
{
    var viewModel = new BlogListViewModel(content);
    using (var session = _documentStore.OpenAsyncSession())
    {
        viewModel.CurrentPosts = await session.CollectionQuery<Post>(currentBlog.Posts);        
    }
    return View(viewModel);
}
```

#### Frontend

Now, let's proceed to create the frontend representation of the post listing. Generate a partial view named `_PostListing.cshtml` within the _Shared_ folder.

```cshtml
@model BlogPost

<article>
  <a href="@Url.ContentURL(Model?.Id)">
    <time is="str-time" data-field="publishedDate" data-format="MMM dd, yyyy" datetime="@Model?.PublishedDate?.Value?.ToString("O")">@Model?.PublishedDate?.Value?.ToString("MMM dd, yyyy")</time>
  </a>
  <h2 is="str-h2" data-field="heading">@Model?.Heading</h2>
  <div is="str-div" data-field="body">@Html.Raw(Model?.Body ?? "")</div>
</article>
```

In your blog list's `Index.cshtml` file, iterate through your blog posts and utilize the partial view for server-side rendering of the content. Additionally, incorporate the attributes `is` and `data-field` to link to the relevant Strife Web Component and field name.

```cshtml
<div is="str-div" data-field="posts">
  @foreach(var post in Model.CurrentPosts) {
    <partial name="_PostListing" model="post" />
  }  
</div>
```

To enable the live preview including the dynamic addition and removal of posts from the listing during editing, you must include an HTML template that matches the partial.

In your `_Layout.cshtml`_,_ just before the closing body tag, insert the following code.

```cshtml
<template id="collection_posts">
    <partial name="_PostListing" model="null" />
</template>
```

Note that the `id` attribute is constructed by combining the prefix 'collection\_' with the field name, in this instance, 'posts,' resulting in the ID '_collection\_fields_'.

### Studio

Lastly, navigate to the Blog list page and locate the `Collections` field within Strife Studio.

Configure the _collection_ property to include 'Posts' and thoroughly test the selection, sorting, and limit features. Observe how the blog list dynamically updates with each edit. Once satisfied with your changes, publish your results and visit your live site to witness the blog posts being server-rendered seamlessly.

**That's a wrap!** You've successfully created a dynamic blog post list that empowers editors to completely change the selection within Strife Studio, instantly witness the updates in the live preview, and once satisfied publish the changes to the live website – all without needing to modify a single line of code.

---

# Model binding in C#

Source: https://strife.app/docs/tutorials/model-binding-in-c

---

# Strife how-to guides

Source: https://strife.app/docs/how-to-guides/how-to-overview

This section contains step-by-step guides showing you how to solve real-world problems in Strife

A bunch of interesting how-to guides will be linked here...

---

# How to build a menu

Source: https://strife.app/docs/how-to-guides/menu-how-to

### Build a top bar menu

This example explains how to create a top bar menu

**Node.js**

```javascript
const session = store.openSession();

const navigationQuery = session
  .query({ indexName: 'Content/ByUrl' })
  .whereEquals('origin', process.env.STRIFE_ROOT_ID)
  .selectFields(['displayName', 'url']);

const navigation = await navigationQuery.all();
```

**C#**

```csharp
public record MenuResult(string DisplayName, string Url);
```

```csharp
var results = await session.Query<Content_ByUrl.Result, Content_ByUrl>()
  .ProjectInto<MenuResult>()
  .ToListAsync();
```

---

# Known issues

Source: https://strife.app/docs/how-to-guides/known-issues

---

# Previewing with 100vh sections

Source: https://strife.app/docs/how-to-guides/known-issues/previewing-with-100vh-sections

Websites with 100vh sections may appear unnaturally extended in the Strife Studio preview, causing a display issue.

To resolve this issue, you can utilize CSS media queries to reset the height of 100vh sections to 'initial,' specifically targeting larger screens or heights. This ensures that the original website remains unaffected, except when displayed on very large screens, which is likely to result in an improved user experience. Refer to the code example below for a practical demonstration of this solution.

```css
@media (min-height: 1600px) {
  body {
    height: initial;
  }
  main {
    height: initial;
  }
  section {
    min-height: initial;
  }
}
```

---

# React, className and class using web components

Source: https://strife.app/docs/how-to-guides/known-issues/react-classname-and-class-using-web-components

---

# Installing C# SDK

Source: https://strife.app/docs/how-to-guides/installing-c-sdk

---

# Open in Strife: a toolbar on your site

Source: https://strife.app/docs/how-to-guides/open-in-strife-toolbar

Editors who browse your public site can open the page they are looking at in Strife. `@strifeapp/strife` ships a small toolbar for that: a small island at the right edge of the page that unfolds to **Redigera i Strife** (or *Edit in Strife*) and a **×**, rendered only in browsers that have been *connected* to Strife. Visitors never see it. Nothing runs on your server.

## How it works

* **Connecting happens once per browser.** An editor opens a page of the site from Studio with the play button. The new tab still knows the window that opened it, so the toolbar script offers it a connection (`postMessage`), Studio answers, and the script sets a first-party cookie, `strife-toolbar=1`, for 30 days. Nothing travels in the address. A page opened any other way, from a bookmark or the address bar, has no one to ask and stays as it is.
* **The cookie carries no privileges.** It only decides whether the toolbar renders. Opening Strife goes through Strife's own login and the editor's team membership.
* **Clicking the toolbar** opens `api.strife.app/toolbar/open` in a new tab, which lands in Studio on the document behind the page. If nothing on the team owns the page, Studio opens on the team's content list.
* **The ×** removes the cookie from that browser. Opening a page from Studio again connects it again.
* **Nothing reaches your server.** The handshake happens between the two browser tabs, so access logs, caches and analytics never see a marker. A site without the toolbar never answers Studio, so nothing happens there at all. Studio's preview iframe never connects and never shows the toolbar.

## Requirements

* `@strifeapp/strife` 1.11.1 or later.
* The team's registered site domains must include every host the site is served on (for example both `golf.se` and `www.golf.se`): the page's host is how Strife finds the team, and how it resolves a bare page URL. Only a page that passes both `team` and `document-id` needs no registered host.

## Add the element

Put the element in your layout and import the module once. The decision to render is made in the browser, so this is safe on cached and static pages. Import the module unconditionally and early, not behind a consent manager's auto-blocking: Studio waits about a minute for the page to answer, and a module that only runs after a consent click misses it.

```astro
---
// src/layouts/Layout.astro
const { pageData } = Astro.locals;
---
<strife-toolbar document-id={pageData?.docId}></strife-toolbar>
<script>
  import '@strifeapp/strife/toolbar-element';
</script>
```

| Attribute     | Required | Meaning                                                                                                                                                                                                                                                   |
| ------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `team`        | no       | The team id. Without it, Strife resolves the team from the page's host among the editor's own teams. Pass it to skip the host lookup; together with `document-id` the host need not be registered at all.                                                                                     |
| `document-id` | no       | The Strife content document id of the page, the one Studio shows in the editor URL. In `Content/ByUrl*` index rows that is usually the `docId` field, not the row's own `id`. Preferred: Strife opens exactly that document, which also covers virtual sub-pages. Without it, Strife resolves the page URL through the content index. |
| `api`         | no       | The Strife API origin. Defaults to `https://api.strife.app`.                                                                                                                                                                                              |
| `lang`        | no       | Language of the toolbar's labels. Defaults to the page's `<html lang>`: Swedish for `sv`, English for everything else.                                                                                                                                  |

The element renders only when the cookie is present, the page is top-level (not framed) and the URL does not carry `?token=`. Collapsed it is a small tab on the right edge with the Strife mark; hovering, focusing or tapping it unfolds two icon actions with tooltips, **edit in Strife** and **hide**. The tooltips use native Interest Invokers (`interestfor` + `popover="hint"`) in Chrome and Edge 142+, and a built-in fallback elsewhere. Style it from outside with `strife-toolbar::part(island)`, `::part(mark)`, `::part(edit)`, `::part(hide)` and `::part(tooltip)`, or move it with a rule on `strife-toolbar` itself (it is `position: fixed`, vertically centred on the right edge by default).

## Cookies and consent

`strife-toolbar` is a first-party, host-only cookie holding the value `1`, set by the toolbar script after the editor arrived from Strife. Classify it as a necessary/functional cookie in your consent tool.

## Limitations

* The handshake is not signed. Any page that opens your site with `window.open` can make the toolbar appear in that browser; the button only leads to Strife's login, so nothing is exposed.
* Safari caps script-set cookies to seven days of Safari use without a visit to the site. An editor who browses the site weekly keeps the connection; otherwise she opens the page from Studio again.
* Multi-language sites open in the editor's current locale, not necessarily the locale of the page.

## Troubleshooting

* **The toolbar never appears after opening the page from Studio**: the page must be top-level (not framed), the address must not carry `?token=`, and the tab must still know its opener. A site that sends `Cross-Origin-Opener-Policy` (`same-origin` or `same-origin-allow-popups`), or a script that clears `window.opener` before the toolbar module runs, severs the connection; so does closing the Studio tab before the page has loaded. After a play, `document.cookie` should contain `strife-toolbar=1`.
* **Clicking lands on the content list instead of the document**: pass `document-id`, or register the host the site is served on for the team.
* **`None of your teams is registered for …`**: the editor is not a member of a team that has this host registered. Register the host, or pass `team` together with `document-id`.

---

# Snapshots on an Astro site that queries the index

Source: https://strife.app/docs/how-to-guides/snapshots-astro-without-the-sdk

Serve snapshots from an Astro site that queries the Content/ByUrl index itself, without the SDK's snapshot middleware or a dedicated snapshot route.

If your Astro site resolves pages by querying `Content/ByUrl` directly — a middleware that looks the current URL up in the index and puts the row on `Astro.locals` — you do not need the SDK's snapshot middleware, the `snapshot/[token].astro` page, or any new route to serve snapshots. A snapshot's rows carry the snapshot path as their `url`, so the lookup you already have resolves them. **The integration is one clause in one query, plus three projected fields.**

This guide is the worked version of the contract in [Snapshots → Serving snapshots without the SDK](https://strife.app/docs/reference/snapshots.md#serving-snapshots-without-the-sdk). Read that section for the rules; read this one for the code.

> [!NOTE]
> **Vocabulary.** Editors see these as **snapshots** in Strife. The mechanism keeps the name `snapshot` everywhere you touch it — the `/snapshot/{token}` path, `status: "snapshot"`, `snapshotToken`, `snapshotName`. Same thing, two audiences.

## Before you start

* **Deploy the index.** Run [`strife push`](https://strife.app/docs/reference/cli/commands.md#strife-push) from a `@strifeapp/strife` release that ships snapshots. Until that has happened, Strife refuses to create a snapshot at all, so nothing can reach your site.
* **Render on demand.** Snapshot paths must not be prerendered, statically generated, or cached at the edge. On a site with `output: "server"` this is already true; on a hybrid site, make sure the route that resolves pages is `prerender = false`.
* **You do not need `@strifeapp/astro` upgraded.** This path uses no SDK snapshot API. A site pinned to a pre-snapshot version of the package works exactly the same.

## 1. Admit `status == "snapshot"` — in the by-URL lookup only

Your visibility predicate today is some form of "published, plus the legacy null-status fallback". Snapshot rows carry `status: "snapshot"` and `draft: true`, so nothing you have matches them. Add the one branch, and add it **only** to the query that resolves the current page by exact URL:

```typescript
// src/data/contentIndex.ts
export function visibleByUrlQuery<T = any>(
  session: IDocumentSession,
  locale: string,
  url: string,
  editMode: boolean,
): IDocumentQuery<T> {
  if (editMode) {
    return visibleContentQuery<T>(session, locale, editMode).whereEquals("url", url);
  }
  // A snapshot's rows carry the snapshot URL itself ("{root-slug}/snapshot/{token}"),
  // so admitting status = "snapshot" here is the whole integration. Exact-URL lookups
  // ONLY — listings stay published-only, or they would enumerate secret snapshot tokens.
  return session
    .query<T>({ indexName: CONTENT_INDEX })
    .whereEquals("locale", locale)
    .andAlso()
    .openSubclause()
    .whereEquals("status", "published")
    .orElse()
    .whereEquals("status", "snapshot")
    .orElse()
    .openSubclause()
    .whereEquals("status", null)
    .andAlso()
    .whereEquals("draft", false)
    .closeSubclause()
    .closeSubclause()
    .andAlso()
    .whereEquals("url", url);
}
```

Three things about that query are load-bearing:

* **The locale clause.** Snapshot `url`s coincide across languages whenever the site's root slug does not vary by locale, and your code cannot tell which case it is in. Always pair `url` with the resolved locale. A site on this path resolves the **exact** locale only — there is no `snapshotLocale` fallback here, so a reviewer who switches to a language the snapshot never had gets your ordinary not-found.
* **The url clause stays outside the visibility subclause.** Keep the OR-branches wrapped so the caller's `url` binds with AND. A stray `orElse` at the top level turns "published *or* snapshot, at this URL" into "published, *or* anything shared anywhere".
* **Listings keep the old predicate.** Collection queries, sitemaps, hreflang alternates and search all stay published-only. A listing that admits snapshot rows publishes the secret tokens.

## 2. Project the three fields you will read

The snapshot fields are stored in the index, so they come back through `selectFields`. Add them where you project the current page's row:

```typescript
// src/middlewares/loadRouteData.ts
async function findPageDataByPath(session, locale, pathname, editMode) {
  return await visibleByUrlQuery(session, locale, pathname, editMode)
    .selectFields([
      "id",
      "displayName",
      "url",
      "collection",
      "status",       // "snapshot" tells the rest of the site what it is looking at
      "snapshotName",    // the editor's label, for an optional banner
      "expiresAt",    // UTC round-trip string, for an optional banner
      "publishedDate",
      // …your existing fields
    ])
    .firstOrNull();
}
```

`collection` comes back exactly as it does for the published document, so your view mapping picks the same layout and components it always would. That is the point of this approach: a snapshot is not a special kind of page, it is the same page with unpublished content.

## 3. Let your published-check pass a snapshot row

Most sites of this shape have a guard that 404s anything without a publish date. A snapshot deliberately has none:

```typescript
// src/middlewares/checkPublished.ts
const isPublished =
  pageData &&
  !pageData.deleted &&
  // A snapshot renders a frozen, unpublished snapshot on purpose; its row only
  // exists while the snapshot is active (expiry soft-deletes it).
  (pageData.status === "snapshot" ||
    (pageData.publishedDate && new Date(pageData.publishedDate) < new Date()));
```

**You do not need an expiry check.** Expiry and revocation work by the rows disappearing: Strife soft-deletes the snapshot, and the index drops its rows — normally within about a minute of the instant, and at the next worker start if an alarm was missed. `expiresAt` is on the row if you want to show it, or to add a stricter check of your own.

## 4. Optional: tell the reviewer what they are looking at

Nothing above renders a banner, and the page works without one. If you want it, the row carries what you need:

```astro
---
// src/layouts/Layout.astro
const page = Astro.locals.pageData;
---
{page?.status === "snapshot" && (
  <aside role="status" class="…">
    {page.snapshotName ? `Preview “${page.snapshotName}”` : "Preview"} — this link stops working
    {new Intl.DateTimeFormat(locale, { dateStyle: "long", timeStyle: "short", timeZone: "UTC" })
      .format(new Date(page.expiresAt))} (UTC).
  </aside>
)}
```

Render `snapshotName` as **text only**, never `set:html`. It is editor-typed input.

## 5. Own the hygiene the SDK would have set

This is the part a raw integration inherits, and the part worth reviewing before you ship. On snapshot responses:

| What | Why |
| --- | --- |
| `X-Robots-Tag: noindex, nofollow` | The URL is a secret; keep it out of search indexes. |
| `Cache-Control: private, no-store`, and no CDN rule that overrides it | A cached lookup serves a revoked link until the cache expires. |
| `Referrer-Policy: no-referrer` | Otherwise the token leaks in the `Referer` of everything the page links to. |
| No Open Graph or social tags | A link preview would fetch and cache the page somewhere else. |
| No analytics beacon | A snapshot is not audience traffic, and the beacon carries the path — that is the token. |
| Your own edit/preview affordances stay off | A valid editor token in the request must not switch on draft branching or a live-preview client on a snapshot path. |

The last row is the one that bites. If your site imports a live-preview client unconditionally, the editor's canvas can push draft content into a page that is supposed to be frozen — the reviewer's link and the editor's view then disagree. Gate that import on edit mode, and make sure edit mode is false when `status === "snapshot"`.

Also check your locale-redirect layer: if the site 301s prefix-less paths onto a locale prefix, a snapshot URL passes through it like any page. That is fine, as long as the redirect preserves the path and the redirected request still runs the lookup above.

## What you are not building

Worth stating, because the SDK path has all of these and this one has none:

* No `/snapshot/[token].astro` page and no route registration — the snapshot path *is* a URL your resolver already handles.
* No `snapshotToken` query and no token validation — you match on `url`, and an unknown token simply matches nothing.
* No expiry logic.
* No new dependency or SDK version bump.

## Verify it end to end

1. In Strife, open a page with unpublished changes and create a snapshot. Copy the link.
2. Open it in the language the snapshot was created from → the page renders in your normal design, with the draft's content, plus your banner if you added one.
3. Open the same token under a different locale prefix → your ordinary 404. (Exact locale only, by design.)
4. Load a listing that includes the page → the snapshot is not in it, and the token appears nowhere in the HTML.
5. Revoke the snapshot in Strife, wait a moment, reload → 404.
6. Check the response headers from step 2 against the table above.

If step 2 renders the *published* version instead of the draft, your lookup found the canonical row first: the snapshot branch is missing from the query that actually resolved the page, or a second by-URL query downstream re-resolved it with the published-only predicate.

---

# Use the docs from AI tools

Source: https://strife.app/docs/how-to-guides/use-the-docs-from-ai-tools

Search and read the Strife docs from Claude, Cursor, VS Code and other AI tools: the docs MCP server, llms.txt and every page as markdown.

The Strife docs, both the developer docs and the user guide, are made to be read by AI assistants as well as by people. Connect the docs MCP server and your assistant searches the docs and reads the pages it needs to answer. Tools without MCP can use llms.txt or the markdown version of any page.

## Connect the docs MCP server

The docs are an MCP server at `https://strife.app/docs/mcp`. It needs no account or key, and it has three read-only tools:

* `search_docs` searches the developer docs and the user guide, and returns the best matching sections, each with an excerpt and its address.
* `get_page` returns a page as markdown, by its path below `/docs` or its full address.
* `list_pages` lists every page with a one-line description.

**Claude Code**

```sh
claude mcp add --transport http strife-docs https://strife.app/docs/mcp
```

Add `--scope user` to have it in every project, not only the current one. Run `/mcp` in Claude Code to check that it is connected.

**Claude**

In Claude on the web or in the desktop app, open **Settings → Connectors**, choose **Add custom connector** and enter `https://strife.app/docs/mcp` as the URL.

**Cursor**

Add the server to `~/.cursor/mcp.json` for every project, or to `.cursor/mcp.json` in one project:

```json
{
  "mcpServers": {
    "strife-docs": {
      "url": "https://strife.app/docs/mcp"
    }
  }
}
```

**VS Code**

Add the server to `.vscode/mcp.json` in your project, or run **MCP: Add Server** from the Command Palette:

```json
{
  "servers": {
    "strife-docs": {
      "type": "http",
      "url": "https://strife.app/docs/mcp"
    }
  }
}
```

Other MCP clients connect the same way: a remote server over Streamable HTTP at `https://strife.app/docs/mcp`.

Once it is connected, ask about Strife as you would ask a colleague, for example *How do I define a template with defineType?* or *How do editors restore a snapshot?* Mentioning the Strife docs in the question makes the assistant use them instead of answering from memory.

## llms.txt and llms-full.txt

[llms.txt](https://strife.app/docs/llms.txt) lists every page with its description and a link to its markdown version, in the [llms.txt format](https://llmstxt.org). [llms-full.txt](https://strife.app/docs/llms-full.txt) holds every page in full in one file, for tools that take a whole document at once.

## Every page as markdown

Add `.md` to the address of any page to get it as markdown, for example [strife.app/docs/reference/cli/schemas.md](https://strife.app/docs/reference/cli/schemas.md). The start page is `readme.md`. The blocks of the docs become standard markdown and every link is a full address, so a page works on its own. The **Copy page** button at the top of each page copies the same markdown, ready to paste into a chat.

## Context7

The docs are also on [Context7](https://context7.com), as the library `/llmstxt/strife_app_llms-full_txt`, for assistants that use Context7's MCP server.

---

# Strife technical reference

Source: https://strife.app/docs/reference/reference-overview

This is the reference part of the documentation. Here you will find the technical details of the SDKs, APIs and configuration options.

* SDKs
* API
* Configuration
* Data access
* ...

---

# SDK overview

Source: https://strife.app/docs/reference/sdk-overview

---

# Templates

Source: https://strife.app/docs/reference/templates

Templates in Strife serve as the foundation for creating structured and consistent content. These predefined templates establish the fields, and structure, for all content stored in the database.

There are two types of templates in Strife; [Document Templates](https://strife.app/docs/reference/templates.md#document-templates) and [Content Templates](https://strife.app/docs/reference/templates.md#content-templates).

### Document Templates

The Document Template serves as template for creating documents in the database. It can incorporate various fields types to meet diverse needs.

In addition to defining the fields and structure, there are several other significant aspects of the document template worth exploring.

#### Collection

The document template specifies the collection name, which is utilized to query the database for all content created using that particular template. This collection name is assigned during template creation and is stored within the metadata section of each document in the database.

```json
"@metadata": {
    "@collection": "Posts",
    ...
}
```

> [!NOTE]
> If you are using C#, the collection name is stored alongside the Type property to facilitate model binding and serialization. For detailed instructions on setting up model binding in C#, please consult [this provided tutorial](https://strife.app/docs/tutorials/model-binding-in-c.md).

> [!NOTE]
> The Collection plays a crucial role in utilizing and comprehending RavenDB. For a deeper understanding of RavenDB, please explore [additional resources available here](https://strife.app/docs/explanation/ravendb.md).

#### Enable URL

When creating the document template, you have the option to enable or disable the indexing of content URLs. When enabled, content created from the template is treated as web pages, and a URL is automatically generated and indexed based on the content's slug and hierarchy. This enables easy web access to the content. When disabled, the content is accessible solely by querying the database or referencing from other content.

> [!NOTE]
> For additional details on the URL indexing, please [refer to this resource](https://strife.app/docs/reference/database/index-url.md).

### Content Templates

The Content Template serves as a reusable preset of fields designed for integration within a Document Template or a Chapters field. It's important to note that a Content Template is not meant for creating documents in the database. Instead, any content generated from a Content Template is always stored within the document that uses that particular Content Template.

### Creating templates

Templates can be created either through the graphical interface under Settings in Strife Studio, or by [creating and deploying source-controlled JSON templates](https://strife.app/docs/reference/templates/defining-templates-with-json.md).

---

# Defining Templates with JSON

Source: https://strife.app/docs/reference/templates/defining-templates-with-json

In addition to using the graphical interface in Strife Studio, templates can also be defined using JSON configuration. This allows templates to be stored in source control and automatically synced to Strife as part of your deployment pipeline, depending on your chosen framework and setup.

> [!NOTE]
> Automatic deployment is included when using the Strife Astro integration `@strifeapp/astro`

### Template Properties

| Property       | Value                                                                                          |
| -------------- | ---------------------------------------------------------------------------------------------- |
| displayName    | The name of the template displayed in Strife Studio.                                           |
| description    | A description shown as a hint for editors in Strife Studio.                                    |
| collection     | The RavenDB collection where documents based on this template will be stored.                  |
| type           | Reserved for C# model binding.                                                                 |
| editors        | An array defining the fields in the template. See below for details.                           |
| normalizedName | A normalized internal name used for reference in Strife Studio.                                |
| templateType   | Defines the template type: `dt` (Document Template) or `ct` (Component Template).              |
| composable     | Boolean indicating if content based on this template can be composed inside other documents.   |
| filterable     | Boolean indicating if this template should be available as a filter option in Strife Studio.   |
| disable URL    | Boolean controlling whether content created from this template should have a public URL.       |
| archived       | Boolean indicating if the template is archived.                                                |
| icon           | The icon name used for display in Strife Studio. See [Icons](https://strife.app/docs/reference/icons.md) for available names. |
| allowedOrigins | Optional. Normalized names of the templates whose documents may be this template's origin; absent or a non-empty list, never `[]`. Strife Studio's compose dialog and Set origin then offer only those documents; the API does not validate origins against it. Written by `defineType`'s `from`. |
| allowedOriginIds | Optional. Ids of specific documents that may be this template's origin, beside or instead of `allowedOrigins`; absent or a non-empty list, never `[]`. Same Studio-side behaviour, same absence of server-side validation. Written by `defineType`'s `from: { id }`, where the id is read from an environment variable because it differs per workspace. |
| baseProperties | `{ "displayName": { "localizable": true/false }, "slug": { "localizable": true/false } }` — whether the document's name and slug have one value per locale (`true`) or one shared value (`false`). Written by `defineType`'s `baseProperties`, which sends only the flags the type states (`{}` when none). An unstated or absent flag is the default: `slug` localizable when the team has two or more locales, `displayName` not. A template saved without `baseProperties` keeps the flags it already has; one saved with it stores exactly what it states, and a flag it leaves out goes back to the default. Readers always get strings, resolved to the requested locale. |
| @metadata      | RavenDB metadata and model binding information.                                                |

> [!NOTE]
> **Note:** The `@metadata` property is required for the template to be accepted by Strife and made available inside Strife Studio.

### Field properties

| Property    | Value                                                                                                                  |
| ----------- | ---------------------------------------------------------------------------------------------------------------------- |
| label       | The label shown to editors when editing the field.                                                                     |
| description | Optional tooltip text for the field.                                                                                   |
| editor      | The editor type configuration. See example below and check out [the fields reference](https://strife.app/docs/reference/fields.md) for available types. |
| localizable | Boolean indicating if the field should be localizable (available only when localization is enabled).                   |

### Editor properties

| Property     | Value                                                                                     |
| ------------ | ----------------------------------------------------------------------------------------- |
| name         | The editor component name.                                                                |
| type         | The editor type.                                                                          |
| propertyName | The property name used in the RavenDB document.                                           |
| attributes   | Field-specific configuration. See each editor's documentation for supported attributes.   |
| options      | Additional options for the editor. See each editor's documentation for supported options. |

> [!NOTE]
> You can find specific editor configurations and available options on the respective [Field pages](https://strife.app/docs/reference/fields.md).

### Example

```json
{
    "displayName": "Page",
    "description": null,
    "collection": "Pages",
    "type": null,
    "editors": [
        {
            "label": "Sections",
            "description": "",
            "editor": {
                "name": "str-chapters",
                "type": "chapters",
                "propertyName": "sections",
                "attributes": {
                    "hint": "<p>Page sections</p>"
                },
                "options": {
                    "availableTypes": [
                        "text",
                        "content",
                        "hero",
                        "bento"
                    ]
                }
            },
        }
    ],
    "templateType": "dt",
    "normalizedName": "page",
    "disableURL": false,
    "archived": false,
    "icon": "home",
    "hint": "A demo page",
    "searchFields": [],
    "filterFields": [],
    "composable": true,
    "filterable": true,
    "@metadata": {
        "@collection": "Templates",
        "Raven-Clr-Type": "Wieldy.Core.Models.Template, Wieldy.Core"
    }
}
```

---

# Fields

Source: https://strife.app/docs/reference/fields

Fields define the structure and content of your templates. Each field specifies the shape and characteristics of the data that will be stored in the database.

> [!WARNING]
> This documentation page is still in progress and may not be fully complete. Please check back later for updates.

### Basic Field Settings

All fields come with a standard set of basic settings:

<table><thead><tr><th width="232">Option</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>Name*</td><td>This setting is mandatory. It determines the property name used for storing and retrieving data from the database. It should be a unique identifier for each field and in camel case.</td><td></td></tr><tr><td>Label*</td><td>This is the text used as a field label when you're editing the field inside Strife. It provides a human-readable name for the field.</td><td></td></tr><tr><td>Tooltip<br></td><td>This setting allows you to provide additional information or hints about the field. Tooltips are displayed when users hover over or focus on the field.</td><td></td></tr><tr><td>Autofocus</td><td>Autofocus can be enabled to make the field automatically selected or focused when editing, streamlining the user experience.</td><td></td></tr><tr><td>Validation text</td><td>You can define custom validation text here to provide guidance or error messages when users input data that doesn't meet specific criteria.</td><td></td></tr><tr><td>Tab Group</td><td>Groups fields under a specific tab in the editor</td><td></td></tr><tr><td>Localizable</td><td>Enabling this settings allows the field to be localizable</td><td></td></tr><tr><td>Tab group</td><td>When your template includes a Tab Group, use this setting to determine which tab the field should appear under in the editor. See <a href="https://strife.app/docs/reference/fields/tab-group.md">this page</a> for more info.</td><td></td></tr></tbody></table>

Each field, depending on its type, may offer additional settings to further customize its behavior. For specifics on these additional settings, please refer to the documentation for each respective field.

### JSON Definition

When templates are defined using JSON, the basic field settings form the foundation of each field's configuration within the `editors` array. These settings control how fields behave and appear inside Strife Studio. For additional information on defining templates with JSON, [refer to this page](https://strife.app/docs/reference/templates/defining-templates-with-json.md).

Each field in the `editors` array follows this structure:

```json
{
  "label": "...",              // Label
  "description": "...",        // Tooltip
  "editor": {
    "name": "...",             // Field component name*
    "type": "...",             // Field component type*
    "propertyName": "...",     // Name
    "attributes": {
      "autofocus": true,       // Autofocus
      "validationText": "...", // Validation text
      "tabGroup": "...",       // Tab Group
      ...
    }
  },
  "localizable": true          // Localizable
}

```

> [!NOTE]
> \*Refer to each field’s documentation for component name, type and additional attributes.

### Live Preview Integration for Fields

Fields will automatically transmit their current state to the live preview while a user is editing a field. To enable live preview integration, the website's markup must be upgraded to incorporate Strife view components. You can find detailed instructions on how to set up the live preview [here](https://strife.app/docs/reference/live-preview.md). Please refer to the documentation for each respective field to learn about the view components compatible with that specific field.

---

# Text

Source: https://strife.app/docs/reference/fields/text

The Text field type is one of the most commonly used fields. It saves a string to the database and provides the Edit view with a simple text input.

<figure><img src="https://strife.app/docs/assets/Screenshot%202023-10-17%20at%2015.42.28.png" alt="" width="375"><figcaption><p>Strife Studio screenshot of a Text field</p></figcaption></figure>

### Settings

In addition to the basic settings, this section provides information about unique settings and configurations specific to this field.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="232">Option</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>Placeholder</td><td>A brief hint or instruction displayed in an input field to guide users on the expected content or format.</td><td></td></tr><tr><td>Spellcheck</td><td>Enables or disables automatic spell checking in the browser</td><td></td></tr></tbody></table>

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-input`
* **Type:** `text`
* Reference ID: `str-input|text`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-input",
    "type": "text",
    "propertyName": "...",
    ...
    "attributes": {
      "spellcheck": true,
      "placeholder": "..."      
    }
  },
  ...
}
```

### Live preview

The compatible Strife Web Components for a Text field are any of the text or container components.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Paragraph

Source: https://strife.app/docs/reference/fields/paragraph

The Paragraph field, similar to the Text field, stores a string in the database, but it is specifically designed to facilitate the editing of longer text.

<figure><img src="https://strife.app/docs/assets/Screenshot%202023-10-18%20at%2014.24.01.png" alt="" width="375"><figcaption><p>Strife Studio screenshot of a Paragraph field</p></figcaption></figure>

### Settings

In addition to the basic settings, this section provides information about unique settings and configurations specific to this field.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="232">Option</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>Placeholder</td><td>A brief hint or instruction displayed in an input field to guide users on the expected content or format.</td><td></td></tr><tr><td>Spellcheck</td><td>Enables or disables automatic spell checking in the browser</td><td></td></tr><tr><td>Display</td><td>Option between plain text and indented JSON format for text presentation. Default is text.</td><td></td></tr></tbody></table>

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-textarea`
* **Type:** `text`
* Reference ID: `str-textarea|text`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-textarea",
    "type": "text",
    "propertyName": "...",
    ...
    "attributes": {
      "spellcheck": true,
      "placeholder": "...",
      "display": "..."            // text | json      
    }
  },
  ...
}
```

### Live preview

The compatible Strife Web Components for a Paragraph field are any of the text or container components.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Rich Content

Source: https://strife.app/docs/reference/fields/rich-content

The Rich Content field empowers editors to create dynamic and visually appealing content, which is then stored in the database as HTML.

<figure><img src="https://strife.app/docs/assets/Screenshot%202023-10-18%20at%2010.47.57.png" alt="" width="375"><figcaption><p>Strife Studio screenshot of a Rich Content field</p></figcaption></figure>

### Settings

In addition to the basic settings, this section provides information about unique settings and configurations specific to this field.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="232">Option</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>Menu buttons</td><td>Selects which buttons appear in the slash-menu and which heading levels (H1–H6) are enabled. See <a href="https://strife.app/docs/reference/fields/rich-content.md#menu-button-values">Menu button values</a></td><td></td></tr><tr><td>Placeholder Document<strong>~</strong></td><td>Specifies a node scheme that the document must follow.</td><td></td></tr><tr><td>Lock Placeholder Document<strong>~</strong></td><td>Specifies whether the user should be prevented to add more nodes after what's specified under the <code>placeholder-document</code>.</td><td></td></tr></tbody></table>

> [!WARNING]
> A tilde (**\~**) denotes that a setting is available in developer preview only.

#### Menu button values

Pass `menuButtons` as an array of strings. Heading values (`heading1` through `heading6`) control which heading levels the editor accepts. Other values enable the corresponding slash-menu items.

<table><thead><tr><th width="150">Value</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td><code>heading1</code>…<code>heading6</code></td><td>Enable the corresponding heading level. Include only the levels you want available.</td><td></td></tr><tr><td><code>bulletList</code></td><td>Unordered list slash-menu entry.</td><td></td></tr><tr><td><code>orderedList</code></td><td>Numbered list slash-menu entry.</td><td></td></tr><tr><td><code>checkList</code></td><td>Task list with checkboxes.</td><td></td></tr><tr><td><code>image</code></td><td>Image insert slash-menu entry.</td><td></td></tr><tr><td><code>video</code></td><td>Video insert slash-menu entry.</td><td></td></tr><tr><td><code>table</code></td><td>Table insert slash-menu entry.</td><td></td></tr></tbody></table>

> [!NOTE]
> Inline formatting (bold, italic, underline, strikethrough, link, blockquote, details) is always available from the text-selection menu, independent of `menuButtons`.

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-textarea`
* **Type:** `html`
* Reference ID: `str-textarea|html`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-textarea",
    "type": "html",
    "propertyName": "...",
    "attributes": {
      "menuButtons": ["heading1", "heading2", "bulletList"],
      "placeholderDocument": "{\"content\":\"heading paragraph+\",\"placeholders\":{\"heading\":\"Enter title\",\"paragraph\":\"Start writing…\"}}"
    }
  },
  ...
}
```

#### Placeholder Document

> [!WARNING]
> Developer preview. API may change.

`placeholderDocument` takes a JSON string with two optional keys:

* **`content`** — a ProseMirror content expression that constrains which node types the document contains and in what order. Examples: `"heading"` (exactly one heading), `"heading paragraph+"` (one heading followed by one or more paragraphs), `"heading paragraph*"` (heading with optional paragraphs).
* **`placeholders`** — an object mapping ProseMirror node-type names to placeholder text shown when the node is empty.

Example configuration:

```js
// Rendered as a JSON string in the template attribute:
{
  "content": "heading paragraph+",
  "placeholders": {
    "heading": "Enter title",
    "paragraph": "Start writing…"
  }
}
```

**Valid node-type names** for `placeholders` (and `content`):

* `heading` — all levels use the same node type; the `level` attribute (1–6) is set by the editor. Use `heading`, not `heading1`.
* `paragraph`
* `bulletList`, `orderedList`, `listItem`
* `blockquote`
* `codeBlock`
* `image`, `video`

**To produce the final attribute value**, JSON-stringify your config object — the JSON must be embedded as a string in the `placeholderDocument` attribute. When building templates in code:

```js
attributes: {
  placeholderDocument: JSON.stringify({
    content: "heading paragraph+",
    placeholders: {
      heading: "Enter title",
      paragraph: "Start writing…"
    }
  })
}
```

### Live preview

The compatible Strife Web Components for a Rich Content field are container components only.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Number

Source: https://strife.app/docs/reference/fields/number

The Number field is designed for storing, validating, and formatting numeric data, with support for various numerical validation features.

<figure><img src="https://strife.app/docs/assets/Screenshot%202023-10-17%20at%2016.11.49.png" alt="" width="375"><figcaption><p>Strife Studio screenshot of a Number field</p></figcaption></figure>

### Settings

In addition to the basic settings, this section provides information about unique settings and configurations specific to this field.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="232">Option</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>Placeholder</td><td>A brief hint or instruction displayed in an input field to guide users on the expected content or format.</td><td></td></tr><tr><td>Min</td><td>Defines the minimum permissible numeric value, establishing a lower limit for data entry.</td><td></td></tr><tr><td>Max</td><td>Establishes the maximum allowed numeric value, setting an upper limit for data entry.</td><td></td></tr><tr><td>Step</td><td>Specifies the extent of value change when users interact with the field. Set the desired increment, such as 1 for whole numbers, 0.1 for one decimal place, 0.01 for two decimal places, and so on.</td><td></td></tr></tbody></table>

> [!WARNING]
> Please note that the Step setting is a mandatory requirement for enabling the use of decimal numbers within Strife Studio.

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-input`
* **Type:** `number`
* Reference ID: `str-input|number`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-input",
    "type": "number",
    "propertyName": "...",
    ...
    "attributes": {
      "placeholder": "...",
      "min": 0,              //Any number
      "max": 100,            //Any number
      "step": "..."
    }
  },
  ...
}
```

### Live preview

The compatible Strife Web Components for a Number field are any of the text or container components.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Date

Source: https://strife.app/docs/reference/fields/date

The Date field allows users to input a date via a date picker. The selected date is stored as a string value in the database.

<figure><img src="https://strife.app/docs/assets/Screenshot%202023-10-18%20at%2015.19.16.png" alt="" width="375"><figcaption><p>Strife Studio screenshot of a Date field</p></figcaption></figure>

### Settings

The Date field does not feature any distinctive settings beyond the standard ones.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-input`
* **Type:** `date`
* Reference ID: `str-input|date`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-input",
    "type": "date",
    "propertyName": "...",
    ...    
  },
  ...
}
```

### Live preview

`str-time` is the preferred Strife Web Component for a Date field, although any of the text or container components can also be used.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Date Time

Source: https://strife.app/docs/reference/fields/date-time

The Date Time field allows users to input a date including time via a date picker. The selected date is stored as a string value in the database.

<figure><img src="https://strife.app/docs/assets/Screenshot%202023-10-18%20at%2015.23.07.png" alt="" width="375"><figcaption><p>Strife Studio screenshot of a Date Time field</p></figcaption></figure>

### Settings

The Date field does not feature any distinctive settings beyond the standard ones.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-input`
* **Type:** `datetime-local`
* Reference ID: `str-input|datetime-local`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-input",
    "type": "datetime-local",
    "propertyName": "...",
    ...   
  },
  ...
}
```

### Live preview

`str-time` is the preferred Strife Web Component for a Date Time field, although any of the text or container components can also be used.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Image

Source: https://strife.app/docs/reference/fields/image

The Image field lets you to crop, zoom, and insert images effortlessly. It stores the optimized image URL along with crop data in the database.

<figure><img src="https://strife.app/docs/assets/Screenshot%202023-10-26%20at%2013.26.37.png" alt="" width="375"><figcaption><p>Strife Studio screenshot of an Image field</p></figcaption></figure>

### Settings

In addition to the basic settings, this section provides information about unique settings and configurations specific to this field.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="232">Option</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>Width</td><td>Specifies the desired width of the displayed image.</td><td></td></tr><tr><td>Height</td><td>Specifies the desired height of the displayed image. Set to <code>0</code> for a width-only image that keeps the source aspect ratio — the height is derived from the original, and crop/zoom are disabled. In <a href="https://strife.app/docs/reference/cli/schemas.md"><code>defineType</code></a> the same thing is spelled <code>height: 'auto'</code>.</td><td></td></tr><tr><td>Format</td><td>Specifies the image format in which the image will be stored. Default is <code>webp</code></td><td></td></tr><tr><td>Padding color</td><td>Hex color used for the padded area of the image when the crop area is smaller than the source.</td><td></td></tr><tr><td>Padding alpha</td><td>Alpha value between 0 and 1 for the padded area's transparency.</td><td></td></tr><tr><td>Hide alt text</td><td>When enabled, the alt text field is hidden in the image editor.</td><td></td></tr></tbody></table>

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-image`
* **Type:** `image`
* Reference ID: `str-image`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-image",
    "type": "image",
    "propertyName": "...",
    ...
    "attributes": {
      "width": 300,
      "height": 200,          //0 = width-only, keeps the source aspect ratio
      "format": "...",        //webp,png,jpeg,etc
      "paddingColor": "...",  //Hex color format
      "paddingAlpha": 0.5,
      "hideAlt": false
    }
  },
  ...
}
```

> [!NOTE]
> In the JSON template, `height` is always a number — `0` is the width-only convention. The `'auto'` spelling exists only in [`defineType`](https://strife.app/docs/reference/cli/schemas.md), which compiles it to `0` for you.

### Live preview

The compatible Strife Web Component for an Image field is the `str-image` component.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Image Group

Source: https://strife.app/docs/reference/fields/image-group

The Image field lets you define a set of images for different media/resolutions to crop, zoom, and insert images effortlessly. It stores the optimized image URLs along with crop data in the database.

<figure><img src="https://strife.app/docs/assets/Screenshot%202023-10-26%20at%2013.37.39.png" alt="" width="375"><figcaption><p>Strife Studio screenshot of an Image Group field</p></figcaption></figure>

### Settings

In addition to the basic settings, this section provides information about unique settings and configurations specific to this field.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="232">Option</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>Medias</td><td>Specifies the various media formats by providing the format name/key, width, and height to add images tailored to different media requirements. Examples of medias could be 'Desktop', 'Tablet' and 'Mobile'.</td><td></td></tr></tbody></table>

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-image-group`
* **Type:** `image-group`
* Reference ID: `str-image-group`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-image-group",
    "type": "image-group",
    "propertyName": "...",
    ...
    "attributes": {
      "paddingColor": "..."     //Hex color format
      "paddingAlpha": 0.5,      //Number between 0-1
      "hideAlt": false
    },
    "options": {
      "medias": [
          {
              "name": "...",
              "width": 300,
              "height": 200
          },
          ...
      ]
    }
  },
  ...
}
```

### Live preview

The compatible Strife Web Component for an Image Group field is the `str-picture` component.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Toggle

Source: https://strife.app/docs/reference/fields/toggle

The Toggle field saves a binary value of either 'true' or 'false' in the database.

<figure><img src="https://strife.app/docs/assets/Screenshot%202023-10-18%20at%2014.44.55.png" alt="" width="375"><figcaption><p>Strife Studio screenshot of a Toggle field</p></figcaption></figure>

### Settings

The Toggle field does not feature any distinctive settings beyond the standard ones.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-switch`
* **Type:** `toggle`
* Reference ID: `str-switch|toggle`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-switch",
    "type": "toggle",
    "propertyName": "...",
    ...    
  },
  ...
}
```

### Live preview

> [!NOTE]
> This field does not have any default Strife Web Components. Custom live preview implementations are fully supported.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Slug~

Source: https://strife.app/docs/reference/fields/slug

> [!WARNING]
> The tilde (**\~**) denotes that the field is available in developer preview only.

### Settings

In addition to the basic settings, this section provides information about unique settings and configurations specific to this field.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="182">Option</th><th>Description</th></tr></thead><tbody><tr><td>Placeholder</td><td>Placeholder to display when no value is entered</td></tr><tr><td>Auto Check</td><td>The option to call an endpoint for validating the input as the user types</td></tr></tbody></table>

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-input`
* **Type:** `slug`
* Reference ID: `str-input|slug`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-input",
    "type": "slug",
    "propertyName": "...",
    "options": {
      "autoCheck": {
        "csrf": "...",
        "src": "..."
      } 
    }    
  },
  ...
}
```

### Live preview

> [!NOTE]
> This field does not have any default Strife Web Components. Custom live preview implementations are fully supported.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Related

Source: https://strife.app/docs/reference/fields/related

Create a document relation

### Settings

In addition to the basic settings, this section provides information about unique settings and configurations specific to this field.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="182">Option</th><th>Description</th></tr></thead><tbody><tr><td>Multi select</td><td>Allow multiple values to be selected</td></tr><tr><td>Restrict collections</td><td>Restrict the collections that can be related</td></tr></tbody></table>

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-related`
* **Type:** `related`
* Reference ID: `str-related`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-related",
    "type": "related",
    "propertyName": "...",
    "attributes": {
      "multiSelect": true,
    },
    "options": {
      "allowedCollections": [...] //Collection names
    }    
  },
  ...
}
```

### Live preview

> [!NOTE]
> This field does not have any default Strife Web Components. Custom live preview implementations are fully supported.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Assets

Source: https://strife.app/docs/reference/fields/assets

Create a lists of assets

### Settings

In addition to the basic settings, this section provides information about unique settings and configurations specific to this field.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="182">Option</th><th>Description</th></tr></thead><tbody><tr><td>Restrict types</td><td>Restrict the types of assets that can be added to this assets list</td></tr><tr><td>Size</td><td>The maximum number of assets that can be added to this assets list</td></tr></tbody></table>

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-assets`
* **Type:** `assets`
* Reference ID: `str-assets`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-assets",
    "type": "assets",
    "propertyName": "...",
    "attributes": {
      "size": 3,
    },
    "options": {
      "availableTypes": [...] //1(image)|2(video)|3(file)
    }    
  },
  ...
}
```

### Live preview

> [!NOTE]
> This field does not have any default Strife Web Components. Custom live preview implementations are fully supported.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Checkbox

Source: https://strife.app/docs/reference/fields/checkbox

The Checkbox field saves a binary value of either 'true' or 'false' in the database.

<figure><img src="https://strife.app/docs/assets/Screenshot%202023-10-18%20at%2014.55.06.png" alt="" width="375"><figcaption><p>Strife Studio screenshot of a Checkbox field</p></figcaption></figure>

### Settings

The Checkbox field does not feature any distinctive settings beyond the standard ones.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-switch`
* **Type:** `checkbox`
* Reference ID: `str-switch|checkbox`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-switch",
    "type": "checkbox",
    "propertyName": "...",
    ...    
  },
  ...
}
```

### Live preview

> [!NOTE]
> This field does not have any default Strife Web Components. Custom live preview implementations are fully supported.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Link

Source: https://strife.app/docs/reference/fields/link

The Link field enables users to insert links, storing an object in the database containing link text, URL, and target options.

<figure><img src="https://strife.app/docs/assets/Screenshot%202023-10-27%20at%2009.40.26.png" alt="" width="375"><figcaption><p>Strife Studio screenshot of a Link field</p></figcaption></figure>

### Settings

The Link field does not feature any distinctive settings beyond the standard ones.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-link`
* **Type:** `link`
* Reference ID: `str-link`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-link",
    "type": "link",
    "propertyName": "...",
    ...    
  },
  ...
}
```

### Live preview

The compatible Strife Web Component for a Link field is the `str-anchor` component.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Chapters

Source: https://strife.app/docs/reference/fields/chapters

The Chapters field allows dynamic content creation using predefined templates, storing the content as an array of objects in the database.

<figure><img src="https://strife.app/docs/assets/Screenshot%202023-10-30%20at%2011.57.58.png" alt="" width="375"><figcaption><p>Strife Studio screenshot of a Chapters field</p></figcaption></figure>

### Settings

In addition to the basic settings, this section provides information about unique settings and configurations specific to this field.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="232">Option</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>Restrict types</td><td>Sets the content templates available for use within the Chapters field</td><td></td></tr><tr><td>Size</td><td>Optional setting for limiting the number of chapters allowed in the chapters editor</td><td></td></tr><tr><td>Hint</td><td>A short description displayed inside the chapters editor to guide authors.</td><td></td></tr></tbody></table>

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-chapters`
* **Type:** `chapters`
* Reference ID: `str-chapters`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-chapters",
    "type": "chapters",
    "propertyName": "...",
    "attributes": {
      "hint": "...",
      "size": 3              //Any number
    },
    "options": {
      "availableTypes": [...] //Array of normalized names of content templates
    }
    ...    
  },
  ...
}
```

### Live preview

The compatible Strife Web Component for a Chapters field is any of the container components.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

> [!NOTE]
> For a comprehensive front-end implementation example of the Chapters field, please [consult the provided how-to guide](https://strife.app/docs/tutorials/create-a-dynamic-employee-list-using-the-chapters-field.md).

---

# References

Source: https://strife.app/docs/reference/fields/references

The References editor lets you connect existing documents from other collections directly into your content, enabling structured reuse instead of duplication.

Functionally similar to adding Chapters, the References editor differs in that it does not create inline content bound to the current document. Instead, it allows you to **reference one or more existing documents** from a specified collection. This makes it easy to compose content from shared building blocks while keeping a single source of truth.

If needed, editors can also **create a new document in the target collection on the fly** and immediately reference it—without leaving the current editing context. All referenced documents remain fully editable and can be opened and updated directly from where they are referenced, ensuring a smooth and efficient workflow.

This approach supports modular content architectures, reduces duplication, and keeps related content consistently up to date across the system.

### Settings

In addition to the basic settings, this section provides information about unique settings and configurations specific to this field.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="232">Option</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>Restrict types</td><td>Restrict the collections that can be added to this reference editor</td><td></td></tr><tr><td>Size</td><td>Optional setting for limiting the number of references allowed</td><td></td></tr></tbody></table>

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-references`
* **Type:** `references`
* Reference ID: `str-references`

The settings above map into the `editor` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-references",
    "type": "references",
    "propertyName": "...",
    "attributes": {
      "hint": "...",
      "size": 3              //Any number
    },
    "options": {
      "availableTypes": [...] //Array of the collection's normalized template name
    }
    ...    
  },
  ...
}
```

### Live preview

> [!NOTE]
> This field does not have any default Strife Web Components. Custom live preview implementations are fully supported.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Repeatable

Source: https://strife.app/docs/reference/fields/repeatable

The Repeatable editor allows editors to add multiple values using the same input type, making it ideal for structured lists and repeatable data patterns.

A Repeatable editor is configured with **one specific editor type**, which is then reused for every item in the list. Supported editor types include standard inputs (text, number, date), textarea, links, and combo boxes. Mixing different editor types within the same Repeatable editor is not supported by design—this ensures consistent data output and predictable rendering.

From a data perspective, the Repeatable editor outputs an **array of value objects**, where each item follows the schema of the selected editor type. This makes the field straightforward to consume in templates, APIs, and custom components.

The Repeatable editor is well suited for use cases such as tag lists, external links, key facts, dates, or any scenario where a controlled set of repeated values is required without introducing additional document structure.

### Settings

In addition to the basic settings, this section provides information about unique settings and configurations specific to this field.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="232">Option</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>Editor Type</td><td>Select the type of editor that can be added to the repeatable.  Supported editor types include standard inputs (text, number, date), textarea, links, and combo boxes. </td><td></td></tr><tr><td>Size</td><td>Optional setting for limiting the number of references allowed</td><td></td></tr><tr><td>Options*</td><td>Options to display. Only available for combo box editors</td><td></td></tr><tr><td>External source*</td><td>Use an external source to fetch options. Only available for combo box editors</td><td></td></tr></tbody></table>

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-repeatable`
* **Type:** `repeatable`
* Reference ID: `str-repeatable`

The settings above map into the `editor` object inside the JSON definition.

> [!NOTE]
> **Note for JSON configuration**\
> When configuring a Repeatable editor using JSON, the editor type is defined by a specific editor ID. Set options.availableTypes to an array containing **exactly one string** with this ID. The correct ID for each editor type is listed on its respective documentation page.

```json
{
  ...
  "editor": {
    "name": "str-repeatable",
    "type": "repeatable",
    "propertyName": "...",
    "attributes": {
      "hint": "...",
      "size": 3,              //Any number
      "externalDataSource": "..." //*Combo Box editors only
    },
    "options": {
      "availableTypes": [...], // Array with single item allowed with editor ID for repeatable editor
      "items": [               //*Combo Box editors only
        {
          "name": "...",
          "value": "...",
          "color": "...",  //Optional, hex color format
          "icon": "...",   //Optional, name of icon
          "avatar": "..."  //Optional, url to avatar
        },
        ...
      ],
    }
    ...    
  },
  ...
}
```

### Live preview

> [!NOTE]
> This field does not have any default Strife Web Components. Custom live preview implementations are fully supported.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Collection

Source: https://strife.app/docs/reference/fields/collection

The Collection field allows the user to query and list content using a filter, storing the filter and query as an object in the database.

<figure><img src="https://strife.app/docs/assets/Screenshot%202023-10-30%20at%2012.23.51.png" alt="" width="375"><figcaption><p>Strife Studio screenshot of a Collection field</p></figcaption></figure>

> [!CAUTION]
> OBSOLETE – This field is no longer supported

### Settings

The Collection field does not feature any distinctive settings beyond the standard ones.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

### Live preview

The compatible Strife Web Component for a Chapters field is any of the container components.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

> [!NOTE]
> For a comprehensive front-end implementation example of the Collection field, please [consult the provided how-to guide](https://strife.app/docs/reference/fields/collection.md).

---

# Content Template

Source: https://strife.app/docs/reference/fields/content-template

The Content Template field instantiates editing of a content template. Stores as an object in the database, including the fields from the chosen content template.

<figure><img src="https://strife.app/docs/assets/Screenshot%202023-10-30%20at%2013.50.16.png" alt="" width="375"><figcaption><p>Strife Studio screenshot of a Content Template field</p></figcaption></figure>

> [!NOTE]
> For further information on templates, please refer to this [reference guide](https://strife.app/docs/reference/templates.md).

### Settings

In addition to the basic settings, this section provides information about unique settings and configurations specific to this field.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="232">Option</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>Content Template*</td><td>Selects the content template to use for editing</td><td></td></tr></tbody></table>

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-content-template`
* **Type:** `content-template`
* Reference ID: `str-content-template`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-content-template",
    "type": "content-template",
    "propertyName": "...",
    "attributes": {
      "templateId": "..."    //The ID of the content template
    }
  },
  ...
}
```

### Live preview

To enable live preview for the Content Template field, refer to each field within the content template to find compatible Strife Web Components, ensuring seamless integration.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Combo Box

Source: https://strife.app/docs/reference/fields/combo-box

The Combo Box field lets you choose one or multiple values from a preset selection in a searchable drop-down. It stores these selections as an array of values in the database.

<figure><img src="https://strife.app/docs/assets/Screenshot%202023-10-27%20at%2009.59.51.png" alt="" width="375"><figcaption><p>Strife Studio screenshot of an Combo Box field</p></figcaption></figure>

### Settings

In addition to the basic settings, this section provides information about unique settings and configurations specific to this field.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="232">Option</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>Placeholder</td><td>Display a placeholder text in the search field after opening the combo box</td><td></td></tr><tr><td>Icon</td><td>Displays an icon before the selected value in the combo box</td><td></td></tr><tr><td>Multi select</td><td>Enables multi-select, allowing users to choose multiple options</td><td></td></tr><tr><td>Options</td><td>Defines the choices presented in the drop-down. Each option is represented as an object containing a name, value, color hex value (optional), icon name (optional), and avatar url (optional)</td><td></td></tr><tr><td>Default Value</td><td>Default value to display when no value is selected</td><td></td></tr><tr><td>External source</td><td>Use an external source to fetch options. Use ${propertyName} to access the value of a property in the URL</td><td></td></tr></tbody></table>

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-combo-box`
* **Type:** `combo-box`
* Reference ID: `str-combo-box`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-combo-box",
    "type": "combo-box",
    "propertyName": "...",
    "attributes": {
      "placeholder": "...",
      "defaultValue": "...",
      "icon": "...",
      "multiSelect": true,     
      "externalDataSource": "..."     
    },
    "options": {
      "items": [
        {
          "name": "...",
          "value": "...",
          "color": "...",  //Optional, hex color format
          "icon": "...",   //Optional, name of icon
          "avatar": "..."  //Optional, url to avatar
        },
        ...
      ]
    }
  },
  ...
}
```

### Live preview

> [!NOTE]
> This field does not have any default Strife Web Components. Custom live preview implementations are fully supported.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Multi Select

Source: https://strife.app/docs/reference/fields/multi-select

The Multi Select field allows, just like the Combo Box, users to add one or more values of a predefined list, storing them as an array in the database.

<figure><img src="https://strife.app/docs/assets/Screenshot%202023-10-27%20at%2010.46.09.png" alt="" width="375"><figcaption><p>Strife Studio screenshot of an Multi Select field</p></figcaption></figure>

### Settings

In addition to the basic settings, this section provides information about unique settings and configurations specific to this field.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="232">Option</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>Placeholder</td><td>Display a placeholder text in the search field after opening the combo box</td><td></td></tr><tr><td>Check marks</td><td>Enables check marks on the selected values</td><td></td></tr><tr><td>Options</td><td>Defines the choices presented in the drop-down. Each option is represented as an object containing a name, value, and color hex value (optional)</td><td></td></tr></tbody></table>

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-multi-select`
* **Type:** `multi-select`
* Reference ID: `str-multi-select`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-multi-select",
    "type": "multi-select",
    "propertyName": "...",
    "attributes": {
      "placeholder": "...",
      "switches": true,      //Check marks
      "externalDataSource": "..."     
    },
    "options": {
      "options": [
        {
          "name": "...",
          "value": "...",
          "color": "...",  //Optional, hex color format
          "icon": "...",   //Optional, name of icon
          "avatar": "..."  //Optional, url to avatar
        },
        ...
      ]
    }
  },
  ...
}
```

### Live preview

> [!NOTE]
> This field does not have any default Strife Web Components. Custom live preview implementations are fully supported.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Multi Input

Source: https://strife.app/docs/reference/fields/multi-input

The Multi Input field allows users to arbitrarily add one or more values of a predefined type, storing them as an array in the database

<figure><img src="https://strife.app/docs/assets/Screenshot%202023-10-27%20at%2010.34.31.png" alt="" width="375"><figcaption><p>Strife Studio screenshot of an Multi Input field</p></figcaption></figure>

### Settings

In addition to the basic settings, this section provides information about unique settings and configurations specific to this field.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="232">Option</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>Type</td><td>Specifies the type of value to insert, which can be one of the following: Text, Number, Email, URL, Tel, Date Time, Date, Month, or Time</td><td></td></tr><tr><td>Auto sort</td><td>Determines whether the field should automatically sort the inserted values as they are added</td><td></td></tr></tbody></table>

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-multi-input`
* **Type:** `multi-input`
* Reference ID: `str-multi-input`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-multi-input",
    "type": "multi-input",
    "propertyName": "...",
    "attributes": {
      "inputType": "...", //text|number|email|url|tel|datetime-local|date|month|time
      "sort": false,         
    }
  },
  ...
}
```

### Live preview

> [!NOTE]
> This field does not have any default Strife Web Components. Custom live preview implementations are fully supported.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Table Input~

Source: https://strife.app/docs/reference/fields/table-input

The Table Input field enables users to input data in a tabular format, storing it as an array of objects in the database.

<figure><img src="https://strife.app/docs/assets/Screenshot%202023-10-27%20at%2010.58.26.png" alt="" width="375"><figcaption><p>Strife Studio screenshot of an Table Input field</p></figcaption></figure>

> [!WARNING]
> The tilde (**\~**) denotes that the field is available in developer preview only.

### Settings

In addition to the basic settings, this section provides information about unique settings and configurations specific to this field.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="232">Option</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>Headers</td><td>A JSON array of strings specifying the column headers. E.g <code>["Name","Latin","Habitat","Feature"]</code></td><td></td></tr><tr><td>Input types</td><td>Specifies the input types for each header using a JSON array of strings. Supported types include 'text', 'number', 'date', 'datetime-local', 'email', 'month', 'tel', 'time', 'url', 'boolean', and 'multistring'. E.g. <code>["text","text","text","text"]</code></td><td></td></tr><tr><td>Options</td><td>A JSON object containing the options for every 'multistring' input type. Use camel case header as property name. E.g. <code>{"columnHeader": []}</code></td><td></td></tr><tr><td>Sortable</td><td>Enables sorting in the Table Input field, which allows users to click on column headers for sorting.</td><td></td></tr><tr><td>Sort by</td><td>Specifies the default sorting column header.</td><td></td></tr><tr><td>Sort direction</td><td>Specifies the default sorting direction.</td><td></td></tr><tr><td>Searchable</td><td>Enables search for large data sets.</td><td></td></tr><tr><td>Display row numbers</td><td>If enabled, row numbers will be displayed in the Table Input field.</td><td></td></tr><tr><td>Exportable</td><td>If enabled, the table can be exporterd/imported to/from CSV</td><td></td></tr><tr><td>Export delimiter</td><td>Choose a delimiter for the export; file formats (CSV, TSV, TXT)</td><td></td></tr></tbody></table>

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-table-input`
* **Type:** `table-input`
* Reference ID: `str-table-input`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-table-input",
    "type": "table-input",
    "propertyName": "...",
    "attributes": {
      "sortable": true,
      "sortBy": "...",
      "sortDirection": "asc",
      "searchable": false,
      "rowNumbers": false,
      "exportable": false,
      "exportDelimiter": "..."  //','|'\t'|';'|'|'
    },
    "options": {
      "headers": "...",
      "inputTypes": "...",
      "options": "...",
    }
  },
  ...
}
```

### Live preview

> [!NOTE]
> This field does not have any default Strife Web Components. Custom live preview implementations are fully supported.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Rich Content (JSON)~

Source: https://strife.app/docs/reference/fields/rich-content-json

The Rich Content field empowers editors to create dynamic and visually appealing content, which is then stored in the database as JSON.

> [!NOTE]
> This field is identical to the [Rich Content field](https://strife.app/docs/reference/fields/rich-content.md), with the only distinction being that it stores its value as JSON in the database.

> [!WARNING]
> The tilde (**\~**) denotes that the field is available in developer preview only.

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-textarea`
* **Type:** `json`
* Reference ID: `str-textarea|json`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-textarea",
    "type": "json",
    "propertyName": "...",
    ...
    "attributes": {
      "menuButtons": [...]        //heading1|heading2|bold|etc...
      "placeholderDocument": "..."//heading|paragraph|etc...
    }
  },
  ...
}
```

### Live preview

> [!NOTE]
> This field does not have any default Strife Web Components. Custom live preview implementations are fully supported.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# File~

Source: https://strife.app/docs/reference/fields/file

<figure><img src="https://strife.app/docs/assets/Screenshot%202023-10-27%20at%2011.18.48.png" alt="" width="375"><figcaption><p>Strife Studio screenshot of a File field</p></figcaption></figure>

> [!WARNING]
> The tilde (**\~**) denotes that the field is available in developer preview only.

### Settings

In addition to the basic settings, this section provides information about unique settings and configurations specific to this field.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="182">Option</th><th>Description</th></tr></thead><tbody><tr><td>Restrict types</td><td>Restrict the allowed types to upload in the File field</td></tr></tbody></table>

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-file`
* **Type:** `file`
* Reference ID: `str-file`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-file",
    "type": "file",
    "propertyName": "...",
    ...
    "attributes": {
      "allowedTypes": "..."
    }
  },
  ...
}
```

### Live preview

> [!NOTE]
> This field does not have any default Strife Web Components. Custom live preview implementations are fully supported.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Tab Group

Source: https://strife.app/docs/reference/fields/tab-group

Tab Groups provide a clean and organized way to group fields within the editor interface.

They are purely a **visual grouping mechanism** and do **not** affect your content model structure — meaning they do not introduce nested properties in your JSON data.

### Settings

The **Tab Group** field includes one specific configuration option **in addition to the basic settings**.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="182">Option</th><th>Description</th></tr></thead><tbody><tr><td>Tabs</td><td>Defines the collection of tabs within the group. Each tab entry contains a <strong>name</strong> (displayed in the editor UI) and a <strong>value</strong> (used internally to map fields to a specific tab).</td></tr></tbody></table>

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-tab-group`
* **Type:** `str-tab-group`
* Reference ID: `str-tab-group`

The settings above map into the `editor.options` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-tab-group",
    "type": "str-tab-group",
    "propertyName": "...",
    "options": {
        "tabs": [
            {
                "name": "...", //The name displayed to the editor
                "value": "..." //Value used as id
            },
            ...
        ]
    }
  },
  ...
}
```

In this example, two tabs are defined — **Properties** and **SEO** — which organize fields into separate visual sections within the editor.

#### How to add a field to a tab group

To place a field inside a specific tab within a Tab Group, reference the tab using the format `{propertyName}-{value}`, where:

* `{propertyName}` is the Tab Group's `propertyName` field
* `{value}` is the specific tab's `value` property

**Example:** If your Tab Group has `propertyName: "tabs"` and a tab with `value: "properties"`, the reference would be `"tabs-properties"`.

If your Tab Group has `propertyName: "tabGroup"` and a tab with `value: "content"`, the reference would be `"tabGroup-content"`.

> [!NOTE]
> Note: The prefix must exactly match the `propertyName` defined in the Tab Group's configuration.

This link is made using the `tabGroup` attribute inside the field’s `editor.attributes` object.

```json
{
    ...
    "editor": {
        ...
        "attributes": {
            "tabGroup": [
                "tabs-properties"
            ]
        }
    },
    ...
},
```

In this example, this field will appear under the **Properties** tab of the defined Tab Group.

> **Note:**\
> The prefix `tabs-` must match the `value` defined in the Tab Group’s configuration.\
> For instance, if a tab has `"value": "seo"`, the corresponding field should use `"tabs-seo"`.

### Live preview

> [!NOTE]
> Tab Groups are **UI-only elements** and have **no effect on Live Preview output**.

---

# Radio Group

Source: https://strife.app/docs/reference/fields/radio-group

The Radio Group editor presents a predefined set of options where only one value can be selected at a time.

Each option is defined by a `name` (label shown to the editor) and a `value` (the stored value used in templates and APIs).

The editor is displayed in a **tab-style layout**, making it especially well suited for mutually exclusive choices that affect behavior or presentation. Common use cases include toggling appearance settings, selecting alignments, choosing layout variations, or controlling feature states.

From a data perspective, the Radio Group editor outputs the `value` of the selected option, ensuring a simple and predictable data structure for rendering logic and conditional handling.

The Radio Group editor is ideal whenever a clear, single-choice decision is required and the available options should be immediately visible and easy to compare.

### Settings

The **Radio Group** field includes one specific configuration option **in addition to the basic settings**.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="182">Option</th><th>Description</th></tr></thead><tbody><tr><td>Options</td><td>Options to display in the radio group. Each option must have a name and value while color, icon and avatar are optional</td></tr><tr><td>Default value</td><td>Default value to be selected in the radio group</td></tr></tbody></table>

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-radio-group`
* **Type:** `str-radio-group`
* Reference ID: `str-radio-group`

The settings above map into the object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-radio-group",
    "type": "str-radio-group",
    "propertyName": "...",
    "options": {
        "items": [
            {
                "name": "...", //The name displayed to the editor
                "value": "...", //Value stored
                "icon": "..." //Optional icon name
            },
            ...
        ]
    },
    "defaultValue": "..." //A value matching an item's value in the items array
  },
  ...
}
```

### Live preview

> [!NOTE]
> This field does not have any default Strife Web Components. Custom live preview implementations are fully supported.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Slider

Source: https://strife.app/docs/reference/fields/slider

The Slider field lets users select a numeric value within a range by dragging   a thumb. It stores a single number in the database.

#### Settings

The Slider field does not feature any distinctive settings beyond the standard ones in Strife Studio. Range configuration (`min`, `max`, `step`) is set in the JSON template definition — see below.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the 'Overview' section.

#### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-slider`
* **Type:** `slider`
* Reference ID: `str-slider|slider`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-slider",
    "type": "slider",
    "propertyName": "...",
    ...
    "attributes": {
      "min": 0,          //Lower bound of the range. Default 0.
      "max": 100,        //Upper bound of the range. Default 100.
      "step": 1,         //Increment step when dragging. Default 1.
      "readonly": false, //Disables interaction when true. Default false.
      "tooltip": true    //Shows percentage tooltip on hover. Default true.
    }
  },
  ...
}
```

The field stores a single number between `min` and `max` in the database.

#### Live preview

The compatible Strife Web Components for a Slider field are any of the text or container components.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Video

Source: https://strife.app/docs/reference/fields/video

The Video field lets editors embed a video in a document from a media asset, a direct URL. It stores the source, playback options, and an optional poster image as an object in the database.

#### Settings

The Video field does not feature any distinctive template-level settings beyond the standard ones. When editing a document, the field's built-in editor offers a source selector (Media or URL), quality toggle, poster image editor, and playback controls (autoplay, loop, mute, controls, start time).

> [!NOTE]
> You can find a comprehensive list of all basic settings in the 'Overview' section.

#### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-video`
* **Type:** `video`
* Reference ID: `str-video|video`

```json
{
  ...
  "editor": {
    "name": "str-video",
    "type": "video",
    "propertyName": "..."
  },
  ...
}
```

The value stored in the database is an object describing the selected video:

```json
{
  "source": "media",           //"media" | "url"
  "url": "...",                  //Video URL
  "quality": "high",             //"medium" (720p) or "high" (1080p) for Media source
  "poster": {                    //Optional poster image
    "src": "...",
    "alt": "",
    "width": 1366,
    "height": 768
  },
  "startTime": "0",              //Start offset in seconds
  "playing": false,              //Autoplay
  "muted": false,
  "controls": true,
  "loop": false
}
```

#### Live preview

This field does not have a default Strife Web Component. To render a video in live preview, read `url`, `poster`, and the playback flags from the stored value and render a native `<video>` element.

> [!NOTE]
> For more information on live preview and custom implementations, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Serp

Source: https://strife.app/docs/reference/fields/serp

The SEO field captures the page title, meta keywords, and meta description used to render the search engine result snippet (SERP). It stores all three as a single object in the database.

## Title and Description (SEO)

#### Settings

The SEO field does not feature any distinctive settings beyond the standard ones. The editor shows a live preview of how the page will appear in search results as the author types, along with progress bars indicating the recommended length for the title (50–60 characters) and description (110–160 characters).

> [!NOTE]
> You can find a comprehensive list of all basic settings in the 'Overview' section.

#### AI-assisted suggestions

When **Strife Intelligence** is enabled on the team, the SEO field auto-generates suggestions for the title and description based on the current document's content. Suggestions appear as placeholder text; press `Tab` in an empty field to accept the suggestion, or type over it to write your own.

> [!WARNING]
> AI suggestions require Strife Intelligence to be enabled. Configure it under **Team settings → Strife Intelligence** in the sidebar. Without it, the field works normally but without auto-generated suggestions.

#### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-serp`
* **Type:** `serp`
* Reference ID: `str-serp|serp`

```json
{
  ...
  "editor": {
    "name": "str-serp",
    "type": "serp",
    "propertyName": "..."
  },
  ...
}
```

The value stored in the database is a single object containing all three SEO fields:

```json
{
  "title": "...",
  "keywords": "...",
  "description": "..."
}
```

#### Live preview

This field does not have a default Strife Web Component. To render SEO metadata in a live preview page, read the `title`, `keywords`, and `description` keys from the stored value and write them into the appropriate `<title>` and `<meta>` tags.

> [!NOTE]
> For more information on live preview and custom implementations, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).

---

# Hint

Source: https://strife.app/docs/reference/fields/hint

The Hint field displays a collapsible help block inside the editor to guide content authors. It is a UI-only element, it does not store data in the database and does not require a propertyName.

#### Settings

Unlike other fields, the Hint field does not store a value and therefore does not use a `propertyName`. The settings below configure what the hint displays and where it appears in the editor.

<table><thead><tr><th width="232">Option</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>Icon</td><td>The icon displayed next to the label. Pick any icon name from the Icons reference.</td><td></td></tr><tr><td>Label</td><td>The header text shown next to the icon.</td><td></td></tr><tr><td>Collapsed text</td><td>A short summary shown when the hint is collapsed. Limited to two lines in the UI.</td><td></td></tr><tr><td>Expanded text</td><td>The full body of the hint shown when expanded.</td><td></td></tr><tr><td>Tab group</td><td>Scopes the hint to one or more tabs in the template. If left empty, the hint appears at the top level.</td><td></td></tr></tbody></table>

#### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-hint`
* **Type:** `hint`
* Reference ID: `str-hint|hint`

```json
{
  ...
  "editor": {
    "name": "str-hint",
    "type": "hint",
    "attributes": {
      "icon": "info",                //Icon name — see Icons reference
      "label": "Content Hint",
      "collapsedText": "A short summary shown when collapsed.",
      "expandedText": "The full body of the hint, shown when the user expands the block.",
      "tabGroup": ["tabGroup-content"]  //Array of "<tabGroupPropertyName>-<tabValue>" strings
    }
  },
  ...
}
```

> [!NOTE]
> Because the Hint field does not store data, omit `propertyName`, `label`, `description`, and all other base settings that apply to data-storing fields.

#### Live preview

The Hint field is UI-only and contributes nothing to document data. It has no live preview output.

---

# Field Reference

Source: https://strife.app/docs/reference/field-reference

Every fields.* builder from @strifeapp/schema, with its full option set, output type, and wire-format mapping — the code-first counterpart to the Studio-UI Fields reference.

This section documents every `fields.*` builder exported by `@strifeapp/schema` — the code-first counterpart to [Fields](https://strife.app/docs/reference/fields.md), which documents the same editors from Strife Studio's UI. Use this section when you're writing a [Schema](https://strife.app/docs/reference/cli/schemas.md) and want the complete option set for a specific builder; use the Studio Fields reference when you're looking at a template built by hand in Strife Studio and want to know what an editor does.

Each page follows the same shape: a minimal example, the full options table (sourced directly from the builder's TypeScript signature), the inferred output type, and any notes worth knowing — including a few places where the code-first builder's options don't (yet) cover everything the underlying Strife Studio editor supports.

## Common options

Every builder takes `label` (required) and, unless noted on its own page, most also accept:

| Option         | Type      | Description                                                                            |
| -------------- | --------- | -------------------------------------------------------------------------------------- |
| `description`  | `string`  | Shown as a tooltip/hint to editors in Strife Studio.                                   |
| `searchable`   | `boolean` | Include this field's value in the team's search index.                                 |
| `filterable`   | `boolean` | Allow filtering content lists by this field's value.                                   |
| `protected`    | `boolean` | Restrict editing to users with the appropriate permission.                             |
| `propertyName` | `string`  | Override the stored property name. Defaults to the field's key in the `fields` object. |
| `localizable`  | `boolean` | Only present on builders where a per-locale value makes sense — see the table below.   |

A few builders are exceptions to this common set — `hint` and `tabs` are structural/UI-only and skip most of it, and `serp` skips `searchable`/`filterable`. Each page's own table is the source of truth; don't assume every option on this page applies everywhere.

`localizable` is available on exactly these ten builders: `text`, `paragraph`, `number`, `date`, `slug`, `html`, `image`, `link`, `serp`, and `chapters`. Every other builder either doesn't expose it (a boolean or a selected option isn't the kind of value that varies by locale) or is structural (`hint`, `tabs`).

## All builders

| Builder                                                 | Output type                        | Localizable |
| ------------------------------------------------------- | ---------------------------------- | ----------- |
| [`fields.text()`](https://strife.app/docs/reference/field-reference/fields.text.md)                       | `string`                           | Yes         |
| [`fields.paragraph()`](https://strife.app/docs/reference/field-reference/fields.paragraph.md)             | `string`                           | Yes         |
| [`fields.number()`](https://strife.app/docs/reference/field-reference/fields.number.md)                   | `number`                           | Yes         |
| [`fields.switch()`](https://strife.app/docs/reference/field-reference/fields.switch.md)                   | `boolean`                          | No          |
| [`fields.toggle()`](https://strife.app/docs/reference/field-reference/fields.toggle.md)                   | `boolean`                          | No          |
| [`fields.date()`](https://strife.app/docs/reference/field-reference/fields.date.md)                       | `string` (ISO-8601)                | Yes         |
| [`fields.slug()`](https://strife.app/docs/reference/field-reference/fields.slug.md)                       | `string`                           | Yes         |
| [`fields.html()`](https://strife.app/docs/reference/field-reference/fields.html.md)                       | `string` (HTML)                    | Yes         |
| [`fields.json()`](https://strife.app/docs/reference/field-reference/fields-json.md)                       | `unknown`                          | No          |
| [`fields.slider()`](https://strife.app/docs/reference/field-reference/fields.slider.md)                   | `number`                           | No          |
| [`fields.file()`](https://strife.app/docs/reference/field-reference/fields.file.md)                       | `FileValue`                        | No          |
| [`fields.video()`](https://strife.app/docs/reference/field-reference/fields.video.md)                     | `unknown`                          | No          |
| [`fields.image()`](https://strife.app/docs/reference/field-reference/fields.image.md)                     | `Image`                            | Yes         |
| [`fields.imageGroup()`](https://strife.app/docs/reference/field-reference/fields.imagegroup.md)           | `ImageGroup`                       | No          |
| [`fields.chapters()`](https://strife.app/docs/reference/field-reference/fields.chapters.md)               | `unknown[]`                        | Yes         |
| [`fields.contentTemplate()`](https://strife.app/docs/reference/field-reference/fields.contenttemplate.md) | `unknown`                          | No          |
| [`fields.collection()`](https://strife.app/docs/reference/field-reference/fields.collection.md) ⚠         | `CollectionDefinition`             | No          |
| [`fields.repeatable()`](https://strife.app/docs/reference/field-reference/fields.repeatable.md)           | `string[]` / `number[]` / `Link[]` | No          |
| [`fields.select()`](https://strife.app/docs/reference/field-reference/fields.select.md)                   | `{value, name}[]`                  | No          |
| [`fields.multiSelect()`](https://strife.app/docs/reference/field-reference/fields.multiselect.md)         | `value[]`                          | No          |
| [`fields.multiInput()`](https://strife.app/docs/reference/field-reference/fields.multiinput.md)           | `string[]` / `number[]`            | No          |
| [`fields.tableInput()`](https://strife.app/docs/reference/field-reference/fields.tableinput.md)           | `Record<string, unknown>[]`        | No          |
| [`fields.assets()`](https://strife.app/docs/reference/field-reference/fields.assets.md)                   | `Asset[]`                          | No          |
| [`fields.radioGroup()`](https://strife.app/docs/reference/field-reference/fields.radiogroup.md)           | literal union                      | No          |
| [`fields.link()`](https://strife.app/docs/reference/field-reference/fields.link.md)                       | `Link`                             | Yes         |
| [`fields.serp()`](https://strife.app/docs/reference/field-reference/fields.serp.md)                       | `Serp`                             | Yes         |
| [`fields.reference()`](https://strife.app/docs/reference/field-reference/fields.reference.md)             | `Target[]` (read)                  | No          |
| [`fields.references()`](https://strife.app/docs/reference/field-reference/fields.references.md)           | `Target[]` (read)                  | No          |
| [`fields.hint()`](https://strife.app/docs/reference/field-reference/fields.hint.md)                       | `never` (no data)                  | No          |
| [`fields.tabs()`](https://strife.app/docs/reference/field-reference/fields.tabs.md)                       | `never` (structural)               | No          |

> [!NOTE]
> This reference is generated from `@strifeapp/schema`'s TypeScript source, so it only documents options the DSL actually implements today. A few Studio-UI editor capabilities noted on the pages above (⚠, and a couple more called out on individual pages) aren't reachable from `defineType`/`fields.*` yet — the per-field pages call these out explicitly rather than implying parity that doesn't exist.

---

# fields.text()

Source: https://strife.app/docs/reference/field-reference/fields.text

Single-line text input. The most commonly used field — stores a plain string.

Single-line text field. Maps to editor `{ name: 'str-input', type: 'text' }` — the same wire shape documented in Text.

## Example

```ts
fields.text({
  label: 'Heading',
  localizable: true,
  placeholder: 'Enter a heading…',
  spellcheck: true,
})
```

## Options

| Option         | Type             | Required | Description                                                                                 |
| -------------- | ---------------- | -------- | ------------------------------------------------------------------------------------------- |
| `label`        | `string`         | Yes      | Label shown to editors in Strife Studio.                                                    |
| `description`  | `string`         | No       | Tooltip shown to editors.                                                                   |
| `localizable`  | `boolean`        | No       | When `true`, output is `Record<string, string>` (one value per locale) instead of `string`. |
| `searchable`   | `boolean`        | No       | Include in the team's search index.                                                         |
| `filterable`   | `boolean`        | No       | Allow filtering content lists by this value.                                                |
| `protected`    | `boolean`        | No       | Restrict editing to users with the appropriate permission.                                  |
| `propertyName` | `string`         | No       | Override the stored property name. Defaults to the field's key.                             |
| `placeholder`  | `string \| null` | No       | Hint text shown in the empty input.                                                         |
| `spellcheck`   | `boolean`        | No       | Enable/disable browser spellcheck on the input.                                             |

## Output type

`string`, or `Record<string, string>` when `localizable: true`.

## See also

* [Text](https://strife.app/docs/reference/fields/text.md) — the same editor, documented from the Strife Studio UI side.

---

# fields.paragraph()

Source: https://strife.app/docs/reference/field-reference/fields.paragraph

Multi-line plain-text input. Same editor component as html, but stores plain text instead of HTML.

Multi-line plain-text field ("Paragraph" in the Studio field reference). Maps to editor `{ name: 'str-textarea', type: 'text' }` — the same component as [`fields.html()`](https://strife.app/docs/reference/field-reference/fields.html.md) but with `type: 'text'`, so the stored value is a plain string rather than HTML.

## Example

```ts
fields.paragraph({
  label: 'Summary',
  localizable: true,
  placeholder: 'One or two sentences…',
})
```

## Options

| Option         | Type             | Required | Description                                                          |
| -------------- | ---------------- | -------- | -------------------------------------------------------------------- |
| `label`        | `string`         | Yes      | Label shown to editors in Strife Studio.                             |
| `description`  | `string`         | No       | Tooltip shown to editors.                                            |
| `localizable`  | `boolean`        | No       | When `true`, output is `Record<string, string>` instead of `string`. |
| `searchable`   | `boolean`        | No       | Include in the team's search index.                                  |
| `filterable`   | `boolean`        | No       | Allow filtering content lists by this value.                         |
| `protected`    | `boolean`        | No       | Restrict editing to users with the appropriate permission.           |
| `propertyName` | `string`         | No       | Override the stored property name.                                   |
| `placeholder`  | `string \| null` | No       | Hint text shown in the empty textarea.                               |
| `spellcheck`   | `boolean`        | No       | Enable/disable browser spellcheck.                                   |

## Output type

`string`, or `Record<string, string>` when `localizable: true`.

## See also

* [Paragraph](https://strife.app/docs/reference/fields/paragraph.md) — the same editor, documented from the Strife Studio UI side.

---

# fields.number()

Source: https://strife.app/docs/reference/field-reference/fields.number

Numeric input field.

Numeric input. Maps to editor `{ name: 'str-input', type: 'number' }`. Localizable numbers are rare but allowed — e.g. region-specific prices.

## Example

```ts
fields.number({
  label: 'Price',
  min: 0,
  step: '0.01',
})
```

## Options

| Option         | Type             | Required | Description                                                                                                                              |
| -------------- | ---------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `label`        | `string`         | Yes      | Label shown to editors in Strife Studio.                                                                                                 |
| `description`  | `string`         | No       | Tooltip shown to editors.                                                                                                                |
| `localizable`  | `boolean`        | No       | When `true`, output is `Record<string, number>` instead of `number`.                                                                     |
| `searchable`   | `boolean`        | No       | Include in the team's search index.                                                                                                      |
| `filterable`   | `boolean`        | No       | Allow filtering content lists by this value.                                                                                             |
| `protected`    | `boolean`        | No       | Restrict editing to users with the appropriate permission.                                                                               |
| `propertyName` | `string`         | No       | Override the stored property name.                                                                                                       |
| `placeholder`  | `string \| null` | No       | Hint text shown in the empty input.                                                                                                      |
| `min`          | `number \| null` | No       | Minimum allowed value.                                                                                                                   |
| `max`          | `number \| null` | No       | Maximum allowed value.                                                                                                                   |
| `step`         | `string \| null` | No       | Increment step, passed straight through to the underlying HTML input — note this is typed as a **string** (e.g. `'0.01'`), not a number. |

## Output type

`number`, or `Record<string, number>` when `localizable: true`.

## See also

* [Number](https://strife.app/docs/reference/fields/number.md) — the same editor, documented from the Strife Studio UI side.

---

# fields.switch()

Source: https://strife.app/docs/reference/field-reference/fields.switch

Boolean checkbox toggle. Never localizable.

Boolean toggle. Maps to editor `{ name: 'str-switch', type: 'checkbox' }`. Switches are never localizable — a flag is a flag in any language.

> [!NOTE]
> `switch` is a JavaScript reserved word, so the implementation is internally named `switchField` and re-exported as `fields.switch`. You'll only ever call it as `fields.switch(...)` — the internal name only shows up if you're reading the `@strifeapp/schema` source itself.

## Example

```ts
fields.switch({
  label: 'Featured',
  filterable: true,
})
```

## Options

| Option         | Type      | Required | Description                                                |
| -------------- | --------- | -------- | ---------------------------------------------------------- |
| `label`        | `string`  | Yes      | Label shown to editors in Strife Studio.                   |
| `description`  | `string`  | No       | Tooltip shown to editors.                                  |
| `searchable`   | `boolean` | No       | Include in the team's search index.                        |
| `filterable`   | `boolean` | No       | Allow filtering content lists by this value.               |
| `protected`    | `boolean` | No       | Restrict editing to users with the appropriate permission. |
| `propertyName` | `string`  | No       | Override the stored property name.                         |

No `localizable` option — booleans can't be localized.

## Output type

`boolean`.

## See also

* [Checkbox](https://strife.app/docs/reference/fields/checkbox.md) — the same editor, documented from the Strife Studio UI side.
* [`fields.toggle()`](https://strife.app/docs/reference/field-reference/fields.toggle.md) — same output shape, rendered as a sliding toggle instead of a checkbox.

---

# fields.toggle()

Source: https://strife.app/docs/reference/field-reference/fields.toggle

Boolean sliding-toggle switch. Never localizable.

Boolean toggle-switch. Maps to editor `{ name: 'str-switch', type: 'toggle' }` — the same component name as [`fields.switch()`](https://strife.app/docs/reference/field-reference/fields.switch.md) (`checkbox`) but rendered as a sliding toggle. Never localizable — a flag is a flag in any language.

## Example

```ts
fields.toggle({
  label: 'Enable comments',
})
```

## Options

| Option         | Type      | Required | Description                                                |
| -------------- | --------- | -------- | ---------------------------------------------------------- |
| `label`        | `string`  | Yes      | Label shown to editors in Strife Studio.                   |
| `description`  | `string`  | No       | Tooltip shown to editors.                                  |
| `searchable`   | `boolean` | No       | Include in the team's search index.                        |
| `filterable`   | `boolean` | No       | Allow filtering content lists by this value.               |
| `protected`    | `boolean` | No       | Restrict editing to users with the appropriate permission. |
| `propertyName` | `string`  | No       | Override the stored property name.                         |

No `localizable` option — booleans can't be localized.

## Output type

`boolean`.

## See also

* [Toggle](https://strife.app/docs/reference/fields/toggle.md) — the same editor, documented from the Strife Studio UI side.
* [`fields.switch()`](https://strife.app/docs/reference/field-reference/fields.switch.md) — same output shape, rendered as a checkbox instead of a sliding toggle.

---

# fields.date()

Source: https://strife.app/docs/reference/field-reference/fields.date

Date or date-time input, stored as an ISO-8601 string.

Date input. Maps to editor `{ name: 'str-input', type: 'date' }` (or `type: 'datetime-local'` when `withTime: true`). Output is always an ISO-8601 string — there's no native `Date` object, so the value round-trips through JSON cleanly.

## Example

```ts
fields.date({
  label: 'Published on',
})

fields.date({
  label: 'Event starts',
  withTime: true,
})
```

## Options

| Option         | Type      | Required | Description                                                                                                 |
| -------------- | --------- | -------- | ----------------------------------------------------------------------------------------------------------- |
| `label`        | `string`  | Yes      | Label shown to editors in Strife Studio.                                                                    |
| `description`  | `string`  | No       | Tooltip shown to editors.                                                                                   |
| `localizable`  | `boolean` | No       | When `true`, output is `Record<string, string>` instead of `string`.                                        |
| `searchable`   | `boolean` | No       | Include in the team's search index.                                                                         |
| `filterable`   | `boolean` | No       | Allow filtering content lists by this value.                                                                |
| `protected`    | `boolean` | No       | Restrict editing to users with the appropriate permission.                                                  |
| `propertyName` | `string`  | No       | Override the stored property name.                                                                          |
| `withTime`     | `boolean` | No       | When `true`, switches the editor to `datetime-local` (date + time, seconds included). Default is date-only. |

## Output type

`string` (ISO-8601), or `Record<string, string>` when `localizable: true`.

## See also

* [Date](https://strife.app/docs/reference/fields/date.md) / [Date Time](https://strife.app/docs/reference/fields/date-time.md) — the same editor, documented from the Strife Studio UI side.

---

# fields.slug()

Source: https://strife.app/docs/reference/field-reference/fields.slug

URL slug input, with locale-suffix and uniqueness validation.

URL slug input. Maps to editor `{ name: 'str-input', type: 'slug' }`. Slug semantics differ slightly from `text`: slugs feed into URL building and have their own validation rules (lowercase, dashes, locale-suffix), handled server-side at compile/push time.

## Example

```ts
fields.slug({
  label: 'Slug',
  placeholder: 'my-page',
})
```

## Options

| Option         | Type                                    | Required | Description                                                                            |
| -------------- | --------------------------------------- | -------- | -------------------------------------------------------------------------------------- |
| `label`        | `string`                                | Yes      | Label shown to editors in Strife Studio.                                               |
| `description`  | `string`                                | No       | Tooltip shown to editors.                                                              |
| `localizable`  | `boolean`                               | No       | When `true`, output is `Record<string, string>` instead of `string`. See caveat below. |
| `searchable`   | `boolean`                               | No       | Include in the team's search index.                                                    |
| `filterable`   | `boolean`                               | No       | Allow filtering content lists by this value.                                           |
| `protected`    | `boolean`                               | No       | Restrict editing to users with the appropriate permission.                             |
| `propertyName` | `string`                                | No       | Override the stored property name.                                                     |
| `placeholder`  | `string \| null`                        | No       | Hint text shown in the empty input.                                                    |
| `autoCheck`    | `{ csrf: string; src: string } \| null` | No       | Optional endpoint config for live slug-uniqueness checking in the editor.              |

> [!NOTE]
> In single-locale teams, `localizable: true` slugs are stored as plain strings server-side regardless of the DSL setting — the server normalizes at the read boundary. The DSL surface is identical either way; this only matters if you're inspecting raw stored documents.

## Output type

`string`, or `Record<string, string>` when `localizable: true`.

## See also

* [Slug\~](https://strife.app/docs/reference/fields/slug.md) — the same editor, documented from the Strife Studio UI side.

---

# fields.html()

Source: https://strife.app/docs/reference/field-reference/fields.html

Rich-text (HTML) editor with configurable formatting/content availability, plus selectable image, callout, and custom-component presets.

Rich-text input. Maps to editor `{ name: 'str-textarea', type: 'html' }`. Output is HTML-as-string — markup is stored verbatim; sanitization happens at render time (server-side renderers / SDKs), not at write time.

## Example

```ts
fields.html({
  label: 'Body',
  localizable: true,
  marks: ['bold', 'italic', 'link'],
  nodes: [
    'heading2',
    'bulletList',
    {
      type: 'image',
      sizes: [
        { label: 'Wide', width: 1200, height: 630, default: true },
        { label: 'Square', width: 800, height: 800 },
      ],
      styles: [
        { label: 'Drop shadow', group: 'Effects', cssClass: 'shadow', imgproxyParams: ['sh:0.5'] },
      ],
      quality: [{ label: 'High', quality: 90 }],
    },
  ],
})
```

## Options

| Option           | Type                                                          | Required | Description                                                                                                         |
| ---------------- | ------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
| `label`          | `string`                                                      | Yes      | Label shown to editors in Strife Studio.                                                                            |
| `description`    | `string`                                                      | No       | Tooltip shown to editors.                                                                                           |
| `localizable`    | `boolean`                                                     | No       | When `true`, output is `Record<string, string>` instead of `string`.                                                |
| `searchable`     | `boolean`                                                     | No       | Include in the team's search index.                                                                                 |
| `filterable`     | `boolean`                                                     | No       | Allow filtering content lists by this value.                                                                        |
| `protected`      | `boolean`                                                     | No       | Restrict editing to users with the appropriate permission.                                                          |
| `propertyName`   | `string`                                                      | No       | Override the stored property name.                                                                                  |
| `placeholder`    | `string \| null`                                              | No       | Hint text shown when the editor is empty.                                                                           |
| `marks`          | `HtmlMark[]`                                                  | No       | Inline-formatting tools the editor offers.                                                                          |
| `nodes`          | `HtmlNode[]`                                                  | No       | Block-level content the editor offers. `image`, `callout`, and `customComponent` entries can carry their own configuration — see below. |
| `documentSchema` | `{ content?: string; placeholders?: Record<string, string> }` | No       | Forces a Tiptap content structure (e.g. `'heading paragraph+'`) and per-node-type placeholder text.                 |

`HtmlMark` is one of: `bold`, `italic`, `underline`, `strike`, `link`.

`HtmlNode` is either a bare `HtmlNodeName` — one of `paragraph`, `heading1`, `heading2`, `heading3`, `blockquote`, `bulletList`, `orderedList`, `checkList`, `codeBlock`, `image`, `video`, `table`, `details` — or a configured `image`/`callout`/`customComponent` object:

* **`{ type: 'image', sizes?, styles?, quality? }`** — presets offered in the image toolbar once an image is inserted. These are _selectable options_, not enforced constraints — contrast with [`fields.image()`](https://strife.app/docs/reference/field-reference/fields.image.md)'s mandatory `width`/`height`/`format`.
  * `sizes: { label, width, height, default? }[]` — selectable dimension presets. `height: 0` keeps the source aspect ratio; mark one entry `default: true` to auto-apply it when an image is inserted.
  * `styles: { label, group?, cssClass?, imgproxyParams? }[]` — selectable visual-style presets. `cssClass` lands on the rendered `<figure>`; `group` buckets the picker dropdown; `imgproxyParams` are server-side imgproxy processing operations.
  * `quality: { label, quality, imgproxyParams? }[]` — selectable compression presets (`quality` is 1–100).
* **`{ type: 'callout', variants: { label, value }[] }`** — the callout block's selectable class variants; multiple can be combined on one callout. A bare `'callout'` node name isn't valid on its own — without `variants` it would be a silent no-op, so it must always be given in this configured form. `label` is the picker label; `value` becomes the CSS class token on the rendered callout (compiles to wire `name`).
* **`{ type: 'customComponent', components: { tag, label, attributes? }[] }`** — customer web components the editor may insert (e.g. a form embed distributed as a custom element, `<lime-form form-id="...">`). Like `callout`, a bare `'customComponent'` node name isn't valid — without `components` it would be a silent no-op. Each entry: `tag` is the custom-element tag name; `label` is the insert-menu label.
  * `attributes: { name, label?, default? }[]` — what an author may fill in on each inserted instance. `name` is the HTML attribute written to the markup, `label` names the field in the editor (defaults to `name`), and `default` pre-fills it on insert. The placeholder renders one field per declared attribute, so a page with several of the same component gives each one its own `form-id` — and an author fills in a value, never attribute syntax.
  * Declare an attribute with no `default` to get an empty field. Leaving a field empty writes no attribute at all, rather than `name=""`.
  * The set is schema-owned: attributes you don't declare can't be added from the editor, and a component that declares none gets no editing affordance. Attributes already present on stored markup are preserved untouched whether or not the schema declares them.
  * `defaultAttrs: Record<string, string>` is the deprecated 0.11.0 spelling — `{ 'form-id': 'x' }` means the same as `[{ name: 'form-id', default: 'x' }]`, minus the field label. Existing schemas keep working; new ones should use `attributes`.

> [!WARNING]
> **Pilot-scoped today.** `tag` must be one of a small set of element names the editor's parse-time allowlist already recognizes (currently Kalmar Energi's Lime forms, `lime-form`/`simpli-form`) — any other tag is dropped like any other unmodeled markup, same as an unrecognized HTML element pasted into the editor. Recognized elements always render as a static placeholder in Strife Studio — the editor never mounts or hydrates the real element, and never loads the customer's script — the real component only renders where the published HTML is actually rendered, on the customer's own site (which must already have its loader script installed there). There is no Strife Studio UI for `customComponent` yet — `nodes` (or hand-edited template JSON) is currently the only way to set it, same as `quality` under `image` above.

> [!NOTE]
> Not every `nodes` entry produces a visible toolbar button today — `paragraph` and `table` have no corresponding control yet (they're accepted for forward-compatibility). Every `HtmlMark` value and every other `HtmlNodeName` value does show one.

> [!WARNING]
> **No Strife Studio UI for quality presets.** `sizes` and `styles` can also be authored by hand in Strife Studio's field settings (as "Image Presets" / "Style Presets" tables), but `quality` has no equivalent point-and-click control — `fields.html()`'s `nodes` (or hand-edited template JSON) is currently the only way to set it.

Alignment, alt text, and crop/zoom/pan on an inserted image are purely interactive per-image state set by the editor in Strife Studio — there's no schema-level way to default or constrain those.

## Output type

`string` (HTML), or `Record<string, string>` when `localizable: true`.

## See also

* [Rich Content](https://strife.app/docs/reference/fields/rich-content.md) — the same editor, documented from the Strife Studio UI side.
* [`fields.paragraph()`](https://strife.app/docs/reference/field-reference/fields.paragraph.md) — same underlying textarea component, but stores plain text instead of HTML.

---

# fields.json()

Source: https://strife.app/docs/reference/field-reference/fields-json

Raw JSON field for arbitrary structured data. Deprecated — never rendered by the edit panel; use fields.html() instead.

Raw JSON field ("Rich Content (JSON)" in the Studio field reference). Maps to editor `{ name: 'str-textarea', type: 'json' }`. The stored value is arbitrary JSON, so the generated read type is `unknown` — narrow it at the call site.

> [!WARNING]
> **Deprecated — do not use in new schemas.** This editor was never fully implemented: neither the legacy nor the current Strife Studio edit panel has a case for it, so a document with this field shows nothing editable for it in Studio, and no real template uses it today. It's kept only for backward compatibility with existing `fields.json()` calls and is expected to be removed in a future major version. Use [`fields.html()`](https://strife.app/docs/reference/field-reference/fields.html.md) for rich content, or a typed field, instead.

## Example

```ts
fields.json({
  label: 'Raw config',
})
```

## Options

| Option         | Type             | Required | Description                                                |
| -------------- | ---------------- | -------- | ---------------------------------------------------------- |
| `label`        | `string`         | Yes      | Label shown to editors in Strife Studio.                   |
| `description`  | `string`         | No       | Tooltip shown to editors.                                  |
| `searchable`   | `boolean`        | No       | Include in the team's search index.                        |
| `filterable`   | `boolean`        | No       | Allow filtering content lists by this value.               |
| `protected`    | `boolean`        | No       | Restrict editing to users with the appropriate permission. |
| `propertyName` | `string`         | No       | Override the stored property name.                         |
| `placeholder`  | `string \| null` | No       | Hint text shown when the editor is empty.                  |

No `localizable` option.

## Output type

`unknown` — cast or validate before use.

## See also

* [Rich Content (JSON)\~](https://strife.app/docs/reference/fields/rich-content-json.md) — the same editor, documented from the Strife Studio UI side.

---

# fields.slider()

Source: https://strife.app/docs/reference/field-reference/fields.slider

Numeric range slider. Never localizable.

Numeric range slider. Maps to editor `{ name: 'str-slider', type: 'slider' }`. Output is a plain `number`; range bounds, step and affordances are configured via the options below.

## Example

```ts
fields.slider({
  label: 'Opacity',
  min: 0,
  max: 1,
  step: 0.05,
})
```

## Options

| Option         | Type             | Required | Default | Description                                                |
| -------------- | ---------------- | -------- | ------- | ---------------------------------------------------------- |
| `label`        | `string`         | Yes      | —       | Label shown to editors in Strife Studio.                   |
| `description`  | `string`         | No       | —       | Tooltip shown to editors.                                  |
| `searchable`   | `boolean`        | No       | —       | Include in the team's search index.                        |
| `filterable`   | `boolean`        | No       | —       | Allow filtering content lists by this value.               |
| `protected`    | `boolean`        | No       | —       | Restrict editing to users with the appropriate permission. |
| `propertyName` | `string`         | No       | —       | Override the stored property name.                         |
| `min`          | `number \| null` | No       | `0`     | Lower bound of the range.                                  |
| `max`          | `number \| null` | No       | `100`   | Upper bound of the range.                                  |
| `step`         | `number \| null` | No       | `1`     | Increment step when dragging.                              |
| `readonly`     | `boolean`        | No       | `false` | Disables interaction.                                      |
| `tooltip`      | `boolean`        | No       | `true`  | Shows a percentage tooltip on hover.                       |

No `localizable` option.

## Output type

`number`.

## See also

* [Slider](https://strife.app/docs/reference/fields/slider.md) — the same editor, documented from the Strife Studio UI side.

---

# fields.file()

Source: https://strife.app/docs/reference/field-reference/fields.file

Single file upload. Never localizable.

Single file upload. Maps to editor `{ name: 'str-file', type: 'file' }`. Output is the canonical `FileValue` from `@strifeapp/types`: `{ name, size, type, extension, src, draft }`.

## Example

```ts
fields.file({
  label: 'Attachment',
  allowedTypes: '.pdf,.docx',
})
```

## Options

| Option         | Type             | Required | Description                                                                     |
| -------------- | ---------------- | -------- | ------------------------------------------------------------------------------- |
| `label`        | `string`         | Yes      | Label shown to editors in Strife Studio.                                        |
| `description`  | `string`         | No       | Tooltip shown to editors.                                                       |
| `searchable`   | `boolean`        | No       | Include in the team's search index.                                             |
| `filterable`   | `boolean`        | No       | Allow filtering content lists by this value.                                    |
| `protected`    | `boolean`        | No       | Restrict editing to users with the appropriate permission.                      |
| `propertyName` | `string`         | No       | Override the stored property name.                                              |
| `allowedTypes` | `string \| null` | No       | Restrict uploads to these types — comma-separated extensions and/or MIME types. |

No `localizable` option.

## Output type

`FileValue` (`{ name, size, type, extension, src, draft }`).

## See also

* [File\~](https://strife.app/docs/reference/fields/file.md) — the same editor, documented from the Strife Studio UI side.

---

# fields.video()

Source: https://strife.app/docs/reference/field-reference/fields.video

Video field. Stored shape isn't finalized yet, so the read type is unknown.

Video field. Maps to editor `{ name: 'str-video', type: 'video' }`.

> [!WARNING]
> The persisted value shape isn't strongly specified by the underlying editor component (it collects a video URL / embed, but the exact stored shape isn't finalized) — the generated read type is `unknown`. Narrow it at the call site. This may be tightened in a future minor version once the stored shape is finalized.

## Example

```ts
fields.video({
  label: 'Promo video',
})
```

## Options

| Option         | Type      | Required | Description                                                |
| -------------- | --------- | -------- | ---------------------------------------------------------- |
| `label`        | `string`  | Yes      | Label shown to editors in Strife Studio.                   |
| `description`  | `string`  | No       | Tooltip shown to editors.                                  |
| `searchable`   | `boolean` | No       | Include in the team's search index.                        |
| `filterable`   | `boolean` | No       | Allow filtering content lists by this value.               |
| `protected`    | `boolean` | No       | Restrict editing to users with the appropriate permission. |
| `propertyName` | `string`  | No       | Override the stored property name.                         |

No `localizable` option, and no video-specific options beyond the common set — this builder is a thin wrapper today.

## Output type

`unknown`.

## See also

* [Video](https://strife.app/docs/reference/fields/video.md) — the same editor, documented from the Strife Studio UI side.

---

# fields.image()

Source: https://strife.app/docs/reference/field-reference/fields.image

Single image upload with required dimension and format hints.

Single image upload. Maps to editor `{ name: 'str-image', type: 'image' }`. Output is the canonical `Image` from `@strifeapp/types`. `width`/`height`/`format` are dimension/transform hints baked into the template — the editor can't override them per asset.

## Example

```ts
fields.image({
  label: 'Cover image',
  localizable: false,
  width: 1600,
  height: 900,
  format: 'webp',
})

fields.image({
  label: 'Logo',
  width: 400,
  height: 'auto',
  format: 'png',
})
```

## Options

| Option         | Type              | Required | Description                                                                                                                        |
| -------------- | ------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------- |
| `label`        | `string`          | Yes      | Label shown to editors in Strife Studio.                                                                                          |
| `width`        | `number`          | Yes      | Target width hint used for image transforms.                                                                                      |
| `height`       | `number \| 'auto'` | Yes      | Target height hint, or `'auto'` for a width-only image that keeps the source aspect ratio (crop/zoom are disabled in the editor). |
| `format`       | `ImageFormat`     | Yes      | Target output format — one of `jpeg`, `png`, `webp`, `svg`, `gif`, `avif`, `ico`, `heic`, `tif`, `bmp`.                           |
| `description`  | `string`          | No       | Tooltip shown to editors.                                                                                                          |
| `localizable`  | `boolean`         | No       | When `true`, output is `Record<string, Image>` instead of `Image`.                                                                |
| `searchable`   | `boolean`         | No       | Include in the team's search index.                                                                                               |
| `filterable`   | `boolean`         | No       | Allow filtering content lists by this value.                                                                                      |
| `protected`    | `boolean`         | No       | Restrict editing to users with the appropriate permission.                                                                        |
| `propertyName` | `string`          | No       | Override the stored property name.                                                                                                |
| `paddingColor` | `string \| null`  | No       | Background color used when padding to fit the target dimensions.                                                                  |
| `paddingAlpha` | `number \| null`  | No       | Padding background opacity.                                                                                                       |
| `hideAlt`      | `boolean`         | No       | Hide the alt-text input in the editor.                                                                                            |

> [!NOTE]
> `height: 'auto'` is DSL-only sugar — the compiled template JSON always stores a plain number, with `0` as the width-only convention (`height === 'auto' ? 0 : height`). [Image](https://strife.app/docs/reference/fields/image.md) documents the same `0`-means-width-only convention from the Strife Studio / raw-JSON side.

## Output type

`Image`, or `Record<string, Image>` when `localizable: true`.

## See also

* [Image](https://strife.app/docs/reference/fields/image.md) — the same editor, documented from the Strife Studio UI side.
* [`fields.imageGroup()`](https://strife.app/docs/reference/field-reference/fields.imagegroup.md) — multiple named image slots in one field.

---

# fields.imageGroup()

Source: https://strife.app/docs/reference/field-reference/fields.imagegroup

Multiple named image slots in one field. Not localizable in v1.

Multi-image group. Maps to editor `{ name: 'str-image-group', type: 'image-group' }`. Output is the canonical `ImageGroup` from `@strifeapp/types` — a slot-name-keyed map of `Image`, one entry per slot defined in `medias`.

## Example

```ts
fields.imageGroup({
  label: 'Hero media',
  medias: [
    { name: 'desktop', width: 1920, height: 1080 },
    { name: 'mobile', width: 750, height: 1000 },
  ],
})
```

## Options

| Option         | Type                                                | Required | Description                                                    |
| -------------- | --------------------------------------------------- | -------- | -------------------------------------------------------------- |
| `label`        | `string`                                            | Yes      | Label shown to editors in Strife Studio.                       |
| `medias`       | `{ name: string; width: number; height: number }[]` | Yes      | The named media slots — one entry per asset the group expects. |
| `description`  | `string`                                            | No       | Tooltip shown to editors.                                      |
| `searchable`   | `boolean`                                           | No       | Include in the team's search index.                            |
| `filterable`   | `boolean`                                           | No       | Allow filtering content lists by this value.                   |
| `protected`    | `boolean`                                           | No       | Restrict editing to users with the appropriate permission.     |
| `propertyName` | `string`                                            | No       | Override the stored property name.                             |
| `paddingColor` | `string \| null`                                    | No       | Background color used when padding to fit target dimensions.   |
| `paddingAlpha` | `number \| null`                                    | No       | Padding background opacity.                                    |
| `hideAlt`      | `boolean`                                           | No       | Hide the alt-text input in the editor.                         |

> [!NOTE]
> Image groups are not localizable in v1 — slot definitions are global across locales, and there's no `localizable` option. If you need per-locale image variants, repeat the group on a localizable parent, or use multiple `fields.image()` fields instead.

## Output type

`ImageGroup` (slot name → `Image`).

## See also

* [Image Group](https://strife.app/docs/reference/fields/image-group.md) — the same editor, documented from the Strife Studio UI side.

---

# fields.chapters()

Source: https://strife.app/docs/reference/field-reference/fields.chapters

Repeatable nested-content list, each item shaped by a content template.

Repeatable nested-content list. Maps to editor `{ name: 'str-chapters', type: 'chapters' }`. Each item is itself shaped by one of the content templates named in `allow`.

## Example

```ts
fields.chapters({
  label: 'Sections',
  allow: ['hero', 'text-block', 'gallery'],
  size: 20,
})
```

## Options

| Option         | Type             | Required | Description                                                                                                                                              |
| -------------- | ---------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `label`        | `string`         | Yes      | Label shown to editors in Strife Studio.                                                                                                                 |
| `description`  | `string`         | No       | Tooltip shown to editors.                                                                                                                                |
| `localizable`  | `boolean`        | No       | When `true`, output is `Record<string, unknown[]>` — one chapter list per locale. Real Strife templates use this for locale-specific aside sections etc. |
| `searchable`   | `boolean`        | No       | Include in the team's search index.                                                                                                                      |
| `filterable`   | `boolean`        | No       | Allow filtering content lists by this value.                                                                                                             |
| `protected`    | `boolean`        | No       | Restrict editing to users with the appropriate permission.                                                                                               |
| `propertyName` | `string`         | No       | Override the stored property name.                                                                                                                       |
| `allow`        | `string[]`       | No       | Allowed content-template names (`type: 'content'`) for items. Omit to allow any.                                                                         |
| `hint`         | `string \| null` | No       | Display hint shown above the chapters list in the editor.                                                                                                |
| `size`         | `number \| null` | No       | Maximum number of items.                                                                                                                                 |

> [!NOTE]
> **v1 limitation:** the output type is `unknown[]` (or `Record<string, unknown[]>` when localizable) regardless of what's in `allow`. Recursive type inference — resolving each chapter item to its own template's generated interface — isn't implemented yet; cast the array to the expected item shape after `Infer<>` if you need it typed.

## Output type

`unknown[]`, or `Record<string, unknown[]>` when `localizable: true`.

## See also

* [Chapters](https://strife.app/docs/reference/fields/chapters.md) — the same editor, documented from the Strife Studio UI side.
* [`fields.contentTemplate()`](https://strife.app/docs/reference/field-reference/fields.contenttemplate.md) — embeds a single content template inline instead of a repeatable list.

---

# fields.contentTemplate()

Source: https://strife.app/docs/reference/field-reference/fields.contenttemplate

Embeds a single content template's fields inline.

Embeds a single content template's editors inline. Maps to editor `{ name: 'str-content-template', type: 'content-template' }`. The stored value is the embedded template's data object.

## Example

```ts
fields.contentTemplate({
  label: 'Call to action',
  template: 'cta-block',
})
```

## Options

| Option         | Type      | Required | Description                                                                                                                                                                                                                              |
| -------------- | --------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `label`        | `string`  | Yes      | Label shown to editors in Strife Studio.                                                                                                                                                                                                 |
| `template`     | `string`  | Yes      | The `defineType` name of the content template to embed. Compiled to wire `attributes.templateId` as the template's normalized (kebab-cased) name — the frontend resolves it by `normalizedName`, so no server-assigned GUID is required. |
| `description`  | `string`  | No       | Tooltip shown to editors.                                                                                                                                                                                                                |
| `searchable`   | `boolean` | No       | Include in the team's search index.                                                                                                                                                                                                      |
| `filterable`   | `boolean` | No       | Allow filtering content lists by this value.                                                                                                                                                                                             |
| `protected`    | `boolean` | No       | Restrict editing to users with the appropriate permission.                                                                                                                                                                               |
| `propertyName` | `string`  | No       | Override the stored property name.                                                                                                                                                                                                       |

No `localizable` option.

## Output type

`unknown` from a bare `Infer<>` on the type that declares it — [`strife typegen`](https://strife.app/docs/reference/cli/typegen.md) resolves `template` to the embedded type's actual generated interface, so the _generated_ read type is correctly typed even though the DSL-level `Infer<>` isn't (recursive item inference is a v2 concern, same as [`fields.chapters()`](https://strife.app/docs/reference/field-reference/fields.chapters.md)).

## See also

* [Content Template](https://strife.app/docs/reference/fields/content-template.md) — the same editor, documented from the Strife Studio UI side.

---

# fields.collection()

Source: https://strife.app/docs/reference/field-reference/fields.collection

Document-collection query picker — stores a filter/sort config, not resolved documents. Note the Studio-UI editor is marked obsolete.

A document-collection picker. Maps to editor `{ name: 'str-collection', type: 'collection' }`. Stores a query-config object — which collection, its filters, sort, and `take` — surfaced as the canonical `CollectionDefinition`, **not** a resolved array of documents. The consuming app runs the query at render time.

> [!WARNING]
> **Check before using this in new schemas.** The Studio-UI Collection editor is currently marked obsolete/no-longer-supported in the Strife Studio field reference, even though `@strifeapp/schema` still fully implements `fields.collection()` and the underlying wire format/template support is unchanged. If you're starting something new, confirm with the team whether `fields.collection()` is still the intended way to build a query-driven list before relying on it — this page documents what the builder does today, not whether it's the currently recommended approach.

## Example

```ts
fields.collection({
  label: 'Latest posts',
  includeAllCollections: false,
})
```

## Options

| Option                  | Type      | Required | Description                                                                                                                                 |
| ----------------------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| `label`                 | `string`  | Yes      | Label shown to editors in Strife Studio.                                                                                                    |
| `description`           | `string`  | No       | Tooltip shown to editors.                                                                                                                   |
| `searchable`            | `boolean` | No       | Include in the team's search index.                                                                                                         |
| `filterable`            | `boolean` | No       | Allow filtering content lists by this value.                                                                                                |
| `protected`             | `boolean` | No       | Restrict editing to users with the appropriate permission.                                                                                  |
| `propertyName`          | `string`  | No       | Override the stored property name.                                                                                                          |
| `includeAllCollections` | `boolean` | No       | When `true`, the editor's collection picker offers every raw RavenDB collection. Default (`false`) restricts it to document templates only. |

No `localizable` option.

## Output type

`CollectionDefinition` (the query config — collection name, filters, sort, `take`). Your frontend/SDK runs this query to get actual documents; the field itself never stores resolved content.

## See also

* [Collection](https://strife.app/docs/reference/fields/collection.md) — the same editor, documented from the Strife Studio UI side (marked obsolete there).

---

# fields.repeatable()

Source: https://strife.app/docs/reference/field-reference/fields.repeatable

A repeatable list of a single primitive editor. Feature-gated per team.

A repeatable list of a single inner editor. Maps to editor `{ name: 'str-repeatable', type: 'repeatable' }`, with `of` compiled to the inner editor id in `options.availableTypes`.

> [!WARNING]
> The repeatable editor is feature-gated per team — confirm it's enabled before relying on it in a schema you plan to push.

## Example

```ts
fields.repeatable({
  label: 'Tags',
  of: 'text',
  size: 10,
})
```

## Options

| Option         | Type                                                   | Required | Description                                                |
| -------------- | ------------------------------------------------------ | -------- | ---------------------------------------------------------- |
| `label`        | `string`                                               | Yes      | Label shown to editors in Strife Studio.                   |
| `of`           | `'text' \| 'number' \| 'date' \| 'datetime' \| 'link'` | Yes      | The editor repeated for each row.                          |
| `description`  | `string`                                               | No       | Tooltip shown to editors.                                  |
| `searchable`   | `boolean`                                              | No       | Include in the team's search index.                        |
| `filterable`   | `boolean`                                              | No       | Allow filtering content lists by this value.               |
| `protected`    | `boolean`                                              | No       | Restrict editing to users with the appropriate permission. |
| `propertyName` | `string`                                               | No       | Override the stored property name.                         |
| `size`         | `number \| null`                                       | No       | Maximum number of rows.                                    |
| `hint`         | `string \| null`                                       | No       | Display hint shown above the list in the editor.           |

No `localizable` option.

## Output type

Depends on `of`: `number` → `number[]`, `link` → `Link[]`, everything else (`text`, `date`, `datetime`) → `string[]`.

## See also

* [Repeatable](https://strife.app/docs/reference/fields/repeatable.md) — the same editor, documented from the Strife Studio UI side.
* [`fields.multiInput()`](https://strife.app/docs/reference/field-reference/fields.multiinput.md) — a similar repeatable-primitive shape with a different editor and a wider set of input types.

---

# fields.select()

Source: https://strife.app/docs/reference/field-reference/fields.select

Single- or multi-select combo-box dropdown. Always stores an array of {value, name} objects.

Single- or multi-select dropdown. Maps to editor `{ name: 'str-combo-box', type: 'combo-box' }` — the underlying editor is a combo-box that supports both modes; the DSL surface is named `select` to match plan vocabulary.

The combo-box editor stores an **array** of `{ value, name }` objects — even a single selection is `[{ value, name }]`. `multiSelect` only changes how many items can be picked, never the stored shape.

## Example

```ts
fields.select({
  label: 'Status',
  options: [
    { name: 'Draft', value: 'draft' },
    { name: 'Published', value: 'published' },
  ] as const,
})
// _output: { value: 'draft' | 'published'; name: string }[]
```

## Options

| Option         | Type                                                                               | Required | Description                                                                                           |
| -------------- | ---------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------- |
| `label`        | `string`                                                                           | Yes      | Label shown to editors in Strife Studio.                                                              |
| `options`      | `{ name: string; value: string; color?: string \| null; icon?: string \| null }[]` | Yes      | The selectable choices. Use `as const` (or rely on the generic) to narrow `value` to a literal union. |
| `description`  | `string`                                                                           | No       | Tooltip shown to editors.                                                                             |
| `searchable`   | `boolean`                                                                          | No       | Include in the team's search index.                                                                   |
| `filterable`   | `boolean`                                                                          | No       | Allow filtering content lists by this value.                                                          |
| `protected`    | `boolean`                                                                          | No       | Restrict editing to users with the appropriate permission.                                            |
| `propertyName` | `string`                                                                           | No       | Override the stored property name.                                                                    |
| `multiSelect`  | `boolean`                                                                          | No       | Allow selecting more than one option.                                                                 |
| `defaultValue` | one of `options[].value`                                                           | No       | Preselected value.                                                                                    |
| `placeholder`  | `string \| null`                                                                   | No       | Placeholder text for the search field.                                                                |
| `icon`         | `string \| null`                                                                   | No       | Icon shown before the selected value.                                                                 |

> [!NOTE]
> The Studio-UI Combo Box editor also has an "External source" option (fetch options from an external URL). `fields.select()` doesn't expose this yet — `options` must be a literal array today.

No `localizable` option.

## Output type

`{ value: string; name: string }[]` — `value` narrowed to the literal union of `options[].value` when declared `as const`.

## See also

* [Combo Box](https://strife.app/docs/reference/fields/combo-box.md) — the same editor, documented from the Strife Studio UI side.
* [`fields.multiSelect()`](https://strife.app/docs/reference/field-reference/fields.multiselect.md) — a _different_ editor that stores just the selected `value`s, not `{value, name}` objects.

---

# fields.multiSelect()

Source: https://strife.app/docs/reference/field-reference/fields.multiselect

Multi-select field storing a plain array of selected values (distinct from select with multiSelect true).

Multiple-choice selection. Maps to editor `{ name: 'str-multi-select', type: 'multi-select' }`.

Distinct from [`fields.select({ multiSelect: true })`](https://strife.app/docs/reference/field-reference/fields.select.md): a multi-select combo-box stores `{ value, name }` objects, whereas this editor stores a **plain array of the selected `value` strings**.

## Example

```ts
fields.multiSelect({
  label: 'Tags',
  options: [
    { name: 'News', value: 'news' },
    { name: 'Product', value: 'product' },
  ] as const,
})
// _output: ('news' | 'product')[]
```

## Options

| Option         | Type                                                        | Required | Description                                                      |
| -------------- | ----------------------------------------------------------- | -------- | ---------------------------------------------------------------- |
| `label`        | `string`                                                    | Yes      | Label shown to editors in Strife Studio.                         |
| `options`      | `{ name: string; value: string; color?: string \| null }[]` | Yes      | The selectable choices.                                          |
| `description`  | `string`                                                    | No       | Tooltip shown to editors.                                        |
| `searchable`   | `boolean`                                                   | No       | Include in the team's search index.                              |
| `filterable`   | `boolean`                                                   | No       | Allow filtering content lists by this value.                     |
| `protected`    | `boolean`                                                   | No       | Restrict editing to users with the appropriate permission.       |
| `propertyName` | `string`                                                    | No       | Override the stored property name.                               |
| `placeholder`  | `string \| null`                                            | No       | Placeholder text for the selection field.                        |
| `switches`     | `boolean`                                                   | No       | Render selected values as check-mark switches rather than chips. |

No `localizable` option.

## Output type

`O[number]['value'][]` — the array of selected option-value literals (a plain `string[]`-shaped array narrowed to the option values).

## See also

* [Multi Select](https://strife.app/docs/reference/fields/multi-select.md) — the same editor, documented from the Strife Studio UI side.
* [`fields.select()`](https://strife.app/docs/reference/field-reference/fields.select.md) — stores `{value, name}` objects instead of bare values; also supports single-select.

---

# fields.labels()

Source: https://strife.app/docs/reference/field-reference/fields.labels

Pick from the team's labels, organized by group for browsing — the same picker used for the built-in labels base property.

Pick from the team's labels. Maps to editor `{ name: 'str-multi-select', type: 'label' }`.

Renders the same grouped picker as the built-in `labels` base property every document
already has (submenus per label group, plus an ungrouped section) — this builder adds an
**additional**, independently-valued field of the same kind, not a replacement for
`labels`. There is no group-restriction option: like the base-properties field, it always
offers every one of the team's labels.

## Example

```ts
fields.labels({ label: 'Topics' })
// _output: string[]
```

## Options

| Option         | Type      | Required | Description                                                |
| -------------- | --------- | -------- | ----------------------------------------------------------- |
| `label`        | `string`  | Yes      | Label shown to editors in Strife Studio.                    |
| `description`  | `string`  | No       | Tooltip shown to editors.                                   |
| `searchable`   | `boolean` | No       | Include in the team's search index.                         |
| `filterable`   | `boolean` | No       | Allow filtering content lists by this value.                |
| `protected`    | `boolean` | No       | Restrict editing to users with the appropriate permission.  |
| `propertyName` | `string`  | No       | Override the stored property name.                          |

No `options`, no group/scope setting, no `localizable` option.

## Output type

`string[]` — one string per selected label, resolved live from the team's labels: the bare
label name while the label is ungrouped, `"<group name>/<label name>"` while it's grouped
(e.g. `["Färger/Blå", "Changelog"]`). Renaming a label or group updates the value without
republishing. The same value arrives on both paths a site reads it from — the `Content/ByUrl`
index for published content (`selectFields`) and live preview (`useState` / `subscribe` in
`@strifeapp/strife`) — so one handler serves both. The stored value is the array of selected
label ids; a site never sees those. Querying, and the exact rules for grouped names:
[Label groups](https://strife.app/docs/reference/database/label-groups.md#field-level-label-pickers).

## See also

* [`fields.multiSelect()`](https://strife.app/docs/reference/field-reference/fields.multiselect.md) — a flat, ungrouped array-of-values
  picker; use this instead when the choices aren't the team's label taxonomy.

---

# fields.multiInput()

Source: https://strife.app/docs/reference/field-reference/fields.multiinput

A repeatable list of same-typed primitive values (text, number, email, date, etc).

A repeatable list of same-typed primitive values. Maps to editor `{ name: 'str-multi-input', type: 'multi-input' }`. The `inputType` (default `'text'`) controls both the UI input and the output element type.

## Example

```ts
fields.multiInput({
  label: 'Email addresses',
  inputType: 'email',
  sort: true,
})
```

## Options

| Option         | Type                                                                                                 | Required | Description                                                |
| -------------- | ---------------------------------------------------------------------------------------------------- | -------- | ---------------------------------------------------------- |
| `label`        | `string`                                                                                             | Yes      | Label shown to editors in Strife Studio.                   |
| `description`  | `string`                                                                                             | No       | Tooltip shown to editors.                                  |
| `searchable`   | `boolean`                                                                                            | No       | Include in the team's search index.                        |
| `filterable`   | `boolean`                                                                                            | No       | Allow filtering content lists by this value.               |
| `protected`    | `boolean`                                                                                            | No       | Restrict editing to users with the appropriate permission. |
| `propertyName` | `string`                                                                                             | No       | Override the stored property name.                         |
| `inputType`    | `'text' \| 'number' \| 'email' \| 'url' \| 'tel' \| 'datetime-local' \| 'date' \| 'time' \| 'month'` | No       | The repeated input's type. Default `'text'`.               |
| `sort`         | `boolean`                                                                                            | No       | Auto-sort entries as they're entered.                      |

No `localizable` option.

## Output type

`number[]` when `inputType: 'number'`; `string[]` for every other input type (dates are stored as strings).

## See also

* [Multi Input](https://strife.app/docs/reference/fields/multi-input.md) — the same editor, documented from the Strife Studio UI side.
* [`fields.repeatable()`](https://strife.app/docs/reference/field-reference/fields.repeatable.md) — a similar repeatable-primitive shape with a narrower type set (including `link`) and a different editor.

---

# fields.tableInput()

Source: https://strife.app/docs/reference/field-reference/fields.tableinput

Structured table editor with configurable columns and input types per column.

Structured table editor. Maps to editor `{ name: 'str-table-input', type: 'table-input' }`. Each row is stored as an object keyed by the camelCased header names, so the read type is `Record<string, unknown>[]`.

## Example

```ts
fields.tableInput({
  label: 'Pricing tiers',
  headers: ['Plan', 'Price', 'Seats'],
  inputTypes: ['text', 'number', 'number'],
  rowNumbers: true,
})
```

## Options

| Option           | Type       | Required | Description                                                               |
| ---------------- | ---------- | -------- | ------------------------------------------------------------------------- |
| `label`          | `string`   | Yes      | Label shown to editors in Strife Studio.                                  |
| `headers`        | `string[]` | Yes      | Column header names, one per column.                                      |
| `inputTypes`     | `string[]` | Yes      | Input type per column, parallel to `headers` (e.g. `'text'`, `'number'`). |
| `description`    | `string`   | No       | Tooltip shown to editors.                                                 |
| `searchable`     | `boolean`  | No       | Include in the team's search index.                                       |
| `filterable`     | `boolean`  | No       | Allow filtering content lists by this value.                              |
| `protected`      | `boolean`  | No       | Restrict editing to users with the appropriate permission.                |
| `propertyName`   | `string`   | No       | Override the stored property name.                                        |
| `sortable`       | `boolean`  | No       | Allow row sorting.                                                        |
| `searchableRows` | `boolean`  | No       | Show a search box over rows.                                              |
| `rowNumbers`     | `boolean`  | No       | Render a leading row-number column.                                       |
| `exportable`     | `boolean`  | No       | Allow exporting the table.                                                |

`headers` and `inputTypes` are emitted as plain JSON arrays — the editor binds them directly to the component's array props, and they must stay the same length/order (parallel arrays, not paired objects).

No `localizable` option.

## Output type

`Record<string, unknown>[]` — one object per row, keyed by camelCased header names.

## See also

* [Table Input\~](https://strife.app/docs/reference/fields/table-input.md) — the same editor, documented from the Strife Studio UI side.

---

# fields.assets()

Source: https://strife.app/docs/reference/field-reference/fields.assets

Multiple asset references, optionally restricted by kind.

Multiple asset references. Maps to editor `{ name: 'str-assets', type: 'assets' }`. Output is `Asset[]` — the canonical asset shape from `@strifeapp/types`.

## Example

```ts
fields.assets({
  label: 'Gallery',
  accept: ['image/*', 'video/*'],
  size: 12,
})
```

## Options

| Option         | Type                                     | Required | Description                                                 |
| -------------- | ---------------------------------------- | -------- | ----------------------------------------------------------- |
| `label`        | `string`                                 | Yes      | Label shown to editors in Strife Studio.                    |
| `description`  | `string`                                 | No       | Tooltip shown to editors.                                   |
| `searchable`   | `boolean`                                | No       | Include in the team's search index.                         |
| `filterable`   | `boolean`                                | No       | Allow filtering content lists by this value.                |
| `protected`    | `boolean`                                | No       | Restrict editing to users with the appropriate permission.  |
| `propertyName` | `string`                                 | No       | Override the stored property name.                          |
| `accept`       | `('image/*' \| 'video/*' \| 'file/*')[]` | No       | Restrict pickable assets to these kinds. Omit to allow all. |
| `size`         | `number \| null`                         | No       | Maximum number of assets.                                   |

> [!NOTE]
> Only the wildcard form (`'image/*'`, `'video/*'`, `'file/*'`) is accepted today — that's a deliberate placeholder for full MIME-type matching (`'image/jpeg'`, `'document/pdf'`, etc.), which the wire format doesn't support yet. At compile time each wildcard is translated to the numeric code the asset picker actually checks (`image/* → 1`, `video/* → 2`, `file/* → 3`) — there is no string-based filtering on the wire, only these three categories.

No `localizable` option.

## Output type

`Asset[]`.

## See also

* [Assets](https://strife.app/docs/reference/fields/assets.md) — the same editor, documented from the Strife Studio UI side.

---

# fields.radioGroup()

Source: https://strife.app/docs/reference/field-reference/fields.radiogroup

Single-choice radio group, displayed as a tab-style layout. No default-value option today.

Single-choice radio group. Maps to editor `{ name: 'str-radio-group', type: 'str-radio-group' }` — note this is one of the few editors where the wire `name` and `type` are the same string. Output is the literal union of `options[].value` — the same `<const O>` pattern as [`fields.select()`](https://strife.app/docs/reference/field-reference/fields.select.md), but always single-value (no multi mode).

## Example

```ts
fields.radioGroup({
  label: 'Layout',
  options: [
    { name: 'Grid', value: 'grid', icon: 'grid' },
    { name: 'List', value: 'list', icon: 'list' },
  ] as const,
})
// _output: 'grid' | 'list'
```

## Options

| Option         | Type                                               | Required | Description                                                |
| -------------- | -------------------------------------------------- | -------- | ---------------------------------------------------------- |
| `label`        | `string`                                           | Yes      | Label shown to editors in Strife Studio.                   |
| `options`      | `{ name: string; value: string; icon?: string }[]` | Yes      | The radio choices.                                         |
| `description`  | `string`                                           | No       | Tooltip shown to editors.                                  |
| `searchable`   | `boolean`                                          | No       | Include in the team's search index.                        |
| `filterable`   | `boolean`                                          | No       | Allow filtering content lists by this value.               |
| `protected`    | `boolean`                                          | No       | Restrict editing to users with the appropriate permission. |
| `propertyName` | `string`                                           | No       | Override the stored property name.                         |

No `localizable` option.

> [!WARNING]
> The Studio-UI Radio Group reference lists a "Default value" setting, and the underlying wire format does support a `defaultValue` on the editor. `fields.radioGroup()` does **not** currently expose a `defaultValue` option — there's no way to set one from the DSL today. If you need a preselected value, set it directly on the template in Strife Studio after pushing (with the same reset-on-next-push caveat as other Studio-only settings).

## Output type

`O[number]['value']` — the literal union of `options[].value`.

## See also

* [Radio Group](https://strife.app/docs/reference/fields/radio-group.md) — the same editor, documented from the Strife Studio UI side.

---

# fields.link()

Source: https://strife.app/docs/reference/field-reference/fields.link

Hyperlink reference, either internal (document) or external.

Hyperlink reference. Maps to editor `{ name: 'str-link', type: 'link' }`. Output is the canonical `Link` from `@strifeapp/types`.

## Example

```ts
fields.link({
  label: 'CTA link',
  localizable: true,
})

fields.link({
  label: 'Download URL',
  linkOnly: true,
})
```

## Options

| Option         | Type      | Required | Description                                                                                                                |
| -------------- | --------- | -------- | -------------------------------------------------------------------------------------------------------------------------- |
| `label`        | `string`  | Yes      | Label shown to editors in Strife Studio.                                                                                   |
| `description`  | `string`  | No       | Tooltip shown to editors.                                                                                                  |
| `localizable`  | `boolean` | No       | When `true`, output is `Record<string, Link>` instead of `Link`.                                                           |
| `searchable`   | `boolean` | No       | Include in the team's search index.                                                                                        |
| `filterable`   | `boolean` | No       | Allow filtering content lists by this value.                                                                               |
| `protected`    | `boolean` | No       | Restrict editing to users with the appropriate permission.                                                                 |
| `propertyName` | `string`  | No       | Override the stored property name.                                                                                         |
| `linkOnly`     | `boolean` | No       | When `true`, the editor shows only the URL field (no link-text input). Use for href-only references like download buttons. |

## Output type

`Link`, or `Record<string, Link>` when `localizable: true`. `href`/`target` are always present; `id` is set only for internal-document links (the content index resolves `href` from it); `text` is absent when `linkOnly: true`.

## See also

* [Link](https://strife.app/docs/reference/fields/link.md) — the same editor, documented from the Strife Studio UI side.

---

# fields.serp()

Source: https://strife.app/docs/reference/field-reference/fields.serp

SEO metadata block (title, keywords, description). No searchable or filterable option, unlike most other fields.

SEO metadata block. `compile()` maps it to a single `str-serp` editor, so the content index returns one object under the field's property. Output is the canonical `Serp` from `@strifeapp/types` — `{ title, keywords, description }`.

SERP fields are typically per-locale, so `localizable: true` is the common case — each locale gets its own title/description.

## Example

```ts
fields.serp({
  label: 'SEO',
  localizable: true,
})
```

## Options

| Option         | Type      | Required | Description                                                                                     |
| -------------- | --------- | -------- | ----------------------------------------------------------------------------------------------- |
| `label`        | `string`  | Yes      | Label shown to editors in Strife Studio.                                                        |
| `description`  | `string`  | No       | Tooltip shown to editors.                                                                       |
| `localizable`  | `boolean` | No       | When `true`, output is `Record<string, Serp>` instead of `Serp`. Usually `true` for this field. |
| `protected`    | `boolean` | No       | Restrict editing to users with the appropriate permission.                                      |
| `propertyName` | `string`  | No       | Override the stored property name.                                                              |

> [!WARNING]
> Unlike almost every other builder, `SerpOptions` has **no `searchable` or `filterable` option**. This isn't an oversight to work around — it's simply not implemented — but it does mean you can't make SEO title/description searchable or filterable from the DSL today.

When **Strife Intelligence** is enabled on the team, the Studio editor auto-generates title/description suggestions from the document's content. This is Studio-UI behavior with no corresponding DSL option — it's automatic based on team configuration, not something you toggle per-field.

## Output type

`Serp` (`{ title, keywords, description }`), or `Record<string, Serp>` when `localizable: true`.

## See also

* [Serp](https://strife.app/docs/reference/fields/serp.md) — the same editor, documented from the Strife Studio UI side.

---

# fields.reference()

Source: https://strife.app/docs/reference/field-reference/fields.reference

Reference to other Strife documents, scoped by target type(s). Not localizable.

Reference to other Strife documents. Maps to editor `{ name: 'str-related', type: 'related' }`. Not localizable — the content index never treats relations as per-locale scalars.

Stored as an array of `{ id, displayName }` — the `Infer<>` / write shape (`ContentRef[]`). At **read** time the content index projects each reference into the full target document, so [`strife typegen`](https://strife.app/docs/reference/cli/typegen.md) emits `Target[]` instead.

## Example

```ts
fields.reference({
  label: 'Author',
  to: 'author',
})

fields.reference({
  label: 'Related posts',
  to: ['article', 'video-post'],
  multiple: true,
})
```

## Options

| Option         | Type                          | Required | Description                                                                                                                                                                                                                                       |
| -------------- | ----------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `label`        | `string`                      | Yes      | Label shown to editors in Strife Studio.                                                                                                                                                                                                          |
| `to`           | `string \| readonly string[]` | Yes      | The `defineType` name(s) this reference may point to. Resolves to the editor's `allowedCollections` via the default collection rule (`toPlural(toPascalCase(name))`) and drives the generated read type (`Target[]`).                             |
| `description`  | `string`                      | No       | Tooltip shown to editors.                                                                                                                                                                                                                         |
| `searchable`   | `boolean`                     | No       | Include in the team's search index.                                                                                                                                                                                                               |
| `filterable`   | `boolean`                     | No       | Allow filtering content lists by this value.                                                                                                                                                                                                      |
| `protected`    | `boolean`                     | No       | Restrict editing to users with the appropriate permission.                                                                                                                                                                                        |
| `propertyName` | `string`                      | No       | Override the stored property name.                                                                                                                                                                                                                |
| `multiple`     | `boolean`                     | No       | Allow selecting more than one document in the editor (wire `multiSelect`). **Defaults to `false`** — always compiled explicitly, so omitting it means single-select. Does not change the read type; the index always returns an array either way. |

> [!NOTE]
> **Studio-built templates are a separate concern.** `fields.reference()` always compiles an explicit `multiSelect: true/false`, so anything pushed through `defineType`/`strife push` is safe by default. A Related field built by hand in Strife Studio can still end up with no `multiSelect` attribute saved at all, in which case the `str-related` editor component's own default (`multiSelect = true`) applies — that's a separate frontend gap, not yet fixed, unrelated to this DSL.

> [!NOTE]
> If a target `defineType` overrides its own `collection`, the derived `allowedCollections` on this field (a picker-UI hint only) won't match it — `strife typegen validate` flags this as a warning. The generated read type is correct either way; only the Studio picker's collection scoping is affected.

## Output type

Write shape: `ContentRef[]` (`{ id, displayName? }`). Generated read shape (via `strife typegen`): `Target[]`, the fully projected target document(s).

## See also

* [Related](https://strife.app/docs/reference/fields/related.md) — the same editor, documented from the Strife Studio UI side.
* [`fields.references()`](https://strife.app/docs/reference/field-reference/fields.references.md) — a sized list scoped by allowed template names instead of by collection.

---

# fields.references()

Source: https://strife.app/docs/reference/field-reference/fields.references

Multi-template document references, sized and scoped by allowed template names. Not localizable.

Multi-template document references. Maps to editor `{ name: 'str-references', type: 'references' }`. Unlike [`fields.reference()`](https://strife.app/docs/reference/field-reference/fields.reference.md) (a single `str-related` picker scoped by collection), `references` is a sized list scoped by allowed template names.

Stored as `ContentRef[]` (the write shape); at **read** time the content index projects each entry into the full target document, so [`strife typegen`](https://strife.app/docs/reference/cli/typegen.md) emits `Target[]`.

## Example

```ts
fields.references({
  label: 'Related content',
  allow: ['article', 'video-post'],
  size: 5,
})
```

## Options

| Option         | Type                          | Required | Description                                                                                                                                                                                |
| -------------- | ----------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `label`        | `string`                      | Yes      | Label shown to editors in Strife Studio.                                                                                                                                                   |
| `allow`        | `string \| readonly string[]` | Yes      | The `defineType` name(s) this field may reference. Emitted as wire `options.availableTypes` (normalized template names) and drives the generated read type. Pass several to allow a union. |
| `description`  | `string`                      | No       | Tooltip shown to editors.                                                                                                                                                                  |
| `searchable`   | `boolean`                     | No       | Include in the team's search index.                                                                                                                                                        |
| `filterable`   | `boolean`                     | No       | Allow filtering content lists by this value.                                                                                                                                               |
| `protected`    | `boolean`                     | No       | Restrict editing to users with the appropriate permission.                                                                                                                                 |
| `propertyName` | `string`                      | No       | Override the stored property name.                                                                                                                                                         |
| `size`         | `number \| null`              | No       | Maximum number of references.                                                                                                                                                              |
| `hint`         | `string \| null`              | No       | Display hint shown above the references list in the editor.                                                                                                                                |

No `localizable` option.

## Output type

Write shape: `ContentRef[]`. Generated read shape (via `strife typegen`): `Target[]`.

## See also

* [References](https://strife.app/docs/reference/fields/references.md) — the same editor, documented from the Strife Studio UI side.
* [`fields.reference()`](https://strife.app/docs/reference/field-reference/fields.reference.md) — scoped by collection (`to`) rather than by template name (`allow`).

---

# fields.hint()

Source: https://strife.app/docs/reference/field-reference/fields.hint

UI-only informational hint box. Stores no data — omitted from the generated content type.

Informational hint box. Maps to editor `{ name: 'str-hint', type: 'hint' }`.

A hint is pure editor-UI chrome: it stores no data, so its output type is `never` and `Infer<>` omits it from the generated content interface entirely (`strife typegen generate` skips it too). Place it in `fields` — for declaration order and tab membership — like any other field.

## Example

```ts
fields.hint({
  label: 'Content guidelines',
  icon: 'info',
  collapsedText: 'Keep headings under 60 characters.',
  expandedText: 'Search engines truncate headings past ~60 characters. Keep the important words first.',
})
```

## Options

| Option          | Type             | Required | Description                                                                                                                |
| --------------- | ---------------- | -------- | -------------------------------------------------------------------------------------------------------------------------- |
| `label`         | `string`         | Yes      | The hint's header text, shown next to the icon.                                                                            |
| `description`   | `string`         | No       | Not rendered distinctly from `expandedText` in practice — prefer `collapsedText`/`expandedText` for the visible hint copy. |
| `propertyName`  | `string`         | No       | Rarely needed since hints store no data — present for consistency with other builders.                                     |
| `icon`          | `string \| null` | No       | Icon shown next to the label (icon-picker name).                                                                           |
| `collapsedText` | `string \| null` | No       | Text shown when the hint is collapsed.                                                                                     |
| `expandedText`  | `string \| null` | No       | Text shown when the hint is expanded.                                                                                      |

> [!NOTE]
> Unlike every data-storing field, `HintOptions` has **no** `searchable`, `filterable`, `protected`, or `localizable` — there's no value to search, filter, protect, or localize.

## Output type

`never` — excluded from `Infer<>` and from generated types.

## See also

* [Hint](https://strife.app/docs/reference/fields/hint.md) — the same editor, documented from the Strife Studio UI side.

---

# fields.tabs()

Source: https://strife.app/docs/reference/field-reference/fields.tabs

Structural tab-group layout. Takes an array, not an options object — the only builder shaped this way.

Tab-group layout — a structural field that _contains_ its fields (Payload-style), grouping them into tabs in the editor UI. Maps to a `{ name: 'str-tab-group', type: 'str-tab-group' }` editor (name and type match, same quirk as [`fields.radioGroup()`](https://strife.app/docs/reference/field-reference/fields.radiogroup.md)); its children are emitted as flat editors with `attributes.tabGroup` membership.

> [!WARNING]
> `fields.tabs()` doesn't take an options object at all — its only parameter is the array of tab definitions. There's no `label`, `description`, or any of the other common options here, and the wire label is hardcoded to `"Tab group"` internally (not configurable from the DSL).

Strife stores tab data **flat** on the parent document, so the children are hoisted to the parent content shape — `Infer<>` merges them in and drops the tabs field itself. There is no named-tab data nesting in Strife.

## Example

```ts
fields: {
  tabGroup: fields.tabs([
    {
      label: 'Content',
      fields: { heading: fields.text({ label: 'Heading' }) },
    },
    {
      label: 'SEO',
      fields: { meta: fields.serp({ label: 'SEO' }) },
    },
  ]),
}
// Infer<> → { heading: string; meta: Serp }  — the `tabGroup` key itself doesn't appear
```

## Parameter

`fields.tabs(defs)` takes a single array parameter, `defs: TabDef[]`:

| `TabDef` field | Type                              | Required | Description                                                                                                         |
| -------------- | --------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
| `label`        | `string`                          | Yes      | Tab label shown to editors.                                                                                         |
| `fields`       | `Record<string, FieldDescriptor>` | Yes      | The fields shown under this tab. Hoisted flat into the parent content shape — same rules as any other `fields` map. |
| `description`  | `string`                          | No       | Optional text shown inside the tab, above its fields.                                                               |
| `value`        | `string`                          | No       | Wire value / id for the tab. Defaults to the slugified label.                                                       |

## Output type

`never` for the `tabs()` field itself (it carries no data of its own). Its children's output types are hoisted into the parent's `Infer<>` shape directly — a field declared inside a tab reads exactly the same as if it were declared at the top level of `fields`.

## See also

* [Tab Group](https://strife.app/docs/reference/fields/tab-group.md) — the same editor, documented from the Strife Studio UI side.

---

# Live preview

Source: https://strife.app/docs/reference/live-preview

Live Preview allows editors to instantly visualize changes on the live website as they edit content within Strife Studio.

To enable live preview, import the Strife package to let Strife know that you are ready to receive updates from the Strife Studio.

### Use npm

Live preview is available as the `@strifeapp/strife` package via npm.

```bash
npm install @strifeapp/strife
```

Then import the Strife SDK

Import in script file

```javascript
import '@strifeapp/strife';
```

Import in HTML

```html
<script src="@strifeapp/strife"></script>
```

### Use CDN

The Live Preview package is also available via CDN.

```html
<script type="module" src="https://unpkg.com/@strifeapp/strife"></script>
```

> [!NOTE]
> Once you have activated the live preview choose between using [Strife Web Components ](https://strife.app/docs/reference/live-preview/web-components.md)or building your own [custom live preview implementation](https://strife.app/docs/reference/live-preview/custom-live-preview-implementation.md) to receive and update content.

### Full-height preview (Chrome 154+)

Strife Studio shows your page at its full height. By default the SDK measures the page and reports the height; in browsers that support [responsive iframes](https://developer.chrome.com/blog/responsive-iframes) (Chrome 154+) the browser sizes the preview frame from your page's own layout instead. That needs one line in your page's `<head>` — it is ignored once `<body>` has opened:

```html
<meta name="responsive-embedded-sizing" content="allow-origins=*" />
```

`@strifeapp/astro`'s `<LivePreview />` adds it for you in edit mode. You can narrow `allow-origins` to Strife Studio's origin. Without the tag, or in other browsers, the SDK's own measurement is used as before.

### Accessibility in the preview

While a page is open in Strife Studio's live preview, `@strifeapp/astro`'s [`<Insights />`](https://www.npmjs.com/package/@strifeapp/astro) (see "Telemetry" in the package's README) runs an [axe-core](https://github.com/dequelabs/axe-core) accessibility audit on it and the preview SDK hands the result to Studio. The preview toolbar then shows the number of failing rules; opening it lists every rule by impact (critical, serious, moderate, minor) with its explanation, a link to the guideline and the failing elements — hover one to see it outlined in the preview, and click one to open the field it renders (the SDK names each element by its `data-field` or the stega code in its text, the same answer the hover highlight uses). The audit runs at page load, again 1.5 s after your last edit, and on the panel's rerun button.

The page never sends the audit anywhere itself: Studio stores the result of the page load and of the rerun button, per locale, for the content list's Accessibility filter. A site without `<Insights />` reports nothing and Studio shows no button. Requires `@strifeapp/astro` 1.9.0 and `@strifeapp/strife` 1.16.0.

### Performance in the preview

The preview SDK also measures what the page weighs, after it loads and again after each edit (once the new images have loaded). It needs nothing from the site. It checks the images and third-party embeds against a budget: total image weight, one heavy image, images loaded eagerly, images far larger than they are drawn, and embeds. The preview toolbar shows the page's level (Poor, Needs improvement or Great) in its own tool, with the findings split into **Your content** and **Template and code**.

An image or embed counts as content when it renders a field (its `data-field`, or the stega code in its `alt` or text). Everything else is the template's. Only content findings set the level, so a heavy image in your layout never marks every page Poor. Checks only a developer can fix (missing `width`/`height`, JPEG or PNG instead of AVIF or WebP, page weight, number of requests) are always listed under Template and code.

Sizes come from the browser's Resource Timing. A cross-origin image discloses its size only when its response carries `Timing-Allow-Origin`; without it the size is estimated from the image's pixels and format, and the panel marks it ≈. Requires `@strifeapp/strife` 1.17.0.

### Troubleshooting

**Live preview doesn't load when running my site locally.** When Strife Studio (a public HTTPS site) loads your local dev server (`http://localhost:...`) inside its preview panel, your browser's local-network-access protection kicks in — this is standard browser security, unrelated to Strife, and not a mixed-content (HTTPS/HTTP) issue (`localhost` over plain HTTP has long been exempt from that). The prompt looks different per browser:

* **Safari** shows a dialog asking to allow the Studio domain to access your "loopback network."
* **Chrome** doesn't prompt at all — instead, click the site info icon (the padlock) next to the address bar while on Strife Studio and enable **Apps on device**.

If live preview silently doesn't work and no permission dialog ever appeared, this is the most likely cause — check your browser's site permissions directly rather than waiting for a prompt.

---

# Web Components

Source: https://strife.app/docs/reference/live-preview/web-components

The Strife Web Components are a collection of custom elements that elevate standard HTML tags, enabling them to respond to real-time updates, without the need to reload the page.

> [!NOTE]
> Prior to utilizing Strife Web Components, please ensure that you've followed the [setup guide for installing Live Preview](https://strife.app/docs/reference/live-preview.md).

Utilizing Strife Web Components is a straightforward process that doesn't demand extra markup on your page. Use the attributes below in your existing markup where you want to display your content.

<table><thead><tr><th width="182">Attribute</th><th>Description</th></tr></thead><tbody><tr><td><code>is</code></td><td>The name of the Strife Web Component to use, see below for a complete list.</td></tr><tr><td><code>data-field</code></td><td>The field name that corresponds to the property name storing the value in the database.</td></tr><tr><td><code>data-type</code></td><td>Sopecifies the field type, e.g. 'chapters', 'html', ...</td></tr></tbody></table>

Basically, you 'enhance' your standard HTML tag by merely adding the "str-" prefix to the tag name and utilizing it in the 'is' attribute.

This is an example using the `H1` tag:

```html
<h1 is="str-h1" data-field="heading">Hello, world!</h1>
```

Explore the comprehensive list of Web Components grouped into _Text_, _Container_, and _Custom_ categories. Our aim is to provide a web component for every tag used in content rendering.

> [!NOTE]
> Also ensure that Strife Web Components are compatible with the field used in the template. For more information, refer to the [Field reference page](https://strife.app/docs/reference/fields.md).

### Text Components

The Strife Web Components in this category exclusively replace the `textContent` of the corresponding HTML element. Below is a compilation of Strife Web Components falling under the 'text' category:

```
'str-address', 'str-p', 'str-span', 'str-strong', 'str-h1', 'str-h2', 'str-h3', 'str-h4', 'str-h5', 'str-h6', 'str-abbr', 'str-b', 'str-button', 'str-cite', 'str-code', 'str-dfn', 'str-em', 'str-i', 'str-label', 'str-mark', 'str-q', 'str-sub', 'str-sup'
```

### Container Components

Container components replace the `innerHTML` of their corresponding HTML element. Here is a list of all available container Strife Web Components.

```
'str-div', 'str-ul', 'str-ol', 'str-section', 'str-header', 'str-footer', 'str-nav', 'str-article', 'str-main', 'str-aside', 'str-blockquote'
```

### Custom Components

Some Strife Web Components are tailored to work exclusively with specific fields in the template and are not compatible with others. These specialized components include:

```
'str-anchor', 'str-img', 'str-picture', 'str-time'
```

Some of them come with additional attributes beyond the `is` and `data-field` attributes. Explore these below.

<table><thead><tr><th width="152.33333333333331">Component</th><th width="159">Attribute</th><th>Description</th></tr></thead><tbody><tr><td><code>str-time</code></td><td><code>data-format</code></td><td>Specifies the date format for displaying the date. E.g. <code>yyyy-MM-dd</code></td></tr></tbody></table>

---

# Custom Live Preview implementation

Source: https://strife.app/docs/reference/live-preview/custom-live-preview-implementation

No matter what front-end framework you are using, you can build your own hook using the same underlying tooling that Strife provides.

First, install the `@strifeapp/strife` base package:

```bash
npm install @strifeapp/strife
```

This packages provides you with the following functions:

| Path        | Description                                                                                                 |
| ----------- | ----------------------------------------------------------------------------------------------------------- |
| `subscribe` | Subscribes to the the Strife studio's `window.postMessage` events and calls the provided callback function. |

The `subscribe` function takes the following arg:

| Path       | Description                                                                                 |
| ---------- | ------------------------------------------------------------------------------------------- |
| `callback` | A callback function that is called with `data` every time a change is made to the document. |

With this function, you can build your own hook using your front-end framework of choice:

```javascript
import { subscribe } from '@strifeapp/strife'

const onChange = (data) => { ... }
const unsubscribe = subscribe(onChange);
// To unsubscribe, call `unsubscribe();`

// To build your own hook, subscribe to Live Preview events using the`subscribe` function
// It handles everything from:
// 1. Listening to `window.postMessage` events
// 2. Calling the `onChange` callback with the result
// Your hook should also:
// 1. Handle the results of the `onChange` callback to update the UI
// 2. Unsubscribe from the `window.postMessage` events when it unmounts
```

#### Callback data shape

The `data` argument passed to your callback is a plain object representing the current document state, keyed by each editor's `propertyName`. For a template defined as:

```typescript
const Homes: Template = {
  displayName: 'Home',
  collection: 'Homes',
  editors: [
    { label: 'Heading',     editor: { name: 'str-input',    type: 'text', propertyName: 'heading' } },
    { label: 'Description', editor: { name: 'str-textarea', type: 'text', propertyName: 'description' } },
  ],
};
```

the callback receives:

```typescript
subscribe((data) => {
  // data.heading: string        — current value of the Heading editor
  // data.description: string    — current value of the Description editor
});
```

Every editor's `propertyName` becomes a top-level key on `data`. Nested types (e.g. objects from `str-image-group` or arrays from `str-multi-select`) follow the same shape as they appear in the stored document.

#### Hover highlighting and `stegaClean`

While a document is open in the editor's live preview, moving the pointer over your page outlines the element under it on the page, and a click on it opens the matching field in the editor: the tab it sits on, the chapter it belongs to, an image's editing card. To make that work for a site that renders the state itself, the editor hides each text field's path **inside the text value** as zero-width characters (the same technique as Vercel's Content Link and Sanity's Visual Editing). They carry no glyph and no width, HTML escaping leaves them alone, and a published site never receives them: only the editor's preview sends them.

They are still characters, so a comparison against a preview value can fail:

```javascript
import { subscribe, stegaClean } from '@strifeapp/strife'

subscribe((data) => {
  data.heading === 'Welcome';             // false in the preview: the value starts with the hidden path
  stegaClean(data.heading) === 'Welcome'; // true
  const clean = stegaClean(data);         // a deep copy with every hidden path removed
});
```

Use `stegaClean` on any preview value you compare, match a route against, or measure (`length`). Values a site is likely to compare are never encoded to begin with: slugs, dates, numbers, option codes of pickers and radio groups, labels, keywords and SEO fields. Only text, textarea and rich text values carry a path, plus an image's `alt` text (its URL is never touched).

Rendering needs no change: print the values as they come, and the pointer resolves the field from the text under it, or from an image's `alt` attribute. A click keeps its effect on your page — nothing is prevented. If your components already carry `data-field` attributes (the SDK's own web components do), those win over the hidden path.

| Path          | Description                                                                                          |
| ------------- | ---------------------------------------------------------------------------------------------------- |
| `stegaClean`  | Removes the hidden field paths from a string, or recursively from an array or plain object.          |
| `stegaDecode` | Returns the field path hidden in a string, or `null`. Useful for building your own hover affordance. |

#### Initialization timing

Strife Studio performs a handshake with the preview iframe at page load. For `subscribe` to receive events, the SDK must be present in the page **before** that handshake completes — meaning before your framework has finished hydrating client components.

Load the SDK eagerly at the top of your application, via either of these patterns:

**npm install + import in your entry-point** (recommended for build-tool projects):

```js
// src/main.js (or main.ts, index.js, wherever your app boots)
import "@strifeapp/strife";
```

**CDN tag in your HTML `<head>`** (simplest when you don't have a build step):

```html
<script type="module" src="https://unpkg.com/@strifeapp/strife"></script>
```

Components can then import `subscribe` as normal — the ESM module is cached and resolves to the already-initialized singleton.

---

# Working with images

Source: https://strife.app/docs/reference/live-preview/custom-live-preview-implementation/working-with-images

To get rich Live Preview of `img` and `picture` elements we have created a package that makes it easy for you to build a custom implementation of Live Preview.

First, if you build a image component, install the `@strifeapp/image` and if you roll your own picture, use `@strifeapp/picture`

```bash
npm install @strifeapp/[image/picture]
```

Both packages provides you with the following function:

| Path     | Description                                                                               |
| -------- | ----------------------------------------------------------------------------------------- |
| `render` | Enables Live Preview for the image or picture component using CSS custom properties only. |

With this function, you can build your own hook using your front-end framework of choice:

```javascript
import { render } from '@strifeapp/image'

...

render([img element], state.image);

// To build your own hook, subscribe to Live Preview events using the subscribe function
// It updates the CSS variables with the zoom/crop information from the Live Preview callback
```

---

# Snapshots

Source: https://strife.app/docs/reference/snapshots

Snapshots let an editor hand someone without a Strife account a short-lived URL that shows a frozen, unpublished version of a document on your own site.

An editor creates a **snapshot** (that is what the Studio calls it) from a document's draft — or, from the History drawer, from a previously published version or the page as it is live right now (see [Creating a snapshot from a published version](#creating-a-snapshot-from-a-published-version)). Strife freezes a copy of that content — every language included — into a *snapshot* with a secret token, and the link points at your site:

```
{origin}{locale root prefix}/snapshot/{token}
```

For example `https://example.com/snapshot/k3m9x2qa` or, on a single-host site with a `/sv/` root, `https://example.com/sv/snapshot/k3m9x2qa`. The origin is the site address configured for the language the editor was viewing; the prefix is the root path segment your public URLs already carry for that language (empty on host-per-locale sites); the token segment is the only new path. A token is 8 lowercase letters or digits (`[a-z0-9]{8}`), minted by a cryptographic random generator and never derived from the document id; Strife checks it is unused on the team before creating the snapshot, because the site path is team-wide.

**What kind of secret the token is.** 36⁸ ≈ 41 bits makes a snapshot an *unlisted link* — the same class as an unlisted video or a file-sharing link — not a cryptographic secret. That is a deliberate trade for a link people can read out and type. It holds because the only way to test a guess is a request to your site that answers 200 or 404 (there is nothing to attack offline), a snapshot lives at most 7 days, and a guessed token exposes exactly one frozen page. Two things on your side keep it that way: answer every miss — unknown, expired, revoked, malformed — with the same ordinary not-found (both SDKs do), and keep `/snapshot/*` out of anything that would enumerate or cache it (see [Headers, caching, analytics and logs](#headers-caching-analytics-and-logs)).

Your site resolves the request the way it resolves any other: the SDK matches `/snapshot/{token}` after your locale resolution, looks the snapshot up in the `Content/ByUrl` index, and renders it in your normal layout as if it were published content — navigation, surrounding content and referenced documents come from published content; only the shared document is substituted. The reviewer needs no `?token=`, and the route exposes nothing beyond the one snapshot its token names.

Every link expires **7 days** after creation (a fixed server setting, not per team), and editors can revoke one early. An expired, revoked, unknown or malformed link resolves exactly like content that does not exist: your site's ordinary not-found, with no dedicated "link expired" page.

## What you need

Snapshots are a contract between three moving parts. All three must come from the release that ships snapshots; there is no runtime flag.

| Part | Requirement | How to tell |
| --- | --- | --- |
| `@strifeapp/strife` | The release that ships snapshots, deployed with `strife push` | Its bundled `Content/ByUrl` source emits `snapshotToken` |
| `@strifeapp/astro` (Astro sites) | ≥ the version published with this feature | The package exports `@strifeapp/astro/snapshot-middleware` and `@strifeapp/astro/snapshot` |
| `Strife` NuGet package (.NET sites) | ≥ the version published with this feature | `Strife.Services.SnapshotContext` exists and `ContextService` has `GetSnapshot` |

Because the developer docs publish before the packages do, the exact version numbers are in each package's changelog; the checks in the right-hand column are the reliable test.

## Deploy the content index first

The snapshot route reads snapshot rows from the `Content/ByUrl` index, and the index only emits them when it was built from a `@strifeapp/strife` release that includes snapshots. Update the package and run [`strife push`](https://strife.app/docs/reference/cli/commands.md#strife-push) — that redeploys the index. Until that has happened on a team, Strife **refuses to create a snapshot** for it, so an old index can never map a snapshot as a public page. The editor sees a toast and nothing is created:

| Refusal (`409`, `error` in the body) | When | What the editor sees |
| --- | --- | --- |
| `snapshot_index_missing` | No `Content/ByUrl` index is deployed on the team | "This site's content index needs updating. Ask your developer to run strife push." |
| `snapshot_index_predates_snapshots` | The deployed index was built from a source without `snapshotToken` | Same toast |
| `snapshot_index_deploying` | The definition already carries `snapshotToken`, but a rolling or side-by-side replacement of the index is still in progress on the cluster | "This site's content index is still updating. Try again in a few minutes." |

The reverse is guarded too. While a team holds an active snapshot, `strife push` from an older `@strifeapp/strife` pin — one whose index source lacks `snapshotToken` — is refused with `409 snapshots_require_newer_index`, because deploying it would expose the shared drafts as public pages. Update the pin and push again, or wait until every snapshot has expired or been revoked.

## What the index emits

A snapshot is a working-copy sibling, `{id}/snapshot/{token}`, next to `/draft` and `/scheduled`, with the role-locked status `snapshot`. The index emits one row per language in the snapshot, and each row's `url` **is the snapshot path** — the origin-chain root's slug segment for that language (empty when the root slug is `/`), then `/snapshot/{token}` — built even for `disableURL` templates. No snapshot row carries the document's canonical URL. Each row carries:

| Field | Value on a snapshot row | On every other row |
| --- | --- | --- |
| `url` | The snapshot path for the row's language, e.g. `/snapshot/{token}` or `/sv/snapshot/{token}` | The page's canonical URL (or `null` for `disableURL` templates) |
| `status` | `"snapshot"` | `published`, `unpublished`, `draft`, `scheduled` |
| `draft` | `true` | `false` for published rows |
| `snapshotToken` | The token from the id | `null` |
| `snapshotName` | The editor-given name (or the server's "Snapshot N" fallback); plain text | `null` |
| `expiresAt` | UTC round-trip string ending in `Z` | `null` |
| `snapshotLocale` | The language the editor was viewing when sharing — the one the link targets | `null` |

Because snapshot rows carry `draft: true` and `status: "snapshot"`, a public query (`draft == false` or `status == "published"`) never matches them; a soft-deleted snapshot emits no row at all. The four fields are stored, so they project with `selectFields` / `ProjectInto`. Full field semantics: [Index URL](https://strife.app/docs/reference/database/index-url.md).

There are two equivalent ways to resolve a snapshot, and both end at the same row:

* **The SDK path** (both SDKs): validate the token segment as 8 lowercase letters or digits, query with **exact equality** on `snapshotToken` plus `status == "snapshot"` plus the resolved locale, and check `expiresAt` on the row — the middleware does all of this for you, with the locale fallback below.
* **The raw path** (no SDK — see [Serving snapshots without the SDK](#serving-snapshots-without-the-sdk)): your site's ordinary exact-URL lookup, with `status == "snapshot"` admitted on exact-URL matches. An expiry check is **not required** on this path: an expired or revoked snapshot is soft-deleted and its rows disappear — normally within about a minute of the instant, and at the next worker start when an alarm was missed. The row still carries `expiresAt` if you want a notice or a belt-and-braces check.

### Every language is reachable

The snapshot contains every language the draft had at snapshot time, and the index emits a row for each, so one link serves them all: the reviewer switches language with your site's own language switcher or prefix. The link the editor copies targets the language they were viewing (`snapshotLocale`). On either SDK, a resolver that picks a language the snapshot has no row for falls back to the `snapshotLocale` row rather than answering not-found (see below); a site on the raw path resolves the exact locale only — a missing row is its ordinary not-found.

## Astro

The integration does the routing; you author the page. With the `@strifeapp/astro` release that ships snapshots installed, `strife()` registers `@strifeapp/astro/snapshot-middleware` as a `pre` middleware — after the edit-mode middleware, so edit mode is forced **off** on snapshot routes and `<LivePreview />` never activates there. For a snapshot path (`/snapshot/{token}` after an optional single locale-prefix segment, where the tail is a valid token — 8 lowercase letters or digits; any other tail such as `/help/snapshot/link` is an ordinary site route and passes through) it looks the snapshot up for the locale Astro resolved (`context.currentLocale`), and:

* on a hit sets `Astro.locals.snapshot = { docId, name, expiresAt: Date, locale, content }` and lets your page render it;
* on any miss renders **your 404 page** through Astro's rewrite, re-wrapped so the status is `404`.

Both answers carry `X-Robots-Tag: noindex, nofollow`, `Cache-Control: private, no-store` and `Referrer-Policy: no-referrer`. The middleware logs nothing on a hit and never logs the token.

### The page

Create `src/pages/snapshot/[token].astro` with the template below. Its opening comment lists the rules a snapshot page must follow; keep them when you adapt it.

```astro
---
/**
 * Strife snapshots — the page that renders a shared preview.
 *
 * Copy this file to `src/pages/snapshot/[token].astro` in your site. The integration's
 * snapshot middleware runs before it: for `/snapshot/{token}` (after your locale prefix,
 * e.g. `/sv/snapshot/{token}`) it resolves the token to a live snapshot and sets
 * `Astro.locals.snapshot`, or answers with your 404 page when the link is unknown,
 * expired or revoked — this page never sees a miss.
 *
 * Rules that keep a snapshot a snapshot:
 *   - `prerender = false`: the page is rendered on demand; a snapshot cannot be built ahead.
 *   - Render `snapshot.name` as TEXT only (never `set:html`) — it is editor-typed input.
 *   - Emit no Open Graph / social tags: the URL is a secret and previews would leak it.
 *   - Do not add this route to CDN caching rules or analytics; `<Insights />` already
 *     sends nothing here, and the response carries `Cache-Control: private, no-store`.
 *
 * `snapshot.content` is the `Content/ByUrl` row for the resolved locale. It always carries
 * `docId`, `locale`, `collection`, `displayName`, `url` (the snapshot path itself for this
 * locale — not the canonical page's path), `snapshotName`, `expiresAt`, and
 * every field you list in the integration's `snapshot.fields` option (your template
 * fields). Without `snapshot.fields`, query your own fields here by `docId` + `locale`.
 */
export const prerender = false;

import Layout from '../../layouts/Layout.astro';

const snapshot = Astro.locals.snapshot;
if (!snapshot) {
  // Only reachable when the snapshot middleware is not registered for this route
  // (`snapshot: { middleware: false }` without composing createSnapshotMiddleware).
  return new Response(null, { status: 404 });
}

const { name, expiresAt, locale, content } = snapshot;
const expires = new Intl.DateTimeFormat(locale, {
  dateStyle: 'long',
  timeStyle: 'short',
  timeZone: 'UTC',
}).format(expiresAt);
---

<Layout title={content.displayName ?? 'Preview'}>
  <aside class="snapshot-notice" role="status">
    {name ? `Preview “${name}”` : 'Preview'} — this link stops working {expires} (UTC).
  </aside>

  {/*
    Render the snapshot with the same components your published pages use, picking
    by `content.collection` (`Pages`, `Posts`, …). The example below assumes a
    `heading` field projected via `snapshot: { fields: ['heading'] }`.
  */}
  <article>
    <h1>{content.heading ?? content.displayName}</h1>
  </article>
</Layout>

<style>
  .snapshot-notice {
    padding: 0.75rem 1rem;
    background: #fff7d6;
    border-bottom: 1px solid #e6d58a;
    font-size: 0.9rem;
  }
</style>
```

Three rules keep a snapshot a snapshot:

* **`export const prerender = false`.** The page is rendered per request; the middleware must run before it.
* **Render `name` as text only** — never `set:html`. It is editor-typed input.
* **Emit no Open Graph or other social tags.** The URL is a secret; a link preview would fetch and cache the page elsewhere.

`content` is the `Content/ByUrl` row for the resolved locale: `docId`, `locale`, `collection`, `displayName`, `url`, `snapshotName`, `expiresAt`, plus every field you list in the integration's `snapshot.fields` option (your template fields), so one lookup both decides the 404 and feeds the render:

```javascript
strife({
  snapshot: {
    fields: ['heading', 'body'],   // projected onto Astro.locals.snapshot.content
  },
});
```

Without `snapshot.fields`, `content` carries the row fields only and the page queries its own fields by `docId` + `locale` (`whereEquals('docId', content.docId)`, `whereEquals('status', 'snapshot')`). Pick your layout and components by `content.collection`, exactly as your published pages do.

### Sites that resolve locale in their own middleware

Astro's `currentLocale` only exists with Astro i18n routing. If your site resolves its language itself — a cookie, a header, its own path scheme — opt out of the automatic registration and compose the middleware where the locale is known, or a multi-locale snapshot resolves the wrong (or no) row:

```javascript
// astro.config.mjs
strife({ snapshot: { middleware: false } });
```

```typescript
// src/middleware.ts
import { sequence } from 'astro:middleware';
import { createSnapshotMiddleware } from '@strifeapp/astro/snapshot-middleware';

export const onRequest = sequence(
  myLocaleMiddleware,
  createSnapshotMiddleware({ resolveLocale: (context) => context.locals.locale }),
);
```

| Option | Where | Description |
| --- | --- | --- |
| `snapshot.fields` | integration | Extra `Content/ByUrl` fields to project onto `content`. |
| `snapshot.middleware: false` | integration | Skip the automatic registration; compose the middleware yourself. |
| `resolveLocale(context)` | `createSnapshotMiddleware` | Resolve the request's locale. Defaults to `context.currentLocale`. |

Two more things to know:

* A miss is rendered through Astro's rewrite to `/404`. Astro forbids rewriting from an on-demand route to a **prerendered** page, so if your `src/pages/404.astro` is static the middleware answers a bare `404` (headers included) and your adapter or host serves the static page; add `export const prerender = false` to `404.astro` to render it through the rewrite instead.
* `resolveSnapshot(token, locale)` from `@strifeapp/astro/snapshot` is the same lookup as a function, returning the snapshot context or `null`, if you need it outside the middleware.
* **Locale fallback** works as in .NET (below): when the resolved locale has no row in the snapshot, the middleware serves the snapshot's own `snapshotLocale` row instead of the 404. Without any locale resolution on a multi-locale site the token is ambiguous; the middleware prefers the `snapshotLocale` row among the candidates, but do not rely on that — resolve a locale.

## .NET

Nothing to register: `MapStrife()` already covers it. With the `Strife` package release that ships snapshots, the route resolver runs your locale resolver's path normalisation first, then matches `/snapshot/{token}` before anything is logged. On a hit it sets the same route values as a public page, so the controller for the snapshot's collection runs and `[FromContentRoute]` binds the snapshot's content exactly as it binds published content. The reviewer needs no `?token=`: the authorization filter admits the request for the one snapshot the route resolved — a request flagged for snapshot A whose resolved content is anything else is a 404.

The resolver stores a `SnapshotContext` on the request. Read it through `ContextService`, which is registered by `AddStrife()` and mirrors `IsInEditMode`:

```csharp
using Strife.Services;

public class BlogPostController : Controller
{
    private readonly ContextService _context;
    public BlogPostController(ContextService context) { _context = context; }

    public IActionResult Index([FromContentRoute] BlogPost content)
    {
        var snapshot = _context.GetSnapshot(HttpContext);   // null on every non-snapshot request
        ViewData["Snapshot"] = snapshot;
        return View(content);
    }
}
```

```cshtml
@{ var snapshot = ViewData["Snapshot"] as Strife.Services.SnapshotContext; }
@if (snapshot != null)
{
    <aside role="status">
        Preview @(string.IsNullOrEmpty(snapshot.Name) ? "" : $"“{snapshot.Name}”") — this link stops working @snapshot.ExpiresAt.ToString("f") (UTC).
    </aside>
}
```

`SnapshotContext` carries `DocId` (the snapshot's id — it contains the token, never log it), `Name` (plain text — render it through Razor's encoding `@` binding only, never `Html.Raw`), `ExpiresAt` (UTC) and `Locale` (the row that was served). Use `GetSnapshot(HttpContext) != null` to skip your analytics and to leave out Open Graph tags on the response.

On hits and misses alike the resolver sets `X-Robots-Tag: noindex, nofollow`, `Cache-Control: private, no-store` and `Referrer-Policy: no-referrer`, and logs only `hit` / `miss` with the locale — never the path, the token or the document id.

**Locale fallback.** The resolver queries for the locale your `ILocaleResolver` returned. If the snapshot has no row for it (an Accept-Language or cookie-driven locale the draft never had, or a link pasted under another prefix), it falls back to the snapshot's own `snapshotLocale` row instead of answering not-found. A multi-locale site *without* locale resolution leaves the token ambiguous: the resolver prefers the `snapshotLocale` row among the candidates it fetched, but do not rely on that — resolve a locale.

## Serving snapshots without the SDK

Because a snapshot row's `url` is the snapshot path, a site can serve snapshots through the same by-URL resolution it already uses for pages — no middleware, no dedicated route. For an Astro site that queries the index itself, [Snapshots on an Astro site that queries the index](https://strife.app/docs/how-to-guides/snapshots-astro-without-the-sdk.md) walks through the same contract in code. The whole contract:

1. **Admit `status == "snapshot"` in exact-URL lookups only.** Wherever your site resolves the current page by exact `url` + locale, extend the visibility predicate: `status == "published" || status == "snapshot"` (keeping any legacy `status == null && draft == false` branch). Apply it at **every** exact-URL lookup — middleware and any template that re-queries by URL — but **never** in collection or listing queries: a listing that admits snapshot rows enumerates secret tokens.
2. **The locale clause is load-bearing.** Snapshot-row `url`s coincide across languages whenever the root slug is not locale-varying, and your site cannot know which case it is in — always pair `url` with the resolved locale. A raw site resolves the exact locale only; there is no fallback row on this path.
3. **Resolve per request.** Keep snapshot paths out of prerendering, ISR/static generation, CDN and edge caches, and any data-layer caching of by-URL results. Expiry and revocation work by the rows disappearing — a cached lookup serves a dead link until the cache expires.
4. **No expiry code required.** The soft-delete removes the rows (normally within about a minute; at the next worker start when an alarm was missed). `expiresAt` is on the row for a notice or an optional stricter check.
5. **Own the hygiene the SDK would otherwise set.** Everything under [Headers, caching, analytics and logs](#headers-caching-analytics-and-logs) applies, plus: send `X-Robots-Tag: noindex, nofollow`, `Cache-Control: private, no-store` and `Referrer-Policy: no-referrer` yourself, and make sure your own token-gated edit or preview affordances never activate on snapshot paths.
6. **Mind your locale-redirect layer.** If your site 301s prefix-less paths to a locale prefix, a snapshot URL passes through it like any page — fine, as long as the redirect preserves the path and the redirected lookup still applies the predicate above.

The snapshot renders through your normal view mapping — the row carries the same `collection` and template fields as any page in its collection, plus `snapshotName` and `expiresAt` for an optional banner (render `snapshotName` as text only, never HTML).

## Headers, caching, analytics and logs

The token is a bearer secret of the unlisted-link class described at the top: whoever has the URL sees the snapshot until it expires, and nothing may make the token easier to find than guessing at web-request rates. The SDKs mark every snapshot response, but a few things only you can do:

* **Keep `/snapshot/*` out of CDN caching rules.** The response carries `Cache-Control: private, no-store`; make sure no edge rule overrides it, and never key a cache on the path.
* **Keep `/snapshot/*` out of analytics.** A snapshot is not audience traffic, and a beacon would carry the path, i.e. the token. In Astro, `<Insights />` renders nothing and sends no beacon on a snapshot page. A .NET site must exclude snapshot responses itself (`GetSnapshot(HttpContext) != null`), and so must any third-party analytics on either stack.
* **Keep access-log retention short.** A URL with a secret in its path is inherently logged by proxies, load balancers and hosts; the SDK snapshot branches log only the outcome and the locale, but your infrastructure's logs are yours to trim.
* **Emit no Open Graph or social tags** on the snapshot page, and **never render the snapshot name as HTML.**
* **Never activate your own edit/preview UI on `/snapshot/*`.** The SDKs force edit mode off on snapshot routes; a site serving snapshots raw must make sure a valid editor token in the request does not switch on draft branching or a live-preview client there.
* `Referrer-Policy: no-referrer` keeps the URL out of the `Referer` header of anything the page links to; keep it if you set your own referrer policy.

## From an MCP client

The Strife MCP server exposes the same snapshot domain as the Studio panel through three tools, so an agent working on content for a team member can share, list and stop links without switching to the Studio:

| Tool | What it does | Who may call it |
| --- | --- | --- |
| `create_snapshot` | Freezes a document's working copy and returns the link, name, expiry and who took it. Takes an optional `locale` (default: the team's default locale; it must be one the working copy contains) and an optional `name`. | Team member with edit rights (a Contributor can, a Viewer cannot) |
| `list_snapshots` | A document's active snapshots — not revoked, not expired — newest first, each with its link for the language it was taken in. | Any team member |
| `revoke_snapshot` | Stops one link at once; no confirmation step. Revoking an already revoked, expired or unknown snapshot succeeds and reports that nothing changed. | Team member with edit rights |

The link a tool returns is byte-for-byte the one the Studio copies: the server composes it from the team's site address for the language and the origin chain of the working copy (or, when listing, of the frozen snapshot row), exactly as the Studio does. The same gates apply as to the Studio's endpoints — team membership on all three, the deployed content index on create (a site that has not run `strife push` gets the same `snapshot_index_missing` / `snapshot_index_predates_snapshots` / `snapshot_index_deploying` refusal the Studio shows) — and the same hygiene: the token travels only inside the returned link, never in a log line, trace or error report. A snapshot id can never be the target of the edit, discard or publish tools.

## Restoring a snapshot with a locale list

The Studio (and the internal `apply-snapshot` endpoint behind it) can restore an active snapshot into the document's draft. `apply-snapshot` now accepts an optional `locales` field alongside the snapshot id: `null` (the default) replaces the whole draft with the snapshot's content, exactly as before; a non-empty subset of the team's configured locales restores only those locales and leaves every other locale in the draft byte-identical to what it was, with non-localizable fields always taken from the snapshot regardless of the selection. This is the same locale-selective merge — including the dirty-marking and activity rules — that restoring a Published Version uses. See [Versions and History](https://strife.app/docs/reference/versions.md#restore-semantics) for the full contract, the sibling `apply-version` endpoint, and how Published Versions relate to snapshots inside History.

## Creating a snapshot from a published version

The Studio's History drawer offers **Share** on every published row, not only on the draft: an editor can hand a reviewer an earlier version, or the live page as it is now, without touching the draft. Nothing changes for your site — the snapshot is an ordinary snapshot with the usual route, index rows, expiry and restore; only what gets frozen differs. The internal endpoint behind it is the same one the draft uses, `POST /content/snapshot/{activeTeam}`, with two optional fields:

| Field | Type | Notes |
| --- | --- | --- |
| `documentId` | string | The document (any role id; the canonical is what gets snapshotted). A snapshot id is refused. |
| `name` | string \| null | Optional editor-given name (at most 60 characters). Absent: `Snapshot N` for the draft; `Version {yyyy-MM-dd HH:mm}` (the publish stamp, UTC) for a version or the live page |
| `locale` | string \| null | The locale the link targets. Absent: the source's own locale |
| `source` | `"draft"` \| `"live"` \| `"version"` | What to freeze. Absent means `"draft"` — the body every earlier caller sends |
| `version` | string | The opaque reference from a [`versions`](https://strife.app/docs/reference/versions.md#get-contentversionsactiveteam) row, when `source` is `"version"` |

The same gates apply whatever the source: team membership, `EditContent`, and the deployed content index (the `409` refusals above run before the source is read). A Contributor can share a published version — the snapshot is not live content, so `ChangeLiveContent` is not needed. Refusals specific to the new sources:

| Status | When |
| --- | --- |
| 400 | `source: "version"` without a reference, or with a malformed one (`bad_reference` wording) |
| 404 | The reference names no stamped revision of this document — another document's revision, an unstamped one, or one RavenDB no longer holds |
| 400 | `source: "live"` on a page that is not published (unpublished or archived), or `source: "version"` on an archived page |
| 400 | An unknown `source` |

The snapshot document records where it came from, so History can say so on the row:

| Field | Value |
| --- | --- |
| `snapshotSource` | `"draft"`, `"live"` or `"version"`. A snapshot created before this field existed carries none and reads as `"draft"` |
| `sourcePublishedAt` | The source's publish stamp (`__publishedAt`, the versions-list format), or `null` for the draft and for a page published before stamps existed |
| `sourcePublishedBy` | The user id that published the source, or `null` |

The content index does **not** emit these fields, so the site, the SDKs and the reviewer never see them, and nothing needs redeploying. A restore never copies them into the draft. The MCP `create_snapshot` tool keeps snapshotting the working copy only.

## Lifetime and expiry

`expiresAt` is stamped at creation, 7 days ahead. When the instant passes, Strife's worker soft-deletes the snapshot (a reconcile sweep catches any missed alarm), and the index drops its rows. Both SDKs also compare `expiresAt` with the clock on every request, so a link stops resolving at the instant even if the soft-delete lags. Archiving or deleting the document revokes its snapshots in the same cascade that removes `/draft` and `/scheduled`; publishing or discarding the document leaves them untouched — the reviewer's link keeps showing what it showed when it was sent.

Snapshots are only ever soft-deleted, never hard-deleted and never given `@expires`: they replicate to every editor's client like the other siblings, and a hard delete would leave ghosts there.

---

# Versions and History

Source: https://strife.app/docs/reference/versions

Every publish leaves behind a Published Version — a stamped RavenDB revision of the document. This is the row model, the three endpoints, and the locale-selective restore that both versions and snapshots share.

Strife keeps one **Published Version** for every publish of a content document: a RavenDB revision of the canonical document, stamped with who published it and when. Together with the current draft, any scheduled publish and any active [Snapshot](https://strife.app/docs/reference/snapshots.md), Published Versions make up **History** — the per-document timeline the Studio shows in its History drawer.

This page documents the version model and the three endpoints behind it. If you are looking for the customer-site snapshot contract (the `/snapshot/{token}` route, the content-index rows, the SDK middleware), see [Snapshots](https://strife.app/docs/reference/snapshots.md) — versions and snapshots are restored through the same mechanism, and History can freeze a version into a snapshot for review (see [Creating a snapshot from a published version](https://strife.app/docs/reference/snapshots.md#creating-a-snapshot-from-a-published-version)), but a version itself has no URL and nothing about it is served on your site.

## The stamp

Publishing a document — a batch publish, a scheduled publish, an MCP `publish_content` call, or the CLI seed that creates a published canonical directly — writes two fields onto the canonical document:

| Field | Value |
| --- | --- |
| `__publishedBy` | The id of the user who published (the scheduling user for a scheduled publish, the CLI user for a seed) |
| `__publishedAt` | UTC round-trip timestamp (`"o"` format) of the publish |

Immediately after that write is saved, Strife forces a RavenDB revision of the document — one per publish, holding the exact state that just went live, stamp included. A **Published Version is a revision that carries this stamp.** No revisions configuration is enabled on team databases; the stamped revision exists only because publish forces it.

Two things follow:

* **Only publishes create versions.** Archive, soft-delete, unpublish (the restore-to-draft transition), copy, and the hand-crafted `POST /content/{activeTeam}` all write the canonical but stamp nothing and force no revision — they never appear as rows. So the newest RavenDB revision is not always the live canonical: a document can be written after its last publish without a new version existing for that write.
* **The stamp never reaches a draft, scheduled sibling, or snapshot.** It is stripped when a draft is created or refreshed from a published canonical, protected from JSON Patch (alongside `__dirtyLocales`), and stripped from an incoming document `POST` body and after a `copy`. A stamp exists only on a published canonical and its revisions — never on a working copy, and never one a client could forge.

## The three endpoints

All three live under `/content`, require team membership and the `EditContent` capability, and take `{activeTeam}` from the route — never the `ActiveTeam` claim. None are gated by a Studio feature flag; the History drawer's flags (below) only control whether the Studio renders the drawer.

### `GET /content/versions/{activeTeam}`

The published rows for a canonical, newest first, paged.

| Query param | Required | Notes |
| --- | --- | --- |
| `id` | yes | The canonical document id. A `/draft`, `/scheduled` or `/snapshot/{token}` id is rejected. |
| `start` | no | Raw revision offset to page from. Default `0`. |
| `pageSize` | no | Default `25`, capped at `100`. |

```
GET /content/versions/my-team?id=blog-post-1&start=0&pageSize=25
```

```json
{
  "rows": [
    {
      "version": "AAAAAAAAxA0BAAAAAAAAAAI",
      "publishedAt": "2026-09-08T14:03:21.0000000Z",
      "publishedBy": "user-42",
      "locales": ["en", "sv"],
      "status": "published"
    },
    {
      "version": "AAAAAAAAwQ0BAAAAAAAAAAE",
      "publishedAt": "2026-09-01T09:12:44.0000000Z",
      "publishedBy": "user-7",
      "locales": ["en"],
      "status": "published"
    }
  ],
  "hasMore": true,
  "nextStart": 25
}
```

`version` is an **opaque reference** — a base64url encoding of the revision's RavenDB change vector, which is not path-safe on its own. Treat it as a token: pass it back verbatim to the body endpoint or to `apply-version`; never parse or construct one client-side.

`nextStart` is the **raw revision offset consumed**, not the number of rows returned — a page that skips an unstamped revision (there should never be one, but the read is defensive) still advances `nextStart` past it, so paging never desynchronizes. Pass it back as the next request's `start`. `hasMore` is `true` when more revisions exist beyond the page.

An id with no revisions returns an empty `rows` array, not a 404.

**Errors** (`{ "error": "...", "message": "..." }`):

| Status | `error` | When |
| --- | --- | --- |
| 400 | `missing_id` | No `id` given |
| 400 | `sibling_id` | `id` names a `/draft`, `/scheduled` or `/snapshot/{token}` sibling |
| 400 | `not_content` | `id` exists but is not in a content collection |
| 400 | `bad_paging` | `start` is negative |
| 404 | `not_found` | The canonical does not exist, or is soft-deleted |

### `GET /content/version/{activeTeam}`

One version body, for preview.

```
GET /content/version/my-team?id=blog-post-1&version=AAAAAAAAxA0BAAAAAAAAAAI
```

Returns the revision body as stored, with `@metadata` and the client-injected `Id` property stripped and `id` set to the canonical id — the same shape a live document has when loaded.

**Errors:**

| Status | `error` | When |
| --- | --- | --- |
| 400 | `missing_id` / `sibling_id` / `not_content` | Same as the list endpoint |
| 400 | `bad_reference` | `version` is not a well-formed reference |
| 404 | `not_found` | The canonical is missing or soft-deleted, or the reference does not name a stamped revision of that canonical (including a reference belonging to another document's revision) |

The refusal never distinguishes "wrong document" from "not a version" — a reference cannot be used to probe other documents.

### `POST /content/apply-version/{activeTeam}`

Restores a History row — a snapshot or a published version — into the working copy. This is the one restore operation both `PreviewAction`'s snapshot restore and the History drawer use.

```json
{
  "documentId": "blog-post-1",
  "kind": "revision",
  "version": "AAAAAAAAxA0BAAAAAAAAAAI",
  "locales": ["en"]
}
```

| Field | Type | Notes |
| --- | --- | --- |
| `kind` | `"snapshot"` \| `"revision"` | Which source to restore from |
| `documentId` | string | The canonical id. Required for `kind: "revision"`; optional for `kind: "snapshot"` (when given, must match the snapshot's canonical) |
| `snapshotId` | string | The active snapshot's id (`{canonical}/snapshot/{token}`), when `kind: "snapshot"` |
| `version` | string | The opaque reference from a `versions` row, when `kind: "revision"` |
| `locales` | string[] \| null | `null` restores every locale the source carries; a non-empty subset of the team's configured locales restores only those (see [Restore semantics](#restore-semantics)) |

Response mirrors `apply-snapshot`: a one-item batch-result list.

```json
[
  { "id": "blog-post-1", "status": 0, "document": { "id": "blog-post-1/draft", "...": "..." } }
]
```

A failure reports `status: 1` with a `reason`:

```json
[
  { "id": "blog-post-1", "status": 1, "reason": "The draft changed while restoring. Save pending edits and try again." }
]
```

**Errors.** Three body shapes share the 400 status, so branch on the shape, not the status code:

* **Problem details** — `{ "title": "...", "status": 400, "errors": { ... } }` (`application/problem+json`), from the framework's request validation. Only a missing, empty, or literal-`null` JSON body gets this.
* **Object** — `{ "error": "...", "message": "..." }`, the same shape the version reads use. This is the endpoint refusing the request before it reaches the store; there is no batch row and no `reason`.
* **Batch list** — the one-item batch-result list shown above, with `status: 1` and a `reason`. Every refusal that involves the document, snapshot, or the team's configuration comes back this way.

| Status | Shape | `error` / `reason` | When |
| --- | --- | --- | --- |
| 400 | problem details | — | No JSON body, or a literal `null` body |
| 400 | object | `bad_kind` | `kind` is not `"snapshot"` or `"revision"` |
| 400 | object | `missing_id` | `kind: "revision"` without a `documentId` |
| 400 | object | `missing_version` | `kind: "revision"` without a `version` |
| 400 | object | `missing_snapshot_id` | `kind: "snapshot"` without a `snapshotId` |
| 400 | object | `mismatch` | `kind: "snapshot"` with a `documentId` that is not the snapshot's canonical |
| 400 | batch list | `reason` text | A sibling id where a canonical is expected, a malformed reference, an empty `locales` list, a `locales` list with more than 64 entries (refused as `Too many locales in request.`, nothing echoed), or a locale outside the team's configured set (the reason names at most five of the unknown codes) |
| 403 | batch list | `reason` text | Restoring into the draft of a published document without the right to change live content |
| 404 | batch list | `reason` text | Unknown document or snapshot, or a `version` that does not name a published revision of `documentId` |
| 409 | batch list | `reason` text | The snapshot is expired/revoked, or the draft (or its activity document) changed underneath the restore — retry once after re-reading |

The canonical document is never written by this endpoint; only the draft (and its activity document) change.

## Restore semantics

`apply-version` and `apply-snapshot` (with its own now-optional `locales`, see [Snapshots](https://strife.app/docs/reference/snapshots.md#restoring-a-snapshot-with-a-locale-list)) share one locale-selective merge:

* **No `locales` list** — the whole draft is replaced from the source, exactly as snapshot restore always worked: every locale the source carries overwrites the draft, `__dirtyLocales` becomes the source's full locale set, and any locale published since the source was taken (and therefore absent from it) is reverted from the live canonical rather than left stale.
* **A `locales` list** — only those locales come from the source. Every other configured locale the draft already carried is put back byte-identical to what it was immediately before the restore (never re-derived from the canonical, so an in-progress, unpublished translation is never disturbed). A locale neither the source nor the pre-restore draft carried is reverted from the canonical, same as the no-list case. **Non-localizable fields always come from the source**, regardless of which locales were selected. `__dirtyLocales` becomes the union of the pre-restore dirty set and the restored locales — restored locales are marked as having unpublished changes; everything else keeps whatever mark it already had.
* **Activity** — restoring appends one `APPLY_REVISION` (or `APPLY_SNAPSHOT`) entry to the document's activity log naming the source, and prunes prior `EDIT` entries for the restored locales only; a whole-draft restore also prunes locale-less entries.
* **No draft** — restoring creates one from the source.
* **Concurrency** — the write runs under optimistic concurrency over the draft and its activity document together, so it lands atomically or not at all; a 409 leaves no partial state, and the caller re-reads and retries with the same locale list.
* Restoring is never publishing — the draft is replaced, but nothing goes live until the normal publish flow runs.

## Permissions

Both reads and the restore require team membership and the `EditContent` capability. Restoring into the draft of a **published** document additionally requires the right to change live content (`ChangeLiveContent`) — the same rule snapshot restore has always had. A caller without it can still read and preview every row; the restore call itself is refused with 403.

## The Studio flags

The History drawer in Studio is gated by the `history` feature flag. The `snapshots` flag decides what is in it: with both on, the drawer also lists the document's snapshots and offers Share on every row; with `history` alone, the drawer shows versions only — the draft, the published version and every previous version — and nothing about snapshots. With `history` off, none of this is exposed in the UI, and `snapshots` does nothing on its own: the pre-History snapshot popover is no longer rendered. Neither flag gates these three endpoints or the snapshot endpoints — they answer the same way regardless of Studio's flag state.

## Retention and erasure

No retention limit is configured: Published Versions are kept indefinitely, as far back as RavenDB holds revisions for the document. A future retention setting (a `MinimumRevisionsToKeep` on the revisions configuration) would trim them, but none exists today.

Soft-deleting a document does not delete its revisions — RavenDB keeps them — but both endpoints refuse to serve versions of a soft-deleted canonical (404). To actually remove a document's history, an operator runs `DeleteRevisionsOperation` against its canonical id, or destroys the whole team database.

## What does not create a version

* Archiving a document
* Soft-deleting a document
* Unpublishing (the restore-to-draft transition)
* Copying a document
* The hand-crafted `POST /content/{activeTeam}` document create/update
* Discarding a draft
* Creating, renaming or revoking a snapshot

Only a publish — through the Studio batch publish, a scheduled publish, MCP `publish_content`, or the CLI seed — stamps the canonical and records a version.

## Two publishes within seconds

The version is forced after the publish has saved, and that save can block for up to 15 seconds on index and replication waits. If a second publish of the same document commits inside that window, the first publish finds a `__publishedAt` it did not write and records nothing: the second publish records its own version, and the first one is not a row. The first publish's content was live only for those seconds. Each such case counts as `outcome=superseded` on `strife.api.publish.revisions` (or `strife.worker.publish.revisions` for a scheduled publish), next to `ok` and `error`.

---

# Database

Source: https://strife.app/docs/reference/database

---

# Index URL

Source: https://strife.app/docs/reference/database/index-url

`Content/ByUrl` is the content index your site queries. It is deployed by [`strife push`](https://strife.app/docs/reference/cli/commands.md#strife-push) and projects every content document into one row per configured locale, with `url` resolved from the document's origin chain — the row your site looks up by `url`, `docId` or `collection`.

## Row roles

Besides a document's published version, its working-copy siblings are indexed too. Every row carries a `status` that says which one it is, and the legacy `draft` boolean is kept during the deprecation window so older SDK builds keep matching:

| Row | `status` | `draft` | Notes |
| --- | --- | --- | --- |
| Published document | `published` | `false` | The only rows a public query should return. |
| Unpublished document | `unpublished` | `false` | Never had a published version. |
| `{id}/draft` | `draft` | `true` | The working copy. |
| `{id}/scheduled` | `scheduled` | `true` | A publish scheduled for later. |
| `{id}/snapshot/{token}` | `snapshot` | `true` | A snapshot — see below. |

A public query filters on `status == "published"` (or the legacy `draft == false`); sibling rows never match it. Soft-deleted and archived documents emit no row.

## Snapshot rows

A [snapshot](https://strife.app/docs/reference/snapshots.md) freezes a document's draft into a snapshot, `{id}/snapshot/{token}`, in the document's own collection. The index detects it by the id segment or by `status == "snapshot"`, folds it into the sibling flag (so `draft: true`), and emits **one row per locale in the snapshot** whose `url` **is the snapshot path** — the origin-chain root's slug for that locale (empty for a root slug `/`; built even for `disableURL` templates), then `/snapshot/{token}` — so every language is reachable through the link and an ordinary exact-URL lookup resolves the snapshot. Four stored fields exist for these rows and are `null` on every other row, so the field shape is uniform:

| Field | Snapshot row | Every other row |
| --- | --- | --- |
| `snapshotToken` | The token from the id — 8 lowercase letters or digits | `null` |
| `snapshotName` | The editor-given name, or the server's "Preview N" fallback; plain text, never HTML | `null` |
| `expiresAt` | UTC round-trip string ending in `Z` (`2026-09-04T09:30:00.0000000Z`) | `null` |
| `snapshotLocale` | The locale the editor was viewing when sharing — the one the link targets | `null` |

A site resolves a snapshot either by its ordinary **exact-URL lookup** (`url` + locale, admitting `status == "snapshot"` on exact-URL matches only — see [Snapshots](https://strife.app/docs/reference/snapshots.md)) or with **exact equality on `snapshotToken`** plus `status == "snapshot"` plus the resolved locale (the SDK path, which also checks `expiresAt` on every read). A soft-deleted snapshot (expired, revoked, or cascaded from an archive or delete) emits no row, which is what ends the link on the raw path. `deleted` is not stored; project it and treat `true` as a miss.

> [!NOTE]
> `snapshotToken` doubles as the index **version marker**. Strife refuses to create a snapshot for a team whose deployed `Content/ByUrl` definition does not emit it, and `strife push` refuses to deploy a source without it while the team holds an active snapshot — a definition without the field would map a snapshot as a public row at the canonical URL. Update `@strifeapp/strife` to the release that ships snapshots and push.

These field names are deliberately **not** reserved root fields: reserving `expiresAt` would silently drop a template field of that name from every public row on the next push. Avoid naming your own template fields `snapshotToken`, `snapshotName`, `expiresAt` or `snapshotLocale` all the same, so a snapshot row and a public row never disagree about what the field means.

---

# Index Search

Source: https://strife.app/docs/reference/database/index-search

---

# Label Groups

Source: https://strife.app/docs/reference/database/label-groups

Label groups let a team organize its labels into named sets — and let your site query
content by group, or by a specific label *within* a group, straight from the
`Content/ByUrl` index's existing `labels` field.

Groups are created and managed in Strife Studio (Settings → Labels). A label belongs to at
most one group; grouping is optional. On the developer side, grouping changes what a
label's SINGLE entry in the `labels` array looks like — it doesn't add a second one:

| Label state           | Its one entry in `labels`      | Example              |
| ---------------------- | -------------------------------- | --------------------- |
| Ungrouped               | The bare name                    | `"Blå"`               |
| Grouped                 | `"<group name>/<label name>"`    | `"Färger/Blå"`        |

Moving a label into a group replaces its bare-name entry with the combined form — it does
not add the combined form alongside the bare one. `labels` is stored (projectable via
`selectFields`), exactly as it always was.

> **Grouping changes a label's index identity — plan queries accordingly.** A query built
> against a label's bare name (`whereEquals('labels', 'Blå')`) stops matching the moment
> that label is moved into a group; from then on the label is represented by
> `"Färger/Blå"` instead. This is safe under Strife's normal query pattern — read a label
> value off a document, then immediately use *that* value in a follow-up query — because
> the value is always fetched live, never hardcoded. It only matters if something needs to
> match a label by name independent of its current grouping (rare; no known Strife site
> feature does this today).

Names are used live and exactly as spelled — no slugs, no folding, no snapshot taken at
grouping time. A label named "Blå" in a group named "Färger" produces `"Färger/Blå"`,
accents and all; if either is renamed later, the index reflects the new name on the very
next index run.

## Querying by group

Every published document that carries a label currently in the group — a prefix match:

```ts
const posts = await session
  .query({ indexName: 'Content/ByUrl' })
  .whereEquals('locale', 'en')
  .andAlso()
  .whereStartsWith('labels', 'Färger/')
  .all();
```

## Querying by a label that isn't grouped

By bare name — only matches while the label is ungrouped:

```ts
const posts = await session
  .query({ indexName: 'Content/ByUrl' })
  .whereEquals('locale', 'en')
  .andAlso()
  .whereEquals('labels', 'Blå')
  .all();
```

## Querying by a (group, label) pair

Documents carrying a *specific* label in a *specific* group — an exact match on the single
combined entry:

```ts
const news = await session
  .query({ indexName: 'Content/ByUrl' })
  .whereEquals('locale', 'en')
  .andAlso()
  .whereEquals('labels', 'Färger/Blå')
  .all();
```

The pair is a single array entry on purpose. Two separate conditions — group membership and
a label match — can false-positive: a document holding some *other* label from the group
plus the label in question from a *different* group satisfies both halves without ever
having the pair. The combined entry cannot.

## Field-level label pickers

A template field built with `fields.labels()` (e.g. a `categories` field on a list page)
resolves the same way, under its own property name — one entry per selected label, combined
form for grouped ones. Since the field is multi-valued, match it against `labels` with
`whereIn`, not `whereEquals`:

```ts
const page = await session
  .query({ indexName: 'Content/ByUrl' })
  .whereEquals('url', '/')
  .selectFields(['categories'])
  .firstOrNull();

// page.categories, e.g. ["Färger/Blå", "Changelog"]

const articles = await session
  .query({ indexName: 'Content/ByUrl' })
  .whereIn('labels', page.categories)
  .selectFields(['heading'])
  .all();
```

Live preview sends the same `"<group>/<label>"` strings for a `fields.labels()` field and for
the document's own built-in `labels` base property, so one `useState`/`subscribe` handler serves
both the published render and the editor's preview. Two differences to know about: a
soft-deleted label keeps its bare name in the published value but is absent from the preview
value (the editor's client no longer holds it), and a *related* document's `labels` — the
snapshot you get through `fields.reference()`/`fields.references()` or the built-in `related`
— is still the raw label records on both paths. Studio's preview used to send raw label records
for every label field; preview-only code that read `.name` or `.color` off them should read the
string now — `color` was never part of the published value.

Also resolves correctly when nested inside `fields.chapters()` or `fields.contentTemplate()`
(1.9.2+) — same one-entry-per-label format, under the nested field's own property name. This
still only covers the *value* — a label field nested inside a chapter isn't independently
queryable via top-level `selectFields`/`whereIn` (no nested field is; it's only readable as
part of the whole parent document or chapters array).

Two things worth knowing about the nested case specifically:

- **Resolution is data-driven, not schema-driven, and all-or-nothing per array.** A nested label
  field is detected by what its stored IDs actually resolve to, not by what the schema declares
  the field as. A missing/dangling ID doesn't disqualify the rest of the array — but if any ID
  resolves to a document from some *other* collection, that's read as proof the field isn't a
  labels field after all, and the whole array falls back to standard relation projection instead
  of a mix of resolved names and relation objects.
- **No labels selected means the property is omitted, not `[]`.** Unlike a root-level
  `fields.labels()` field (which always emits `[]` when empty), a nested one with nothing
  selected has no key at all in the projected chapter object — read it as `item.tags ?? []`.

## Semantics worth relying on

* **Grouping replaces a label's index representation, live.** There's exactly one entry per
  label at any moment — the bare name while ungrouped, the combined form while grouped —
  and it always reflects the CURRENT names of the label and its group, not a snapshot from
  whenever it was assigned or grouped.
* **A disqualified grouping falls back to the bare name, never to nothing.** A soft-deleted
  label, an ETL-sourced label, or a label pointing at a deleted/missing group all resolve to
  their bare name — the label is never dropped from the index over a grouping problem.
* **Deleting a group un-groups, it never un-labels.** Documents keep their labels; they just
  fall back to their bare-name entry. This happens automatically — no republish needed.
* **Regrouping is retroactive.** Moving an existing label into a group — or renaming a group
  or label — updates the index entries of every document already carrying that label,
  automatically. The index tracks the label and group documents it loaded and re-indexes on
  their changes.
* **Consistency is eventual.** Index maintenance is asynchronous — a grouping or rename
  change is typically visible to queries within seconds, not in the same instant.
* **A `/` in a label or group name is not rejected.** Either can produce an entry that looks
  like a group/label pair by shape (e.g. a label literally named `"TV/Film"`, or a group
  named `"News/Sport"`). Rare in practice; if you hit it, there's no special handling — it's
  simply a string that happens to contain a slash.

## Availability

Ships with the `Content/ByUrl` index bundled in `@strifeapp/strife`:

- **1.9.1+** (**not 1.9.0** — that version published with a stale `@strifeapp/schema`
  dependency that left `fields.labels()` missing at runtime; see the package's own CHANGELOG):
  root-level `labels` and a root/field-level `fields.labels()` field.
- **1.9.2+**: the same resolution also applies to a `fields.labels()` field nested inside
  `chapters()`/`contentTemplate()` (see "Field-level label pickers" above) — earlier versions
  produce an unresolved relation-projection stub for a nested label field instead.

A team's database gets the new index the next time a project pinning the relevant version runs
`strife push`.

**Upgrading from a version before 1.9.0** if your site already reads `labels`: the field name
didn't change, but a grouped label's entry did. It is now one `"<group name>/<label name>"`
entry *instead of* its bare name (see the note at the top of this page). Also audit any
`whereStartsWith('labels', <prefix>)` written for bare names: it can now match a group whose
name starts the same way, so `'So'` meant for `"Sommar"` also catches every label in a group
named `"Sound"`.

---

# TypeScript

Source: https://strife.app/docs/reference/typescript

Strife provides full TypeScript definitions for its core data structures, components, and APIs. These types are available via the `@strifeapp/types` package and can be used to improve type safety, editor autocompletion, and developer experience when working with Strife programmatically.

```bash
npm install @strifeapp/types
```

### Usage

You can import the types you need directly from the package:

```typescript
import {
  type Content
} from '@strifeapp/types';
```

---

# Icons

Source: https://strife.app/docs/reference/icons

Complete list of icon names available in Strife.

Strife ships with a built-in icon library. Icons are referenced by their name as a string — for example `"info"`, `"chevron-right"`, or `"help-circle"`. Names are case-sensitive and use kebab-case.

#### Where icons are used

The most common place to set an icon is on a **template**. Every template in Strife can declare an `icon` property that is used for display in Strife Studio.

```json
{
  "name": "...",
  "icon": "home",
  "editors": [ ... ]
}
```

See Defining Templates with JSON for the full template structure.

Icons can also be set on individual field values in these places:

* **Combo Box** header (`editor.attributes.icon`) and options (`editor.options.items[].icon`)
* **Multi Select** options (`editor.options.options[].icon`)
* **Radio Group** items (`editor.options.items[].icon`)
* **Hint** field header (`editor.attributes.icon`)

In live preview, render an icon by passing its name to the `str-icon` component:

```html
<str-icon name="info"></str-icon>
```

#### Complete list

|                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjIgMTJoLTRsLTMgOUw5IDNsLTMgOUgyIi8+PC9zdmc+) `activity`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJtMTIgMy0xLjkxMiA1LjgxM2EyIDIgMCAwIDEtMS4yNzUgMS4yNzVMMyAxMmw1LjgxMyAxLjkxMmEyIDIgMCAwIDEgMS4yNzUgMS4yNzVMMTIgMjFsMS45MTItNS44MTNhMiAyIDAgMCAxIDEuMjc1LTEuMjc1TDIxIDEybC01LjgxMy0xLjkxMmEyIDIgMCAwIDEtMS4yNzUtMS4yNzVMMTIgM1pNNSAzdjRNMTkgMTd2NE0zIDVoNE0xNyAxOWg0Ii8+PC9zdmc+) `ai`                                                                                                                                                                                                                                        | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMyA2aDE4TTMgMTJoMThNMyAxOGgxOCIvPjwvc3ZnPg==) `align-center`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjEgNkgzTTE1IDEySDNNMTcgMThIMyIvPjwvc3ZnPg==) `align-left`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjEgNkgzTTIxIDEySDlNMjEgMThINyIvPjwvc3ZnPg==) `align-right`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iNSIgeD0iMiIgeT0iNCIgcng9IjIiLz48cGF0aCBkPSJNNCA5djlhMiAyIDAgMCAwIDIgMmgxMmEyIDIgMCAwIDAgMi0yVjlNMTAgMTNoNCIvPjwvc3ZnPg==) `archive`                                                                                                                                                                                                                                                                                                                                                                   | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMyAxOVY1TTEzIDZsLTYgNiA2IDZNNyAxMmgxNCIvPjwvc3ZnPg==) `arrow-left-to-line`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNSAxMmgxNE0xMiA1bDcgNy03IDciLz48L3N2Zz4=) `arrow-right`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTcgMTJIM00xMSAxOGw2LTYtNi02TTIxIDV2MTQiLz48L3N2Zz4=) `arrow-right-to-line`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJtMjEgMTYtNCA0LTQtNE0xNyAyMFY0TTMgOGw0LTQgNCA0TTcgNHYxNiIvPjwvc3ZnPg==) `arrow-up-down`                                                                                                                                                                                                                                                                                                                                                                                                                                     | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI0Ii8+PHBhdGggZD0iTTE2IDh2NWEzIDMgMCAwIDAgNiAwdi0xYTEwIDEwIDAgMSAwLTQgOCIvPjwvc3ZnPg==) `at-sign`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIGQ9Im00LjkzIDQuOTMgMTQuMTQgMTQuMTQiLz48L3N2Zz4=) `ban`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNiA4YTYgNiAwIDAgMSAxMiAwYzAgNyAzIDkgMyA5SDNzMy0yIDMtOU0xMC4zIDIxYTEuOTQgMS45NCAwIDAgMCAzLjQgMCIvPjwvc3ZnPg==) `bell`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOC43IDNBNiA2IDAgMCAxIDE4IDhhMjEuMyAyMS4zIDAgMCAwIC42IDVNMTcgMTdIM3MzLTIgMy05YTQuNjcgNC42NyAwIDAgMSAuMy0xLjdNMTAuMyAyMWExLjk0IDEuOTQgMCAwIDAgMy40IDBNMiAybDIwIDIwIi8+PC9zdmc+) `bell-off`                                                                                                                                                                                                                                                                                                                                  | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cmVjdCB3aWR0aD0iMTMiIGhlaWdodD0iNyIgeD0iMyIgeT0iMyIgcng9IjEiLz48cGF0aCBkPSJtMjIgMTUtMy0zIDMtMyIvPjxyZWN0IHdpZHRoPSIxMyIgaGVpZ2h0PSI3IiB4PSIzIiB5PSIxNCIgcng9IjEiLz48L3N2Zz4=) `between-horizontal-end`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMyA2aDE4TTE5IDZ2MTRjMCAxLTEgMi0yIDJIN2MtMSAwLTItMS0yLTJWNk04IDZWNGMwLTEgMS0yIDItMmg0YzEgMCAyIDEgMiAydjJNMTAgMTF2Nk0xNCAxMXY2Ii8+PC9zdmc+) `bin`                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNiA0aDhhNCA0IDAgMCAxIDQgNCA0IDQgMCAwIDEtNCA0SDZ6TTYgMTJoOWE0IDQgMCAwIDEgNCA0IDQgNCAwIDAgMS00IDRINnoiLz48L3N2Zz4=) `bold`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2YjcyODAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNCAxOS41di0xNUEyLjUgMi41IDAgMCAxIDYuNSAySDE5YTEgMSAwIDAgMSAxIDF2MThhMSAxIDAgMCAxLTEgMUg2LjVhMSAxIDAgMCAxIDAtNUgyMCIvPjwvc3ZnPg==) `book`                                                                                                                                                                                                                                                                                                                                                                                  | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2YjcyODAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgMThWNSIvPjxwYXRoIGQ9Ik0xNSAxM2E0LjE3IDQuMTcgMCAwIDEtMy00IDQuMTcgNC4xNyAwIDAgMS0zIDQiLz48cGF0aCBkPSJNMTcuNTk4IDYuNUEzIDMgMCAxIDAgMTIgNWEzIDMgMCAxIDAtNS41OTggMS41Ii8+PHBhdGggZD0iTTE3Ljk5NyA1LjEyNWE0IDQgMCAwIDEgMi41MjYgNS43NyIvPjxwYXRoIGQ9Ik0xOCAxOGE0IDQgMCAwIDAgMi03LjQ2NCIvPjxwYXRoIGQ9Ik0xOS45NjcgMTcuNDgzQTQgNCAwIDEgMSAxMiAxOGE0IDQgMCAxIDEtNy45NjctLjUxNyIvPjxwYXRoIGQ9Ik02IDE4YTQgNCAwIDAgMS0yLTcuNDY0Ii8+PHBhdGggZD0iTTYuMDAzIDUuMTI1YTQgNCAwIDAgMC0yLjUyNiA1Ljc3Ii8+PC9zdmc+) `brain`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJtMyAxNSA0LTggNCA4TTQgMTNoNiIvPjxjaXJjbGUgY3g9IjE4IiBjeT0iMTIiIHI9IjMiLz48cGF0aCBkPSJNMjEgOXY2Ii8+PC9zdmc+) `case-sensitive`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTggMjBWMTBNMTIgMjBWNE02IDIwdi02Ii8+PC9zdmc+) `chart-no-axes-column`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjEgMTJjLjU1MiAwIDEuMDA1LS40NDkuOTUtLjk5OGExMCAxMCAwIDAgMC04Ljk1My04Ljk1MWMtLjU1LS4wNTUtLjk5OC4zOTgtLjk5OC45NXY4YTEgMSAwIDAgMCAxIDF6Ii8+PHBhdGggZD0iTTIxLjIxIDE1Ljg5QTEwIDEwIDAgMSAxIDggMi44MyIvPjwvc3ZnPg==) `chart-pie`                                                                                                                                                                                                                                                                                                 | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjAgNiA5IDE3bC01LTUiLz48L3N2Zz4=) `check`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMjJjNS41MjMgMCAxMC00LjQ3NyAxMC0xMFMxNy41MjMgMiAxMiAyIDIgNi40NzcgMiAxMnM0LjQ3NyAxMCAxMCAxMHoiLz48cGF0aCBkPSJtOSAxMiAyIDIgNC00Ii8+PC9zdmc+) `check-circle-2`                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJtNiA5IDYgNiA2LTYiLz48L3N2Zz4=) `chevron-down`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJtMTUgMTgtNi02IDYtNiIvPjwvc3ZnPg==) `chevron-left`                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJtOSAxOCA2LTYtNi02Ii8+PC9zdmc+) `chevron-right`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJtMTggMTUtNi02LTYgNiIvPjwvc3ZnPg==) `chevron-up`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJtNyAxNSA1IDUgNS01TTcgOWw1LTUgNSA1Ii8+PC9zdmc+) `chevrons-up-down`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjwvc3ZnPg==) `circle`                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2YjcyODAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIGQ9Ik05LjA5IDlhMyAzIDAgMCAxIDUuODMgMWMwIDItMyAzLTMgMyIvPjxwYXRoIGQ9Ik0xMiAxN2guMDEiLz48L3N2Zz4=) `circle-question-mark`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIGQ9Im05IDE1IDYtNiIvPjwvc3ZnPg==) `circle-slash`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cmVjdCB3aWR0aD0iOCIgaGVpZ2h0PSI0IiB4PSI4IiB5PSIyIiByeD0iMSIgcnk9IjEiLz48cGF0aCBkPSJNMTYgNGgyYTIgMiAwIDAgMSAyIDJ2MTRhMiAyIDAgMCAxLTIgMkg2YTIgMiAwIDAgMS0yLTJWNmEyIDIgMCAwIDEgMi0yaDJNMTIgMTFoNE0xMiAxNmg0TTggMTFoLjAxTTggMTZoLjAxIi8+PC9zdmc+) `clipboard-list`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIGQ9Ik0xMiA2djZsNCAyIi8+PC9zdmc+) `clock`                                                                                                                                                                                                                                                                                                                                                                                                                                             | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJtMTYgMTggNi02LTYtNk04IDZsLTYgNiA2IDYiLz48L3N2Zz4=) `code`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0zMCAzLjQxIDI4LjU5IDIgMjUgNS41OSAyMS40MSAyIDIwIDMuNDEgMjMuNTkgNyAyMCAxMC41OSAyMS40MSAxMiAyNSA4LjQxIDI4LjU5IDEyIDMwIDEwLjU5IDI2LjQxIDcgMzAgMy40MXoiLz48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0yNCAxNHYxNGgtNlY2aC0ydjIyYTIuMDAyIDIuMDAyIDAgMCAwIDIgMmg2YTIuMDAyIDIuMDAyIDAgMCAwIDItMlYxNHpNMTAgMzBINGEyLjAwMiAyLjAwMiAwIDAgMS0yLTJWOGEyLjAwMiAyLjAwMiAwIDAgMSAyLTJoNmEyLjAwMiAyLjAwMiAwIDAgMSAyIDJ2MjBhMi4wMDIgMi4wMDIgMCAwIDEtMiAyek00IDh2MjBoNlY4eiIvPjwvc3ZnPg==) `column-delete`                                                                                                                                                                                                                         |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHg9IjMiIHk9IjMiIHJ4PSIyIiByeT0iMiIvPjxwYXRoIGQ9Ik0xMiAzdjE4Ii8+PC9zdmc+) `columns`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cmVjdCB3aWR0aD0iMTMiIGhlaWdodD0iMTMiIHg9IjkiIHk9IjkiIHJ4PSIyIiByeT0iMiIvPjxwYXRoIGQ9Ik01IDE1SDRhMiAyIDAgMCAxLTItMlY0YTIgMiAwIDAgMSAyLTJoOWEyIDIgMCAwIDEgMiAydjEiLz48L3N2Zz4=) `copy`                                                                                                                                                                                                                                                                                                                                                  | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTQgOSA5IDQgNCA5Ii8+PHBhdGggZD0iTTIwIDIwaC03YTQgNCAwIDAgMS00LTRWNCIvPjwvc3ZnPg==) `corner-left-up`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOSAxNCA0IDlsNS01Ii8+PHBhdGggZD0iTTIwIDIwdi03YTQgNCAwIDAgMC00LTRINCIvPjwvc3ZnPg==) `corner-up-left`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZWxsaXBzZSBjeD0iMTIiIGN5PSI1IiByeD0iOSIgcnk9IjMiLz48cGF0aCBkPSJNMyA1djE0YTkgMyAwIDAgMCAxMiAyLjg0TTIxIDV2M00yMSAxMmwtMyA1aDRsLTMgNSIvPjxwYXRoIGQ9Ik0zIDEyYTkgMyAwIDAgMCAxMS41OSAyLjg3Ii8+PC9zdmc+) `database-zap`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjEgMTV2NGEyIDIgMCAwIDEtMiAySDVhMiAyIDAgMCAxLTItMnYtNE03IDEwbDUgNSA1LTVNMTIgMTVWMyIvPjwvc3ZnPg==) `download`                                                                                                                                                                                                                                                                                                                                                                                                              | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNCAxNCI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJtMTMuOTQgNy45MTQtMS45ODItLjI1OGE1LjA2IDUuMDYgMCAwIDAgMC0xLjMxMmwxLjk4My0uMjU4YTcuMDU0IDcuMDU0IDAgMCAxIDAgMS44MjhaTTEzLjQ3IDQuMzJhNi45OTUgNi45OTUgMCAwIDAtLjkxNS0xLjU4MWwtMS41ODYgMS4yMThjLjI2NS4zNDUuNDg1LjcyNC42NTMgMS4xM2wxLjg0OC0uNzY3Wm0tMi4yMDctMi44NzQtMS4yMiAxLjU4NmE0Ljk5MSA0Ljk5MSAwIDAgMC0xLjEyOS0uNjUzTDkuNjguNTNjLjU2OS4yMzYgMS4xLjU0NSAxLjU4Mi45MTVaTTcuOTEzLjA2bC0uMjU4IDEuOTgzYTUuMDY0IDUuMDY0IDAgMCAwLTEuMzEyIDBMNi4wODYuMDZhNy4wNjYgNy4wNjYgMCAwIDEgMS44MjggMFpNNC4zMi41MzFsLjc2NyAxLjg0OGE0Ljk5MyA0Ljk5MyAwIDAgMC0xLjEzLjY1M0wyLjc0IDEuNDQ2QTYuOTkzIDYuOTkzIDAgMCAxIDQuMzIuNTMxWk0xLjQ0NiAyLjc0bDEuNTg2IDEuMjE4YTQuOTkzIDQuOTkzIDAgMCAwLS42NTMgMS4xM0wuNTMgNC4zMmMuMjM2LS41NjkuNTQ1LTEuMS45MTUtMS41ODFaTS4wNiA2LjA4NmE3LjA2NiA3LjA2NiAwIDAgMCAwIDEuODI4bDEuOTgzLS4yNThhNS4wNjQgNS4wNjQgMCAwIDEgMC0xLjMxMkwuMDYgNi4wODZaTS41MzEgOS42OGwxLjg0OC0uNzY3Yy4xNjguNDA2LjM4OC43ODUuNjUzIDEuMTNsLTEuNTg2IDEuMjE5QTYuOTkzIDYuOTkzIDAgMCAxIC41MzEgOS42OFptMi4yMDggMi44NzQgMS4yMTgtMS41ODZjLjM0NS4yNjUuNzI0LjQ4NSAxLjEzLjY1M0w0LjMyIDEzLjQ3YTYuOTk1IDYuOTk1IDAgMCAxLTEuNTgxLS45MTVabTMuMzQ3IDEuMzg3LjI1OC0xLjk4M2E1LjA2IDUuMDYgMCAwIDAgMS4zMTIgMGwuMjU4IDEuOTgzYTcuMDU0IDcuMDU0IDAgMCAxLTEuODI4IDBabTMuNTk0LS40NzItLjc2Ny0xLjg0OGE0Ljk5NCA0Ljk5NCAwIDAgMCAxLjEzLS42NTNsMS4yMTkgMS41ODZhNi45OTUgNi45OTUgMCAwIDEtMS41ODIuOTE1Wm0yLjg3NC0yLjIwNy0xLjU4Ni0xLjIyYy4yNjUtLjM0NC40ODUtLjcyMy42NTMtMS4xMjlsMS44NDguNzY3Yy0uMjM2LjU2OS0uNTQ1IDEuMS0uOTE1IDEuNTgyWiIvPjwvc3ZnPg==) `draft` | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTEgNEg0YTIgMiAwIDAgMC0yIDJ2MTRhMiAyIDAgMCAwIDIgMmgxNGEyIDIgMCAwIDAgMi0ydi03Ii8+PHBhdGggZD0iTTE4LjUgMi41YTIuMTIxIDIuMTIxIDAgMCAxIDMgM0wxMiAxNWwtNCAxIDEtNCA5LjUtOS41eiIvPjwvc3ZnPg==) `edit`                                                                                                                                                                                                                                                                                                                                                                                                              |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJtNyAyMS00LjMtNC4zYy0xLTEtMS0yLjUgMC0zLjRsOS42LTkuNmMxLTEgMi41LTEgMy40IDBsNS42IDUuNmMxIDEgMSAyLjUgMCAzLjRMMTMgMjFNMjIgMjFIN001IDExbDkgOSIvPjwvc3ZnPg==) `eraser`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTggMTN2NmEyIDIgMCAwIDEtMiAySDVhMiAyIDAgMCAxLTItMlY4YTIgMiAwIDAgMSAyLTJoNk0xNSAzaDZ2Nk0xMCAxNCAyMSAzIi8+PC9zdmc+) `external-link`                                                                                                                                                                                                                                                                                                                                                                                         | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTUgMkg2YTIgMiAwIDAgMC0yIDJ2MTZhMiAyIDAgMCAwIDIgMmgxMmEyIDIgMCAwIDAgMi0yVjdaIi8+PHBhdGggZD0iTTE0IDJ2NGEyIDIgMCAwIDAgMiAyaDQiLz48L3N2Zz4=) `file`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTQuNSAySDZhMiAyIDAgMCAwLTIgMnYxNmEyIDIgMCAwIDAgMiAyaDEyYTIgMiAwIDAgMCAyLTJWNy41TDE0LjUgMnoiLz48cGF0aCBkPSJNMTQgMnY2aDZNMTYgMTNIOE0xNiAxN0g4TTEwIDlIOCIvPjwvc3ZnPg==) `file-text`                                                                                                                                                                                                                                                                                                                                                                                                                         |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjIgM0gybDggOS40NlYxOWw0IDJ2LTguNTRMMjIgM3oiLz48L3N2Zz4=) `filter`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjAgMjBhMiAyIDAgMCAwIDItMlY4YTIgMiAwIDAgMC0yLTJoLTcuOWEyIDIgMCAwIDEtMS42OS0uOUw5LjYgMy45QTIgMiAwIDAgMCA3LjkzIDNINGEyIDIgMCAwIDAtMiAydjEzYTIgMiAwIDAgMCAyIDJaIi8+PC9zdmc+) `folder`                                                                                                                                                                                                                                                                                                                                        | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNCAyMGgxNmEyIDIgMCAwIDAgMi0yVjhhMiAyIDAgMCAwLTItMmgtNy45M2EyIDIgMCAwIDEtMS42Ni0uOWwtLjgyLTEuMkEyIDIgMCAwIDAgNy45MyAzSDRhMiAyIDAgMCAwLTIgMnYxM2MwIDEuMS45IDIgMiAyWk0xMiAxMHY2TTkgMTNoNiIvPjwvc3ZnPg==) `folder-plus`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjAgMTdhMiAyIDAgMCAwIDItMlY5YTIgMiAwIDAgMC0yLTJoLTMuOWEyIDIgMCAwIDEtMS42OS0uOWwtLjgxLTEuMmEyIDIgMCAwIDAtMS42Ny0uOUg4YTIgMiAwIDAgMC0yIDJ2OWEyIDIgMCAwIDAgMiAyWiIvPjxwYXRoIGQ9Ik0yIDh2MTFhMiAyIDAgMCAwIDIgMmgxNCIvPjwvc3ZnPg==) `folders`                                                                                                                                                                                                                                                                                                                                                                   |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMiAzdjE4Ii8+PHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjE4IiB4PSI2IiB5PSIzIiByeD0iMiIvPjxwYXRoIGQ9Ik0yMiAzdjE4Ii8+PC9zdmc+) `gallery-horizontal`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2YjcyODAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTUgMjJ2LTRhNC44IDQuOCAwIDAgMC0xLTMuNWMzIDAgNi0yIDYtNS41LjA4LTEuMjUtLjI3LTIuNDgtMS0zLjUuMjgtMS4xNS4yOC0yLjM1IDAtMy41IDAgMC0xIDAtMyAxLjUtMi42NC0uNS01LjM2LS41LTggMEM2IDIgNSAyIDUgMmMtLjMgMS4xNS0uMyAyLjM1IDAgMy41QTUuNDAzIDUuNDAzIDAgMCAwIDQgOWMwIDMuNSAzIDUuNSA2IDUuNS0uMzkuNDktLjY4IDEuMDUtLjg1IDEuNjUtLjE3LjYtLjIyIDEuMjMtLjE1IDEuODV2NCIvPjxwYXRoIGQ9Ik05IDE4Yy00LjUxIDItNS0yLTctMiIvPjwvc3ZnPg==) `github`                                                                                                            | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2YjcyODAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCI+PC9jaXJjbGU+PGxpbmUgeDE9IjIiIHkxPSIxMiIgeDI9IjIyIiB5Mj0iMTIiPjwvbGluZT48cGF0aCBkPSJNMTIgMmExNS4zIDE1LjMgMCAwIDEgNCAxMCAxNS4zIDE1LjMgMCAwIDEtNCAxMCAxNS4zIDE1LjMgMCAwIDEtNC0xMCAxNS4zIDE1LjMgMCAwIDEgNC0xMHoiPjwvcGF0aD48L3N2Zz4=) `globe`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSI5IiBjeT0iMTIiIHI9IjEiLz48Y2lyY2xlIGN4PSI5IiBjeT0iNSIgcj0iMSIvPjxjaXJjbGUgY3g9IjkiIGN5PSIxOSIgcj0iMSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTIiIHI9IjEiLz48Y2lyY2xlIGN4PSIxNSIgY3k9IjUiIHI9IjEiLz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE5IiByPSIxIi8+PC9zdmc+) `grip-vertical`                                                                                                                                                                                                                                                                                                                                             |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTggMTFWNmEyIDIgMCAwIDAtMi0ydjBhMiAyIDAgMCAwLTIgMnYwTTE0IDEwVjRhMiAyIDAgMCAwLTItMnYwYTIgMiAwIDAgMC0yIDJ2Mk0xMCAxMC41VjZhMiAyIDAgMCAwLTItMnYwYTIgMiAwIDAgMC0yIDJ2OCIvPjxwYXRoIGQ9Ik0xOCA4YTIgMiAwIDEgMSA0IDB2NmE4IDggMCAwIDEtOCA4aC0yYy0yLjggMC00LjUtLjg2LTUuOTktMi4zNGwtMy42LTMuNmEyIDIgMCAwIDEgMi44My0yLjgyTDcgMTUiLz48L3N2Zz4=) `hand`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNCAxMmg4TTQgMThWNk0xMiAxOFY2TTE3IDEybDMtMnY4Ii8+PC9zdmc+) `heading-1`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNCAxMmg4TTQgMThWNk0xMiAxOFY2TTIxIDE4aC00YzAtNCA0LTMgNC02IDAtMS41LTItMi41LTQtMSIvPjwvc3ZnPg==) `heading-2`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNCAxMmg4TTQgMThWNk0xMiAxOFY2TTE3LjUgMTAuNWMxLjctMSAzLjUgMCAzLjUgMS41YTIgMiAwIDAgMS0yIDJNMTcgMTcuNWMyIDEuNSA0IC4zIDQtMS41YTIgMiAwIDAgMC0yLTIiLz48L3N2Zz4=) `heading-3`                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIGQ9Ik05LjA5IDlhMyAzIDAgMCAxIDUuODMgMWMwIDItMyAzLTMgM00xMiAxN2guMDEiLz48L3N2Zz4=) `help-circle`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJtMyA5IDktNyA5IDd2MTFhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJ6Ii8+PHBhdGggZD0iTTkgMjJWMTJoNnYxMCIvPjwvc3ZnPg==) `home`                                                                                                                                                                                                                                                                                                                                                                                                      | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHg9IjMiIHk9IjMiIHJ4PSIyIiByeT0iMiIvPjxjaXJjbGUgY3g9IjkiIGN5PSI5IiByPSIyIi8+PHBhdGggZD0ibTIxIDE1LTMuMDg2LTMuMDg2YTIgMiAwIDAgMC0yLjgyOCAwTDYgMjEiLz48L3N2Zz4=) `image`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjIgMTJoLTZsLTIgM2gtNGwtMi0zSDIiLz48cGF0aCBkPSJNNS40NSA1LjExIDIgMTJ2NmEyIDIgMCAwIDAgMiAyaDE2YTIgMiAwIDAgMCAyLTJ2LTZsLTMuNDUtNi44OUEyIDIgMCAwIDAgMTYuNzYgNEg3LjI0YTIgMiAwIDAgMC0xLjc5IDEuMTF6Ii8+PC9zdmc+) `inbox`                                                                                                                                                                                                                                                                                                                                                                                         |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIGQ9Ik0xMiAxNnYtNE0xMiA4aC4wMSIvPjwvc3ZnPg==) `info`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiM2YjcyODAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNNiA0aDRhMSAxIDAgMCAxIDEgMXYxNGExIDEgMCAwIDEtMSAxSDZhMSAxIDAgMCAxLTEtMVY1YTEgMSAwIDAgMSAxLTF6bTkgOGg0bS0yLTJ2NCIvPjwvc3ZnPg==) `insert-column-after`                                                                                                                                                                                                                                                                                                                                                                       | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiM2YjcyODAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNMTQgNGg0YTEgMSAwIDAgMSAxIDF2MTRhMSAxIDAgMCAxLTEgMWgtNGExIDEgMCAwIDEtMS0xVjVhMSAxIDAgMCAxIDEtMXptLTkgOGg0bS0yLTJ2NCIvPjwvc3ZnPg==) `insert-column-before`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiM2YjcyODAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNNCAxOHYtNGExIDEgMCAwIDEgMS0xaDE0YTEgMSAwIDAgMSAxIDF2NGExIDEgMCAwIDEtMSAxSDVhMSAxIDAgMCAxLTEtMXptOC05VjVtLTIgMmg0Ii8+PC9zdmc+) `insert-row-above`                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiM2YjcyODAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNMjAgNnY0YTEgMSAwIDAgMS0xIDFINWExIDEgMCAwIDEtMS0xVjZhMSAxIDAgMCAxIDEtMWgxNGExIDEgMCAwIDEgMSAxem0tOCA5djRtMi0yaC00Ii8+PC9zdmc+) `insert-row-below`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgNGgtOU0xNCAyMEg1TTE1IDQgOSAyMCIvPjwvc3ZnPg==) `italic`                                                                                                                                                                                                                                                                                                                                                                                                                                                                | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJtNSA4IDYgNk00IDE0bDYtNiAyLTNNMiA1aDEyTTcgMmgxTTIyIDIybC01LTEwLTUgMTBNMTQgMThoNiIvPjwvc3ZnPg==) `languages`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMiAyIDdsMTAgNSAxMC01LTEwLTV6TTIgMTdsMTAgNSAxMC01TTIgMTJsMTAgNSAxMC01Ii8+PC9zdmc+) `layers`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHg9IjMiIHk9IjMiIHJ4PSIyIiByeT0iMiIvPjxwYXRoIGQ9Ik0zIDloMThNOSAyMVY5Ii8+PC9zdmc+) `layout`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSI5IiB4PSIzIiB5PSIzIiByeD0iMSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjUiIHg9IjE0IiB5PSIzIiByeD0iMSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjkiIHg9IjE0IiB5PSIxMiIgcng9IjEiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSI1IiB4PSIzIiB5PSIxNiIgcng9IjEiLz48L3N2Zz4=) `layout-dashboard`                                                                                                                                                                                                                                          | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSI3IiB4PSIzIiB5PSIzIiByeD0iMSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjciIHg9IjE0IiB5PSIzIiByeD0iMSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjciIHg9IjE0IiB5PSIxNCIgcng9IjEiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSI3IiB4PSIzIiB5PSIxNCIgcng9IjEiLz48L3N2Zz4=) `layout-grid`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSI3IiB4PSIzIiB5PSIxNCIgcng9IjEiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSI3IiB4PSIzIiB5PSIzIiByeD0iMSIvPjxwYXRoIGQ9Ik0xNCA0aDdNMTQgOWg3TTE0IDE1aDdNMTQgMjBoNyIvPjwvc3ZnPg==) `layout-list`                                                                                                                                                                                                                                                                                                                                                                                                       |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2YjcyODAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiA+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMTgiIHg9IjMiIHk9IjMiIHJ4PSIxIj48L3JlY3Q+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iNyIgeD0iMTQiIHk9IjMiIHJ4PSIxIj48L3JlY3Q+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iNyIgeD0iMTQiIHk9IjE0IiByeD0iMSI+PC9yZWN0Pjwvc3ZnPg==) `layout-panel-left`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iNyIgeD0iMyIgeT0iMyIgcng9IjEiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSI3IiB4PSIzIiB5PSIxNCIgcng9IjEiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSI3IiB4PSIxNCIgeT0iMTQiIHJ4PSIxIi8+PC9zdmc+) `layout-panel-top`                                                                                                                                                                                                                                                                                                          | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMTYiIHg9IjIiIHk9IjQiIHJ4PSIyIi8+PHBhdGggZD0iTTYgOGguMDFNMTAgOGguMDFNMTQgOGguMDEiLz48L3N2Zz4=) `layout-tabs`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iNyIgeD0iMyIgeT0iMyIgcng9IjEiLz48cmVjdCB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB4PSIzIiB5PSIxNCIgcng9IjEiLz48cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI3IiB4PSIxNiIgeT0iMTQiIHJ4PSIxIi8+PC9zdmc+) `layout-template`                                                                                                                                                                                                                                                                                                                                                                                           |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTAgMTNhNSA1IDAgMCAwIDcuNTQuNTRsMy0zYTUgNSAwIDAgMC03LjA3LTcuMDdsLTEuNzIgMS43MSIvPjxwYXRoIGQ9Ik0xNCAxMWE1IDUgMCAwIDAtNy41NC0uNTRsLTMgM2E1IDUgMCAwIDAgNy4wNyA3LjA3bDEuNzEtMS43MSIvPjwvc3ZnPg==) `link`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOCA2aDEzTTggMTJoMTNNOCAxOGgxM00zIDZoLjAxTTMgMTJoLjAxTTMgMThoLjAxIi8+PC9zdmc+) `list`                                                                                                                                                                                                                                                                                                                                                                                                                                      | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJtMyAxNyAyIDIgNC00TTMgN2wyIDIgNC00TTEzIDZoOE0xMyAxMmg4TTEzIDE4aDgiLz48L3N2Zz4=) `list-checks`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJtMyAxMCAyLjUtMi41TDMgNU0zIDE5bDIuNS0yLjVMMyAxNE0xMCA2aDExTTEwIDEyaDExTTEwIDE4aDExIi8+PC9zdmc+) `list-collapse`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMyA2aDE4TTcgMTJoMTBNMTAgMThoNCIvPjwvc3ZnPg==) `list-filter`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTAgMTJoMTFNMTAgMThoMTFNMTAgNmgxMU00IDEwaDJNNCA2aDF2NE02IDE4SDRjMC0xIDItMiAyLTNzLTEtMS41LTItMSIvPjwvc3ZnPg==) `list-ordered`                                                                                                                                                                                                                                                                                                                                                                                              | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB4PSIzIiB5PSI1IiByeD0iMSIvPjxwYXRoIGQ9Im0zIDE3IDIgMiA0LTRNMTMgNmg4TTEzIDEyaDhNMTMgMThoOCIvPjwvc3ZnPg==) `list-todo`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMnY0TTEyIDE4djRNNC45MyA0LjkzbDIuODMgMi44M00xNi4yNCAxNi4yNGwyLjgzIDIuODNNMiAxMmg0TTE4IDEyaDRNNC45MyAxOS4wN2wyLjgzLTIuODNNMTYuMjQgNy43NmwyLjgzLTIuODMiLz48L3N2Zz4=) `loader`                                                                                                                                                                                                                                                                                                                                                                                                                            |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHg9IjMiIHk9IjExIiByeD0iMiIgcnk9IjIiLz48cGF0aCBkPSJNNyAxMVY3YTUgNSAwIDAgMSAxMCAwdjQiLz48L3N2Zz4=) `lock`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTUgM2g2djZNOSAyMUgzdi02TTIxIDNsLTcgN00zIDIxbDctNyIvPjwvc3ZnPg==) `maximize`                                                                                                                                                                                                                                                                                                                                                                                                                                              | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNCAxMmgxNk00IDZoMTZNNCAxOGgxNiIvPjwvc3ZnPg==) `menu`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2YjcyODAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMi45OTIgMTYuMzQyYTIgMiAwIDAgMSAuMDk0IDEuMTY3bC0xLjA2NSAzLjI5YTEgMSAwIDAgMCAxLjIzNiAxLjE2OGwzLjQxMy0uOTk4YTIgMiAwIDAgMSAxLjA5OS4wOTIgMTAgMTAgMCAxIDAtNC43NzctNC43MTkiLz48cGF0aCBkPSJNOCAxMmguMDEiLz48cGF0aCBkPSJNMTIgMTJoLjAxIi8+PHBhdGggZD0iTTE2IDEyaC4wMSIvPjwvc3ZnPg==) `message-circle-more`                                                                                                                                                                                                                                                                                                           |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2YjcyODAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIuMjIgMmgtLjQ0YTIgMiAwIDAgMC0yIDJ2LjE4YTIgMiAwIDAgMS0xIDEuNzNsLS40My4yNWEyIDIgMCAwIDEtMiAwbC0uMTUtLjA4YTIgMiAwIDAgMC0yLjczLjczbC0uMjIuMzhhMiAyIDAgMCAwIC43MyAyLjczbC4xNS4xYTIgMiAwIDAgMSAxIDEuNzJ2LjUxYTIgMiAwIDAgMS0xIDEuNzRsLS4xNS4wOWEyIDIgMCAwIDAtLjczIDIuNzNsLjIyLjM4YTIgMiAwIDAgMCAyLjczLjczbC4xNS0uMDhhMiAyIDAgMCAxIDIgMGwuNDMuMjVhMiAyIDAgMCAxIDEgMS43M1YyMGEyIDIgMCAwIDAgMiAyaC40NGEyIDIgMCAwIDAgMi0ydi0uMThhMiAyIDAgMCAxIDEtMS43M2wuNDMtLjI1YTIgMiAwIDAgMSAyIDBsLjE1LjA4YTIgMiAwIDAgMCAyLjczLS43M2wuMjItLjM5YTIgMiAwIDAgMC0uNzMtMi43M2wtLjE1LS4wOGEyIDIgMCAwIDEtMS0xLjc0di0uNWEyIDIgMCAwIDEgMS0xLjc0bC4xNS0uMDlhMiAyIDAgMCAwIC43My0yLjczbC0uMjItLjM4YTIgMiAwIDAgMC0yLjczLS43M2wtLjE1LjA4YTIgMiAwIDAgMS0yIDBsLS40My0uMjVhMiAyIDAgMCAxLTEtMS43M1Y0YTIgMiAwIDAgMC0yLTJaIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMyIvPjwvc3ZnPg==) `settings` | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2YjcyODAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOC4zIDEwYS43LjcgMCAwIDEtLjYyNi0xLjA3OUwxMS40IDNhLjcuNyAwIDAgMSAxLjE5OC0uMDQzTDE2LjMgOC45YS43LjcgMCAwIDEtLjU3MiAxLjFaIi8+PHJlY3QgeD0iMyIgeT0iMTQiIHdpZHRoPSI3IiBoZWlnaHQ9IjciIHJ4PSIxIi8+PGNpcmNsZSBjeD0iMTcuNSIgY3k9IjE3LjUiIHI9IjMuNSIvPjwvc3ZnPg==) `shapes`                                                                                                                                                                                                                                                            | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHg9IjMiIHk9IjMiIHJ4PSIyIiByeT0iMiIvPjxwYXRoIGQ9Ik05IDN2MTgiLz48L3N2Zz4=) `sidebar`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2YjcyODAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1zbGFjay1pY29uIGx1Y2lkZS1zbGFjayI+PHJlY3Qgd2lkdGg9IjMiIGhlaWdodD0iOCIgeD0iMTMiIHk9IjIiIHJ4PSIxLjUiLz48cGF0aCBkPSJNMTkgOC41VjEwaDEuNUExLjUgMS41IDAgMSAwIDE5IDguNSIvPjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjgiIHg9IjgiIHk9IjE0IiByeD0iMS41Ii8+PHBhdGggZD0iTTUgMTUuNVYxNEgzLjVBMS41IDEuNSAwIDEgMCA1IDE1LjUiLz48cmVjdCB3aWR0aD0iOCIgaGVpZ2h0PSIzIiB4PSIxNCIgeT0iMTMiIHJ4PSIxLjUiLz48cGF0aCBkPSJNMTUuNSAxOUgxNHYxLjVhMS41IDEuNSAwIDEgMCAxLjUtMS41Ii8+PHJlY3Qgd2lkdGg9IjgiIGhlaWdodD0iMyIgeD0iMiIgeT0iOCIgcng9IjEuNSIvPjxwYXRoIGQ9Ik04LjUgNUgxMFYzLjVBMS41IDEuNSAwIDEgMCA4LjUgNSIvPjwvc3ZnPg==) `slack` |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNCAyMXYtN000IDEwVjNNMTIgMjF2LTlNMTIgOFYzTTIwIDIxdi01TTIwIDEyVjNNMiAxNGg0TTEwIDhoNE0xOCAxNmg0Ii8+PC9zdmc+) `sliders`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjEgNGgtN00xMCA0SDNNMjEgMTJoLTlNOCAxMkgzTTIxIDIwaC01TTEyIDIwSDNNMTQgMnY0TTggMTB2NE0xNiAxOHY0Ii8+PC9zdmc+) `sliders-horizontal`                                                                                                                                                                                                                                                                                                                                                                                            | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjIgMTF2MWExMCAxMCAwIDEgMS05LTEwIi8+PHBhdGggZD0iTTggMTRzMS41IDIgNCAyIDQtMiA0LTJNOSA5aC4wMU0xNSA5aC4wMU0xNiA1aDZNMTkgMnY2Ii8+PC9zdmc+) `smile-plus`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2YjcyODAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOCA3djciLz48cGF0aCBkPSJNMTIgN3Y0Ii8+PHBhdGggZD0iTTE2IDd2OSIvPjxwYXRoIGQ9Ik01IDNhMiAyIDAgMCAwLTIgMiIvPjxwYXRoIGQ9Ik05IDNoMSIvPjxwYXRoIGQ9Ik0xNCAzaDEiLz48cGF0aCBkPSJNMTkgM2EyIDIgMCAwIDEgMiAyIi8+PHBhdGggZD0iTTIxIDl2MSIvPjxwYXRoIGQ9Ik0yMSAxNHYxIi8+PHBhdGggZD0iTTIxIDE5YTIgMiAwIDAgMS0yIDIiLz48cGF0aCBkPSJNMTQgMjFoMSIvPjxwYXRoIGQ9Ik05IDIxaDEiLz48cGF0aCBkPSJNNSAyMWEyIDIgMCAwIDEtMi0yIi8+PHBhdGggZD0iTTMgMTR2MSIvPjxwYXRoIGQ9Ik0zIDl2MSIvPjwvc3ZnPg==) `square-dashed-kanban`                                                                                                                          |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iNiIgeD0iMiIgeT0iNCIgcng9IjIiLz48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iNiIgeD0iMiIgeT0iMTQiIHJ4PSIyIi8+PC9zdmc+) `stretch-horizontal`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSIyMCIgeD0iNCIgeT0iMiIgcng9IjIiLz48cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSIyMCIgeD0iMTQiIHk9IjIiIHJ4PSIyIi8+PC9zdmc+) `stretch-vertical`                                                                                                                                                                                                                                                                                                                                                                          | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTYgNEg5YTMgMyAwIDAgMC0yLjgzIDRNMTQgMTJhNCA0IDAgMCAxIDAgOEg2TTQgMTJoMTYiLz48L3N2Zz4=) `strikethrough`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgM3YxOCIvPjxyZWN0IHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgeD0iMyIgeT0iMyIgcng9IjIiLz48cGF0aCBkPSJNMyA5aDE4TTMgMTVoMTgiLz48L3N2Zz4=) `table`                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0yIDR2OGgxMFY0SDJaTTAgMmEyIDIgMCAwIDEgMi0yaDEwYTIgMiAwIDAgMSAyIDJ2MTBhMiAyIDAgMCAxLTIgMkgyYTIgMiAwIDAgMS0yLTJWMloiLz48L3N2Zz4=) `table-header`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMkgydjEwbDkuMjkgOS4yOWMuOTQuOTQgMi40OC45NCAzLjQyIDBsNi41OC02LjU4Yy45NC0uOTQuOTQtMi40OCAwLTMuNDJMMTIgMlpNNyA3aC4wMSIvPjwvc3ZnPg==) `tag`                                                                                                                                                                                                                                                                                                                                                                               | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTQgMTlhNiA2IDAgMCAwLTEyIDAiLz48Y2lyY2xlIGN4PSI4IiBjeT0iOSIgcj0iNCIvPjxwYXRoIGQ9Ik0yMiAxOWE2IDYgMCAwIDAtNi02IDQgNCAwIDEgMCAwLTgiLz48L3N2Zz4=) `team`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTcgMTRWMk05IDE4LjEyIDEwIDE0SDQuMTdhMiAyIDAgMCAxLTEuOTItMi41NmwyLjMzLThBMiAyIDAgMCAxIDYuNSAySDIwYTIgMiAwIDAgMSAyIDJ2OGEyIDIgMCAwIDEtMiAyaC0yLjc2YTIgMiAwIDAgMC0xLjc5IDEuMTFMMTIgMjJhMy4xMyAzLjEzIDAgMCAxLTMtMy44OFoiLz48L3N2Zz4=) `thumbs-down`                                                                                                                                                                                                                                                                                                                                                           |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNyAxMHYxMk0xNSA1Ljg4IDE0IDEwaDUuODNhMiAyIDAgMCAxIDEuOTIgMi41NmwtMi4zMyA4QTIgMiAwIDAgMSAxNy41IDIySDRhMiAyIDAgMCAxLTItMnYtOGEyIDIgMCAwIDEgMi0yaDIuNzZhMiAyIDAgMCAwIDEuNzktMS4xMUwxMiAyYTMuMTMgMy4xMyAwIDAgMSAzIDMuODhaIi8+PC9zdmc+) `thumbs-up`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2YjcyODAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTAgMTVoNCIvPjxwYXRoIGQ9Im0xNC44MTcgMTAuOTk1LS45NzEtMS40NSAxLjAzNC0xLjIzMmEyIDIgMCAwIDAtMi4wMjUtMy4yMzhsLTEuODIuMzY0TDkuOTEgMy44ODVhMiAyIDAgMCAwLTMuNjI1Ljc0OEw2LjE0MSA2LjU1bC0xLjcyNS40MjZhMiAyIDAgMCAwLS4xOSAzLjc1NmwuNjU3LjI3Ii8+PHBhdGggZD0ibTE4LjgyMiAxMC45OTUgMi4yNi01LjM4YTEgMSAwIDAgMC0uNTU3LTEuMzE4TDE2Ljk1NCAyLjlhMSAxIDAgMCAwLTEuMjgxLjUzM2wtLjkyNCAyLjEyMiIvPjxwYXRoIGQ9Ik00IDEyLjAwNkExIDEgMCAwIDEgNC45OTQgMTFIMTlhMSAxIDAgMCAxIDEgMXY3YTIgMiAwIDAgMS0yIDJINmEyIDIgMCAwIDEtMi0yeiIvPjwvc3ZnPg==) `tool-case` | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMyA2aDE4TTE5IDZ2MTRjMCAxLTEgMi0yIDJIN2MtMSAwLTItMS0yLTJWNk04IDZWNGMwLTEgMS0yIDItMmg0YzEgMCAyIDEgMiAydjJNMTAgMTF2Nk0xNCAxMXY2Ii8+PC9zdmc+) `trash-2`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNCA3VjRoMTZ2M005IDIwaDZNMTIgNHYxNiIvPjwvc3ZnPg==) `type`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNiA0djZhNiA2IDAgMCAwIDEyIDBWNE00IDIwaDE2Ii8+PC9zdmc+) `underline`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjEgMTV2NGEyIDIgMCAwIDEtMiAySDVhMiAyIDAgMCAxLTItMnYtNE0xNyA4bC01LTUtNSA1TTEyIDN2MTIiLz48L3N2Zz4=) `upload`                                                                                                                                                                                                                                                                                                                                                                                                                |  `user`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHg9IjIiIHk9IjIiIHJ4PSIyLjE4IiByeT0iMi4xOCIvPjxwYXRoIGQ9Ik03IDJ2MjBNMTcgMnYyME0yIDEyaDIwTTIgN2g1TTIgMTdoNU0xNyAxN2g1TTE3IDdoNSIvPjwvc3ZnPg==) `video`                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2YjcyODAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTQuNyA2LjNhMSAxIDAgMCAwIDAgMS40bDEuNiAxLjZhMSAxIDAgMCAwIDEuNCAwbDMuMTA2LTMuMTA1Yy4zMi0uMzIyLjg2My0uMjIuOTgzLjIxOGE2IDYgMCAwIDEtOC4yNTkgNy4wNTdsLTcuOTEgNy45MWExIDEgMCAwIDEtMi45OTktM2w3LjkxLTcuOTFhNiA2IDAgMCAxIDcuMDU3LTguMjU5Yy40MzguMTIuNTQuNjYyLjIxOS45ODR6Ii8+PC9zdmc+) `wrench`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTggNiA2IDE4TTYgNmwxMiAxMiIvPjwvc3ZnPg==) `x`                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIGQ9Im0xNSA5LTYgNk05IDlsNiA2Ii8+PC9zdmc+) `x-circle`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3MjgwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNCAxNGExIDEgMCAwIDEtLjc4LTEuNjNsOS45LTEwLjJhLjUuNSAwIDAgMSAuODYuNDZsLTEuOTIgNi4wMkExIDEgMCAwIDAgMTMgMTBoN2ExIDEgMCAwIDEgLjc4IDEuNjNsLTkuOSAxMC4yYS41LjUgMCAwIDEtLjg2LS40NmwxLjkyLTYuMDJBMSAxIDAgMCAwIDExIDE0eiIvPjwvc3ZnPg==) `zap`                                                                                                                                                                                                                                                                                                                                                                       |

> [!NOTE]
> If the name you use is not in this list, the icon slot will render empty. Icons are sourced from `@nimble-initiatives/webcomponents` and follow the [Lucide](https://lucide.dev/) icon style.

---

# CLI

Source: https://strife.app/docs/reference/cli

The Strife CLI (@strifeapp/cli) connects a local project to Strife: sign in, link a team, define content types in code, and deploy them — from the command line or as part of CI.

Strife CLI is the code-first bridge between your project and Strife. It handles authentication, links a local project to a team, and deploys a code-defined content model to that team's templates — no manual template setup in Strife Studio required.

> [!NOTE]
> **Status:** the CLI is in active development (`0.x`, alpha). The surface area described here is stable enough for day-to-day use, but may still change between minor versions. Pin an exact version in CI.

At a glance, the CLI lets you:

* Authenticate via a browser-based device flow (`strife login`) — no passwords or API keys typed into a terminal.
* Link a local project to a specific team (`strife link`), or bootstrap a brand-new project end to end in one step (`strife` / `strife .`).
* Define content types in TypeScript or JavaScript using [`defineType`](https://strife.app/docs/reference/cli/schemas.md) instead of building templates by hand in Strife Studio.
* Generate local TypeScript types for your content model (`strife typegen`) — see [Typegen](https://strife.app/docs/reference/cli/typegen.md).
* Deploy your code-defined schema as real templates, ready to edit in Strife Studio (`strife push`).
* Upload media directly to a team's asset library (`strife upload`).

See [Commands](https://strife.app/docs/reference/cli/commands.md) for the full command reference, [Schemas](https://strife.app/docs/reference/cli/schemas.md) for `defineType`/`defineConfig`, [Typegen](https://strife.app/docs/reference/cli/typegen.md) for generated types, and [Authentication & Linking](https://strife.app/docs/reference/cli/authentication-and-linking.md) for how sign-in and project linking work under the hood.

## Requirements

* Node.js 22 or later.
* An ESM-compatible project (`"type": "module"` in `package.json`, or ESM-flavored config files). The CLI itself is published as ESM.

The CLI does not assume any particular frontend framework. Everything in this section — authentication, linking, schema authoring, `push`, `typegen` — is plain Node.js tooling that works the same way regardless of what renders your site.

## Install

Add the CLI and the Strife SDK to your project as dev dependencies:

```sh
npm install --save-dev @strifeapp/cli @strifeapp/strife
```

> [!NOTE]
> `strife push` and `strife typegen` always resolve their schema/type-generation implementation from **your project's own installed `@strifeapp/strife`** — not a copy bundled with the CLI — the same way the vite/astro CLIs use your project's installed framework rather than a bundled copy. This holds regardless of whether you use live-preview: `@strifeapp/strife` is required for `push`/`typegen` to run at all, not just for runtime/live-preview integrations.
>
> `@strifeapp/strife/schema` already re-exports everything `@strifeapp/schema` provides (`defineType`, `fields`, `defineConfig`, `glob`), so there's normally no reason to add `@strifeapp/schema` as its own direct dependency — import from `@strifeapp/strife/schema` and let `@strifeapp/strife` pull it in transitively. If `@strifeapp/strife` is missing (for example, a project that installed only `@strifeapp/schema`), `push`/`typegen` fail immediately with a clear "Could not resolve `@strifeapp/strife`" error.

Install the CLI as a **dev dependency**, not globally. Global installs work too, but every command in this documentation uses `npx strife ...`, which finds your project's locally installed binary regardless of whether a global install also exists — the portable form to use in scripts, CI, and instructions you hand to teammates. A bare `strife` (no `npx`) only works if the CLI happens to be installed globally on that specific machine.

## Quickstart

```sh
# 1. Authenticate — prints a URL to open (does not launch a browser for you)
npx strife login

# 2. Link this directory to a workspace + team
npx strife link

# 3. Declare a content type
mkdir schemas
cat > schemas/article.ts <<'EOF'
import { defineType, fields } from '@strifeapp/strife/schema';

export const article = defineType({
  name: 'articles',
  title: 'Article',
  type: 'document',
  fields: {
    heading: fields.text({ label: 'Heading', localizable: true }),
    body: fields.html({ label: 'Body' }),
  },
});
EOF

# 4. Point the CLI at your schema files
cat > strife.config.ts <<'EOF'
import { defineConfig, glob } from '@strifeapp/strife/schema';

export default defineConfig({
  schema: glob('./schemas/**/*.ts'),
});
EOF

# 5. Deploy it
npx strife push
```

After `push` completes, the `Article` type is a real, editable template in Strife Studio.

## Bootstrapping a brand-new project

If you're starting from scratch rather than adding the CLI to an existing project, running the CLI with no arguments (or `strife .`) drives the whole setup interactively — sign-in, team selection or creation, an optional starter template, and writing the local credentials your app needs to connect to the team's database:

```sh
npm create @strife
# or, if @strifeapp/cli is already installed:
npx strife
```

Both invocations run the exact same logic. `npm create @strife` is a thin wrapper that (optionally) creates a target directory and then delegates straight into it.

What it does, step by step:

1. Signs you in (device flow), unless you already have a valid session.
2. Resolves a team: link to one you already have access to, or create a new one by name. (Skipped if the current directory is already linked.)
3. If the directory is empty and you're in an interactive terminal, optionally scaffolds a starter project — currently Astro-based starters only (tagged `strife-starter` under the `nimble-initiatives` GitHub org, discovered at runtime). If you're adding Strife to an existing project, run this from that project's directory instead: since it isn't empty, the starter prompt is skipped automatically and you go straight to linking.
4. Provisions a database client certificate for the team and writes a single `STRIFE_SECRET` value to `.env`, packing the connection details your app needs at runtime (database URLs, certificate, password). `.env` is added to `.gitignore` automatically.
5. If a starter was scaffolded, runs `typegen generate` and `push` for you and seeds some initial content; otherwise, it's on you to run `strife push` once you've written a schema.

> [!NOTE]
> `strife login`/`link`/`setup` only ever store non-secret linkage info (workspace/team IDs) in `.strife/project.json`, which is safe to commit — it's added to `.gitignore` mainly as a convenience, and contains no credentials. The actual secret lives only in `.env`.

## Troubleshooting

**A bare `strife` command works for me but not for a teammate.** `npm install --save-dev` never puts a binary on your system `PATH` — only in that project's `node_modules/.bin/`. If `strife` (without `npx`) works for you specifically, you most likely also have `@strifeapp/cli` installed globally on your machine from something unrelated. Don't assume teammates have the same global install; use `npx strife ...` in any instructions you hand off, and it will resolve correctly whether or not a global install exists.

For live-preview issues (e.g. the preview panel not loading your local dev server), see [Live preview](https://strife.app/docs/reference/live-preview.md#troubleshooting) — that's general Strife Studio behavior, not specific to the CLI.

---

# Commands

Source: https://strife.app/docs/reference/cli/commands

Full reference for every strife command — syntax, flags, authentication requirements, and what each one does.

Run `strife --help` at any time for a summary of the same information.

### Global behavior

* `--help` / `-h` and `--version` / `-v` are only recognized **before** the command name (`strife --help` works; `strife push --help` does not — it's passed through to `push`, which ignores it).
* `--json` is **not** a global flag. Pass it after the command name on commands that support it (`strife whoami --json`), not before.
* `--non-interactive` suppresses prompts and browser-open attempts, for scripts; some commands require an existing link when run this way, since there's nothing to prompt for otherwise. It does not sign you in: commands that talk to Strife still need a `strife login` session, which a CI runner cannot get today — see [Non-interactive use](https://strife.app/docs/reference/cli/authentication-and-linking.md#non-interactive-use).
* Running an unrecognized command prints an error and exits with a non-zero status.
* Set `STRIFE_NO_BANNER=1` to suppress the startup banner (useful when wrapping `strife` in scripts).

### Authentication requirements by command

| Command                                 | Requires login               | Requires link                 |
| --------------------------------------- | ---------------------------- | ----------------------------- |
| `login`                                 | — (that's its job)           | no                            |
| `logout`                                | no                           | no                            |
| `whoami`                                | yes                          | no (degrades gracefully)      |
| `link`                                  | yes                          | — (that's its job)            |
| `push`                                  | yes                          | yes                           |
| `upload`                                | yes                          | yes                           |
| `setup` (bare `strife` / `strife .`)    | bootstraps sign-in if needed | no (establishes it)           |
| `teams ls` / `teams rm`                 | yes                          | no                            |
| `domains` / `domains set`               | yes                          | yes                           |
| `folders create`                        | yes                          | only if `--team` isn't passed |
| `typegen generate` / `typegen validate` | no                           | no — fully offline            |

## `strife login`

```
strife login [--api-url <url>] [--force]
```

Authenticates via an OAuth 2.0 Device Authorization Grant. The CLI does not open a browser for you — it prints a URL and a code to visit. If you already have a valid session, `login` does nothing unless you pass `--force` (useful for switching accounts or workspaces, since a login session is scoped to one workspace for its lifetime).

| Flag              | Description                                                                           |
| ----------------- | ------------------------------------------------------------------------------------- |
| `--api-url <url>` | Override the API base URL. Defaults to `$STRIFE_API_URL` or `https://api.strife.app`. |
| `--force`         | Re-authenticate even if a valid session already exists.                               |

## `strife logout`

```
strife logout [--json]
```

Revokes the current session server-side on a best-effort basis and always clears local credentials — it exits successfully even if the machine was already logged out, or if the server-side revoke call fails. Does not remove any directory's `.strife/project.json` link; a previously linked directory still shows as linked, it just can't authenticate until you log in again.

## `strife whoami`

```
strife whoami [--json]
```

Prints the signed-in user, the active workspace/team (read from the current directory's link, not from the session token), and when the session expires.

## `strife link`

```
strife link [--workspace <id|slug>] [--team <id|key>] [--force]
```

Links the current directory to a team, writing `.strife/project.json`. The workspace is fixed by your login session — there's no workspace picker here, only a team picker. If the target workspace has no teams yet, `link` fails; create one first (see [bootstrapping a new project](https://strife.app/docs/reference/cli.md#bootstrapping-a-brand-new-project)).

| Flag                     | Description                                                                                                  |
| ------------------------ | ------------------------------------------------------------------------------------------------------------ |
| `--workspace <id\|slug>` | Assert which workspace you expect to link into. Errors if it doesn't match your session's workspace.         |
| `--team <id\|key>`       | Pick a team non-interactively. Required in `--non-interactive` mode if the workspace has more than one team. |
| `--force`                | Relink even if the directory is already linked.                                                              |

`.strife/project.json` contains only non-secret identifiers (workspace/team IDs and names) and is safe to commit.

## `strife push`

```
strife push [--config <path>] [--dry-run] [--force] [--prune] [--allow-missing-ids] [-y | --yes]
```

Compiles the schema files described by `strife.config.ts` (see [Schemas](https://strife.app/docs/reference/cli/schemas.md)) and deploys them to the linked team: templates are upserted by id, followed by deployment of the content index and, if configured, the team's localization settings. Before reading the schemas it loads `.env.local` and `.env` from the current directory into the environment (never overriding a variable the shell already set), so a schema can read `process.env`; in a directory linked to a team, the lines prefixed with the team's key (`ACME_BLOG_PAGE_ID`) stand in for the plain name — see [Placing pages under a specific page](https://strife.app/docs/reference/cli/schemas.md#placing-pages-under-a-specific-page). They are removed again once the schemas are loaded, so nothing in `.env` changes how the CLI itself talks to Strife.

| Flag              | Description                                                                                                                           |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| `--config <path>` | Path to a config file other than the project root's `strife.config.ts` — useful in monorepos.                                         |
| `--dry-run`       | Print the compiled output without deploying anything. Its only request is a read of the team's current templates, to warn about `baseProperties` flags the push would turn off; if that read fails, the dry run still completes. |
| `--force`         | Skip the optimistic-concurrency check (see below) and push regardless of whether the team's templates changed since you last checked. |
| `--prune`         | Also archive templates that exist on the team but aren't in this push (see below). Off by default.                                    |
| `--allow-missing-ids` | Push even when a `from: { id: process.env.X }` entry reads an unset variable: the id is left out, with a warning. Without it such a push is refused (also under `--dry-run`, after the compiled output), so a template cannot silently lose its parent. |
| `-y`, `--yes`     | Skip the confirmation prompt. Required in `--non-interactive` mode.                                                                   |

**Push upserts by id; it does not delete by omission unless you ask it to.** Every deploy is checked against the team's current state via a version fingerprint; if something else changed the team's templates since your last check, `push` fails with a conflict rather than silently overwriting (`--force` bypasses this). By default, templates that exist on the team but aren't present in your local schema are left untouched — a teammate working from a different branch, with a different subset of schemas, can push without affecting templates they simply don't have locally yet. Pass `--prune` to opt into the old full-replace behavior instead: templates missing from the push are archived, not deleted, so they can be restored by pushing them again. `--prune` is meant for a deliberate, occasional cleanup sweep — run from your default branch, coordinated with anyone else who might be pushing — not as part of routine day-to-day pushes.

> [!WARNING]
> Choose type `name`s that are unlikely to collide with what teammates are independently defining. Two different local schemas that both resolve to the same template — for example, two people separately defining a type named `Home` — deploy to the same underlying document, which can produce confusing results if pushed independently rather than as one shared schema.

## `strife upload`

```
strife upload <file...> [--folder <id>] [--workspace <id>] [--name <name>]
```

Uploads one or more local files to the linked team's media library, directly to storage (not proxied through the Strife API). All files are validated up front — a missing or unsupported file anywhere in the batch aborts before anything uploads. Video files are rejected client-side (and server-side) by extension.

| Flag               | Description                                                    |
| ------------------ | -------------------------------------------------------------- |
| `--folder <id>`    | Target folder. Defaults to the team's root.                    |
| `--workspace <id>` | Attribute the upload to a workspace other than the linked one. |
| `--name <name>`    | Display name. Only applies when uploading a single file.       |

## `strife` / `strife .` (setup)

No arguments — see [bootstrapping a brand-new project](https://strife.app/docs/reference/cli.md#bootstrapping-a-brand-new-project) in the overview.

## `strife teams`

```
strife teams ls
strife teams rm <id|key> [-y | --yes]
```

`ls` lists the teams in your current workspace. `rm` **permanently** deletes a team — its database, storage, and certificates — after a confirmation prompt (skip with `--yes`).

## `strife domains`

```
strife domains
strife domains set <url>
```

Shows or sets the linked team's site origin. `set` requires an absolute `http(s)` URL.

## `strife folders create`

```
strife folders create <name> [-p | --parent <id>] [--team <id|key>] [--json]
```

Creates a media library folder. Uses the linked team unless `--team` is given.

## `strife typegen`

```
strife typegen generate [--config <path>] [-o | --output <path>]
strife typegen validate [--config <path>] [-o | --output <path>] [--allow-missing-ids]
```

See [Typegen](https://strife.app/docs/reference/cli/typegen.md) for the full reference — both subcommands are fully offline and require neither authentication nor a linked project. Like `push`, both load `.env.local` and `.env` from the current directory before reading the schemas, and in a directory linked to a team they read that team's prefixed lines the same way.

---

# Schemas

Source: https://strife.app/docs/reference/cli/schemas

Define content types in code with defineType and fields, and register them with strife.config.ts — an alternative to building templates by hand in Strife Studio.

`defineType` and the `fields.*` builders are a code-first way to define the same templates you could otherwise build in Strife Studio's UI. Import them from `@strifeapp/strife/schema`, which re-exports everything in `@strifeapp/schema`; there is no need to add `@strifeapp/schema` as a dependency of its own (see [CLI](https://strife.app/docs/reference/cli.md)). A type defined with `defineType` compiles to the same underlying template format described in [Defining Templates with JSON](https://strife.app/docs/reference/templates/defining-templates-with-json.md) — `defineType` is a typed, ergonomic authoring layer on top of that format, not a different concept.

## `defineType`

```ts
import { defineType, fields } from '@strifeapp/strife/schema';

export const article = defineType({
  name: 'articles',
  title: 'Article',
  type: 'document',
  fields: {
    heading: fields.text({ label: 'Heading', localizable: true }),
    body: fields.html({ label: 'Body' }),
    image: fields.image({ label: 'Image', width: 1600, height: 900, format: 'webp' }),
  },
});
```

| Option        | Description                                                                                                      |
| ------------- | ---------------------------------------------------------------------------------------------------------------- |
| `name`        | Required. The type's identifier. Drives the default `collection` name (pluralized, e.g. `article` → `Articles`). |
| `title`       | Label shown in Strife Studio. Defaults to a title-cased version of `name`.                                       |
| `type`        | `'document'` (default), `'content'`, or `'file'`. See [Type kinds](https://strife.app/docs/reference/cli/schemas.md#type-kinds) below.                 |
| `fields`      | An object mapping field names to `fields.*` builders.                                                            |
| `collection`  | Override the derived collection name.                                                                            |
| `description` | Shown as a hint to editors in Strife Studio.                                                                     |
| `icon`        | Icon name shown in Strife Studio. See [Icons](https://strife.app/docs/reference/icons.md).                                                      |
| `composable`  | Whether content built from this type can be composed inside other documents. Defaults to `true`.                 |
| `from`        | The document type(s) pages of this type are created under, and/or a specific page by id. See [Placing pages under a parent type](https://strife.app/docs/reference/cli/schemas.md#placing-pages-under-a-parent-type) and [under a specific page](https://strife.app/docs/reference/cli/schemas.md#placing-pages-under-a-specific-page). |
| `baseProperties` | Whether the built-in `displayName` and `slug` have one value per locale: `{ displayName: { localizable: true }, slug: { localizable: true } }`. Leave one out to keep Strife's default: `slug` is localizable on a team with two or more locales, and `displayName` follows each document's stored name — per locale when it already has one per locale, otherwise shared. See [Localizable `displayName` and `slug`](https://strife.app/docs/reference/cli/schemas.md#localizable-displayname-and-slug). |

`defineType` doesn't do anything at runtime beyond returning its input — the value comes from the types it produces for the rest of your code (see [Typegen](https://strife.app/docs/reference/cli/typegen.md)) and from `strife push` compiling it into a real template.

### Type kinds

| `type`     | Has its own URL | Typical use                                                                               |
| ---------- | --------------- | ----------------------------------------------------------------------------------------- |
| `document` | yes             | A standalone page — a blog post, a product, a landing page.                               |
| `content`  | no              | A reusable block composed inside a document or a [Chapters](https://strife.app/docs/reference/fields/chapters.md) field. |
| `file`     | no              | File-shaped content. Wire `templateType: 'ft'`.                                           |

### Singleton documents

`composable: false` is the right way to model a singleton document type — a root `Home`, a global `Navigation` or settings document, anything that should only ever have one instance. It's not just a hint: Strife Studio's "create new document" action filters on `composable`, so a `composable: false` document template doesn't offer a create action once its one document exists.

```ts
export const navigation = defineType({
  name: 'navigation',
  type: 'document',
  composable: false,
  fields: { /* ... */ },
});
```

`disableURL` isn't a `defineType` option — it's derived automatically from `type` (`false` for `document`, always `true` otherwise). This is deliberate: document types are standalone pages and get a URL by default; content and file types aren't pages and don't. There's no case where overriding it makes sense, so it isn't exposed.

### Placing pages under a parent type

Every page has an origin — the parent it sits under in the content tree, which drives its URL, breadcrumbs and where it is listed. `from` tells Strife which document type(s) a page of this type belongs under, so editors don't have to know. Give it a `defineType` name, or several:

```ts
export const blogPost = defineType({
  name: 'blogPost',
  from: 'blog', // or ['blog', 'newsRoom']
  fields: { /* ... */ },
});
```

In Strife Studio this shapes the origin picker, both when composing a page and when changing a page's origin from the content list:

* exactly one page of a `from` type exists — it is preselected;
* several exist — the picker offers only those;
* none exist — the picker behaves as before, with a hint naming the expected parent type.

Composing from a row's Compose menu keeps that row as origin only when it is of a `from` type, and the menu lists only templates allowed under that row. `from` is a Studio-side rule, not a server-side one: existing content is untouched and the API still accepts any origin. It applies in Strife Studio's classic interface today (the new app shell has no origin picker yet) and to the MCP `create_draft` tool, where an omitted `origin` defaults to the one page of an allowed type, several such pages make the tool ask for `origin`, and none falls back to the team's root page. It does nothing for a type whose documents have no URL (`disableURL`, i.e. content and file types), and an empty list means unrestricted. It compiles to the template's `allowedOrigins` (the parent types' normalized names) and needs `@strifeapp/strife` 1.13.0 or later, which brings `@strifeapp/schema` 0.13.0; on an older version `from` is simply not a known option.

#### Placing pages under a specific page

Sometimes the parent is one particular page rather than a kind of page — the blog, which is one of several list pages. Name it by id with `{ id }`, alone or mixed with type names:

```ts
export const blogPost = defineType({
  name: 'blogPost',
  from: { id: process.env.BLOG_PAGE_ID },
  // or: from: ['newsRoom', { id: process.env.BLOG_PAGE_ID }]
  fields: { /* ... */ },
});
```

A page id belongs to one team — the blog page has one id in your development team and another in production — so it is read from the environment rather than written into the schema. Give each team its own line, prefixed with the team's key:

```
# .env.local (or .env) — one line per team
ACME_BLOG_PAGE_ID=f375a22c-3142-4dbf-90ad-00bd9fee9e97
ACMEDEV_BLOG_PAGE_ID=5d0c2b7e-8a41-4f6e-b3d9-7c1e2a9f4b60
```

`strife push` and `strife typegen` load `.env.local` and `.env` from the directory they run in — the project root, where `strife.config.ts` lives — before reading the schemas. In a directory linked to a team (`strife link`), the lines prefixed with that team's key then stand in for the plain name: a push to ACME reads `ACME_BLOG_PAGE_ID` as `BLOG_PAGE_ID`, a push to ACMEDEV reads `ACMEDEV_BLOG_PAGE_ID`, and each team's template carries only its own page. The prefix is the team key that `strife whoami` shows after the team name, upper-cased, with any character other than A–Z, 0–9 and `_` written as `_`. `strife push` shows the mapping on its `Environment:` line — `Environment: .env.local · ACME_BLOG_PAGE_ID → BLOG_PAGE_ID` — or `no ACME_ variables` when there is none for that team, in which case a plain `BLOG_PAGE_ID` from the files goes out.

A plain `BLOG_PAGE_ID` works too. A value already set in the environment wins over everything, which suits a one-off push; then comes the linked team's line, then a plain line in `.env.local`, then one in `.env`. A tool that loads `.env` before the CLI starts (direnv, dotenv-cli, Bun) puts its plain lines in the environment too, so `strife push` warns whenever a value from the environment keeps the team's line from being used. Per-mode files such as `.env.production` are not read: a push builds nothing, so it has no mode — the team it goes to picks the value, through the prefix.

This works with any framework. Only the CLI reads the id: an app that imports the schema file on the server still loads it without the variable, with the id left out (not in a browser bundle, where `process` does not exist). Use `process.env`, not `import.meta.env`, which does not exist when the CLI loads the schema.

To find a page's id, open the page in Strife Studio's classic interface: the id is the last part of the address (`/team/<key>/<id>`). The `find_content` tool in the MCP tools returns it as well.

Studio's origin picker and the MCP `create_draft` tool treat a page named by id the way they treat a type: when it is the only match it is preselected (for `create_draft`, it becomes the origin), and when the schema also names a type, the pages of that type are offered alongside it (`create_draft` then asks which one). When the id names no page in the current team (the variable holds another team's id, or the page was deleted), the picker falls back to the full list and the hint names the id it looked for, and `create_draft` places the draft under the team's root page with a note naming the id.

An unset variable never breaks compilation — the id is simply left out — but `strife push` and `strife typegen validate` refuse to continue when that happens (`blogPost: from.id is undefined — …`, naming the linked team's prefixed form), because the template would otherwise reach the team without its parent rule and nobody would notice; `push --dry-run` prints the compiled output before it refuses. Pass `--allow-missing-ids` to push or validate anyway, with the id left out and the warning kept, for a team where that page deliberately does not exist.

`strife push` needs a `strife login` session, and a CI runner cannot get one today: login happens in a browser, and every refresh replaces the session's refresh token and retires the old one, so a session copied to a runner stops working at its first refresh. So pushes run from a developer's machine. `strife typegen validate` runs anywhere, CI included, but a CI checkout is usually not linked to a team (`strife link` keeps `.strife/` out of git), so no team line applies there unless you commit `.strife/project.json`: set the plain variable in the CI environment, or pass `--allow-missing-ids`.

It compiles to the template's `allowedOriginIds` and needs `@strifeapp/strife` 1.14.0 or later, which brings `@strifeapp/schema` 0.14.0 (update that too if you import from it directly), plus `@strifeapp/cli` 0.1.0-alpha.16 or later for the `.env` loading and the refusal, and 0.1.0-alpha.17 or later for the team lines. With an older `@strifeapp/strife`, a `{ id }` entry fails to compile with a clear error; with an older CLI, no `.env` file is loaded and nothing stops a push whose variable is unset, and 0.1.0-alpha.16 reads only the plain name.

### Fields

`fields.*` builders map to the same editor components documented under [Fields](https://strife.app/docs/reference/fields.md). Every builder has its own page with the full option set and output type under [Field Reference](https://strife.app/docs/reference/field-reference.md) — the table below is a quick index:

| Builder                                                                                                                         | Editor              | Notes                                                                                                                                                                                                      |
| ------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`fields.text(...)`](https://strife.app/docs/reference/field-reference/fields.text.md)                                                                         | Text                |                                                                                                                                                                                                            |
| [`fields.paragraph(...)`](https://strife.app/docs/reference/field-reference/fields.paragraph.md)                                                               | Paragraph           |                                                                                                                                                                                                            |
| [`fields.number(...)`](https://strife.app/docs/reference/field-reference/fields.number.md)                                                                     | Number              |                                                                                                                                                                                                            |
| [`fields.slider(...)`](https://strife.app/docs/reference/field-reference/fields.slider.md)                                                                     | Slider              | `min`/`max`/`step` configure the range (defaults 0–100, step 1).                                                                                                                                           |
| [`fields.html(...)`](https://strife.app/docs/reference/field-reference/fields.html.md)                                                                         | Rich Content        | `marks`/`nodes` control available formatting/content; `nodes` also carries image size/style/quality presets.                                                                                               |
| [`fields.json(...)`](https://strife.app/docs/reference/field-reference/fields-json.md)                                                                         | Rich Content (JSON) | **Deprecated** — never rendered by the edit panel. Stores arbitrary JSON; read type is `unknown`.                                                                                                          |
| [`fields.date(...)`](https://strife.app/docs/reference/field-reference/fields.date.md) / `fields.date({ withTime: true })`                                     | Date / Date Time    |                                                                                                                                                                                                            |
| [`fields.switch(...)`](https://strife.app/docs/reference/field-reference/fields.switch.md) / [`fields.toggle(...)`](https://strife.app/docs/reference/field-reference/fields.toggle.md)       | Checkbox / Toggle   |                                                                                                                                                                                                            |
| [`fields.slug(...)`](https://strife.app/docs/reference/field-reference/fields.slug.md)                                                                         | Slug                |                                                                                                                                                                                                            |
| [`fields.select(...)`](https://strife.app/docs/reference/field-reference/fields.select.md)                                                                     | Combo Box           |                                                                                                                                                                                                            |
| [`fields.multiSelect(...)`](https://strife.app/docs/reference/field-reference/fields.multiselect.md)                                                           | Multi Select        | Requires `options`. Stores an array of selected `value`s — distinct from `select({ multiSelect: true })`, which stores `{ value, name }` objects.                                                          |
| [`fields.labels(...)`](https://strife.app/docs/reference/field-reference/fields.labels.md)                                                                     | Label               | Picks from the team's labels, grouped for browsing — the same picker used for the built-in `labels` base property. No options to configure; adds an *additional*, independently-valued label-style field, distinct from `labels`.                                                          |
| [`fields.radioGroup(...)`](https://strife.app/docs/reference/field-reference/fields.radiogroup.md)                                                             | Radio Group         |                                                                                                                                                                                                            |
| [`fields.image(...)`](https://strife.app/docs/reference/field-reference/fields.image.md) / [`fields.imageGroup(...)`](https://strife.app/docs/reference/field-reference/fields.imagegroup.md) | Image / Image Group | `image` requires `width`/`height`/`format`. `height: 'auto'` gives a width-only image that keeps the source aspect ratio (compiles to the template's numeric `height: 0`). |
| [`fields.file(...)`](https://strife.app/docs/reference/field-reference/fields.file.md)                                                                         | File                | `allowedTypes` restricts uploads (comma-separated extensions/MIME types).                                                                                                                                  |
| [`fields.video(...)`](https://strife.app/docs/reference/field-reference/fields.video.md)                                                                       | Video               | Read type is `unknown` — stored shape isn't finalized yet.                                                                                                                                                 |
| [`fields.assets(...)`](https://strife.app/docs/reference/field-reference/fields.assets.md)                                                                     | Assets              | `accept` restricts to `'image/*' \| 'video/*' \| 'file/*'` (translated to numeric wire codes); `size` caps the count.                                                                                      |
| [`fields.link(...)`](https://strife.app/docs/reference/field-reference/fields.link.md)                                                                         | Link                | `linkOnly` hides the link-text input for href-only links.                                                                                                                                                  |
| [`fields.serp(...)`](https://strife.app/docs/reference/field-reference/fields.serp.md)                                                                         | Serp                | Usually `localizable: true` — title/description are typically per-locale. No `searchable`/`filterable`.                                                                                                    |
| [`fields.reference(...)`](https://strife.app/docs/reference/field-reference/fields.reference.md)                                                               | Related             | `to` sets the allowed target type(s); `multiple` defaults to `false`.                                                                                                                                      |
| [`fields.references(...)`](https://strife.app/docs/reference/field-reference/fields.references.md)                                                             | References          | `allow` sets the allowed target type(s).                                                                                                                                                                   |
| [`fields.collection(...)`](https://strife.app/docs/reference/field-reference/fields.collection.md)                                                             | Collection          | Stores a query definition (`CollectionDefinition`), not resolved documents — your app runs the query at render time. Studio-UI marks this editor obsolete; see the field page before using it in new work. |
| [`fields.repeatable(...)`](https://strife.app/docs/reference/field-reference/fields.repeatable.md)                                                             | Repeatable          | `of` sets the repeated inner editor (`text`, `number`, `date`, `datetime`, `link`). Feature-gated per team.                                                                                                |
| [`fields.multiInput(...)`](https://strife.app/docs/reference/field-reference/fields.multiinput.md)                                                             | Multi Input         | `inputType` sets the repeated primitive input type (defaults to `text`).                                                                                                                                   |
| [`fields.tableInput(...)`](https://strife.app/docs/reference/field-reference/fields.tableinput.md)                                                             | Table Input         | Requires `headers` and `inputTypes` — parallel arrays, one entry per column.                                                                                                                               |
| [`fields.chapters(...)`](https://strife.app/docs/reference/field-reference/fields.chapters.md)                                                                 | Chapters            | `allow` sets the allowed content types.                                                                                                                                                                    |
| [`fields.contentTemplate(...)`](https://strife.app/docs/reference/field-reference/fields.contenttemplate.md)                                                   | Content Template    |                                                                                                                                                                                                            |
| [`fields.tabs([...])`](../field-reference/fields.tabs.md)                                                                       | Tab Group           | Structural — child fields are grouped under tabs but stored flat, same as Strife stores tab data. Takes an array, not an options object.                                                                   |
| [`fields.hint(...)`](https://strife.app/docs/reference/field-reference/fields.hint.md)                                                                         | Hint                | UI-only — stores no data; omitted from the generated content type.                                                                                                                                         |

Each builder accepts at minimum `{ label, description?, localizable? }` plus type-specific options.

> [!NOTE]
> The **Notes** column above only calls out non-obvious or required options — every builder accepts more than what's shown (most also take `description`, `searchable`, `filterable`, `protected`, and `propertyName`, for example). For a builder's complete set of options — full tables, output types, and wire-format notes — open its page under [Field Reference](https://strife.app/docs/reference/field-reference.md). [Fields](https://strife.app/docs/reference/fields.md) documents the same editors from the Strife Studio UI side. Your editor's TypeScript hover/autocomplete on the `fields.*(...)` call reflects the same options straight from the source types, too.

`localizable` is only available on fields where it's meaningful — text, paragraph, number, date, slug, html, image, link, serp, chapters, and contentTemplate. Fields like `switch`, `select`, and `reference` don't expose it: a boolean or a selected option isn't the kind of value that varies by locale.

### Don't shadow the built-in `Content` fields

Every generated type extends a base `Content` shape that Strife already populates automatically:

```ts
type Content = {
  id: string; docId: string; locale: string; displayName: string;
  url: string | null; origin: string | null; collection: string;
  draft: boolean; publishedAt: string | null;
  createdAt: string; changedAt: string;
  dependencies: string[]; labels: string[];
};
```

Two of these are easy to accidentally redefine as your own fields:

* **`publishedAt`** is set automatically when content is published in Strife Studio — it isn't something an editor fills in. A field named `publishedAt` in your own schema shadows the built-in one with a manually-edited value that means something different, and the generated type ends up with two conflicting notions of "when was this published."
* **`archived`** — Strife has its own archive/soft-delete lifecycle for content documents; archived documents are filtered out of the content index entirely. A field literally named `archived` on your schema is just a checkbox that looks like it does the same thing but isn't connected to it.

Avoid field names that collide with `Content`'s own properties (`publishedAt`, `draft`, `createdAt`, `changedAt`, `labels`, `id`, `docId`, `locale`, `displayName`, `url`, `origin`, `collection`, `dependencies`).

#### Localizable `displayName` and `slug`

`displayName` (the document's name) and `slug` (its URL segment) are base properties: every document has them, and they aren't in `fields`. To give either one a value per locale, say so on the type:

```ts
export const article = defineType({
  name: 'articles',
  baseProperties: {
    displayName: { localizable: true },
    slug: { localizable: true },
  },
  fields: { /* … */ },
});
```

A flag you leave out keeps Strife's default, which is how types behaved before `baseProperties` existed: `slug` is localizable when the team has two or more locales. `displayName` follows each document's stored name: a name that already has a value per locale stays per locale, and a single name stays one value shared by every locale (like a field without `localizable`); new documents start with a single name. Set `localizable: false` to turn one off, `true` to turn it on. A localizable base property is edited on each locale the document has; one that isn't keeps a single field in Strife Studio.

What the type says is what `strife push` sets: the compiled template carries exactly the flags you state, and one you leave out — or delete later — goes back to the default. Upgrading `@strifeapp/strife` therefore changes no URLs. Turning a flag off deletes nothing: stored per-locale values read as the default locale's, and come back if you turn it on again. `strife push` warns about every flag it turns off (for `displayName`, only an explicit `false` turns it off), before the confirmation and under `--dry-run`, and after the push the server names the types that still hold per-locale values, with how many documents do — each with the line to add:

```
! articles: slug is no longer localizable — 12 documents still hold per-locale values (now read as the default locale's; nothing was deleted). To make it localizable again, add to defineType: baseProperties: { slug: { localizable: true } }
```

The warning never stops the push. A push from an older `@strifeapp/strife`, which sends no flags, leaves them as they are on the server.

Whatever the flag, readers get strings: the content index, the generated `Content` type (`displayName: string`), the SDK and the MCP tools resolve a localizable value to the requested locale. A locale without its own `displayName` shows the default locale's.

## `strife.config.ts`

The CLI discovers your schema files through a config file at the project root — `strife.config.ts`, or `.tsx` / `.mts` / `.js` / `.mjs`:

```ts
import { defineConfig, glob } from '@strifeapp/strife/schema';

export default defineConfig({
  schema: glob('./schemas/**/*.ts'),
});
```

`glob()` paths resolve relative to the **config file's own directory**, not your current working directory — pass `--config <path>` (see [Commands](https://strife.app/docs/reference/cli/commands.md#strife-push)) to point at a config file elsewhere, for example in a monorepo:

```sh
npx strife push --config packages/cms/strife.config.ts
```

```ts
defineConfig({
  schema: glob('*.ts', { base: './content/types' }),
});
```

Every exported `defineType()` result across the matched files is collected automatically — you don't need to list types individually.

### Localization

`defineConfig` also accepts an optional `localization` block:

```ts
export default defineConfig({
  schema: glob('./schemas/**/*.ts'),
  localization: {
    defaultLocale: 'en',
    locales: ['en', 'sv'],
    fallbackToPrimary: true,
  },
});
```

| Option              | Description                                                                                        |
| ------------------- | -------------------------------------------------------------------------------------------------- |
| `defaultLocale`     | Primary locale. Must be one of `locales`.                                                          |
| `locales`           | Non-empty list of configured locale codes, formatted `[a-z]{2}(-[A-Z]{2})?` (`en`, `sv`, `pt-BR`). |
| `fallbackToPrimary` | Optional. Whether a missing localized value falls back to the default locale.                      |

When present, `strife push` replaces the team's entire localization configuration with this block. If you manage locales through Strife Studio already, check what's currently configured before pushing a `localization` block — it's a full replace, not a merge. Single-locale projects can omit `localization` entirely; there's no behavior change either way.

## JavaScript, not just TypeScript

Everything above works identically in plain JavaScript — `defineType` and `fields.*` are ordinary functions; the type inference is authoring-time sugar for TypeScript users, not a requirement for `push` or `typegen` to work. A `strife.config.js` importing `.js` schema files behaves exactly like the TypeScript version, including the generated types.

You don't lose as much editor support as you might expect by staying in `.js`. `@strifeapp/strife/schema` ships type declarations, and editors with a TypeScript language service (VS Code, for example) use them automatically for plain `.js` files that import it — autocomplete on `fields.text(...)` and friends works without any configuration. What you don't get by default is strict type _checking_ (inline errors on mistakes). Add a single `// @ts-check` comment at the top of a `.js` file to turn that on for just that file — full type checking against those types, with zero TypeScript syntax and no build step change.

---

# Typegen

Source: https://strife.app/docs/reference/cli/typegen

Generate TypeScript types from your defineType schemas, and keep them in sync with a CI check.

`strife typegen` turns your [schema definitions](https://strife.app/docs/reference/cli/schemas.md) into TypeScript types matching what the content API actually returns — useful whether or not the rest of your project uses TypeScript. Both subcommands are fully offline: no network request, no authentication, no linked project required. They only need a `strife.config.ts` and your schema files.

## `strife typegen generate`

```sh
npx strife typegen generate [--config <path>] [-o | --output <path>]
```

Reads your schema files and writes TypeScript interfaces to `.strife/types.ts` (override the path with `-o`/`--output`):

```ts
// AUTO-GENERATED by `strife typegen generate` — do not edit by hand.

import type { Content } from '@strifeapp/types';

export interface Articles extends Content {
  heading: string | null;
  body: string;
}
```

The generated shape is the **read** shape — what you get back after fetching a document, not the raw stored form. Two things follow from that:

* Localized fields (`localizable: true`) collapse to the active locale as `T | null` (`null` if that locale hasn't been translated yet). Non-localized fields are plain, non-nullable types.
* `reference`, `references`, `chapters`, and `contentTemplate` fields resolve to the _target_ type's own generated interface, not a raw identifier — a `reference` to your `Author` type produces `author: Author[]` rather than an opaque reference object.
* `displayName` on `Content` is always a `string`, also on a type with `baseProperties: { displayName: { localizable: true } }` — the content index resolves it to the requested locale, falling back to the default locale's name. `baseProperties` changes nothing in the generated types (see [Localizable `displayName` and `slug`](https://strife.app/docs/reference/cli/schemas.md#localizable-displayname-and-slug)).

This is deliberately different from the type you'd get by statically inspecting a `defineType()` call's own shape (which describes what you write into the schema, not what you read back from the content API) — the generated types are the ones to build your frontend against.

## `strife typegen validate`

```sh
npx strife typegen validate [--config <path>] [-o | --output <path>] [--allow-missing-ids]
```

A CI-friendly check combining two things:

1. **Lint.** Two schemas that resolve to the same `collection` is a hard failure. A `reference`/`chapters` field whose target doesn't match any locally-defined type is a warning, not a failure — the target might be defined elsewhere, e.g. authored directly in Strife Studio. A `from: { id: process.env.X }` entry whose variable is unset is a failure — the template would lose its parent rule silently — unless you pass `--allow-missing-ids`, which demotes it to a warning. Both `generate` and `validate` load `.env.local` and `.env` from the current directory before reading the schemas — in a directory linked to a team, with that team's prefixed lines standing in for the plain names, as in `push`.
2. **Drift.** Regenerates the types in memory and compares them byte-for-byte against the file on disk at `--output`. A missing file or any difference fails the check with a pointer to re-run `generate`.

Typical usage is running `validate` in CI after `generate` has been run and committed, to catch schema changes that weren't followed by a regenerated types file. A CI checkout is usually not linked to a team (`strife link` keeps `.strife/` out of git), so no team-prefixed line applies there unless you commit `.strife/project.json`: set the plain variable a `from: { id }` reads in the CI environment, or pass `--allow-missing-ids`.

## Relationship to `push`

`typegen` and [`push`](https://strife.app/docs/reference/cli/commands.md#strife-push) both start from the same schema files but serve different purposes, and it's easy to conflate them:

* **`typegen generate`** produces local TypeScript types only. Nothing leaves your machine.
* **`push`** deploys your schema as real templates to a team in Strife Studio, plus the content index and (optionally) localization settings.

Neither command touches existing content documents.

---

# Authentication & Linking

Source: https://strife.app/docs/reference/cli/authentication-and-linking

How strife login authenticates, where credentials are stored, and how a local project gets linked to a workspace and team.

## Signing in

`strife login` uses an OAuth 2.0 Device Authorization Grant: the CLI requests a device code, prints a URL and a short code, and polls in the background while you open that URL and approve the sign-in in your browser. The CLI itself never opens a browser for you or handles a password.

A signed-in session consists of:

* A short-lived access token (roughly 30 minutes), used to authenticate API requests.
* A longer-lived refresh token (roughly 30 days), used to silently obtain a new access token as needed. It's rotated on every use.

Both are stored locally — not per-project — so signing in once covers every project on that machine until the session expires or you `strife logout`. Credentials live outside your project directories entirely, in your OS's standard per-user config location, and are never committed to a repository.

## One workspace per session

**Which workspace you're signed into is fixed for the lifetime of a session** — chosen when you approve the sign-in in your browser, not something the CLI lets you switch afterward. If you work across multiple workspaces (for example, your own team's workspace and a client's), use `strife login --force` to start a fresh sign-in and choose the other workspace when approving it. `strife whoami` shows which workspace and team the current session and linked directory resolve to.

## Linking a project

A workspace can contain multiple teams; a local project links to exactly one team via `strife link`, which writes `.strife/project.json` in the current directory. This file:

* Is looked for in the **exact directory** you run commands from — there's no upward directory search the way `git` or `npm` walk up to find a config file. Running a command from a subdirectory of a linked project reports "not linked."
* Contains only non-secret identifiers (workspace ID, team ID, names) — safe to commit, though it's added to `.gitignore` automatically since it's still local, machine-specific state in most workflows.
* Is unaffected by `strife logout` — logging out clears your session, not any directory's link. A previously linked directory still reports as linked; it just can't authenticate again until you sign in.

Creating a _new_ team (as opposed to linking to an existing one) isn't available as its own command — it happens as part of the interactive flow when you run bare `strife` / `strife .` in an unlinked directory and choose not to link to an existing team. See [bootstrapping a new project](https://strife.app/docs/reference/cli.md#bootstrapping-a-brand-new-project).

## Non-interactive use

Pass `--non-interactive` to suppress prompts. Commands that would otherwise prompt fail with an explicit error instead:

* `strife link --non-interactive` requires `--team` if the workspace has more than one team.
* `strife push --non-interactive` requires `-y`/`--yes`.
* Anything that would need to create a new team or link for the first time requires a directory that's already linked — there's nothing to prompt for the first-time setup otherwise.

Non-interactive is not unattended: every command that talks to Strife, `push` among them, needs a `strife login` session, and a CI runner cannot get one today — login happens in a browser, and every refresh replaces the session's refresh token and retires the old one, so a session copied to a runner stops working at its first refresh. Run those commands from your machine. `typegen generate` and `typegen validate` never prompt or need `--non-interactive` — they're fully offline regardless of the terminal, so they run in CI too.

---

# Strife key topics

Source: https://strife.app/docs/explanation/explanation-overview

In this section you will find discussions about key topics of Strife aimed to deepen your understanding of the system

Take a look at these interesting topics.

---

# What is Strife?

Source: https://strife.app/docs/explanation/what-is-strife

Describes what Strife is from a developer point of view.

---

# RavenDB

Source: https://strife.app/docs/explanation/ravendb

> [!NOTE]
> This page is not complete. Use the official documentation [https://ravendb.net/docs](https://ravendb.net/docs/article-page/6.2/csharp). Check back later for updates.

---

# User Guide

Source: https://strife.app/docs/user-guide

### Welcome to the **Strife CMS Editor’s Guide**

Here you’ll find everything you need to create, update, and refine content in Strife — quickly, easily, and with full control through instant live preview. Have fun!

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><a href="https://strife.app/docs/user-guide/getting-started.md">Getting started</a></td><td><a href="https://strife.app/docs/assets/original.avif">original.avif</a></td></tr><tr><td><a href="https://strife.app/docs/user-guide/getting-the-basics.md">Getting the basics</a></td><td><a href="https://strife.app/docs/assets/Screenshot%202025-11-06%20at%2016.38.51.png">Screenshot 2025-11-06 at 16.38.51.png</a></td></tr><tr><td><a href="https://strife.app/docs/user-guide/content-list-and-filter.md">Content list and filter</a></td><td><a href="https://strife.app/docs/assets/Screenshot%202025-11-06%20at%2018.11.12.png">Screenshot 2025-11-06 at 18.11.12.png</a></td></tr><tr><td><a href="https://strife.app/docs/user-guide/canvas-and-preview/canvas-preview.md">Canvas and preview</a></td><td><a href="https://strife.app/docs/assets/Screenshot%202025-11-06%20at%2018.48.51.png">Screenshot 2025-11-06 at 18.48.51.png</a></td></tr><tr><td><a href="https://strife.app/docs/user-guide/working-with-content.md">Working with content</a></td><td><a href="https://strife.app/docs/assets/Screenshot%202025-11-06%20at%2018.13.14.png">Screenshot 2025-11-06 at 18.13.14.png</a></td></tr><tr><td><a href="https://strife.app/docs/user-guide/improving-content.md">Improving content</a></td><td><a href="https://strife.app/docs/assets/Screenshot%202025-11-06%20at%2019.02.50.png">Screenshot 2025-11-06 at 19.02.50.png</a></td></tr></tbody></table>

---

# What is Strife?

Source: https://strife.app/docs/user-guide/what-is-strife

Strife is an online service where editors can create and edit content for their website or any digital service. Our approach differs from a traditional content management system (CMS) in that editors get a live preview of how their content will appear on their website in different resolutions without switching to preview mode. Separating Strife (editor experience) from the web hosting (website) allows us to update Strife without risking any website downtime.

By isolating the editor experience from the actual website, we can also edit content on multiple sites built on different technologies within a single, familiar interface, thus improving daily work, increasing quality and speed, and ultimately delivering more value to the organization without needing extra hours. Additionally, by using web standards, we can ensure future-proofed software and give editors with disabilities the ability to work with content.

---

# Getting started

Source: https://strife.app/docs/user-guide/getting-started

We are excited to have you on board! This short introduction will provide you with the essential information and tools needed to quickly get up and running with Strife. Let's get started!

---

# Creating an account

Source: https://strife.app/docs/user-guide/getting-started/creating-an-account

Go to strife.app and create an account by following the signup guide. You might also get an invite from a customer or colleague in your mail asking you to sign up for a specific workspace. Just follow the instructions in the mail to get started.

> [!NOTE]
> Strife is only accessible through invitation at the moment. You are not able to invite others to a workspace yet, but please be patient

> [!NOTE]
> Notice that you never pay a fee for an account in Strife. In other words, as a user, you never need to use a credit card in the sign-up process.

---

# Save as home screen

Source: https://strife.app/docs/user-guide/getting-started/creating-an-account/save-as-home-screen

Shortcut in your web web browser

Add a shortcut in your web browser to the website to access Stife faster in your daily work.

---

# Browser support

Source: https://strife.app/docs/user-guide/getting-started/creating-an-account/browser-support

We recommend using the latest versions of Chrome or Arc as your preferred browser for the optimal Strife experience. We are committed to adhering to web standards and only implement features that W3C officially supports. However, issues may arise if you use browsers that do not include these supported standards.

> [!NOTE]
> Strife uses progressive enhancements, and we are eager to use the latest techniques supported within standards, but we work hard to make the user experience awesome for everyone.

---

# Setting up a Workspace

Source: https://strife.app/docs/user-guide/getting-started/setting-up-a-workspace

Once you complete the signup process, you'll be directed to Strife and asked to create a workspace. Think of your workspace as the central hub for all your projects. Typically, the workspace is named after your organization or, for larger companies, a specific business unit within the organization.

---

# Navigating to a specific workspace

Source: https://strife.app/docs/user-guide/getting-started/setting-up-a-workspace/navigating-to-a-specific-workspace

When you create a workspace in Strife, name it (e.g. "FOO"), and your workspace will be accessible at foo.strife.app. Upon signing in, you'll be directed to your most recently used workspace at strife.app. From there, you can easily switch workspaces as needed.

Suppose you need to manage projects for multiple business units or work as a consultant for various companies. In that case, you can easily switch between workspaces if you have the required access permissions.

---

# Setting up a Team

Source: https://strife.app/docs/user-guide/getting-started/setting-up-a-team

A team in Strife is a dedicated space within your workspace for a specific project, such as a website with a unique design or an internal-use tool. Remember that you are limited to creating one team on a single plan. To create multiple teams, upgrade to a standard plan or higher. For more information, consult the license agreement.

Each team has two environments for users on a standard plan or higher: one for production and one for testing. However, if you are on a single plan, your team is limited to a single production environment.

> [!NOTE]
> If you are accessing a beta or a trial version of Strife you can only access one environment for test purposes.

---

# Personalize Strife

Source: https://strife.app/docs/user-guide/personalize-strife

Strife offers a customizable user interface to enhance your experience. While certain features depend on your assigned account role, many adjustments can be made without any role or permission constraints.

---

# Changing themes

Source: https://strife.app/docs/user-guide/personalize-strife/changing-themes

Strife allows you to customize its appearance with various themes. To change the theme, follow these simple steps:

1. Open the command menu by pressing Ctrl/Cmd+K.
2. Select 'Change Interface theme...' and select the team you wish to use.

> [!NOTE]
> With the free text search feature in Strife, you can effortlessly locate specific themes. To find the Light theme, simply type "light". Similarly, for the Dark theme, enter "dark".

> [!NOTE]
> Strife is designed to adapt to your desktop's accessibility settings. If you have specific configurations on your desktop, the Strife user interface will automatically adjust to accommodate these settings.

<figure><img src="https://strife.b-cdn.net/Documentation/Change%20theme.png" alt=""><figcaption><p>Change theme</p></figcaption></figure>

---

# Command menu

Source: https://strife.app/docs/user-guide/command-menu

Strife is made to be used from the keyboard. Press Ctrl+K (Cmd+K on a Mac) anywhere to open the command menu, then type to find what you want to do.

The command menu is contextual and role-based: what it offers depends on where in Strife you open it and on your role.

Some choices lead to the next, so a task takes a few keystrokes. To open and edit a page, for example, open the command menu, choose **Open document**, and browse to the page or search for it.

<figure><img src="https://strife.b-cdn.net/Documentation/Sk%C3%A4rmdump%20command_menu%20v2.png" alt="" width="563"><figcaption><p>Command menu with contextual options</p></figcaption></figure>

---

# Getting the basics

Source: https://strife.app/docs/user-guide/getting-the-basics

Welcome to the Strife Basics! After completing this chapter, you will be able to easily navigate through the various sections of the user interface and gain a comprehensive understanding of Strife's core concepts.

---

# Content list

Source: https://strife.app/docs/user-guide/getting-the-basics/content-list

In Strife, you can easily access and manage your content through the document list. To view this list, follow these steps:

1. To choose a team in Strife, simply click on the team's name.
2. Click on the 'Content' tab in your team repository's left sidebar.

This list displays all the documents (or pages if your team is a website) in your project. To edit a specific document:

1. Locate the desired document in the document list.
2. Click on its title.

This action will open up the editor view, allowing you to make changes and updates directly to the page.

[https://strife.b-cdn.net/Documentation/Content%20list.mp4](https://strife.b-cdn.net/Documentation/Content%20list.mp4)

> [!NOTE]
> Even though the website is visualized as a flat list, there is a natural hierarchy, and you can see the webpage parent at the end of the page's title. Read more about how to work with lists and how you can create your views and filters [<mark style="color:red;">here</mark>](https://strife.app/docs/user-guide/content-list-and-filter.md).

---

# Canvas

Source: https://strife.app/docs/user-guide/getting-the-basics/canvas

When you navigate to a specific page in your Strife application, the interface switches to the editor view, including a live preview feature called the canvas. Positioned in the middle of the editor view, the canvas allows you to see real-time updates as you edit your content.

The canvas offers numerous features to help you work more efficiently and maintain complete control over the output as an editor. These features include zooming, panning, and scrolling. Refer to the "[Canvas and preview](https://strife.app/docs/user-guide/canvas-and-preview.md)" chapter in the editor documentation to learn more about working with the canvas.

<figure><img src="https://strife.b-cdn.net/Documentation/Media%200_2_UI/Editing%20view%201_1.png" alt=""><figcaption><p>The editing interface with a canvas in the middle presenting a page i different resolutions</p></figcaption></figure>

---

# Editor panel

Source: https://strife.app/docs/user-guide/getting-the-basics/editor-panel

Updating content in Strife is easy and efficient. To edit, simply click on the desired content located in the right panel and modify as needed. No need to worry about saving your changes, as Strife automatically saves a draft with each modification you make. Keep in mind, the input fields within the editor panel may differ based on the template settings configured in the Strife admin section.

<div align="center">

<figure><img src="https://strife.b-cdn.net/Documentation/Media%200_2_UI/Editor%20left%20panel%200_2.png" alt="" width="188"><figcaption><p>Right side editor panel</p></figcaption></figure>

</div>

---

# Compose a page

Source: https://strife.app/docs/user-guide/getting-the-basics/compose-a-new-document

There are multiple ways to create a new page from scratch, but every page needs three things to function.

1. Every page needs a parent. Choosing a parent appoints a logical place for the page you are to create. It defines the underlying hierarchy in Strife.
2. Sometimes, you might wish to fetch content and publish it in multiple places on the website, or why not reuse the content on a different site or use it on a post on social media?
3. The next thing you need to do is to choose a template. The template appoints the layout of the page and what content to be editable on the page.
4. The last thing you need to do is to give the page a title. The title is just a name and helps you find the page when searching the document list. A well-formulated title will simplify finding the page/document in Strife.

> [!NOTE]
> Note! The hierarchy does not need to be the actual website hierarchy. It's quite common that you wish to create a navigation structure separated from the hierarchy inside of Strife.

For time-saving, Strife will help you by pre-populating the parent page and template if you compose a page from the content list. Clicking the three dots to the left of a document/page in the document list will open a menu that gives you the needed help.

1. Hover over the Compose button.
2. Choose the template you wish to use.

<figure><img src="https://strife.b-cdn.net/Documentation/Media%200_2_UI/Compose%20menu%200_2.png" alt="" width="375"><figcaption><p>Compose a page/document using a template</p></figcaption></figure>

By using this way to create a page, you only need to give the document/page a title, and then you are good to go.

<figure><img src="https://strife.b-cdn.net/Documentation/Compose%20page%20view.png" alt="" width="375"><figcaption><p>Give the document a name</p></figcaption></figure>

You might add some labels to make the page easier to find and use, but it´s not mandatory. You can always add labels later if you wish. Read more about labels in the [label chapter](https://strife.app/docs/user-guide/content-list-and-filter/labels.md).

## When the template knows its parent

A template can declare which kind of page its documents belong under — a blog post under the blog page, for example — or one specific page. (Developers set this with `from` in the template definition.) When you compose such a page, the origin field follows that rule:

* If exactly one page matches, it is already selected.
* If several match, the origin list and its search show only those pages.
* If none exists yet, the field works as usual, and a hint tells you which kind of page is expected — or, when the template names a specific page that is not in this workspace, which page it looked for.

Composing from a row's Compose menu keeps that row as the parent only when it matches the rule, and the menu only offers templates that may be placed under that row.

---

# Publish a page

Source: https://strife.app/docs/user-guide/getting-the-basics/publishing-a-page

Publishing a Single Page in Strife:

1. Locate the saved draft of the page you want to publish.
2. Click the "Publish" button in the upper right corner.
3. Choose to publish the page immediately or schedule a date and time for publishing.

> [!NOTE]
> To publish multiple pages, select the checkboxes next to their titles in the document list before clicking "Publish."

> [!NOTE]
> If you're working on a content project, consider using labels and views to organize and publish all content simultaneously.

---

# Chapters

Source: https://strife.app/docs/user-guide/getting-the-basics/chapters

This page describes the nature of Local Chapters & References Chapters and how the concept of Chapters works in Strife.

What are Chapters?

Chapters can be perceived as reusable content containers for any content type (text, media, audio). Chapters are independent sections of content that hierarchically does not belong to any specific page. They are the primary building blocks of a web page and are typically used for page structuring and content disposition. Chapters inserted on a web page can be sorted in any desired order, giving the editor control of in what order content are presented on a specific web page.

<figure><img src="https://strife.b-cdn.net/Documentation/Strife%20user%20doc/Ska%CC%88rmavbild%202025-01-15%20kl.%2013.35.25.png" alt=""><figcaption></figcaption></figure>

A Chapter may also consume content from another Chapter. When using a Chapter within another Chapter we refer to it as "Chapters in Chapters".

> [!NOTE]
> **Example:**
>
> Chapter: Contact List
>
> Chapter in Chapter: Contact Cards (consumed within the Chapter Contact List)

If you are using Strife for product information modeling Chapters are also used for storing and managing PIM data. This goes for both PIM data that you want to present on your website and PIM data you not necessarily want to present on your website (e.g product information data for internal usage or PIM data for PDF generation).

<figure><img src="https://strife.b-cdn.net/Documentation/Strife%20user%20doc/Ska%CC%88rmavbild%202025-01-15%20kl.%2013.42.09.png" alt=""><figcaption></figcaption></figure>

Chapters are customized for each client based on customer requirements. How many and what kind of Chapters that is needed are defined within the project requirement definition phase and they are developed within the project implementation phase.

### Local Chapters vs References Chapters

Chapters can be page Local or configured to reference content from other documents. Chapters that reference content from other documents are referred to as "Reference Chapters". Reference Chapters are usable when there is a need to reuse specific content over multiple pages. An example of this could be contact cards, opening hours or specific call to actions (CTA's) - content that there often is a need to reuse over several web pages.

### How chapters are created

Chapters are defined in the Template builder under "Settings" (found under your account avatar). The Template builder are Workspace specific meaning you have to choose the Workspace you want to edit Chapters for.

Chapters are defined as "Content templates" in the Template builder view. In the Content template list you see an overview of your current Content templates. To review or edit an existing template click edit under the three dots next to the specific Content template. To create a new Content template (Chapter) hit "Create template".

Chapters are composed of different Fields. What Fields to use when creating a Chapter depends on the nature and purpose of the Chapter you want to create. Available Fields are presented in the list to the left when creating or editing a Chapter.

[https://strife.b-cdn.net/Documentation/Strife%20user%20doc/Ska%CC%88rminspelning.mp4](https://strife.b-cdn.net/Documentation/Strife%20user%20doc/Ska%CC%88rminspelning.mp4)

> [!WARNING]
> If you create a new Chapter you want to present content from on any web page, you have to write HTML/Markup for this Chapter. Turn to you developer for assistance.

### Add a Local Chapter to a page

Add a Chapter by navigating to a page from the Content list. Under the "Content Section", hit the "+" icon to access the Chapter Library. Pick your Chapter and provide requested content. When you're done, hit the "back arrow" at the top and then choose publish.

If you want to edit an existing Chapter on a page, simply double click on it or use the three dots you see when hovering over a Chapter in the page's Content section. From this selection you can edit, rename and remove a specific Chapter. You may also double click a Chapter to edit it's content.

[https://strife.b-cdn.net/Documentation/Strife%20user%20doc/Ska%CC%88rminspelnin%202.mp4](https://strife.b-cdn.net/Documentation/Strife%20user%20doc/Ska%CC%88rminspelnin%202.mp4)

If your Chapter consumes content from another Chapter (Chapters in Chapters) you can edit any consumed Chapter from the main Chapter.

> [!WARNING]
> The specific page must have a configured Chapter section in order to use Chapters on the page. This configuration is done by your website developer

> [!WARNING]
> Each page is configured to accept certain Chapters. Available Chapters in the Chapter Library may vary between pages

### Add a Reference Chapter with reusable content to a page

A Reference Chapter that reuses specific content can be created in two ways.

1. **From the Content list:** Navigate to the Content list an select "Compose". Under the "Template" tab you'll see available Reference Chapters

[https://strife.b-cdn.net/Documentation/Strife%20user%20doc/Ska%CC%88rmimspelning3.mp4](https://strife.b-cdn.net/Documentation/Strife%20user%20doc/Ska%CC%88rmimspelning3.mp4)

1. **From a page:** Navigate to the page you want to insert a Reference Chapter on. Under the "Content Section", hit the "+" icon to access the Chapter Library. Pick your Reference Chapter and then click the "+" icon to either choose from existing content to reuse or create new reusable content. If choosing existing content the Reference Chapter will auto populate with chosen content. If you choose to create new content, this content will will be made available to reference from other documents meaning it will be possible to reuse the content via a Reference Chapter on other pages.

[https://strife.b-cdn.net/Documentation/Strife%20user%20doc/Ska%CC%88rmimspelning3.mp4](https://strife.b-cdn.net/Documentation/Strife%20user%20doc/Ska%CC%88rmimspelning3.mp4)

> [!WARNING]
> Only content types that has been configured for the specific Reference Chapter are available to chose from. A scenario could be that the Reference Chapter "Contact section" has been configured to only accept "Contact cards".

When publishing a page with edited Chapters you will get information on if your changes only affects the specific page or if it also affects content that are published elsewhere on your website.

> [!NOTE]
> Click "View changes" that pops up when clicking "Publish" and select "View changes" to display what documents that are affected by your changes.

### See where a specific Reference Chapter are being used

It can be important to see where a Reference Chapter are being used, for example prior to updating its content (since content being consumed by a Reference Chapter are reusable over multiple pages).

To see where a specific Reference Chapter are being used, navigate to the Content List and choose "Filter" --> "Reference". Search for any Reference Chapter to see what pages it is being used on.

[https://strife.b-cdn.net/Documentation/Strife%20user%20doc/Ska%CC%88rminspelning5.mp4](https://strife.b-cdn.net/Documentation/Strife%20user%20doc/Ska%CC%88rminspelning5.mp4)

> [!WARNING]
> Search the name you have given the content within a Reference Chapter to filter it, using the Reference filter.
>
> Example: You want to find every page that uses the contact card for Niklas Andersson. Niklas Andersson's contact card is inserted on a page via a Reference Chapter called "Contact Section". Use the text "Niklas Andersson" in the Reference filter search to find every page where Niklas Contact card are being used.

---

# Snapshots

Source: https://strife.app/docs/user-guide/getting-the-basics/snapshots

A snapshot is a frozen copy of a page — its unpublished draft, or, from [History](https://strife.app/docs/user-guide/getting-the-basics/history.md), an earlier published version or the page as it is live right now — with a link you can send to someone without a Strife account — a client, a colleague in another department, a reviewer. They see the page in your site's normal design, for 7 days. Nothing is published, and the person opening the link sees nothing else that is unpublished.

> [!NOTE]
> **Before you send the first link, confirm it with your developer.** Snapshots only work when your website runs a version of the Strife SDK that has them and the developer has run `strife push` for your team. Until then, Strife will tell you the snapshot cannot be created (see [What the messages mean](https://strife.app/docs/user-guide/getting-the-basics/snapshots.md#what-the-messages-mean)).

> [!NOTE]
> Snapshots live in [History](https://strife.app/docs/user-guide/getting-the-basics/history.md): your team needs both History and snapshots enabled. They are listed alongside the draft and published versions there, every **Share** asks you to confirm first, and you can also take a snapshot of a published version (see [Share from any row](https://strife.app/docs/user-guide/getting-the-basics/history.md#share-from-any-row)).

### Create a snapshot

1. Open the page and click the History icon next to **Publish** in the upper right corner.
2. Press **Share** on the row you want to freeze — the draft, the published version, or a previous version.
3. Confirm with **Create snapshot**. For the draft, Strife saves any edits you have not saved yet first; then it freezes a copy and copies the link to your clipboard — you will see "Link copied".

Every snapshot is named for you — "Snapshot 1", "Snapshot 2", and so on; one taken from a published version is named for that version's publish date and time. Rename it whenever you like (see [Rename a snapshot](https://strife.app/docs/user-guide/getting-the-basics/snapshots.md#rename-a-snapshot)).

The link points at the language you are viewing, but every language the draft had at that moment is included: the person opening it can switch language on your website as usual.

A team member who works on content through an AI assistant connected to Strife's MCP server can also create, list and revoke snapshots from there; the link is the same one the Studio copies.

### Copy and share the link

Each snapshot in the list has a **Copy link** action. On devices that support it, **Share link** opens the system share sheet so you can send the link straight to Mail, Messages or another app.

You can have as many snapshots on a page as you need — one per reviewer, or one per version — each with its own name and its own 7-day clock.

### View a snapshot

Click a snapshot in the list to show it on the canvas in the middle of the editor. A bar above the canvas shows which one you are looking at and when it expires, with **Copy link** and **Back to draft**. What you see is exactly what the person with the link sees.

### What happens to a snapshot

* **Editing, publishing or discarding the page does not change it.** It keeps showing the version it was created from — what the reviewer approved stays what they approved.
* **After 7 days the link stops working** and the snapshot disappears from the list. If a decision is still pending, create a new one.
* **Archiving or deleting the page** ends all of its snapshots.
* An expired or revoked link opens your website's ordinary "page not found".

### Rename a snapshot

Open **More actions** on the snapshot and choose **Rename…**. Type the new name — up to 60 characters — and press Enter. Renaming only changes the label in this list; the version it shows, its address and its 7-day clock all stay exactly as they were.

### Revoke a snapshot

To end a snapshot before it expires, open **More actions** on it and choose **Revoke snapshot**. The link stops working immediately and the snapshot leaves the list.

### Restore the draft from a snapshot

When a reviewer picks an earlier version — "go with version 1" — you do not have to re-edit. Open **More actions** on that snapshot and choose **Restore to draft…**. Strife asks you to confirm:

> Replace the current draft with '<name>'? Unpublished changes in the languages this preview contains will be overwritten; languages added since stay as published.

Restoring replaces the draft for every language the snapshot contains. A language you have published since it was created is left exactly as published — restoring can never unpublish anything. The snapshot itself stays as it was.

> [!NOTE]
> Restoring on a published page changes what will be published next, so it needs publish rights. Without them, **Restore to draft…** is greyed out with the note "Restoring a published page needs publish rights".

### What the messages mean

| Message | What it means |
| --- | --- |
| "Make a change first to create a snapshot." | **Share** on the draft row freezes the draft, so the page needs unpublished changes. Edit it, or share a published version instead. |
| "Switch language, or ask an administrator for a site address." | Your team has no website address configured for the language you are viewing. |
| "This site's content index needs updating. Ask your developer to run strife push." | Your website is not ready for snapshots yet. Your developer needs to update the Strife SDK and run `strife push`. |
| "This site's content index is still updating. Try again in a few minutes." | Your developer has just updated the site. Wait a few minutes and try again. |
| "Couldn't save your changes. Try again." | Your latest edits could not be saved before the snapshot was created. Nothing was created; try again. |
| "This version can't be read any more, so it can't be shared." | You tried to share a published version in History that could not be shown on the canvas either. Pick another version. |
| "Snapshot expired" | The snapshot you were viewing on the canvas has expired or been revoked; the canvas returns to the draft. |

---

# History

Source: https://strife.app/docs/user-guide/getting-the-basics/history

History is one place to see everything a page has been: what is about to go live, the draft you are editing, every link you have shared for review, and every version you have ever published — newest first, oldest last. From any of those you can look back without touching your current work, and bring an older version back into the draft when you need to.

> [!NOTE]
> If you do not see a History icon next to **Publish**, your team is not on History yet — ask an administrator. If your team has History but not snapshots, the list holds the draft and the published versions only: there are no snapshot rows and no **Share** in it.

### Open History

Click the History icon next to **Publish** in the upper right corner. A drawer opens listing the page's timeline, most recent first:

* **A scheduled publish**, if one is pending — shows when it goes live. You can preview it, but not restore it; it is not live yet.
* **Current** — the draft you are editing, or, if there is no draft, the page as it is live right now. This row offers **Share** (create a snapshot from it) and, for a draft, **Discard**; it is the only row you cannot restore — it is where you already are.
* **Snapshots** — every link you currently have out for review, each with its name, where it was taken from, and when it expires, and the same **Copy link**, **Rename…** and **Revoke snapshot** actions the snapshot panel always had.
* **Published** — the version the site serves right now, and **Previous version** — every earlier time this page was published, each showing who published it and when. Each offers **Share** too (see [Share from any row](#share-from-any-row)).

When there is no draft, the live page sits at the top of the list marked **Current**, and there is no **Restore** on it — it is what is already live, not a past state to go back to.

### Preview a row

Click any row other than **Current** to see it on the canvas. The form in the editor panel locks with an explanation instead of your usual fields — nothing you type reaches the draft while you are looking at something else — and **Publish**, **Discard** and **Share** are all disabled for as long as you are previewing. Click **Back to draft**, or click the **Current** row, to return.

Previewing a snapshot works exactly as it did before: the canvas shows precisely what the linked reviewer sees. Previewing a scheduled publish or a published version shows that version's content in your normal editing layout instead.

A few things end a preview on their own:

* **Switching language** or moving to a different page exits preview and returns you to the draft.
* **A snapshot that expires or is revoked** while you are looking at it exits preview automatically.

### Restore a version

Open a row, then choose **Restore**. Strife asks you to confirm and names the version you are about to bring back.

* **On a team with more than one language**, the confirmation lets you choose which languages to restore, starting with the ones the version you picked actually contains — you can narrow or widen the selection before confirming. On a single-language team there is no picker; the whole draft is replaced.
* **Fields that are not per-language** — things like a switch or a slug that is the same across all languages — are always restored, whichever languages you pick. The confirmation says so.
* **If a publish is scheduled**, the confirmation warns you that it is set to go live over whatever you restore, and offers **Cancel schedule and restore**. Choosing plain **Restore** keeps the schedule in place — it will still publish at its time and overwrite the languages it carries.

Restoring replaces the draft for the languages you chose; other languages, and any unpublished changes in them, are left exactly as they were. The restored languages are marked as having unpublished changes, the same as if you had just edited them by hand — restoring does not publish anything by itself; use **Publish** afterwards to make it live.

There is no undo beyond the confirmation dialog, so read the language selection before confirming.

> [!NOTE]
> Restoring into a published page's draft needs publish rights, the same rule snapshot restore has always had. Without them, **Restore** is disabled with an explanation; you can still open History and preview every row.

### Share from any row

Every **Share** in History first asks you to confirm. The dialog names what you are about to share — "Create and share a snapshot of the unpublished draft?", "…of the published version?" or "…of the earlier published version?" — and reminds you what a snapshot is: a frozen copy valid for 7 days that anyone with the link can open in their browser, made to get feedback on your draft, to show the page as it is published right now, or to show how it looked in that version. **Cancel** creates nothing; **Create snapshot** goes ahead.

**Share** on the **Current** row creates a new snapshot from the draft exactly as the snapshot panel always did — after you confirm, Strife saves your pending edits first, freezes the draft, and copies the link. **Discard**, on the same row, runs the discard you already know, including choosing which languages to discard on a multi-language team.

**Share** on a published version — or on **Current** when there is no draft and the row is the live page — freezes *that* version into a snapshot instead. Your draft is not touched: this is how you let someone outside Strife look at an earlier version before you decide to restore it. The new snapshot appears in the list like any other, named for the version's publish date and time, and its row says where it came from — "From draft", "From published page", or "From version …" with the publish date. The person opening the link sees nothing about that; the page looks like any snapshot. Restoring such a snapshot gives the same result as restoring the version itself.

While you are previewing a row, **Share** is disabled everywhere. If a version can no longer be shown on the canvas, its **Share** is disabled with an explanation.

### What leaves the list

* A snapshot leaves once it expires (7 days after it was created) or is revoked.
* Nothing else in History disappears — published versions stay listed indefinitely.

### What History needs

History is a Studio feature behind two settings. History enabled gives you the drawer with the draft, the published version and every previous version. Snapshots enabled on top of that adds the snapshot rows and **Share** on every row. Snapshots on their own, without History, show nothing in the Studio. It is not yet available outside the Studio editor.

---

# Content list and filter

Source: https://strife.app/docs/user-guide/content-list-and-filter

The predefined filters give you an overview of all your website content. \

1. Clicking on Published presents a list of all published content in your team.
2. Drafts give you a list of all web pages with a working draft.
3. In the schedule list, you get all the pages with a planned publishing date.
4. Archived contains all pages which have been archived by you or any of your colleagues

Strife uses a flat list to visualize all content, but there is a natural hierarchy. This hierarchy is shown by visualizing the parent of content at the end of the content title.

Clicking the three dots, to the left of the document list, opens a menu with some essential functions. You can edit a document, compose a new page, change the origin, and archive a page from this menu.

---

# Changing origin

Source: https://strife.app/docs/user-guide/content-list-and-filter/changing-origin

If you wish to change a page’s parent, choose Set Origin and select the new parent. If you know the title of the new parent, use the search function at the top of the page.

If the page’s template declares which kind of page it belongs under, or which specific page (see [Compose a page](https://strife.app/docs/user-guide/getting-the-basics/compose-a-new-document.md)), Set Origin lists only those pages. When none of them exists in this workspace, every page is listed and the search field says so.

<figure><img src="https://strife.b-cdn.net/Documentation/Set%20origin.png" alt=""><figcaption><p>Setting origin</p></figcaption></figure>

Note! If a page has one or more descendants, then this will move all children beneath the page.

---

# Sorting list

Source: https://strife.app/docs/user-guide/content-list-and-filter/sorting-list

Här beskriver vi hur det fungerar med olika sorteringsmöjligheter när vi har skapat detta

---

# Multiple section

Source: https://strife.app/docs/user-guide/content-list-and-filter/multiple-section

Här beskriver vi hur det fungerar när man markerar flera dokument i en dokumentlista

---

# Labels

Source: https://strife.app/docs/user-guide/content-list-and-filter/labels

Adding labels to pages allows you to filter based on one or more labels. You can add a filter on the creation of a page or later in the composing process. If you wish to add or change labels when working with your content, you can do so in the metadata view in the editor panel to the right.

<figure><img src="https://strife.b-cdn.net/Documentation/Adding%20lables%20in%20metadata%20view.png" alt=""><figcaption><p>Adding lables to a document</p></figcaption></figure>

Note! Adding new labels and deleting old ones is done in the settings menu for the specific team.

Note! You need the right credentials for changing labels.

Note! Labels are shared across all languages of a document. On multi-language teams they are therefore edited from the default language — when viewing a translation, the Labels field is locked, just like other shared fields such as Display Name and Published Date.

## Label groups

When a team has many labels, you can organize them into **label groups** — for example a "Categories" group holding the labels that classify what a page is about, separate from labels used for workflow. A label belongs to at most one group, and grouping is optional: ungrouped labels keep working exactly as before.

Groups are managed in the same place as labels: the team's settings menu, under Labels. There you can create groups, rename them, and choose a group for each label when you create or edit it.

With groups in place, the label picker in the editor panel organizes itself: each group becomes its own submenu, with ungrouped labels listed on their own. This makes it clear which group a label belongs to as you pick it.

A few things that are safe to do:

* **Renaming a group** only changes its display name — nothing breaks anywhere.
* **Moving a label into a group** applies everywhere the label is already used, automatically.
* **Deleting a group** never deletes or removes its labels — they simply become ungrouped again, and stay on every document that has them.

---

# Filter

Source: https://strife.app/docs/user-guide/content-list-and-filter/filter

A filter can be used when searching for pages. You can search for documents based on

1. Status
2. Template
3. Label
4. Author
5.  Free text search

Filter views are stored on your local profile and are personal. You can combine them and build your search filter for your unique purpose. It´s easy to save a filter for future use by choosing views in the upper right corner and giving it a name.

<figure><img src="https://strife.b-cdn.net/Documentation/Filter%20view.png" alt=""><figcaption><p>Different filter options in Strife</p></figcaption></figure>

Note! Status is only available from the content list showing all content.

Note! When adding more than one filter parameter, you can decide if the search query must match all filters or any of the chosen filters by switching between Match any filter and Match all filters from the view button in the upper right corner of the interface.

<figure><img src="https://strife.b-cdn.net/Documentation/Match%20filter.png" alt=""><figcaption><p>Matching filter</p></figcaption></figure>

---

# Saving a view

Source: https://strife.app/docs/user-guide/content-list-and-filter/saving-a-view

Save a specific filter combination by hitting the **View** button, then choose **Save as view** and give it a name. To reset your search, select **Reset view** in the dropdown menu to reset to the previously saved view.

<figure><img src="https://strife.b-cdn.net/Documentation/Match%20view%202.png" alt=""><figcaption><p>Save or reset a view</p></figcaption></figure>

You can find saved views by clicking the views symbol in the left menu of the interface.

<figure><img src="https://strife.b-cdn.net/Documentation/list%20with%20specific%20filter.png" alt=""><figcaption><p>Saved view</p></figcaption></figure>

Note! A saved view is not just a snapshot. If you add content with matching content after you have saved the view, the document will show up in the document list with all the previous ones.

---

# Canvas and preview

Source: https://strife.app/docs/user-guide/canvas-and-preview

The Canvas is a central element of the user interface, designed to display the content from your website in real-time, allowing for seamless editing and previewing. In this section, we will explain the concept of the Canvas and guide you on customizing the preview to cater to your specific requirements.

One key aspect of the Canvas is its ability to accurately present different viewports, reflecting how your webpage would appear in various screen resolutions. Unlike some other Content Management Systems (CMS), there is no need to explicitly request a preview of your work in Strife, as it provides a constant and precise representation of your webpage. This ensures that the user experience remains consistent throughout the editing process, eliminating any discrepancies between the appearance within the CMS and your actual published website.

<figure><img src="https://strife.b-cdn.net/Documentation/Canvas%20overview.png" alt=""><figcaption><p>Canvas overview</p></figcaption></figure>

---

# Canvas preview

Source: https://strife.app/docs/user-guide/canvas-and-preview/canvas-preview

One of the key features of Strife, our SaaS software, is the live preview functionality. When working on a document with a URL, Strife automatically generates a real-time preview of the document, helping you visualize your edits as you make them. However, if the document does not have a URL, only the editor panel will be displayed.

You can also customize the preview to display your page at various resolutions, ensuring adaptability across different devices and screens. Please note that, currently, Strife supports previewing only one page at a time in different resolutions. In the near future, we plan to enhance this functionality, allowing editors to preview multiple pages simultaneously. This will be particularly useful when the same content is published across multiple pages or when one website shares content with another. To enable this feature, all connected sources must utilize Strife.

Maximize the efficiency of the Canvas Preview feature in our SaaS software by rearranging the various viewports to suit your specific tasks better. As you customize the layout, Strife automatically saves your preferred settings to your personal account, ensuring a tailored user experience without any impact on other users.

[Rearranging viewports in Canvas](https://strife.b-cdn.net/Documentation/Rearranging%20viewports.mp4)

## Live preview in the new interface

Open a document and select **Live preview** in the top bar. Your editor stays beside the preview, and changes appear as you type without waiting for a save. The document needs a page URL and a configured website that supports Strife live preview.

Use the **+** in a viewport's header to add **Tablet (810 px)**, **Phone (390 px)** or a **Custom…** width beside it. Click a viewport's name or width to edit it or remove it. Height follows the full page automatically as its content changes. Each viewport runs a separate preview; fewer viewports use less memory. Your layout is remembered in this browser for your account and team.

- Drag the canvas to pan, or drag the empty space in a viewport's header to move it.
- Scroll to pan. Pinch or use Ctrl/Command + scroll to zoom around the pointer.
- Use the hand tool to navigate and the pointer tool to interact with the website.
- Use **Fit** to show all previews. If you move away from them, **Back to content** brings them into view.
- The toolbar floats at the bottom of the canvas. Its language selector switches both the preview and the editor's content language.

- If the website runs Strife's accessibility audit, an accessibility button at the end of the toolbar shows how many rules the page fails. Click it to open the list: filter by severity, expand a rule to read what is wrong and open the guideline, hover a failing element to see it outlined in the preview, and click one to open the field it comes from. The audit runs again a moment after each edit, or right away with the panel's rerun button.

When the canvas has keyboard focus, arrow keys pan, `+`/`−` zoom, `0` fits all previews, `1` returns to 100%, and `H`/`V` switch tools. Hold Space to pan temporarily. **Reload** reconnects the previews.

If you follow a link inside a preview, it leaves this document's page and stops receiving your edits. The canvas tells you, and **Reload** brings it back. If a preview never connects, the website either does not allow being embedded or is not set up for live preview — reloading will not change that.

While editing a slug, the preview keeps loading the published address so the page remains reachable. The edited content still updates live.

---

# Zooming in a Canvas

Source: https://strife.app/docs/user-guide/canvas-and-preview/zooming-in-a-canvas

The Strife Canvas includes an intuitive zoom feature designed to aid users in concentrating on crucial aspects of a preview. To utilize this function with a touchpad, simply position two fingers on the surface and either pinch inwards or stretch outwards to adjust the magnification. Additionally, the toolbar possesses predefined functions for zooming.

For quick access, the command menu enables users to find the zoom features conveniently. Keyboard shortcuts are also available for zooming in and out within the Canvas, streamlining the entire process.

| Windows | Mac       | Feature       |
| ------- | --------- | ------------- |
| Ctrl +  | Command + | Zoom in       |
| Ctrl -  | Command - | Zoom out      |
| Ctrl 0  | Command 0 | Zoom to 100 % |
| Ctrl 1  | Command 1 | Zoom to fit   |
| Ctrl 2  | Command 2 | Zoom to fill  |

[Using the pre-defined zooming tools in Strife](https://strife.b-cdn.net/Documentation/Strife%20-%20Google%20Chrome%202023-06-01%2016-02-37.mp4)

---

# Pan in a Canvas

Source: https://strife.app/docs/user-guide/canvas-and-preview/pan-in-a-canvas

The Strife Canvas offers an easy-to-use Pan feature that helps users focus on critical elements of a preview. To enable this feature using a touchpad, place two fingers on the surface and swipe left/right or up/down; this will pan the Canvas accordingly. If you accidentally move the viewport off the screen, simply press Ctrl+2 (for Windows) or Command+2 (for Mac) to reset the viewport and fit it into your display.

If you would like to pan the viewport using a mouse, simply follow these steps:

1. Locate the hand icon in the Canvas menu.
2. Click on the hand icon to activate the panning function.
3. Press and hold the left mouse button while navigating within the viewport. This will cause the canvas to move in tandem with your mouse movements, allowing you to pan effortlessly across the workspace.

[Pan Canvas](https://strife.b-cdn.net/Documentation/Pan%20Canvas.mp4)

---

# Open a page in Strife from your website

Source: https://strife.app/docs/user-guide/canvas-and-preview/open-in-strife-from-your-website

When you browse your published website, you can jump straight into Strife on the page you are looking at. A small toolbar at the right edge of the page offers **Redigera i Strife**. It is shown only to you, in the browsers you have connected, never to your visitors.

Your website's developer needs to have installed the toolbar first (see the developer guide, "Open in Strife: a toolbar on your site").

## Connect your browser

You connect a browser once: open a page from Strife with the play button. The page opens in a new tab with the toolbar already there, and that browser stays connected. Keep the Strife tab open until the page has loaded.

The connection lasts 30 days per browser. In Safari it also ends after a week of not visiting the site. Connect again the same way.

## Open a page

Click **Redigera i Strife**. Strife opens in a new tab on the document behind the page. If you are not signed in you are asked to sign in first. If the page has no document of its own, for example a listing, Strife opens on the team's content list instead.

## Hide the toolbar

Click **×**. The toolbar disappears from that browser until you open a page from Strife again.

## Good to know

* The toolbar never shows inside Strife's own preview.
* If the toolbar opens Strife but you land somewhere unexpected, you may not be a member of the team behind that website.
* Sites in several languages open in the editor's current language, not necessarily the language of the page you came from.

---

# Working with content

Source: https://strife.app/docs/user-guide/working-with-content

Working with content in Strife is straightforward. But let's start with getting familiar with the concept of the editor experience. In the middle of the screen, you see what we call, a canvas. Canvas is the preview of your webpage; in this case, we see one page in three different resolutions. The first one shows the desktop version, the one in the middle shows the tablet version, and the one to the right gives you a clear presentation of how your mobile version will look like. Your canvas is interactive and gives you an instant update on your content creation, and you can zoom, pan, and scroll the page.

Read more about how the canvas works in the chapter[ Canvas and Preview.](https://strife.app/docs/user-guide/canvas-and-preview.md)

<figure><img src="https://strife.b-cdn.net/Documentation/Sk%C3%A4rmdump%20Editor%20view.png" alt=""><figcaption><p>The Strife editor view</p></figcaption></figure>

To the right of your screen, you will find your editing panel. Use the editor panel to create and edit all your content that is supposed to be editable. How the editor appears depends on how the template has been designed by the project team (designers and developers). Switch to metadata view by clicking the three dots at the top right of the editor panel. Toggle back to the content view by clicking the same button again.

When you're done creating your content, push Publish in the upper right corner. This will publish your content on your website.

Strife automatically saves your changes on the fly, but if you like to delete all changes, just hit Revert to return to the late published version of the page.

In the upper left corner above the canvas, you will find a couple of functional buttons. Clicking the X- button redirects you to the last used content list. You see two arrows (up and down) to the right of the X-button. Using these arrows to scroll through the pages in the current content list.

---

# Compose a document

Source: https://strife.app/docs/user-guide/working-with-content/compose-a-document

For most of you, a document is a unique web page on your website, but for some, it might be a product in your PIM system or a customer in your CRM system built on Strife. You can use Strife for multiple purposes, but in this documentation, we will only focus on composing content/pages for your website or a repeatable Chapter that can be reused multiple times on your website.

---

# Compose content

Source: https://strife.app/docs/user-guide/working-with-content/compose-content

Creating content in Strife is simple if you are a website editor. Let’s get familiar with the editor panel to the right of the screen. First, you can toggle between the content and metadata views by clicking the three dots in the upper right corner of the editing panel. You can adjust the width of the editor panel by grabbing (click and drag) the left-hand sidebar.

TIP! If you need to maximize the canvas viewport, just double-click the left-hand sidebar of the editor panel. This will hide the editor panel. To unhide, just click the panel icon to the right of the publish button in the top right corner of the interface. Clicking the panel icon toggles between hide and unhide of the editor panel.

####

---

# Why not on-page editing?

Source: https://strife.app/docs/user-guide/working-with-content/why-not-on-page-editing

Some of you might be familiar with on-page editing. Editors find it simple and intuitive to click the content they want to change on the page and edit it directly on the page. The reason why we have chosen another path are mainly these.

1. To get on-page editing to work, the CMS needs to add functions not supported by any web standard, and we, as a vendor, must invent solutions that might conflict with your Accessibility Guidelines (WCAG) and other web standards.
2. When creating on-page editing support, the CMS adds extra (unnecessary) code to your website, making it difficult to obtain a fast website with excellent performance.
3.  Because the CMS adds extra code to your website, the preview of the website is not a "what you see is what you get" experience.
4. On-page editing works well for demo-purpose with a scenario optimized for the simplest tasks. On-page editing is difficult to support for more complex tasks.
5. In the headless context, there might be documents with no public presentation. We need a solution that fits any editing scenario to keep the editing consistent for any editing task.
6. We wish to be a developer-friendly CMS, and we want a developer to be able to build everything that you, as an editor, need to get your work done. Adding unnecessary code makes it harder to accomplish this and might add many extra costs when upgrading your CMS to a later version because of breaking changes.

---

# Metadata and SEO

Source: https://strife.app/docs/user-guide/working-with-content/metadata-and-seo

Every page has metadata fields that define some essential characteristics of a page/document. Some metadata is mandatory, and some are optional (defined in the Template Builder by an administrator). A developer can customize the metadata view to match your unique requirements. Below is an example of how the metadata view may look like. Mandatory fields are the following.

1. **Display Name:** Every document/page needs a name to function. This name is the one presented in the content list view. When using the search function within Strife, you will get a hit on this name (among many other fields). The display name will also be the slug for the page.
2. **Slug:** The slug is the ending of an URL. The slug is significant for getting a good SEO.  Note that multiple changes of the slug are bad for SEO.
3. **Published Date:** This is the date and local time when the latest version of the page was published. You can set a publishing date and time by typing or choosing a date and time from the date picker to the right in the field.
4. **Label:** Labels are for internal and external use. Add tags to your pages to make them easier to find and sort in the Strife user interface. Labels are administrated in the team settings view.

Adding some fields to rank higher in search engines is recommended for better SEO. The most important fields are the following:

1. **Title:** The title is the heading that appears in search engines and is essential for SEO. Many SEOs and SEO websites recommend a title tag length of approximately 50 to 70 characters because that's what Google shows in the SERPs (Search Engine Results Page).
2. **Description:** Search engines use descriptions as short summaries or elevator pitches. The description is shown in search results for that page if the search engine doesn't find other content more relevant to a visitor's search terms. The description is not included in the search engine algorithm, but the number of clicks from users is. If you compose a good description that gets many clicks, the search engine will rate your content higher. That's why descriptions are so important. Make sure to spend extra thought when giving the page a description. It will affect your conversion rate significantly!

<figure><img src="https://strife.b-cdn.net/Documentation/Metadata.png" alt=""><figcaption><p>Metadata on pages</p></figcaption></figure>

If you are planning to share your content on social media, then you should consider adding the following:

1. OG-title for different social media
2. OG - description for different social media
3. OG-image with different resolutions for different social media.

---

# Rich text editor

Source: https://strife.app/docs/user-guide/working-with-content/rich-text-editor

When working with content using the Rich Text Editor, you get all the tools you need right at your fingertip. The Rich Text Editor allows you to add or edit content, images, links, and other components on the page without knowing any code.

You activate the edit menu by hitting enter, starting a new line, or selecting text or objects in the editor window.

The typography shown in the menu follows the setup of the website. Play around with the options in the edit menu and familiarize yourself with the other options.

Note! The Rich Text editor might not contain all the options described below. An administrator or a developer may have inactivated some of the options. The different options are strictly connected to the typography for the specific website that you are editing.

<figure><img src="https://strife.b-cdn.net/Documentation/Rich%20text%20editor%20with%20video.png" alt=""><figcaption><p>Rich Text Editor in Strife</p></figcaption></figure>

**Heading 1-Heading 3:** These are different headings to use when you create your content. HTML supports 6 levels of headings, but most websites do fine with 3-4 heading levels.

**Bold:** Bold is to be used for text without any extra importance but

**Italic:** Italic defines a part of a text in an alternate voice or mood. Italic is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.

**Underline:** Underlines can be used to highlight important text

**Strikethrough:** Strikethrough represents things that are no longer relevant or accurate

**Numbered list or bullet lists:** An ordered list uses numbers or some notation that indicates a series of items

**Quote:** Quotes are intended to be used for short quotations

**Divider:** Can be used to visually separate different paragraphs to make the page more "light" to read.

**Code:** Can be used to show examples of code

**Link:** Creates a link to another URL

**Picture:** Adds a picture to the page by adding an URL link to the picture. We recommend always using the Image component instead of adding pictures in the Rich Text Editor due to the lack of control. Using the Image Component gives you full control over size and appearance. Strife also optimizes image formats if you use the Image component instead. To use the Image Component, you need to add it to the template, and you might need help from an administrator or a developer to get it done.

**Video:** Adds a video to the page by adding an URL link to the video.

Note! At the moment, we only support adding video content in the Rich Text Editor. Still, before launching Strife, there will be possible to use a Video Component instead, adding better control for editors and developers.

Note! You get many extra features when using video from the media gallery in Strife. Read about the benefits of using Strife as your repository for your video content in the chapter Using Video Content.

---

# Working with video

Source: https://strife.app/docs/user-guide/working-with-content/working-with-video

Strife supports one way to use video on a page: adding video in the [Rich Text Editor](https://strife.app/docs/user-guide/working-with-content/rich-text-editor.md). Strife will soon support adding video through a video component, but until this component is launched, you need to use Rich Text Editor.

Using the video component will offer a number of positive advantages.

1. Videos are delivered through the Strife CDN, which will improve performance.
2. Strife video service supports streaming
3. The videos are transcoded into multiple resolutions
4. Automatically replicate your files all around the world to optimize performance from different locations
5. Customize the video player to match the overall design

---

# Working with pictures

Source: https://strife.app/docs/user-guide/working-with-content/working-with-pictures

The best and most common way to work with pictures is by using the picture component in Strife. Using the picture component gives you complete control of how pictures appear on a page in all different resolutions. You can even change which part of the picture you wish to highlight in the various resolutions. Change between different resolutions by clicking on the grey areas above the image and finetuning the look and feel for each resolution. Pan the picture by clicking and dragging the viewport. You can zoom in and out by moving the slider in the lower right corner of the image left and right.

<figure><img src="https://strife.b-cdn.net/Documentation/Image%20Component%20v2.png" alt=""><figcaption></figcaption></figure>

Switching pictures is done by selecting a new image from the media library at the bottom of the picture. Tab through the different images using keyboard arrows or just by click-select using your mouse.

 A brand-new picture is uploaded by, clicking the upload symbol <img src="https://strife.b-cdn.net/Documentation/Upload%20Icon.png" alt="" data-size="line">in the picture component. You may also use the paste <img src="https://strife.b-cdn.net/Documentation/Paste%20icon.png" alt="" data-size="line">function to import external images. The copy/paste process works well if you find a free picture on the Internet.

The paste function works well if you find a free picture on the Internet that you wish to use on your website. Copy the image in the browser, toggle to Strife, and hit the paste function.

Note! Every picture you paste to a picture component will be stored in the media library.

If you wish to delete a picture, just hit the garbage can.

Note! Deleting a picture will only delete the image on the active page. It will not delete it from your media library.

---

# Edit pictures

Source: https://strife.app/docs/user-guide/working-with-content/working-with-pictures/edit-pictures

There are multiple ways to edit a picture on a page in Strife. Strife uniquely controls how a picture will be displayed in different resolutions (for example, desktop, tablet, and mobile). Choose Desktop to edit the picture that will appear in the desktop view.

**Zoom** in and out of the picture by click-drag the zoom-slider at the bottom of the image component.

**Pan** the picture by click-drag the picture or click-dragging in the miniature in the upper left corner.

Note! In some cases, you might not have the possibility to change between different displays of a picture. The reason for this is that a developer must create a template that supports this feature. Otherwise, this will not work as intended.

<figure><img src="https://strife.b-cdn.net/Documentation/Image%20Component%20v2.png" alt=""><figcaption></figcaption></figure>

---

# Moving a page/document

Source: https://strife.app/docs/user-guide/working-with-content/moving-a-page-document

Moving a document is done by choosing a new parent in your list of documents. Clicking the three dots at the beginning of the document will open up this menu.

<figure><img src="https://strife.b-cdn.net/Documentation/Changing%20origin%201.png" alt=""><figcaption><p>Set origin</p></figcaption></figure>

Click **Set origin…** to set a new parent by searching at the top or scrolling through the list of documents/pages.

<figure><img src="https://strife.b-cdn.net/Documentation/Changing%20origin%202.png" alt=""><figcaption><p>Set parent page</p></figcaption></figure>

---

# Lifecycle of a page

Source: https://strife.app/docs/user-guide/working-with-content/lifecycle-of-a-page

In Strife, you never need to worry about losing any of your work. Strife saves all your changes for you.

### Draft

A draft in Strife is a working copy of your page. Strife saves a draft when you leave a field by clicking outside the area or moving to a new field in the edit panel to the right. As an editor, you are notified when Strife saves a draft in the interface's upper right corner.

<figure><img src="https://strife.b-cdn.net/Documentation/Changes%20saved.png" alt=""><figcaption><p>Changes saved </p></figcaption></figure>

You are not able to undo or step back in draft history in Strife. You can only return to the latest saved draft by choosing the document from the draft list at the pre-defined filter list on the left-hand side of the interface.

<figure><img src="https://strife.b-cdn.net/Documentation/Pre%20defined%20filters.png" alt=""><figcaption><p>Pre-defined filters</p></figcaption></figure>

### Published

The published version is the page that is reachable by your audience.

### Archived

Archiving a page means unpublishing a page on your website. You can archive a page by clicking the three dots to the left in the document list and then choosing **Archive** in the menu. Archiving a page with descendants will automatically archive all the related pages.

<figure><img src="https://strife.b-cdn.net/Documentation/Changing%20origin%201.png" alt=""><figcaption><p>Archiving documents</p></figcaption></figure>

If you wish to undo your archive page, go to the **Archive** list and select **Restore** from the menu. Restoring a document will republish your page on your site.

<figure><img src="https://strife.b-cdn.net/Documentation/Restore.png" alt=""><figcaption><p>Restore archived page</p></figcaption></figure>

### Revert

Reverting a page will erase all unpublished changes on a page. Reverting a page gives the editor a clean sheet.

<figure><img src="https://strife.b-cdn.net/Documentation/Changes%20saved.png" alt=""><figcaption><p>Reverting to latest published page </p></figcaption></figure>

### Discard

If a page doesn't have a published version, discarding a page will permanently delete the draft, and the page will not be able to restore.

<figure><img src="https://strife.b-cdn.net/Documentation/Discard.png" alt=""><figcaption><p>Discarding a page</p></figcaption></figure>

---

# Improving content

Source: https://strife.app/docs/user-guide/improving-content

---

# Activity

Source: https://strife.app/docs/user-guide/improving-content/activity

The activity log gives you a clear overview of all changes and actions on a page — perfect for collaboration and content analysis.

### Viewing and Using the Activity Log

The activity log helps you track everything that happens on a page — from internal edits to external interactions like visitor reactions. It’s a powerful tool for collaboration, follow-up, and understanding how your content evolves over time.

<figure><img src="https://strife.app/docs/assets/Screenshot%202025-05-12%20at%2009.49.58.png" alt=""><figcaption><p>Sub menu in editor panel</p></figcaption></figure>

### How to access the activity log

1.  **Open any page or document in Strife**

    Navigate to the page you want to inspect.
2.  **Open the sub menu**

    Click the **three dots in the top-right corner** of the toolbar
3. **Select "Activity" from the menu**\
   A dropdown menu will appear. Click **Activity** to open the activity log.
4. **Review recent activity**\
   You’ll now see a timeline of all actions taken on the page, such as:

* Content edits
* Draft saves and publishing events
* Comments and mentions from other editors
* Tasks assigned via mentions

5. **Track external events**\
   The activity log also includes **external interactions**, such as:

* Visitor reactions to the content
* Comments left by users on the page

> [!NOTE]
> Expand an edit entry (for example “2 changes”) to see exactly which fields were changed, listed by their field names from the template. A change inside a chapter shows the chapter’s name followed by the field — for example “Intro → Text”. Hover over the list to see the technical field paths.

> [!NOTE]
> If you subscribe to a page, you'll receive a notification in your Strife inbox whenever there’s activity related to that page — keeping you updated without having to check manually.

### Video

[https://strife.b-cdn.net/Documentation/Strife%20user%20doc/Improving%20content/Screen%20Recording%202025-05-12%20at%2009.48.19.mp4](https://strife.b-cdn.net/Documentation/Strife%20user%20doc/Improving%20content/Screen%20Recording%202025-05-12%20at%2009.48.19.mp4)

---

# Media repository

Source: https://strife.app/docs/user-guide/media-repository

In Strife,  each team has a dedicated media library designed to store and manage various media files and documents effectively. To access your team's media library, navigate to the left-hand menu and click the 'Media' label.

Once inside the media library, you can easily browse and organize your files using four pre-defined filter options: Images, Videos, Documents, and All. These filters allow you to quickly narrow your search, ensuring you find the exact media file or document you seek.

By utilizing Strife's media library, you'll be able to maintain efficient workflows and enhance collaboration among your team members, making the most of the software's user-friendly features.

<figure><img src="https://strife.b-cdn.net/Documentation/Media%20archive.png" alt=""><figcaption><p>Media Library</p></figcaption></figure>

---

# Uploading media files

Source: https://strife.app/docs/user-guide/media-repository/uploading-media-files

To upload media files in Strife, follow these steps:

1. Locate the Media Library section within the Team in Strife. Note that each team has its own media library.
2. In the top-right corner of the Media Library, you will see a menu icon represented by three dots. Click on this icon to open the media menu.
3. From the media menu, select "File Upload." This will open your computer's file directory, allowing you to browse and select the media files you want to upload.
4. In the file directory, navigate to the folder containing the desired files. Once you've found the files you want to upload, click on them to select them. You can select multiple files by holding down the 'Ctrl' key (Windows) or 'Command' key (Mac) while clicking on each file.
5. After selecting the files, click the "Open" or "Choose" button to initiate the upload process. The selected media files will be added to the library and available within Strife.

Note: The upload speed might vary depending on the size of the files and your internet connection. Please be patient while the files are being uploaded.

> [!NOTE]
> You can upload multiple files in one batch upload!

> [!NOTE]
> You may also use short keys to initiate an upload.

| Windows      | Mac             | Upload file/files              |
| ------------ | --------------- | ------------------------------ |
| Ctrl+Shift+U | Command+Shift+U | Open computer's file directory |

<figure><img src="https://strife.b-cdn.net/Documentation/Media%20Archive%20upload%20menu.png" alt=""><figcaption><p>Upload files</p></figcaption></figure>

---

# Copy  a media file

Source: https://strife.app/docs/user-guide/media-repository/copy-a-media-file

The copy feature will prompt you with three different options.

1. Copy original - Will copy a link to the original to your clipboard.
2. Copy Preview - Will copy a link to a low-resolution version of the media file to your clipboard.
3. Copy thumbnail - Will copy a link to a low-resolution media file thumbnail to your clipboard.

<figure><img src="https://strife.b-cdn.net/Documentation/Copy%20media%20file.png" alt=""><figcaption></figcaption></figure>

---

# Deleting a media file

Source: https://strife.app/docs/user-guide/media-repository/deleting-a-media-file

To permanently remove a file from your media library in Strife, follow these simple steps:

1. Locate the desired file within your library.
2. In the lower right corner of the media file thumbnail, find the three-dot "More Options" menu icon.
3. Click on the three-dot menu to open a menu of additional actions for the media file.
4. Select the "Delete" option from the menu.

> [!NOTE]
> Permanently Delete a File
>
> Please note that when you delete a file within Strife, the action is irreversible! Once the file has been removed, it cannot be recovered or restored. Ensure that you are certain about your decision before proceeding with the deletion.

> [!NOTE]
> When you remove a media file from the media library, it will not automatically delete the media file from the webpage where it is currently being utilized. The file will remain embedded on the webpage and continue to be accessible to users.

<figure><img src="https://strife.b-cdn.net/Documentation/Media%20Archive%20item%20menu.png" alt=""><figcaption><p>Deleting a file</p></figcaption></figure>

---

# Sorting media library

Source: https://strife.app/docs/user-guide/media-repository/sorting-media-library

In addition to using predefined filters to access media files, the editor allows you to sort files in a descending order with the help of the "Flip Order" icon located on the upper right corner of the user interface. By using this feature, you can easily toggle between displaying the most recently uploaded files at the top and showing the oldest uploads at the top.

The sorting feature will evolve in the upcoming releases of Strife.

<figure><img src="https://strife.b-cdn.net/Documentation/Media%20archive.png" alt=""><figcaption><p>Flipping order </p></figcaption></figure>