Source:
{
"type": "doc",
"content": [
{
"type": "heading",
"attrs": {
"level": 2
},
"content": [
{
"type": "text",
"text": "Hi there,"
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "this is a "
},
{
"type": "text",
"marks": [
{
"type": "italic",
"attrs": {
"data-testid": "italic"
}
}
],
"text": "basic"
},
{
"type": "text",
"text": " example of "
},
{
"type": "text",
"marks": [
{
"type": "bold",
"attrs": {
"data-testid": "bold"
}
}
],
"text": "tiptap"
},
{
"type": "text",
"text": ". Sure, there are all "
},
{
"type": "text",
"marks": [
{
"type": "code"
}
],
"text": "kind"
},
{
"type": "text",
"text": " of basic text styles you’d probably expect from a text editor. But "
},
{
"type": "text",
"marks": [
{
"type": "bold"
},
{
"type": "italic"
}
],
"text": "wait"
},
{
"type": "text",
"text": " until you see the lists:"
}
]
},
{
"type": "bulletList",
"content": [
{
"type": "listItem",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "That’s a bullet list with one …"
}
]
}
]
},
{
"type": "listItem",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "… or two list items."
}
]
}
]
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Isn’t that great? But wait, there’s more. Let’s try a code block:"
}
]
},
{
"type": "codeBlock",
"attrs": {
"language": "css"
},
"content": [
{
"type": "text",
"text": "body {\n display: none;\n}"
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too."
}
]
},
{
"type": "blockquote",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Wow, that’s amazing. Good work, boy! 👏 "
},
{
"type": "hardBreak"
},
{
"type": "text",
"text": "— Mom"
}
]
}
]
}
]
}
Hi there,
this is a basic example of tiptap. Sure, there are all kind
of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
That’s a bullet list with one …
… or two list items.
Isn’t that great? But wait, there’s more. Let’s try a code block:
body {
display: none;
}
I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
Wow, that’s amazing. Good work, boy! 👏
— Mom