How to add rich text editor for block content on frontend website?

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:

1. Embed Studio where rich text editing is needed
2. Use a different editor and handle format conversion
3. 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.