### Example Output for Selected Favorite Cities (JSON)

Source: https://sveltiacms.app/en/docs/fields/relation

Example of how the selected favorite cities are represented in JSON format.

```json
{
  "favorite_cities": ["San Francisco", "Tokyo", "Paris"]
}
```

--------------------------------

### Example: Registering an Asynchronous Formatter

Source: https://sveltiacms.app/en/docs/api/file-formats

This example shows how to register a custom format with an asynchronous `toFile` function, using Prettier for formatting. If `fromFile` is omitted, the default parser for the extension will be used.

```javascript
import Prettier from 'prettier';

CMS.registerCustomFormat('json', 'json', {
  toFile: async (data) => Prettier.format(data),
});
```

--------------------------------

### Example: Registering JSON5 Format

Source: https://sveltiacms.app/en/docs/api/file-formats

This example shows how to register a custom format for JSON5 using the `json5` library. It provides both parsing and stringifying functions.

```javascript
import JSON5 from 'json5';

CMS.registerCustomFormat('json5', 'json5', {
  fromFile: (text) => JSON5.parse(text),
  toFile: (data) => JSON5.stringify(data, null, 2),
});
```

--------------------------------

### DateTime Output Example

Source: https://sveltiacms.app/en/docs/fields/datetime

Example of the ISO 8601 formatted output for a default DateTime field.

```yaml
eventDateTime: 2025-08-15T14:30:00
```

```toml
eventDateTime = 2025-08-15T14:30:00
```

```json
{
  "eventDateTime": "2025-08-15T14:30:00"
}
```

--------------------------------

### Basic KeyValue Field Output Example

Source: https://sveltiacms.app/en/docs/fields/keyvalue

Example of how data is structured for a basic KeyValue field.

```yaml
settings:
  theme: dark
  notifications: enabled
```

```toml
[settings]
theme = "dark"
notifications = "enabled"
```

```json
{
  "settings": {
    "theme": "dark",
    "notifications": "enabled"
  }
}
```

--------------------------------

### Basic String Field Output Example

Source: https://sveltiacms.app/en/docs/fields/string

Example of how a basic String field would appear with a value.

```yaml
title: My First Post
```

```toml
title = "My First Post"
```

```json
{
  "title": "My First Post"
}
```

--------------------------------

### Example: Registering YAML Parser with Custom Behavior

Source: https://sveltiacms.app/en/docs/api/file-formats

This example demonstrates registering a custom YAML format, including adding a `last_updated` timestamp to the file content during formatting. Note that event hooks are generally preferred for metadata.

```javascript
import YAML from 'js-yaml';

CMS.registerCustomFormat('yaml', 'yaml', {
  fromFile: (text) => YAML.load(text),
  toFile: (data) => YAML.dump({ ...data, last_updated: new Date().toISOString() }),
});
```

--------------------------------

### Example Output for Selected Favorite Cities (YAML)

Source: https://sveltiacms.app/en/docs/fields/relation

Example of how the selected favorite cities are represented in YAML format after selection.

```yaml
favorite_cities:
  - San Francisco
  - Tokyo
  - Paris
```

--------------------------------

### Collection Configuration Examples

Source: https://sveltiacms.app/en/docs/api/file-formats

These examples demonstrate how to specify a custom format ('json5' in this case) within Sveltia CMS collection configurations for different file formats.

```yaml
collections:
  - name: myCollection
    format: json5
    fields:
      - name: item1
        label: Item 1
```

```toml
[[collections]]
name = "myCollection"
format = "json5"

[[collections.fields]]
name = "item1"
label = "Item 1"
```

```json
{
  "collections": [
    {
      "name": "myCollection",
      "format": "json5",
      "fields": [
        {
          "name": "item1",
          "label": "Item 1"
        }
      ]
    }
  ]
}
```

```javascript
{
  collections: [
    {
      name: "myCollection",
      format: "json5",
      fields: [
        {
          name: "item1",
          label: "Item 1",
        },
      ],
    },
  ],
}
```

--------------------------------

### Initialize CMS via NPM

Source: https://sveltiacms.app/en/docs/api

Import and initialize Sveltia CMS after installing it via NPM. Ensure config, filePath, and definition are defined.

```js
import CMS from '@sveltia/cms';

CMS.init({ config });
CMS.registerPreviewStyle(filePath);
CMS.registerEditorComponent(definition);
```

--------------------------------

### Collection Configuration Example

Source: https://sveltiacms.app/en/docs/ui/content-editor

This example demonstrates a collection configuration in YAML, TOML, JSON, and JavaScript formats. It defines fields for title, author (with nested name), and body.

