Portable Text Explained

What is portable Text

HTML is great, but not for storing rich text content

The text you read now is most probably rendered with HTML in a web browser. That's how we have dealt with text on the Web since it's conception. And it works great for what it's doing. There has been a lot of work put into both making the HTML specification better and more semantic in order to make the web a more accessable place for everyone. We feel we need to make this clear from the get-go when introducing an alternative way of handling rich text digitally.

Portable Text is not intended as a contender to HTML. But there are plenty of use cases where storing your content formatted as HTML introduce a lot of friction and headache. Take the many cases where you have to output rich text content from a CMS through React’s dangerouslySetInnerHTML, Vue’s v-html directive, or Svelte’s {@html content}. Where you also loose most of the nice features that comes with these frameworks. In addition to having to think about the XSS-vulnerabilities that all these frameworks warns against.

These are among the reasons we made the Portable Text specification. It will actually make it more convenient for you to output content as semantic HTML through of a broad range of frontend frameworks, as well as surfaces outside of the web browser, like native apps and voice assistants. We believe you will find it appealing once you learn how it works, and what it lets you do. For Sanity specifically having Portable Text as the way to deal with rich text content makes it less hard to build the real-time collaborative editing environment.

https://github.com/portabletext/portabletext

Why do we need it ?

https://www.sanity.io/guides/introduction-to-portable-text