Portable Text

https://www.portabletext.org/docs
Admin
Portable Text is an open specification for structured block content that enables rich text, images,...
Tokens:1,277
Snippets:7
Trust Score:8
Update:2 months ago
Show doc for...
Tokens:
Raw
### Compare HTML and Portable Text representations

Source: https://www.portabletext.org

Examples showing how the same content is represented as an HTML string and as a corresponding Portable Text JSON object.

```html
<p>Read the <a href="/docs">documentation</a> for <strong>Portable Text</strong>.</p>
```

```json
[
  {
    "_type": "block",
    "style": "normal",
    "children": [
      { "_type": "span", "text": "Read the " },
      {
        "_type": "span",
        "text": "documentation",
        "marks": ["a1b2c3"]
      },
      { "_type": "span", "text": " for " },
      {
        "_type": "span",
        "text": "Portable Text",
        "marks": ["strong"]
      },
      { "_type": "span", "text": "." }
    ],
    "markDefs": [
      {
        "_key": "a1b2c3",
        "_type": "link",
        "href": "/docs"
      }
    ]
  }
]
```

--------------------------------

### Represent content as Portable Text JSON

Source: https://www.portabletext.org

A comprehensive example of a Portable Text document structure containing blocks, spans, marks, and custom types like images.

```json
[
  {
    "_type": "block",
    "_key": "cafa85dd5282",
    "style": "h1",
    "children": [
      {
        "_type": "span",
        "_key": "25bf55536437",
        "text": "Portable Text Editor"
      }
    ],
    "markDefs": []
  },
  {
    "_type": "block",
    "_key": "5cd230d4c3a3",
    "style": "normal",
    "children": [
      {
        "_type": "span",
        "_key": "0a3f7c1aa4c7",
        "text": "Build "
      },
      {
        "_type": "span",
        "_key": "d7b44738adc5",
        "text": "powerful",
        "marks": [
          "strong"
        ]
      },
      {
        "_type": "span",
        "_key": "598d5820bd15",
        "text": " content editing experiences for your applications. Portable Text Editor gives developers "
      },
      {
        "_type": "span",
        "_key": "e51b540ec153",
        "text": "complete control",
        "marks": [
          "em"
        ]
      },
      {
        "_type": "span",
        "_key": "e4b56b8eb26c",
        "text": " over styling, formatting, and content structure."
      }
    ],
    "markDefs": []
  },
  {
    "_type": "block",
    "_key": "b7934203d97c",
    "style": "normal",
    "children": [
      {
        "_type": "span",
        "_key": "797adac953f8",
        "text": "Get Started →",
        "marks": [
          "5afe6f34a384"
        ]
      }
    ],
    "markDefs": [
      {
        "_type": "link",
        "_key": "5afe6f34a384",
        "href": "/getting-started/"
      }
    ]
  },
  {
    "_type": "block",
    "_key": "294c8b9a1805",
    "style": "normal",
    "children": [
      {
        "_type": "span",
        "_key": "80e1f5ec5a59",
        "text": "Or visit the "
      },
      {
        "_type": "span",
        "_key": "ecb1b7335e18",
        "text": "playground",
        "marks": [
          "316349d37620"
        ]
      }
    ],
    "markDefs": [
      {
        "_type": "link",
        "_key": "316349d37620",
        "href": "https://playground.portabletext.org/"
      }
    ]
  },
  {
    "_type": "block",
    "_key": "9488a80505a4",
    "style": "blockquote",
    "children": [
      {
        "_type": "span",
        "_key": "61bdd069c81c",
        "text": "Created by the team at "
      },
      {
        "_type": "span",
        "_key": "2fb52cc68e5b",
        "text": "Sanity",
        "marks": [
          "9fd4d92b5bed"
        ]
      }
    ],
    "markDefs": [
      {
        "_type": "link",
        "_key": "9fd4d92b5bed",
        "href": "https://sanity.io"
      }
    ]
  },
  {
    "_type": "image",
    "_key": "c86f4a6468ee",
    "src": "/portable-text-logo.png",
    "alt": "Portable Text Editor logo"
  }
]
```
Tokens:
Raw