-
**Type & Props**
```typescript
@@ -40,10 +36,6 @@ type ParagraphBlock = {
#### Heading
-**Appearance**
-
-
-
**Type & Props**
```typescript
@@ -62,10 +54,6 @@ type HeadingBlock = {
#### Bullet List Item
-**Appearance**
-
-
-
**Type & Props**
```typescript
@@ -80,10 +68,6 @@ type BulletListItemBlock = {
#### Numbered List Item
-**Appearance**
-
-
-
**Type & Props**
```typescript
@@ -98,10 +82,6 @@ type NumberedListItemBlock = {
#### Image
-**Appearance**
-
-
-
**Type & Props**
```typescript
@@ -126,10 +106,6 @@ type ImageBlock = {
#### Table
-**Appearance**
-
-
-
**Type & Props**
```typescript
@@ -144,7 +120,7 @@ type TableBlock = {
### Default Block Properties
-There are some default block props that BlockNote uses for its default block types, and also exports for use in your own [custom blocks](/docs/custom-schemas/custom-blocks):
+There are some default block props that BlockNote uses for the built-in blocks:
```typescript
type DefaultProps = {
@@ -160,13 +136,9 @@ type DefaultProps = {
`textAlignment:` The text alignment of the block.
-### Creating New Block Types
-
-Skip to [Custom Blocks](/docs/custom-schemas/custom-blocks) to learn how to do this.
-
## Default Inline Content
-BlockNote includes a number of built-in inline content types. The demo editor below displays all of them:
+By default, `InlineContent` (the content of text blocks like paragraphs) in BlockNote can either be a `StyledText` or a `Link` object. Inspect them in the editor below:
+
+### Block Objects
+
+The `Block` type is used to describe any given block in the editor:
+
+```typescript
+type Block = {
+ id: string;
+ type: string;
+ props: Record`, `
`, etc. elements that are used in BlockNote. Defaults to true if undefined.
-
-`uploadFile`: A function which handles file uploads and eventually returns the URL to the uploaded file. Used by the [Image Toolbar](/docs/image-toolbar).
-
-`collaboration`: Options for enabling real-time collaboration. See [Collaboration](/docs/collaboration) for more info.
-
-`blockSpecs` (_advanced_): _advanced_ Specifications for Custom Blocks. See [Block Specs](/docs/block-specs) more info.
-
-`inlineContentSpecs` (_advanced_): Specifications for Custom Inline Content. See [Inline Content Specs](/docs/inline-content-specs) for more info.
-
-`styleSpecs` (_advanced_): Specifications for Custom Styles. See [Style Specs](/docs/style-specs) for more info.
-
-## Rendering the Editor
-
-### Using a React Component
-
-To, render the editor, you should use the `BlockNoteView` component, and pass in the editor created using `useCreateBlockNote` or `BlockNoteEditor.create`:
-
-```tsx
-const editor = useCreateBlockNote();
-
-return ;
+ defaultStyles?: boolean;
+ uploadFile?: (file: File) => Promise;
+ collaboration?: CollaborationOptions;
+ schema?: BlockNoteSchema;
+};
+```
+
+The hook takes two optional parameters:
+
+**options:** An object containing options for the editor:
+
+`initialContent:` The content that should be in the editor when it's created, represented as an array of [partial block objects](/docs/manipulating-blocks#partial-blocks).
+
+`domAttributes:` An object containing HTML attributes that should be added to various DOM elements in the editor. See [Adding DOM Attributes](/docs/theming#adding-dom-attributes) for more.
+
+`defaultStyles`: Whether to use the default font and reset the styles of ``, `
`, ``, etc. elements that are used in BlockNote. Defaults to true if undefined.
+
+`uploadFile`: A function which handles file uploads and eventually returns the URL to the uploaded file. Used by the [Image Toolbar](/docs/image-toolbar). TODO
+
+`collaboration`: Options for enabling real-time collaboration. See [Collaboration](/docs/collaboration) for more info.
+
+`schema` (_advanced_): The editor schema if you want to extend your editor with custom blocks, styles, or inline content [Custom Schemas](/docs/custom-schemas).
+
+**deps:** Dependency array that's internally passed to `useMemo`. A new editor will only be created when this array changes.
+
+
+ Manually creating the editor (`BlockNoteEditor.create`)
+
+ The `useCreateBlockNote` hook is actually a simple `useMemo` wrapper around
+ the `BlockNoteEditor.create` method. You can use this method directly if you
+ want to control the editor lifecycle manually. For example, we do this in
+ the [Saving & Loading example](/examples/basic/saving-loading) to delay the
+ editor creation until some content has been fetched from an external data
+ source.
+
+
+
+## Rendering the Editor with ``
+
+Use the `` component to render the `BlockNoteEditor` instance you just created:
+
+```tsx
+const editor = useCreateBlockNote();
+
+return ;
+```
+
+`editor`: The `BlockNoteEditor` instance to render.
+
+`editable`: Whether the editor should be editable.
+
+`onSelectionChange`: Callback for when the editor selection changes.
+
+`onChange`: Callback for when the editor selection or content changes.
+
+`theme`: The editor's theme, see [Themes](/docs/styling-theming/themes) for more about this.
+
+`formattingToolbar`: Whether the [Formatting Toolbar](/docs/ui-components/formatting-toolbar) should be enabled.
+
+`hyperlinkToolbar`: Whether the Hyperlink Toolbar should be enabled.
+
+`sideMenu`: Whether the [Block Side Menu](/docs/ui-components/side-menu) should be enabled.
+
+`slashMenu`: Whether the [Slash Menu](/docs/ui-components/suggestion-menus#slash-menu) should be enabled.
+
+`imageToolbar`: Whether the Image Toolbar should be enabled.
+
+`tableHandles`: Whether the Table Handles should be enabled.
+
+`children`: Pass child elements to the `BlockNoteView` to create or customize toolbars, menus, or other UI components. See [UI Components](/docs/ui-components) for more.
+
+Additional props passed are forwarded to the HTML `div` element BlockNote renders internally.
+
+
+ Uncontrolled component
+
+ Note that the `BlockNoteView` component is an [uncontrolled component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+ This means you don't pass in the editor content directly as a prop. You can use the `initialContent` option in the `useCreateBlockNote` hook to set the initial content of the editor (similar to the `defaultValue` prop in a regular React `
`, `
`, etc. elements that are used in BlockNote. Defaults to true if undefined.
+
+`uploadFile`: A function which handles file uploads and eventually returns the URL to the uploaded file. Used by the [Image Toolbar](/docs/image-toolbar). TODO
+
+`collaboration`: Options for enabling real-time collaboration. See [Collaboration](/docs/collaboration) for more info.
+
+`schema` (_advanced_): The editor schema if you want to extend your editor with custom blocks, styles, or inline content [Custom Schemas](/docs/custom-schemas).
+
+**deps:** Dependency array that's internally passed to `useMemo`. A new editor will only be created when this array changes.
+
+
+ Manually creating the editor (`BlockNoteEditor.create`)
+
+ The `useCreateBlockNote` hook is actually a simple `useMemo` wrapper around
+ the `BlockNoteEditor.create` method. You can use this method directly if you
+ want to control the editor lifecycle manually. For example, we do this in
+ the [Saving & Loading example](/examples/basic/saving-loading) to delay the
+ editor creation until some content has been fetched from an external data
+ source.
+
+
+
+## Rendering the Editor with ``
+
+Use the `` component to render the `BlockNoteEditor` instance you just created:
+
+```tsx
+const editor = useCreateBlockNote();
+
+return ;
+```
+
+`editor`: The `BlockNoteEditor` instance to render.
+
+`editable`: Whether the editor should be editable.
+
+`onSelectionChange`: Callback for when the editor selection changes.
+
+`onChange`: Callback for when the editor selection or content changes.
+
+`theme`: The editor's theme, see [Themes](/docs/styling-theming/themes) for more about this.
+
+`formattingToolbar`: Whether the [Formatting Toolbar](/docs/ui-components/formatting-toolbar) should be enabled.
+
+`hyperlinkToolbar`: Whether the Hyperlink Toolbar should be enabled.
+
+`sideMenu`: Whether the [Block Side Menu](/docs/ui-components/side-menu) should be enabled.
+
+`slashMenu`: Whether the [Slash Menu](/docs/ui-components/suggestion-menus#slash-menu) should be enabled.
+
+`imageToolbar`: Whether the Image Toolbar should be enabled.
+
+`tableHandles`: Whether the Table Handles should be enabled.
+
+`children`: Pass child elements to the `BlockNoteView` to create or customize toolbars, menus, or other UI components. See [UI Components](/docs/ui-components) for more.
+
+Additional props passed are forwarded to the HTML `div` element BlockNote renders internally.
+
+
+ Uncontrolled component
+
+ Note that the `BlockNoteView` component is an [uncontrolled component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+ This means you don't pass in the editor content directly as a prop. You can use the `initialContent` option in the `useCreateBlockNote` hook to set the initial content of the editor (similar to the `defaultValue` prop in a regular React `
+ The `useCreateBlockNote` hook is actually a simple `useMemo` wrapper around + the `BlockNoteEditor.create` method. You can use this method directly if you + want to control the editor lifecycle manually. For example, we do this in + the [Saving & Loading example](/examples/basic/saving-loading) to delay the + editor creation until some content has been fetched from an external data + source. +
++ Note that the `BlockNoteView` component is an [uncontrolled component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). + This means you don't pass in the editor content directly as a prop. You can use the `initialContent` option in the `useCreateBlockNote` hook to set the initial content of the editor (similar to the `defaultValue` prop in a regular React `