```yaml
collections:
  - name: posts
    label: Posts
    folder: /content/posts
    fields:
      - name: title
        label: Title
      - name: author
        label: Author
        widget: object
        fields:
          - name: name
            label: Name
      - name: body
        label: Body
        widget: richtext
```

```toml
[[collections]]
name = "posts"
label = "Posts"
folder = "/content/posts"
[[collections.fields]]
name = "title"
label = "Title"
[[collections.fields]]
name = "author"
label = "Author"
widget = "object"
[[collections.fields.fields]]
name = "name"
label = "Name"
[[collections.fields]]
name = "body"
label = "Body"
widget = "richtext"
```

```json
{
  "collections": [
    {
      "name": "posts",
      "label": "Posts",
      "folder": "/content/posts",
      "fields": [
        { "name": "title", "label": "Title" },
        {
          "name": "author",
          "label": "Author",
          "widget": "object",
          "fields": [{ "name": "name", "label": "Name" }]
        },
        { "name": "body", "label": "Body", "widget": "richtext" }
      ]
    }
  ]
}
```

```javascript
{
  collections: [
    {
      name: "posts",
      label: "Posts",
      folder: "/content/posts",
      fields: [
        { name: "title", label: "Title" },
        {
          name: "author",
          label: "Author",
          widget: "object",
          fields: [{ name: "name", label: "Name" }],
        },
        { name: "body", label: "Body", widget: "richtext" },
      ],
    },
  ],
}
```

--------------------------------

### Example Output for Selected Favorite Cities (TOML)

Source: https://sveltiacms.app/en/docs/fields/relation

Example of how the selected favorite cities are represented in TOML format.

```toml
favorite_cities = ["San Francisco", "Tokyo", "Paris"]
```

--------------------------------

### YAML: Example Data File Output

Source: https://sveltiacms.app/en/docs/fields/list

An example of a data file content structured as a top-level list, with each item in the list having 'name' and 'github' fields.

```yaml
- name: Alice
  github: alicehub123
- name: Bob
  github: bobgit456
- name: Charlie
  github: charliecode789
```

--------------------------------

### Install Sveltia CMS via NPM

Source: https://sveltiacms.app/en/docs/api

Install the Sveltia CMS package using your preferred package manager.

```bash
npm install @sveltia/cms
```

```bash
yarn add @sveltia/cms
```

```bash
pnpm add @sveltia/cms
```

```bash
bun add @sveltia/cms
```

--------------------------------

### Examples of Custom Format Registration

Source: https://sveltiacms.app/en/docs/api/file-formats

Illustrative examples of registering various custom file formats, including JSON5, YAML with custom behavior, JavaScript modules, and asynchronous formatting.

```APIDOC
## Examples

### Registering JSON5 Format

```js
import JSON5 from 'json5';

CMS.registerCustomFormat('json5', 'json5', {
  fromFile: (text) => JSON5.parse(text),
  toFile: (data) => JSON5.stringify(data, null, 2),
});
```

### Registering YAML Parser with Custom Behavior

```js
import YAML from 'js-yaml';

CMS.registerCustomFormat('yaml', 'yaml', {
  fromFile: (text) => YAML.load(text),
  toFile: (data) => YAML.dump({ ...data, last_updated: new Date().toISOString() }),
});
```

### Registering JavaScript Module Format

```js
CMS.registerCustomFormat('mjs', 'js', {
  fromFile: (text) => JSON.parse(text.replace(/^export default (.+);$/s, '$1')),
  toFile: (data) => `export default ${JSON.stringify(data, null, 2)};`,
});
```

### Registering an Asynchronous Formatter

```js
import Prettier from 'prettier';

CMS.registerCustomFormat('json', 'json', {
  toFile: async (data) => Prettier.format(data),
});
```
```

--------------------------------

### Example Output for Placeholder Block

Source: https://sveltiacms.app/en/docs/fields/object

Demonstrates the output for a 'contentBlock' of type 'placeholderBlock', which only contains the type key as it has no subfields.

```yaml
contentBlock:
  type: placeholderBlock
```

```toml
[contentBlock]
type = "placeholderBlock"
```

```json
{
  "contentBlock": {
    "type": "placeholderBlock"
  }
}
```

--------------------------------

### Sveltia CMS DigitalOcean Spaces Configuration Examples

Source: https://sveltiacms.app/en/docs/media/digitalocean-spaces

Examples of how to configure DigitalOcean Spaces as a media library in Sveltia CMS across different formats. Ensure your Secret Access Key is kept confidential and not exposed in client-side code.

