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: {
    name: string = "";
    url: string = "";
    caption: string = "";
  } & DefaultProps;
  content: undefined;
  children: Block[];
};

name: The file name.

url: The file URL.

caption: The file caption.

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: {
    url: string = "";
    caption: string = "";
    previewWidth: number = 512;
  } & DefaultProps;
  content: undefined;
  children: Block[];
};

name: The image name.

url: The image URL.

caption: The image caption.

previewWidth: The image previewWidth in pixels.

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: {
    name: string = "";
    url: string = "";
    caption: string = "";
    showPreview: boolean = true;
    previewWidth: number | undefined;
  } & DefaultProps;
  content: undefined;
  children: Block[];
};

name: The video name.

url: The video URL.

caption: The video caption.

showPreview: Whether to show the video preview.

previewWidth: The video preview width in pixels.

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: {
    name: string = "";
    url: string = "";
    caption: string = "";
    showPreview: boolean = true;
  } & DefaultProps;
  content: undefined;
  children: Block[];
};

name: The audio name.

url: The audio URL.

caption: The audio caption.

showPreview: Whether to show the audio preview.