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

# Format to JSON

> Converts the context data into JSON.

export const FormField = ({property, label, required = false, diType, uiPatterns, children}) => {
  const patterns = Array.isArray(uiPatterns) ? uiPatterns : uiPatterns ? [uiPatterns] : [];
  return <div style={{
    margin: '1.5rem 0'
  }}>
      <div style={{
    display: 'flex',
    alignItems: 'baseline',
    flexWrap: 'wrap',
    gap: '0.5rem',
    marginBottom: '0.25rem'
  }}>
        <strong>{label}</strong>
        <span style={{
    fontSize: '0.7rem',
    fontWeight: 600,
    textTransform: 'uppercase',
    letterSpacing: '0.04em',
    color: required ? '#6241f5' : '#6b7280'
  }}>
          {required ? 'Required' : 'Optional'}
        </span>
      </div>

      <div>{children}</div>

      {diType || patterns.length > 0 ? <p style={{
    fontSize: '0.85rem',
    color: '#6b7280',
    marginBottom: 0
  }}>
          {diType ? <>
              See the <a href={`/references/${diType}`}>{diType}</a> reference.{' '}
            </> : null}
          {patterns.length > 0 ? <>
              Accepts a <a href={`/documentation/placeholders-and-patterns/patterns#${patterns[0]}`}>pattern</a>.
            </> : null}
        </p> : null}
    </div>;
};

Turns your data into a JSON string. JSON is the most common format for sending data to web APIs, so reach for this whenever a request body, file, or message needs to be JSON text. By default the output is compact, with everything on one line; the options below let you make it more readable or leave forward slashes untouched.

This documentation describes: [Schema](/schemas/serializer/json)

## Fields

<FormField property="flags" label="Options">
  One or more switches that change how the JSON is written. Leave it empty for compact output. The available options are:

  * **Pretty print** adds indentation and line breaks so the result is easy to read.
  * **Unescape slashes** leaves forward slashes (`/`) as they are instead of writing them as `\/`, which keeps things like URLs readable.
</FormField>

## Sample data

| Field   | Value                          |
| ------- | ------------------------------ |
| Options | Pretty print, Unescape slashes |

Input:

```json theme={null}
{ "sku": "A1", "name": "Wool scarf", "url": "https://shop.test/p/a1" }
```

Output (a single text value; the line breaks and indentation are part of the text):

```json theme={null}
"{\n    \"sku\": \"A1\",\n    \"name\": \"Wool scarf\",\n    \"url\": \"https://shop.test/p/a1\"\n}"
```

Written out, the JSON inside that text reads:

```json theme={null}
{
    "sku": "A1",
    "name": "Wool scarf",
    "url": "https://shop.test/p/a1"
}
```

```json Configuration theme={null}
{
  "prototype": "json",
  "parameters": {
    "flags": [128, 64]
  }
}
```