```yaml
media_libraries:
  digitalocean_spaces:
    access_key_id: ABCD1234EFGH5678IJKL
    bucket: my-space
    region: nyc3
    prefix: cms-uploads/ # Optional
    public_url: https://my-space.nyc3.cdn.digitaloceanspaces.com # Optional, see CDN Endpoint below
```

```toml
[media_libraries.digitalocean_spaces]
access_key_id = "ABCD1234EFGH5678IJKL"
bucket = "my-space"
region = "nyc3"
prefix = "cms-uploads/"
public_url = "https://my-space.nyc3.cdn.digitaloceanspaces.com"
```

```json
{
  "media_libraries": {
    "digitalocean_spaces": {
      "access_key_id": "ABCD1234EFGH5678IJKL",
      "bucket": "my-space",
      "region": "nyc3",
      "prefix": "cms-uploads/",
      "public_url": "https://my-space.nyc3.cdn.digitaloceanspaces.com"
    }
  }
}
```

```javascript
{
  media_libraries: {
    digitalocean_spaces: {
      access_key_id: 'ABCD1234EFGH5678IJKL',
      bucket: 'my-space',
      region: 'nyc3',
      prefix: 'cms-uploads/', // Optional
      public_url: 'https://my-space.nyc3.cdn.digitaloceanspaces.com', // Optional
    },
  },
}
```

--------------------------------

### Simple List Output

Source: https://sveltiacms.app/en/docs/fields/list

Example output for a simple list widget containing string values.

```yaml
tags:
  - travel
  - photography
  - food
```

```toml
tags = ["travel", "photography", "food"]
```

```json
{
  "tags": ["travel", "photography", "food"]
}
```

--------------------------------

### Example Multiple Image Upload Output

Source: https://sveltiacms.app/en/docs/fields/image

This demonstrates the data structure for multiple image uploads, showing an array of file paths for each format.

```yaml
gallery:
  - /uploads/photo1.webp
  - /uploads/photo2.webp
  - /uploads/photo3.webp
```

```toml
gallery = ["/uploads/photo1.webp", "/uploads/photo2.webp", "/uploads/photo3.webp"]
```

```json
{
  "gallery": ["/uploads/photo1.webp", "/uploads/photo2.webp", "/uploads/photo3.webp"]
}
```

--------------------------------

### Example: Registering JavaScript Module Format

Source: https://sveltiacms.app/en/docs/api/file-formats

This example registers a custom format for JavaScript modules that use `export default`. It includes a basic regex for parsing and formatting. For complex modules, consider libraries like `acorn` or `esbuild`.

```javascript
CMS.registerCustomFormat('mjs', 'js', {
  fromFile: (text) => JSON.parse(text.replace(/^export default (.+);$/s, '$1')),
  toFile: (data) => `export default ${JSON.stringify(data, null, 2)};`,
});
```

--------------------------------

### Multiple Folders i18n Structure File Paths

Source: https://sveltiacms.app/en/docs/i18n

Example file paths for the multiple_folders structure, showing locale-specific subdirectories.

```yaml
.\n└─ content/\n   └─ pages/\n      ├─ de/\n      │  └─ about.md  # German\n      ├─ en/\n      │  └─ about.md  # English (default locale)\n      └─ fr/\n         └─ about.md  # French
```

--------------------------------

### Multi Select Output Example

Source: https://sveltiacms.app/en/docs/fields/select

Shows the output format when multiple options are selected from a multi-select field.

```yaml
fruits:
  - Apple
  - Cherry
```

```toml
fruits = ["Apple", "Cherry"]
```

```json
{
  "fruits": ["Apple", "Cherry"]
}
```

--------------------------------

### Pre-filled Entry Example URL

Source: https://sveltiacms.app/en/docs/ui/content-editor

This URL demonstrates how to pre-fill the 'title', 'author.name', and 'body' fields when creating a new entry in the 'posts' collection.

```url
https://example.com/admin/#/collections/posts/new?title=My%20First%20Post&author.name=John%20Doe&body=Hello%2C%20world!
```

--------------------------------

### List `{{index}}` Example Output

Source: https://sveltiacms.app/en/docs/fields/compute

Illustrates how the `{{index}}` variable populates the 'Item Index' field for each item added to the list.

```yaml
items:
  - name: Apple
    index: 0
  - name: Banana
    index: 1
  - name: Cherry
    index: 2
```

```toml
[[items]]
name = "Apple"
index = 0
[[items]]
name = "Banana"
index = 1
[[items]]
name = "Cherry"
index = 2
```

