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.

AI Update

I understand you want to let users on your website enter rich text content with formatting (bold, code snippets, etc.) that gets saved to Sanity, rather than just using the editor inside Sanity Studio.

Unfortunately, there isn't an official standalone Portable Text Editor component from Sanity that you can easily drop into your front-end application for end users. The Portable Text Editor is tightly integrated with Sanity Studio and isn't designed to be used independently in external forms.

However, you have several approaches to solve this:

Option 1: Embed Sanity Studio in Your Application

You can embed Sanity Studio directly into your website. This gives you the full Studio experience, including the Portable Text Editor, within your own application. This works well if you want users to have a content editing interface.

Option 2: Use a Third-Party Editor + Convert to Portable Text

Since there's no standalone Portable Text Editor, many developers use popular rich text editors and convert their output to Portable Text format:

Popular options:

Tiptap: A headless editor framework that's highly customizable. You'd need to build or find a converter from Tiptap's JSON format to Portable Text
Slate.js: Another framework the Portable Text Editor itself is built on
ProseMirror: The underlying technology for many editors

The challenge is you'll need to write conversion logic between the editor's format and Portable Text's JSON structure. There isn't an official Sanity-maintained converter for these editors, though community members have built some solutions.

Option 3: Use a Simple Rich Text Editor + Store as Portable Text

You could use a simpler approach with libraries like:

React-Quill or Draft.js for the editor UI
Write custom logic to convert the output to Portable Text format

The Portable Text specification is well-documented, so you can construct the JSON structure programmatically.

Option 4: Build a Custom Form with Limited Rich Text

If you only need basic formatting (bold, italic, code), you could:

Use native HTML contenteditable or a minimal editor
Construct simple Portable Text blocks manually in your code
Submit to Sanity via the JavaScript client

The Reality Check

The lack of a standalone Portable Text Editor is a known limitation. The editor is deeply integrated with Studio's form system, real-time collaboration features, and validation. Extracting it for standalone use isn't straightforward.

Most production apps either:

Embed Studio where rich text editing is needed
Use a different editor and handle format conversion
Limit user input to simpler formats (markdown, basic HTML) and convert server-side

If you're building a commenting system, blog submission form, or similar feature, you might want to consider whether you truly need the full power of Portable Text, or if a simpler rich text solution (even just markdown) might be more practical for your use case.

There's a Standalone Portable Text Editor playground you can explore to see how the editor works, but this is more for demonstration purposes rather than a production-ready component you can install via npm.

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

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

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'}}
        ]
      }
    }
  ]
}

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

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

it's great, thank you for your help friend! :)

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 free Explore the demo