Get help on Discord

Add clickable link in field description property?

6 replies
Last updated: Mar 12, 2024
Small question: is it possible to add a clickable link in the 
description
property for a field?
AI Update

Based on the documentation, yes, you can add clickable links in field descriptions! When using .jsx or .tsx file extensions for your schema files, the description property supports basic JSX formatting.

Here's an example from the defineField documentation:

defineField({
  name: 'myField',
  type: 'string',
  description: (
    <details>
      <summary>Why is this important?</summary>
      The Googlebot is an indexer of...
    </details>
  )
})

So for a clickable link, you can do something like:

defineField({
  name: 'myField',
  type: 'string',
  description: (
    <>
      This field is used for X. See <a href="https://example.com" target="_blank" rel="noopener noreferrer">our documentation</a> for more details.
    </>
  )
})

Important note: This JSX support only works when your schema file has a .jsx or .tsx extension. If you're using plain .js or .ts files, you'll need to rename them to use this feature.

The JSX support is described as "basic," so you can use standard HTML elements like <a>, <details>, <summary>, and other common formatting tags to make your descriptions more helpful for content editors.

Show original thread
6 replies
In my experience descriptions remain plain text but if I want a dynamic or not just pure text description I'll leave it empty in the schema and make a "custom input component" that doesn't change the input at all but simply wraps it so I can inject my own React markup styled similarly to look the same way.
It seems like the request is becoming slightly more common so maybe suggest it in
ideas-and-feedback
You used to be able to pass a function that returned JSX to the description field, but I don’t think it works anymore 😞
NVM, still possible. You just have to invoke the function that you pass:
      description: (() => (
        <button onClick={() => window.alert('HI')}>Click here for a surprise!</button>
      ))(),

Thank you both!
user M
’s example did the trick. We spun up a reusable 
HtmlDescription
component:
export const HtmlDescription = ({ children }: { children: React.ReactNode }) => {
  return children || ''
}
and using it on the 
description
properties when needed (schema file needed to be 
.jsx
or 
.tsx

description:
  <HtmlDescription>
    This is a description with a <a href="/">link</a>.
  </HtmlDescription>
Nice! Thanks for the tip
user M
Super nice.

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.

Get started for freeExplore the demo

Was this answer helpful?