Default Schema Showcase
This example showcases each block and inline content type in BlockNote's default schema.
Relevant Docs:
import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
import "@blocknote/react/style.css";
export default function App() {
// Creates a new editor instance.
const editor = useCreateBlockNote({
initialContent: [
{
type: "paragraph",
content: "Welcome to this demo!",
},
{
type: "paragraph",
},
{
type: "paragraph",
content: [
{
type: "text",
text: "Blocks:",
styles: { bold: true },
},
],
},
{
type: "paragraph",
content: "Paragraph",
},
{
type: "heading",
content: "Heading",
},
{
type: "bulletListItem",
content: "Bullet List Item",
},
{
type: "numberedListItem",
content: "Numbered List Item",
},
{
type: "image",
},
{
type: "table",
content: {
type: "tableContent",
rows: [
{
cells: ["Table Cell", "Table Cell", "Table Cell"],
},
{
cells: ["Table Cell", "Table Cell", "Table Cell"],
},
{
cells: ["Table Cell", "Table Cell", "Table Cell"],
},
],
},
},
{
type: "paragraph",
},
{
type: "paragraph",
content: [
{
type: "text",
text: "Inline Content:",
styles: { bold: true },
},
],
},
{
type: "paragraph",
content: [
{
type: "text",
text: "Styled Text",
styles: {
bold: true,
italic: true,
textColor: "red",
backgroundColor: "blue",
},
},
{
type: "text",
text: " ",
styles: {},
},
{
type: "link",
content: "Link",
href: "https://www.blocknotejs.org",
},
],
},
{
type: "paragraph",
},
],
});
// Renders the editor instance using a React component.
return <BlockNoteView editor={editor} />;
}