Embed Blocks

Embeds are a way to display content from external sources in your documents. BlockNote supports various embeds to help you structure and format your content effectively.

File

Type & Props

type FileBlock = {
  id: string;
  type: "file";
  props: {
    backgroundColor: string;
    name: string;
    url: string;
    caption: string;
  };
  content: undefined;
  children: Block[];
};

backgroundColor: The background color of the block. Defaults to "default".

name: The file name. Defaults to "".

url: The file URL. Defaults to "".

caption: The file caption. Defaults to "".

Image

Configuration Options

type ImageBlockOptions = {
  icon?: string;
};

icon: The HTML string for an icon SVG. If no URL is given, the image block displays a button to add one using a link or file, and the provided SVG replaces the generic file icon in that button.

Type & Props

type ImageBlock = {
  id: string;
  type: "image";
  props: {
    backgroundColor: string;
    textAlignment: "left" | "center" | "right" | "justify";
    name: string;
    url: string;
    caption: string;
    showPreview: boolean;
    previewWidth: number | undefined;
  };
  content: undefined;
  children: Block[];
};

backgroundColor: The background color of the block. Defaults to "default".

textAlignment: The alignment of the image. Defaults to "left".

name: The image file name. Defaults to "".

url: The image URL. Defaults to "".

caption: The image caption. Defaults to "".

showPreview: Whether to show the image preview or a link. Defaults to true.

previewWidth: The image preview width in pixels. Defaults to undefined (no fixed width).

Video

Configuration Options

type VideoBlockOptions = {
  icon?: string;
};

icon: The HTML string for an icon SVG. If no URL is given, the video block displays a button to add one using a link or file, and the provided SVG replaces the generic file icon in that button.

Type & Props

type VideoBlock = {
  id: string;
  type: "video";
  props: {
    backgroundColor: string;
    textAlignment: "left" | "center" | "right" | "justify";
    name: string;
    url: string;
    caption: string;
    showPreview: boolean;
    previewWidth: number | undefined;
  };
  content: undefined;
  children: Block[];
};

backgroundColor: The background color of the block. Defaults to "default".

textAlignment: The alignment of the video. Defaults to "left".

name: The video file name. Defaults to "".

url: The video URL. Defaults to "".

caption: The video caption. Defaults to "".

showPreview: Whether to show the video player or a link. Defaults to true.

previewWidth: The video preview width in pixels. Defaults to undefined (no fixed width).

Audio

Configuration Options

type AudioBlockOptions = {
  icon?: string;
};

icon: The HTML string for an icon SVG. If no URL is given, the audio block displays a button to add one using a link or file, and the provided SVG replaces the generic file icon in that button.

Type & Props

type AudioBlock = {
  id: string;
  type: "audio";
  props: {
    backgroundColor: string;
    name: string;
    url: string;
    caption: string;
    showPreview: boolean;
  };
  content: undefined;
  children: Block[];
};

backgroundColor: The background color of the block. Defaults to "default".

name: The audio file name. Defaults to "".

url: The audio URL. Defaults to "".

caption: The audio caption. Defaults to "".

showPreview: Whether to show the audio player or a link. Defaults to true.