Use Portable Text Editor outside Sanity Studio?

Great question! Yes, you can absolutely use the Portable Text editor outside of Sanity Studio. The Sanity team recently extracted the editor from Studio and released it as a standalone package that you can integrate into any React application.

The Standalone Portable Text Editor

The Portable Text Editor is now available as a reusable React component that you can embed in your own applications. This was a major undertaking by the Sanity team—as discussed in this blog post, they took the editor that was previously hard-coded into Sanity Studio and made it framework-agnostic and customizable.

Key Features

The standalone editor gives you:

• Full control over styling: You can use any UI library (Tailwind CSS, shadcn/ui, etc.) to style the editor however you want
• Declarative API: React-friendly approach to rendering text and components
• Custom behaviors: Set up event handlers for everything from simple text insertion to complex features like slash commands
• Schema flexibility: Define your own content structure and block types
• Portable Text format: Content is stored as JSON following the Portable Text specification, which is queryable and serializable

How It Works

The editor handles all the complex behaviors you'd expect from a modern block editor—things like how bold text should extend when you keep typing, proper caret positioning, and keyboard shortcuts. These are all built-in and tested, so you don't have to reinvent the wheel.

The Behavior API is particularly powerful—it's not just for users to customize the editor, but it's actually the foundation for all the core behaviors that ship with the package. This means you can extend or override nearly any aspect of how the editor works.

Rendering Content

Once you have content in Portable Text format, you'll want to render it on your frontend. That's where @portabletext/react comes in. This is a separate package that transforms your Portable Text JSON into React components with custom serializers for styling and behavior.

So to summarize: the Portable Text Editor package lets you create and edit rich content outside of Studio in any React app, while @portabletext/react lets you display that content in your application. Both work independently of Sanity Studio and give you complete control over the editing and rendering experience!