How to add line breaks to CMS field descriptions in Sanity?

2 replies
Last updated: Nov 30, 2021
hi, is there a way to add line breaks to a CMS field's
description
? I tried using
<br />
, but it gets HTML escaped.
AI Update

Based on the documentation I found, yes, there is a way to add line breaks to field descriptions in Sanity Studio! The description property in defineField supports JSX formatting when you're using .jsx or .tsx file extensions.

Instead of trying to use HTML strings with <br /> (which gets escaped as you discovered), you can write the description as JSX elements. Here's how:

defineField({
  name: 'myField',
  type: 'string',
  title: 'My Field',
  description: (
    <>
      This is the first line of the description.
      <br />
      This is the second line after a line break.
      <br />
      And here's a third line!
    </>
  )
})

You can also use more complex JSX structures. The Sanity documentation on schema definitions shows an example using collapsible details:

description: (
  <details>
    <summary>Why is this important?</summary>
    The Googlebot is an indexer of...
  </details>
)

Important: This JSX approach only works when your schema file has a .jsx or .tsx extension. If you're using plain .js files, you'll need to rename them to .jsx or .tsx to enable JSX syntax.

If for some reason you can't use JSX, you could also use the newline character \n in a plain string, though the rendering might not be as clean:

description: 'This is the first line.\nThis is the second line.'

The JSX approach is definitely the recommended way to format descriptions with line breaks and other formatting in Sanity Studio!

Show original thread
2 replies
You can do something like:

import React from 'react'

export default {
  name: 'multilineDescription',
  title: 'Multiline Description',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
      description: <>First line<br />Second line</>,
    },
  ]
}
thanks
user A
! Worked like a charm!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?