```json
{
  "items": [
    {
      "name": "Apple",
      "index": 0
    },
    {
      "name": "Banana",
      "index": 1
    },
    {
      "name": "Cherry",
      "index": 2
    }
  ]
}
```

--------------------------------

### Example Output for Selected Category

Source: https://sveltiacms.app/en/docs/fields/relation

This shows the expected output format when a specific category, identified by its slug, is selected.

```yaml
category: news
```

```toml
category = "news"
```

```json
{
  "category": "news"
}
```

--------------------------------

### Multiple Files i18n Structure File Paths

Source: https://sveltiacms.app/en/docs/i18n

Example file paths for the multiple_files structure, showing locale suffixes.

```yaml
.\n└─ content/\n   └─ pages/\n      ├─ about.de.md  # German\n      ├─ about.en.md  # English (default locale)\n      └─ about.fr.md  # French
```

--------------------------------

### Sveltia CMS Initialization and API Methods

Source: https://sveltiacms.app/en/docs/api

Demonstrates how to access and use the global CMS object for initialization, registering custom elements, and managing preview styles.

```APIDOC
## Accessing the CMS Object

The `CMS` object is the primary interface for interacting with Sveltia CMS programmatically.

### Initialization

Initializes the CMS with a configuration object.

#### Method

`CMS.init(config)`

#### Parameters

- **config** (object) - Required - The configuration object for the CMS.

### Registering Custom Preview Styles

Registers a custom CSS file to be loaded within the preview pane.

#### Method

`CMS.registerPreviewStyle(filePath)`

#### Parameters

- **filePath** (string) - Required - The path to the CSS file.

### Registering Custom Editor Components

Registers a custom editor component for specific field types.

#### Method

`CMS.registerEditorComponent(definition)`

#### Parameters

- **definition** (object) - Required - The definition object for the custom editor component.

### Registering Custom Field Types (Widgets)

Registers a custom field type, also known as a widget.

#### Method

`CMS.registerFieldType(name, widget)` or `CMS.registerWidget(name, widget)`

#### Parameters

- **name** (string) - Required - The name of the field type.
- **widget** (object) - Required - The widget implementation.

### Registering Custom File Formats

Registers a custom file format for content storage.

#### Method

`CMS.registerCustomFormat(format)`

#### Parameters

- **format** (object) - Required - The definition of the custom file format.

### Registering Event Listeners

Registers a listener for specific CMS events.

#### Method

`CMS.registerEventListener(event, listener)`

#### Parameters

- **event** (string) - Required - The name of the event to listen for.
- **listener** (function) - Required - The callback function to execute when the event is triggered.

### Request Example (CDN - Module)

```html
<script type="module">
  import CMS from 'https://unpkg.com/@sveltia/cms/dist/sveltia-cms.mjs';

  CMS.init({
    config: {
      backend: {
        name: 'git-gateway',
        branch: 'main'
      },
      media_folder: 'static/img',
      public_folder: 'static/img'
    }
  });
  CMS.registerPreviewStyle('/styles/preview.css');
  CMS.registerEditorComponent({
    id: 'my-custom-component',
    label: 'My Custom Component',
    fields: [],
    pattern: /^\s*<my-custom-component\s*\/>\s*$/i,
    fromBlock: function() { return {}
    },
    toBlock: function() { return '<my-custom-component/>'
    },
    toPreview: function() { return 'My Custom Component Preview'
    }
  });
</script>
```

### Request Example (NPM Package)

```js
import CMS from '@sveltia/cms';

CMS.init({
  config: {
    backend: {
      name: 'git-gateway',
      branch: 'main'
    },
    media_folder: 'static/img',
    public_folder: 'static/img'
  }
});

// Or import only specific methods
import { init } from '@sveltia/cms';
init({
  config: {
    backend: {
      name: 'git-gateway',
      branch: 'main'
    },
    media_folder: 'static/img',
    public_folder: 'static/img'
  }
});
```

### Note on Unsupported Methods

Methods like `registerLocale`, `registerRemarkPlugin`, and others found in Netlify/Decap CMS are not supported in Sveltia CMS due to differences in localization and Markdown processing (Sveltia CMS uses Lexical framework).
```

--------------------------------

### Time-only Output Example

Source: https://sveltiacms.app/en/docs/fields/datetime

Example of the output for a time-only DateTime field.

```yaml
startTime: 14:30:00
```

```toml
startTime = 14:30:00
```

```json
{
  "startTime": "14:30:00"
}
```

--------------------------------

### Blog Post Data in YAML

Source: https://sveltiacms.app/en/docs/fields

