Structured Text fields

Rich text in DatoCMS is stored in Structured Text fields, which lets us use it in many different contexts, from HTML in the browser to speech fulfillments in voice interfaces, if that's what you want.

There's a lot to be said about Structured Text and the extensibility of it, but for now let's just say that it returns content in a particular JSON format called dast which will resemble this example:

1
{
2
  "schema": "dast",
3
  "document": {
4
    "type": "root",
5
    "children": [
6
      {
7
        "type": "heading",
8
        "level": 1,
9
        "children": [
10
          {
11
            "type": "span",
12
            "marks": [],
13
            "value": "Hello world!"
14
          }
15
        ]
16
      }
17
    ]
18
  }
19
}

To make it easy to convert this format in HTML inside your Svelte projects, we released a package called @datocms/svelte that exposes a <StructuredText /> component that does all the tedious work for you.

To take advantage of it, install the @datocms/svelte package if you haven't already:

yarn add @datocms/svelte

Now let's make a GraphQL query to fetch a Structured Text field:

1
const query = `
2
  query HomeQuery {
3
    blogPost {
4
      title
5
      content {
6
        value
7
      }
8
    }
9
  }
10
`;
11

12
export const load = () => {
13
  return executeQuery(query);