šŸ‘‹ Next.js Conf 2024: Come build, party, run, and connect with us! See all events

How to add and present block content in a Sanity schema for a website input field

6 replies
Last updated: Apr 28, 2023
Hey šŸ™‚ i want to have a field in my schema which is a block content so i can add text with decorations like bold text or even a code snippet. i understand how to add it to my schema but how do i present a rich text input like in the sanity studio to my user in the website so he can enter the input so i can store it in sanity.Thank you in advance.
Apr 28, 2023, 10:02 AM
You need to use a serializer to tell the front end what to do with the content
https://www.sanity.io/docs/presenting-block-text
Apr 28, 2023, 11:30 AM
okay thank you but that's only one direction. how do i allow the user to insert block text so i can store it in sanity? and present it to him later when he views the data
Apr 28, 2023, 1:03 PM
My apologies, you stated:
i understand how to add it to my schema
You'll need to add custom block to the schema like this example
{
  name: 'customized',
  title: 'Customized block type',
  type: 'array',
  of: [
    {
      type: 'block',
      // Only allow these block styles
      styles: [
        {title: 'Normal', value: 'normal'},
        {title: 'H1', value: 'h1'},
        {title: 'H2', value: 'h2'}
      ],
      // Only allow numbered lists
      lists: [
        {title: 'Numbered', value: 'number'}
      ],
      marks: {
        // Only allow these decorators
        decorators: [
          {title: 'Strong', value: 'strong'},
          {title: 'Emphasis', value: 'em'}
        ],
        // Support annotating text with a reference to an author
        annotations: [
          {name: 'author', title: 'Author', type: 'reference', to: {type: 'author'}}
        ]
      }
    }
  ]
}
Apr 28, 2023, 1:07 PM
okay great, thank you šŸ™‚ and then in my own website, not sanity, how can i display to the user an input field with the options to bold text, code snippet, etc - similar to the message input we are typing in now
Apr 28, 2023, 1:09 PM
That gets into data mutations, which, if I remember correctly, is not recommended on the front end as you may end up exposing your key. There was one user on here a while back that was able to do it and was helping me with it but it's been > 90 days so I'm unable to send your their project link
https://www.sanity.io/docs/http-mutations
Apr 28, 2023, 1:18 PM
it's great, thank you for your help friend! :)
Apr 28, 2023, 1:46 PM

Sanityā€“ build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?