Example of blog post content formatted in YAML, including title, published status, date, and body.

```yaml
title: My First Blog Post
published: true
date: 2024-06-15T10:00:00Z
body: |
  # Welcome to my blog

  This is the content of my first blog post.
```

--------------------------------

### Initialize CMS with specific methods via NPM

Source: https://sveltiacms.app/en/docs/api

Import only the necessary methods from the Sveltia CMS NPM package for initialization.

```js
import { init } from '@sveltia/cms';

init({ config });
```

--------------------------------

### Date-only Output Example

Source: https://sveltiacms.app/en/docs/fields/datetime

Example of the output for a date-only DateTime field.

```yaml
startDate: 2025-08-15
```

```toml
startDate = 2025-08-15
```

```json
{
  "startDate": "2025-08-15"
}
```

--------------------------------

### Manual Initialization with `init` function

Source: https://sveltiacms.app/en/docs/api/initialization

Demonstrates how to manually initialize Sveltia CMS using the `CMS.init()` function, allowing for greater control over the CMS startup process.

```APIDOC
## POST /api/initialization

### Description
Manually initialize Sveltia CMS with the `init` function for greater control over CMS startup.

### Method
POST

### Endpoint
/api/initialization

### Parameters
#### Request Body
- **config** (object) - Optional - An object that can contain any of the configuration options available in the `config.yml` file. If provided, this configuration will be merged with the one loaded from `config.yml` or used directly if `load_config_file` is `false`.

### Request Example
```json
{
  "config": {
    "load_config_file": false,
    "backend": {
      "name": "github",
      "repo": "user/repo"
    },
    "media_folder": "/public/media",
    "public_folder": "/media",
    "collections": []
  }
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates successful initialization.

#### Response Example
```json
{
  "status": "initialized"
}
```
```

--------------------------------

### Initialize a Git Repository

Source: https://sveltiacms.app/en/docs/workflows/local

Use this command to initialize a new Git repository in your project folder. Sveltia CMS requires a `.git` folder to exist to verify the project root.

```bash
git init
```

--------------------------------

### Markdown Content Example

Source: https://sveltiacms.app/en/docs/fields/markdown

This is an example of content formatted using Markdown syntax within a Markdown field.

```markdown
# Welcome to the Markdown Field

This is a sample paragraph in **Markdown** format.

- Item 1
- Item 2
```

--------------------------------

### File Path Structure Example (Multiple Root Folders)

Source: https://sveltiacms.app/en/docs/i18n

A visual representation of how files are organized across different locales when the `multiple_root_folders` structure is active.

```tree
. 
├─ de/ 
│  └─ pages/ 
│     └─ about.md  # German 
├─ en/ 
│  └─ pages/ 
│     └─ about.md  # English (default locale) 
└─ fr/ 
   └─ pages/ 
      └─ about.md  # French 
```

--------------------------------

### Configure Uploadcare with Legacy `media_library` Option

Source: https://sveltiacms.app/en/docs/media/uploadcare

This example shows how to configure Uploadcare using the legacy `media_library` option for backward compatibility. Note that only one provider can be configured with this option.

```yaml
media_library:
  name: uploadcare
  config:
    publicKey: YOUR_PUBLIC_KEY
```

--------------------------------

### Basic GitHub Backend Configuration

Source: https://sveltiacms.app/en/docs/backends/github

Use this configuration to set up the GitHub backend with your repository details. Ensure the 'repo' format is 'owner/repo'.

```yaml
backend:
  name: github
  repo: user/repo
```

```toml
[backend]
name = "github"
repo = "user/repo"
```

```json
{
  "backend": {
    "name": "github",
    "repo": "user/repo"
  }
}
```

```javascript
{
  backend: {
    name: "github",
    repo: "user/repo",
  },
}
```

--------------------------------

### Root-Level KeyValue Field Output Example

Source: https://sveltiacms.app/en/docs/fields/keyvalue

Example of how data is structured when the 'root' option is enabled for a KeyValue field.

```yaml
theme: dark
notifications: enabled
```

```toml
theme = "dark"
notifications = "enabled"
```

```json
{
  "theme": "dark",
  "notifications": "enabled"
}
```

--------------------------------

### Configure Entry and File Collections in TOML

Source: https://sveltiacms.app/en/docs/collections

This TOML configuration demonstrates how to set up both entry and file collections, similar to the YAML example. Entry collections use 'folder', while file collections use 'files'.

```toml
[[collections]]
name = "posts"
label = "Blog Posts"
folder = "content/posts"

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

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

[[collections]]
name = "pages"
label = "Pages"

[[collections.files]]
name = "about"
label = "About Page"
file = "content/pages/about.md"

[[collections.files.fields]]
name = "title"
label = "Title"

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

--------------------------------

### Configure Cloudinary using Legacy Media Library Option

Source: https://sveltiacms.app/en/docs/media

This example shows how to configure Cloudinary using the legacy `media_library` option for backward compatibility. Only one provider can be configured with this option.

```yaml
media_library:
  name: cloudinary
  config:
    cloud_name: YOUR_CLOUD_NAME
    api_key: YOUR_API_KEY
  output_filename_only: true
```

--------------------------------

### JSON Example Data for Transformations

Source: https://sveltiacms.app/en/docs/string-transformations

JSON representation of example data for title, publish_date, and body, to be transformed in a collection summary.

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

--------------------------------

### Configure Collection Media Folders with Placeholders (JSON)

Source: https://sveltiacms.app/en/docs/media/internal

Use placeholder variables like `{{media_folder}}` and `{{public_folder}}` in JSON to dynamically set collection media paths.

```json
{
  "collections": [
    {
      "name": "products",
      "label": "Products",
      "folder": "content/products",
      "media_folder": "{{media_folder}}/products",
      "public_folder": "{{public_folder}}/products"
    }
  ]
}
```

--------------------------------

### Basic Number Field Output Example

Source: https://sveltiacms.app/en/docs/fields/number

Example of the data output for a basic Number field. The value is stored as a number.

```yaml
quantity: 5
```

```toml
quantity = 5
```

```json
{
  "quantity": 5
}
```

--------------------------------

### Basic Color Field Output Example

Source: https://sveltiacms.app/en/docs/fields/color

Example output for a basic Color field, showing the hex value for white.

```yaml
background_color: '#FFFFFF'
```

```toml
background_color = "#FFFFFF"
```

```json
{
  "background_color": "#FFFFFF"
}
```

--------------------------------

### Example List Field Content (YAML)

Source: https://sveltiacms.app/en/docs/fields/list

Demonstrates how to populate a list field with mixed 'text_item' and 'image_item' entries in YAML format. Each item specifies its type and corresponding fields.

```yaml
items:
  - type: text_item
    text: This is a text item.
  - type: image_item
    url: https://example.com/image.jpg
    caption: An example image.
  - type: text_item
    text: Another text item.
```

--------------------------------

### TOML Example Data for Transformations

Source: https://sveltiacms.app/en/docs/string-transformations

Example TOML data for title, publish_date, and body, intended to be used with collection summary transformations.

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

--------------------------------

### Configure Collection Media Folders with Placeholders (TOML)

Source: https://sveltiacms.app/en/docs/media/internal

Use placeholder variables like `{{media_folder}}` and `{{public_folder}}` in TOML to dynamically set collection media paths.

```toml
[[collections]]
name = "products"
label = "Products"
folder = "content/products"
media_folder = "{{media_folder}}/products"
public_folder = "{{public_folder}}/products"
```

--------------------------------

### Configure Collection Media Folders with Placeholders (YAML)

Source: https://sveltiacms.app/en/docs/media/internal

Use placeholder variables like `{{media_folder}}` and `{{public_folder}}` in YAML to dynamically set collection media paths.

```yaml
collections:
  - name: products
    label: Products
    folder: content/products
    media_folder: '{{media_folder}}/products'
    public_folder: '{{public_folder}}/products'
```

--------------------------------

### Color Field with Alpha and Input Output Example

Source: https://sveltiacms.app/en/docs/fields/color

Example output for a Color field with alpha enabled and input allowed, showing a semi-transparent black color.

```yaml
overlay_color: '#00000080'
```

```toml
overlay_color = "#00000080"
```

```json
{
  "overlay_color": "#00000080"
}
```

--------------------------------

### Example Usage of List Widget with Custom Type Key

Source: https://sveltiacms.app/en/docs/fields/list

Demonstrates how to use the configured list widget to create content with different block types, utilizing the 'tag' key for type identification and including text for paragraph and heading blocks.

```yaml
- name: blocks
  tag: h2
  text: Welcome to Our Site
- name: blocks
  tag: p
  text: This is the first paragraph of the site.
- name: blocks
  tag: hr
- name: blocks
  tag: p
  text: This is another paragraph after the horizontal rule.
```

```toml
[[blocks]]
tag = "h2"
text = "Welcome to Our Site"
[[blocks]]
tag = "p"
text = "This is the first paragraph of the site."
[[blocks]]
tag = "hr"
[[blocks]]
tag = "p"
text = "This is another paragraph after the horizontal rule."
```

```json
{
  "blocks": [
    {
      "tag": "h2",
      "text": "Welcome to Our Site"
    },
    {
      "tag": "p",
      "text": "This is the first paragraph of the site."
    },
    {
      "tag": "hr"
    },
    {
      "tag": "p",
      "text": "This is another paragraph after the horizontal rule."
    }
  ]
}
```

--------------------------------

### Configure Collection Media Folders with Placeholders (JavaScript)

Source: https://sveltiacms.app/en/docs/media/internal

Use placeholder variables like `{{media_folder}}` and `{{public_folder}}` in JavaScript to dynamically set collection media paths.

```javascript
{
  collections: [
    {
      name: "products",
      label: "Products",
      folder: "content/products",
      media_folder: "{{media_folder}}/products",
      public_folder: "{{public_folder}}/products",
    },
  ],
}
```

--------------------------------

### Example Usage of Nested Object (JSON)

Source: https://sveltiacms.app/en/docs/fields/object

This JSON example illustrates how to represent nested data, with the 'book' object containing a nested 'publisher' object, each with their respective fields.

```json
{
  "book": {
    "title": "The Great Gatsby",
    "publisher": {
      "name": "Scribner",
      "address": "123 Publisher St, New York, NY"
    }
  }
}
```

--------------------------------

### Example Usage of Nested Object (TOML)

Source: https://sveltiacms.app/en/docs/fields/object

This TOML example demonstrates populating a nested structure, defining the 'book' table and its nested 'publisher' table with corresponding values.

```toml
[book]
title = "The Great Gatsby"
[book.publisher]
name = "Scribner"
address = "123 Publisher St, New York, NY"
```

--------------------------------

### Configure Media Storage Paths (TOML)

Source: https://sveltiacms.app/en/docs/media

Set default media storage paths using TOML format. This configuration is for basic setup and does not include external provider specifics.

```toml
# Default media storage paths
media_folder = "/public/media"
public_folder = "/media"

# Media provider features
[media_libraries.default]
[media_libraries.default.config]
max_file_size = 1024000 # default: Infinity
slugify_filename = true # default: false
```

--------------------------------

### Example Usage of Nested Object (YAML)

Source: https://sveltiacms.app/en/docs/fields/object

This YAML example shows how to populate the nested 'book' object with 'title' and 'publisher' details, including the nested 'name' and 'address'.

```yaml
book:
  title: The Great Gatsby
  publisher:
    name: Scribner
    address: '123 Publisher St, New York, NY'
```

--------------------------------

### Example Content for Sections in TOML

Source: https://sveltiacms.app/en/docs/fields/list

This TOML example shows the structure for content within the 'sections' list, differentiating between text sections and image galleries, with nested images for the latter.

```toml
[[sections]]
type = "text_section"
heading = "Welcome to Our Site"
body = "This is the first section of our site."
[[sections]]
type = "image_gallery"
title = "Our Gallery"
[[sections.images]]
src = "https://example.com/image1.jpg"
alt = "Image 1"
[[sections.images]]
src = "https://example.com/image2.jpg"
alt = "Image 2"
```

--------------------------------

### Configure Cloudinary with Top-Level media_libraries (YAML)

Source: https://sveltiacms.app/en/docs/media/cloudinary

Use this configuration in your Sveltia CMS config file to set up Cloudinary as the media library. Replace YOUR_CLOUD_NAME and YOUR_API_KEY with your actual Cloudinary credentials.

```yaml
media_libraries:
  cloudinary:
    config:
      cloud_name: YOUR_CLOUD_NAME
      api_key: YOUR_API_KEY
```

--------------------------------

### Configure File Collections with {{locale}} Placeholder (JSON)

Source: https://sveltiacms.app/en/docs/i18n

JSON configuration for file collections, illustrating how to use the {{locale}} placeholder for locale-specific file paths.

```json
{
  "collections": [
    {
      "name": "pages",
      "label": "Pages",
      "files": [
        {
          "name": "contact",
          "label": "Contact Page",
          "file": "content/contact.md"
        },
        {
          "name": "about",
          "label": "About Page",
          "file": "content/about.{{locale}}.md"
        },
        {
          "name": "products",
          "label": "Products Page",
          "file": "content/{{locale}}/products.md"
        },
        {
          "name": "settings",
          "label": "Site Settings",
          "file": "{{locale}}/settings.yaml"
        }
      ]
    }
  ]
}
```

--------------------------------

### Code Field Output Example

Source: https://sveltiacms.app/en/docs/fields/code

This example shows the output format for a Code field, including the code snippet and its language. The format varies slightly between YAML, TOML, and JSON.

```yaml
code_snippet:
  code: |
    function greet() {
      console.log("Hello, World!");
    }
  lang: js
```

```toml
[code_snippet]
code = """function greet() {
  console.log("Hello, World!");
}"""
lang = "js"
```

```json
{
  "code_snippet": {
    "code": "function greet() {\n  console.log(\"Hello, World!\");\n}",
    "lang": "js"
  }
}
```

--------------------------------

### Initialize CMS via CDN (ES Module)

Source: https://sveltiacms.app/en/docs/api

Import Sveltia CMS as an ES module when using the CDN. This is equivalent to the NPM package version. Ensure config, filePath, and definition are defined.

```html
<script type="module">
  import CMS from 'https://unpkg.com/@sveltia/cms/dist/sveltia-cms.mjs';

  CMS.init({ config });
  CMS.registerPreviewStyle(filePath);
  CMS.registerEditorComponent(definition);
</script>
```

--------------------------------

### Initialize CMS Normally (Load config.yml)

Source: https://sveltiacms.app/en/docs/api/initialization

This initializes the CMS by loading configuration from `config.yml`, similar to automatic initialization.

```javascript
CMS.init();
```

--------------------------------

### Simple Index File Configuration (YAML)

Source: https://sveltiacms.app/en/docs/collections/entries

Enable the `index_file` with default settings by setting `index_file: true` in YAML.

```yaml
index_file: true
```

--------------------------------

### Initialize CMS via CDN

Source: https://sveltiacms.app/en/docs/api

Use this script to initialize Sveltia CMS when including it via a CDN. Ensure the config and filePath variables are defined elsewhere.

```html
<script src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js"></script>
<script>
  CMS.init({ config });
  CMS.registerPreviewStyle(filePath);
  CMS.registerEditorComponent(definition);
</script>
```

--------------------------------

### JavaScript Chaining Transformations

Source: https://sveltiacms.app/en/docs/string-transformations

Example of chaining multiple transformations in JavaScript, such as converting a title to uppercase and then truncating it.

```javascript
{
  summary: "{{title | upper | truncate(10, '...')}}",
}
```

--------------------------------

### Simple Index File Configuration (JSON)

Source: https://sveltiacms.app/en/docs/collections/entries

Configure the `index_file` to use default settings by setting its value to `true` in JSON.

```json
{
  "index_file": true
}
```

--------------------------------

### Single Select Output Example

Source: https://sveltiacms.app/en/docs/fields/select

Shows the output format when a single option is selected from a select field.

```yaml
country: Canada
```

```toml
country = "Canada"
```

```json
{
  "country": "Canada"
}
```

--------------------------------

### Configure File Collections with {{locale}} Placeholder (TOML)

Source: https://sveltiacms.app/en/docs/i18n

TOML configuration for file collections, demonstrating the use of the {{locale}} placeholder for i18n file paths.

```toml
[[collections]]
name = "pages"
label = "Pages"

[[collections.files]]
name = "contact"
label = "Contact Page"
file = "content/contact.md"

[[collections.files]]
name = "about"
label = "About Page"
file = "content/about.{{locale}}.md"

[[collections.files]]
name = "products"
label = "Products Page"
file = "content/{{locale}}/products.md"

[[collections.files]]
name = "settings"
label = "Site Settings"
file = "{{locale}}/settings.yaml"
```

--------------------------------

### Boolean Field Output Example

Source: https://sveltiacms.app/en/docs/fields/boolean

Shows the expected output for a boolean field in YAML, TOML, and JSON.

```yaml
draft: true
```

```toml
draft = true
```

```json
{
  "draft": true
}
```

--------------------------------

### TypeScript: Initialize CMS with Typed Configuration

Source: https://sveltiacms.app/en/docs/api/initialization

Import `init` and `CmsConfig` from `@sveltia/cms` for type checking and autocompletion when constructing the configuration object in TypeScript.

```typescript
import { init, type CmsConfig } from '@sveltia/cms';

const config: CmsConfig = {
  // your config here
};

init({ config });
```

--------------------------------

### List with Single Subfield Output

Source: https://sveltiacms.app/en/docs/fields/list

Example output for a list widget with a single string subfield. Only the values are included.

```yaml
authors:
  - Alice
  - Bob
  - Charlie
```

```toml
authors = ["Alice", "Bob", "Charlie"]
```

```json
{
  "authors": ["Alice", "Bob", "Charlie"]
}
```