All Block Types
In this example, the editor contains each of BlockNote's built-in block types.
Relevant Docs:
- TODO
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",
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"],
},
],
},
},
],
});
// Renders the editor instance using a React component.
return <BlockNoteView editor={editor} />;
}