diff --git a/examples/05-interoperability/01-converting-blocks-to-html/src/App.tsx b/examples/05-interoperability/01-converting-blocks-to-html/src/App.tsx
index 70e8f24ca9..f05df619d6 100644
--- a/examples/05-interoperability/01-converting-blocks-to-html/src/App.tsx
+++ b/examples/05-interoperability/01-converting-blocks-to-html/src/App.tsx
@@ -41,18 +41,22 @@ export default function App() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // Renders the editor instance, and its contents as HTML below.
+  // Renders the editor instance and HTML output.
   return (
-    <div className="wrapper">
-      <div>Input (BlockNote Editor):</div>
-      <div className="item">
-        <BlockNoteView editor={editor} onChange={onChange} />
+    <div className="views">
+      <div className="view-wrapper">
+        <div className="view-label">Editor Input</div>
+        <div className="view">
+          <BlockNoteView editor={editor} onChange={onChange} />
+        </div>
       </div>
-      <div>Output (HTML):</div>
-      <div className="item bordered">
-        <pre>
-          <code>{html}</code>
-        </pre>
+      <div className="view-wrapper">
+        <div className="view-label">HTML Output</div>
+        <div className="view">
+          <pre>
+            <code>{html}</code>
+          </pre>
+        </div>
       </div>
     </div>
   );
diff --git a/examples/05-interoperability/01-converting-blocks-to-html/src/styles.css b/examples/05-interoperability/01-converting-blocks-to-html/src/styles.css
index 6d5eeba7fe..4e38a82106 100644
--- a/examples/05-interoperability/01-converting-blocks-to-html/src/styles.css
+++ b/examples/05-interoperability/01-converting-blocks-to-html/src/styles.css
@@ -1,25 +1,64 @@
-.wrapper {
+.views {
+  container-name: views;
+  container-type: inline-size;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
   height: 100%;
+  padding: 8px;
+}
+
+.view-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: calc(50% - 4px);
+  width: 100%;
+}
+
+@container views (width > 1024px) {
+  .view-wrapper {
+    height: 100%;
+    width: calc(50% - 4px);
+  }
+}
+
+.view-label {
+  color: #0090ff;
+  display: flex;
+  font-size: 12px;
+  font-weight: bold;
+  justify-content: space-between;
+  margin-inline: 16px;
 }
 
-.item {
-  border-radius: 0.5rem;
+.view {
+  border: solid #0090ff 1px;
+  border-radius: 16px;
   flex: 1;
-  overflow: hidden;
+  height: 0;
+  padding: 8px;
 }
 
-.item.bordered {
-  border: 1px solid gray;
+.view .bn-container {
+  height: 100%;
+  margin: 0;
+  max-width: none;
+  padding: 0;
 }
 
-.item pre {
-  border-radius: 0.5rem;
+.view .bn-editor {
   height: 100%;
   overflow: auto;
-  padding-block: 1rem;
-  padding-inline: 54px;
-  width: 100%;
+}
+
+.view pre {
+  background-color: #0090ff20;
+  border-radius: 8px;
+  flex: 1;
+  height: 100%;
+  margin: 0;
+  overflow: auto;
+  padding: 8px;
   white-space: pre-wrap;
 }
diff --git a/examples/05-interoperability/02-converting-blocks-from-html/src/App.tsx b/examples/05-interoperability/02-converting-blocks-from-html/src/App.tsx
index f4533ee19c..8eea7c7ac1 100644
--- a/examples/05-interoperability/02-converting-blocks-from-html/src/App.tsx
+++ b/examples/05-interoperability/02-converting-blocks-from-html/src/App.tsx
@@ -31,19 +31,22 @@ export default function App() {
     loadInitialHTML();
   }, [editor]);
 
-  // Renders a text area for you to write/paste HTML in, and the editor instance
-  // below, which displays the current HTML as blocks.
+  // Renders the HTML input and editor instance.
   return (
-    <div className={"wrapper"}>
-      <div>Input (HTML):</div>
-      <div className={"item bordered"}>
-        <code>
-          <textarea defaultValue={initialHTML} onChange={htmlInputChanged} />
-        </code>
+    <div className="views">
+      <div className="view-wrapper">
+        <div className="view-label">HTML Input</div>
+        <div className="view">
+          <code>
+            <textarea defaultValue={initialHTML} onChange={htmlInputChanged} />
+          </code>
+        </div>
       </div>
-      <div>Output (BlockNote Editor):</div>
-      <div className={"item"}>
-        <BlockNoteView editor={editor} editable={false} />
+      <div className="view-wrapper">
+        <div className="view-label">Editor Output</div>
+        <div className="view">
+          <BlockNoteView editor={editor} editable={false} />
+        </div>
       </div>
     </div>
   );
diff --git a/examples/05-interoperability/02-converting-blocks-from-html/src/styles.css b/examples/05-interoperability/02-converting-blocks-from-html/src/styles.css
index 08c2677e83..bcd576e759 100644
--- a/examples/05-interoperability/02-converting-blocks-from-html/src/styles.css
+++ b/examples/05-interoperability/02-converting-blocks-from-html/src/styles.css
@@ -1,26 +1,67 @@
-.wrapper {
+.views {
+  container-name: views;
+  container-type: inline-size;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
   height: 100%;
+  padding: 8px;
 }
 
-.item {
-  border-radius: 0.5rem;
+.view-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: calc(50% - 4px);
+  width: 100%;
+}
+
+@container views (width > 1024px) {
+  .view-wrapper {
+    height: 100%;
+    width: calc(50% - 4px);
+  }
+}
+
+.view-label {
+  color: #0090ff;
+  display: flex;
+  font-size: 12px;
+  font-weight: bold;
+  justify-content: space-between;
+  margin-inline: 16px;
+}
+
+.view {
+  border: solid #0090ff 1px;
+  border-radius: 16px;
   flex: 1;
-  overflow: hidden;
+  height: 0;
+  padding: 8px;
+}
+
+.view .bn-container {
+  height: 100%;
+  margin: 0;
+  max-width: none;
+  padding: 0;
 }
 
-.item.bordered {
-  border: 1px solid gray;
+.view .bn-editor {
+  height: 100%;
+  overflow: auto;
 }
 
-.item textarea {
-  background-color: transparent;
-  border-radius: 0.5rem;
+.view textarea {
+  background-color: #0090ff20;
+  border: none;
+  border-radius: 8px;
+  flex: 1;
   height: 100%;
+  margin: 0;
   overflow: auto;
-  padding-block: 1rem;
-  padding-inline: 54px;
+  padding: 8px;
   resize: none;
+  white-space: pre-wrap;
   width: 100%;
 }
diff --git a/examples/05-interoperability/03-converting-blocks-to-md/src/App.tsx b/examples/05-interoperability/03-converting-blocks-to-md/src/App.tsx
index d7c8ce9607..0caa93816c 100644
--- a/examples/05-interoperability/03-converting-blocks-to-md/src/App.tsx
+++ b/examples/05-interoperability/03-converting-blocks-to-md/src/App.tsx
@@ -41,18 +41,22 @@ export default function App() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // Renders the editor instance, and its contents as Markdown below.
+  // Renders the editor instance and Markdown output.
   return (
-    <div className={"wrapper"}>
-      <div>Input (BlockNote Editor):</div>
-      <div className={"item"}>
-        <BlockNoteView editor={editor} onChange={onChange} />
+    <div className="views">
+      <div className="view-wrapper">
+        <div className="view-label">Editor Input</div>
+        <div className="view">
+          <BlockNoteView editor={editor} onChange={onChange} />
+        </div>
       </div>
-      <div>Output (Markdown):</div>
-      <div className={"item bordered"}>
-        <pre>
-          <code>{markdown}</code>
-        </pre>
+      <div className="view-wrapper">
+        <div className="view-label">Markdown Output</div>
+        <div className="view">
+          <pre>
+            <code>{markdown}</code>
+          </pre>
+        </div>
       </div>
     </div>
   );
diff --git a/examples/05-interoperability/03-converting-blocks-to-md/src/styles.css b/examples/05-interoperability/03-converting-blocks-to-md/src/styles.css
index 6d5eeba7fe..4e38a82106 100644
--- a/examples/05-interoperability/03-converting-blocks-to-md/src/styles.css
+++ b/examples/05-interoperability/03-converting-blocks-to-md/src/styles.css
@@ -1,25 +1,64 @@
-.wrapper {
+.views {
+  container-name: views;
+  container-type: inline-size;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
   height: 100%;
+  padding: 8px;
+}
+
+.view-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: calc(50% - 4px);
+  width: 100%;
+}
+
+@container views (width > 1024px) {
+  .view-wrapper {
+    height: 100%;
+    width: calc(50% - 4px);
+  }
+}
+
+.view-label {
+  color: #0090ff;
+  display: flex;
+  font-size: 12px;
+  font-weight: bold;
+  justify-content: space-between;
+  margin-inline: 16px;
 }
 
-.item {
-  border-radius: 0.5rem;
+.view {
+  border: solid #0090ff 1px;
+  border-radius: 16px;
   flex: 1;
-  overflow: hidden;
+  height: 0;
+  padding: 8px;
 }
 
-.item.bordered {
-  border: 1px solid gray;
+.view .bn-container {
+  height: 100%;
+  margin: 0;
+  max-width: none;
+  padding: 0;
 }
 
-.item pre {
-  border-radius: 0.5rem;
+.view .bn-editor {
   height: 100%;
   overflow: auto;
-  padding-block: 1rem;
-  padding-inline: 54px;
-  width: 100%;
+}
+
+.view pre {
+  background-color: #0090ff20;
+  border-radius: 8px;
+  flex: 1;
+  height: 100%;
+  margin: 0;
+  overflow: auto;
+  padding: 8px;
   white-space: pre-wrap;
 }
diff --git a/examples/05-interoperability/04-converting-blocks-from-md/src/App.tsx b/examples/05-interoperability/04-converting-blocks-from-md/src/App.tsx
index 3faaffcf8e..49f50e3965 100644
--- a/examples/05-interoperability/04-converting-blocks-from-md/src/App.tsx
+++ b/examples/05-interoperability/04-converting-blocks-from-md/src/App.tsx
@@ -31,22 +31,25 @@ export default function App() {
     loadInitialHTML();
   }, [editor]);
 
-  // Renders a text area for you to write/paste Markdown in, and the editor instance
-  // below, which displays the current Markdown as blocks.
+  // Renders the Markdown input and editor instance.
   return (
-    <div className={"wrapper"}>
-      <div>Input (Markdown):</div>
-      <div className={"item bordered"}>
-        <code>
-          <textarea
-            defaultValue={initialMarkdown}
-            onChange={markdownInputChanged}
-          />
-        </code>
+    <div className="views">
+      <div className="view-wrapper">
+        <div className="view-label">Markdown Input</div>
+        <div className="view">
+          <code>
+            <textarea
+              defaultValue={initialMarkdown}
+              onChange={markdownInputChanged}
+            />
+          </code>
+        </div>
       </div>
-      <div>Output (BlockNote Editor):</div>
-      <div className={"item"}>
-        <BlockNoteView editor={editor} editable={false} />
+      <div className="view-wrapper">
+        <div className="view-label">Editor Output</div>
+        <div className="view">
+          <BlockNoteView editor={editor} editable={false} />
+        </div>
       </div>
     </div>
   );
diff --git a/examples/05-interoperability/04-converting-blocks-from-md/src/styles.css b/examples/05-interoperability/04-converting-blocks-from-md/src/styles.css
index 08c2677e83..bcd576e759 100644
--- a/examples/05-interoperability/04-converting-blocks-from-md/src/styles.css
+++ b/examples/05-interoperability/04-converting-blocks-from-md/src/styles.css
@@ -1,26 +1,67 @@
-.wrapper {
+.views {
+  container-name: views;
+  container-type: inline-size;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
   height: 100%;
+  padding: 8px;
 }
 
-.item {
-  border-radius: 0.5rem;
+.view-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: calc(50% - 4px);
+  width: 100%;
+}
+
+@container views (width > 1024px) {
+  .view-wrapper {
+    height: 100%;
+    width: calc(50% - 4px);
+  }
+}
+
+.view-label {
+  color: #0090ff;
+  display: flex;
+  font-size: 12px;
+  font-weight: bold;
+  justify-content: space-between;
+  margin-inline: 16px;
+}
+
+.view {
+  border: solid #0090ff 1px;
+  border-radius: 16px;
   flex: 1;
-  overflow: hidden;
+  height: 0;
+  padding: 8px;
+}
+
+.view .bn-container {
+  height: 100%;
+  margin: 0;
+  max-width: none;
+  padding: 0;
 }
 
-.item.bordered {
-  border: 1px solid gray;
+.view .bn-editor {
+  height: 100%;
+  overflow: auto;
 }
 
-.item textarea {
-  background-color: transparent;
-  border-radius: 0.5rem;
+.view textarea {
+  background-color: #0090ff20;
+  border: none;
+  border-radius: 8px;
+  flex: 1;
   height: 100%;
+  margin: 0;
   overflow: auto;
-  padding-block: 1rem;
-  padding-inline: 54px;
+  padding: 8px;
   resize: none;
+  white-space: pre-wrap;
   width: 100%;
 }
diff --git a/examples/05-interoperability/05-converting-blocks-to-pdf/README.md b/examples/05-interoperability/05-converting-blocks-to-pdf/README.md
index 63cafa464d..38286e00ef 100644
--- a/examples/05-interoperability/05-converting-blocks-to-pdf/README.md
+++ b/examples/05-interoperability/05-converting-blocks-to-pdf/README.md
@@ -2,4 +2,4 @@
 
 This example exports the current document (all blocks) as an PDF file and downloads it to your computer.
 
-**Try it out:** Edit the document and click "Download .pdf" in top-left corner, to download the PDF file.
+**Try it out:** Edit the document and click "Download .pdf" at the top to download the PDF file.
diff --git a/examples/05-interoperability/05-converting-blocks-to-pdf/src/App.tsx b/examples/05-interoperability/05-converting-blocks-to-pdf/src/App.tsx
index af0309d209..50c93004f3 100644
--- a/examples/05-interoperability/05-converting-blocks-to-pdf/src/App.tsx
+++ b/examples/05-interoperability/05-converting-blocks-to-pdf/src/App.tsx
@@ -24,30 +24,34 @@ import {
   locales as multiColumnLocales,
   withMultiColumn,
 } from "@blocknote/xl-multi-column";
-import { PDFViewer } from "@react-pdf/renderer";
-import { useEffect, useMemo, useReducer, useState } from "react";
+import { pdf, PDFViewer } from "@react-pdf/renderer";
+import { JSX, useEffect, useMemo, useReducer, useState } from "react";
 
 import "./styles.css";
 
 export default function App() {
-  // Stores the editor's contents as HTML.
-  const [pdfDocument, setPDFDocument] = useState<any>();
+  // Stores the editor's contents as JSX for download and displaying the PDF
+  // using ReactPDF's `PDFViewer` component.
+  const [pdfDocument, setPDFDocument] = useState<JSX.Element>();
   const [renders, forceRerender] = useReducer((s) => s + 1, 0);
 
-  // Creates a new editor instance with some initial content.
+  // Creates a new editor instance.
   const editor = useCreateBlockNote({
+    // Adds support for page breaks & multi-column blocks.
     schema: withMultiColumn(withPageBreak(BlockNoteSchema.create())),
     dropCursor: multiColumnDropCursor,
     dictionary: {
       ...locales.en,
       multi_column: multiColumnLocales.en,
     },
+    // Adds support for advanced table features.
     tables: {
       splitCells: true,
       cellBackgroundColor: true,
       cellTextColor: true,
       headers: true,
     },
+    // Sets initial editor content.
     initialContent: [
       {
         type: "paragraph",
@@ -381,8 +385,10 @@ export default function App() {
       },
     ],
   });
-  const getSlashMenuItems = useMemo(() => {
-    return async (query: string) =>
+
+  // Additional Slash Menu items for page breaks and multi-column blocks.
+  const getSlashMenuItems = useMemo(
+    () => async (query: string) =>
       filterSuggestionItems(
         combineByGroup(
           getDefaultReactSlashMenuItems(editor),
@@ -390,38 +396,68 @@ export default function App() {
           getMultiColumnSlashMenuItems(editor),
         ),
         query,
-      );
-  }, [editor]);
+      ),
+    [editor],
+  );
+
+  // Exports the editor document to PDF whenever it changes.
   const onChange = async () => {
     const exporter = new PDFExporter(editor.schema, pdfDefaultSchemaMappings);
-    // Converts the editor's contents from Block objects to HTML and store to state.
     const pdfDocument = await exporter.toReactPDFDocument(editor.document);
     setPDFDocument(pdfDocument);
     forceRerender();
-
-    // const blob = await ReactPDF.pdf(pdfDocument).toBlob();
   };
 
+  // Exports the inital editor document to PDF.
   useEffect(() => {
     onChange();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // Renders the editor instance, and its contents as HTML below.
+  // Downloads the PDF.
+  const onDownloadClick = async () => {
+    const blob = await pdf(pdfDocument).toBlob();
+
+    const link = document.createElement("a");
+    link.href = window.URL.createObjectURL(blob);
+    link.download = "My Document (blocknote export).pdf";
+    document.body.appendChild(link);
+    link.dispatchEvent(
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+      }),
+    );
+    link.remove();
+    window.URL.revokeObjectURL(link.href);
+  };
+
+  // Renders the editor instance and PDF view.
   return (
-    <div className="wrapper">
-      <div className="editor">
-        <BlockNoteView editor={editor} slashMenu={false} onChange={onChange}>
-          <SuggestionMenuController
-            triggerCharacter={"/"}
-            getItems={getSlashMenuItems}
-          />
-        </BlockNoteView>
+    <div className="views">
+      <div className="view-wrapper">
+        <div className="view-label">Editor Input</div>
+        <div className="view">
+          <BlockNoteView editor={editor} slashMenu={false} onChange={onChange}>
+            <SuggestionMenuController
+              triggerCharacter={"/"}
+              getItems={getSlashMenuItems}
+            />
+          </BlockNoteView>
+        </div>
       </div>
-      <div className="pdf">
-        <PDFViewer width={"100%"} key={renders}>
-          {pdfDocument}
-        </PDFViewer>
+      <div className="view-wrapper">
+        <div className="view-label">
+          PDF Output
+          <span className="view-label-download" onClick={onDownloadClick}>
+            Download
+          </span>
+        </div>
+        <div className="view">
+          <PDFViewer key={renders} height={"100%"} width={"100%"}>
+            {pdfDocument}
+          </PDFViewer>
+        </div>
       </div>
     </div>
   );
diff --git a/examples/05-interoperability/05-converting-blocks-to-pdf/src/styles.css b/examples/05-interoperability/05-converting-blocks-to-pdf/src/styles.css
index f41ba2a5c4..87b4331486 100644
--- a/examples/05-interoperability/05-converting-blocks-to-pdf/src/styles.css
+++ b/examples/05-interoperability/05-converting-blocks-to-pdf/src/styles.css
@@ -1,30 +1,63 @@
-.wrapper {
+.views {
+  container-name: views;
+  container-type: inline-size;
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
   height: 100%;
+  padding: 8px;
 }
 
-@media (max-width: 800px) {
-  .wrapper {
-    flex-direction: column;
-  }
+.view-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: calc(50% - 4px);
+  width: 100%;
+}
 
-  .editor {
-    max-height: 500px;
-    overflow-y: scroll;
+@container views (width > 1024px) {
+  .view-wrapper {
+    height: 100%;
+    width: calc(50% - 4px);
   }
 }
 
-.wrapper > div {
+.view-label {
+  color: #0090ff;
+  display: flex;
+  font-size: 12px;
+  font-weight: bold;
+  justify-content: space-between;
+  margin-inline: 16px;
+}
+
+.view-label-download {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.view {
+  border: solid #0090ff 1px;
+  border-radius: 16px;
   flex: 1;
+  height: 0;
+  padding: 8px;
 }
 
-.pdf {
-  min-height: 500px;
-  display: flex;
-  align-items: stretch;
+.view .bn-container {
+  height: 100%;
+  margin: 0;
+  max-width: none;
+  padding: 0;
+}
+
+.view .bn-editor {
+  height: 100%;
+  overflow: auto;
 }
 
-.editor.bordered {
-  border: 1px solid gray;
+.view iframe {
+  border: none;
+  border-radius: 8px;
 }
diff --git a/examples/05-interoperability/06-converting-blocks-to-docx/README.md b/examples/05-interoperability/06-converting-blocks-to-docx/README.md
index 2a826547bb..abbecc92d5 100644
--- a/examples/05-interoperability/06-converting-blocks-to-docx/README.md
+++ b/examples/05-interoperability/06-converting-blocks-to-docx/README.md
@@ -1,5 +1,5 @@
-# Exporting documents to .docx (Office Open XML)
+# Exporting documents to DOCX (Office Open XML)
 
 This example exports the current document (all blocks) as an Microsoft Word Document (DOCX) file and downloads it to your computer.
 
-**Try it out:** Edit the document and click "Download .docx" in top-left corner, to download the DOCX file.
+**Try it out:** Edit the document and click "Download .docx" at the top to download the DOCX file.
diff --git a/examples/05-interoperability/06-converting-blocks-to-docx/index.html b/examples/05-interoperability/06-converting-blocks-to-docx/index.html
index 28135d372d..a9eb3589ef 100644
--- a/examples/05-interoperability/06-converting-blocks-to-docx/index.html
+++ b/examples/05-interoperability/06-converting-blocks-to-docx/index.html
@@ -2,7 +2,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Exporting documents to .docx (Office Open XML)</title>
+    <title>Exporting documents to DOCX (Office Open XML)</title>
     <script>
       <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
     </script>
diff --git a/examples/05-interoperability/06-converting-blocks-to-docx/src/App.tsx b/examples/05-interoperability/06-converting-blocks-to-docx/src/App.tsx
index 597f3793b7..5c24b1e47e 100644
--- a/examples/05-interoperability/06-converting-blocks-to-docx/src/App.tsx
+++ b/examples/05-interoperability/06-converting-blocks-to-docx/src/App.tsx
@@ -29,20 +29,23 @@ import { useMemo } from "react";
 import "./styles.css";
 
 export default function App() {
-  // Creates a new editor instance with some initial content.
+  // Creates a new editor instance.
   const editor = useCreateBlockNote({
+    // Adds support for page breaks & multi-column blocks.
     schema: withMultiColumn(withPageBreak(BlockNoteSchema.create())),
     dropCursor: multiColumnDropCursor,
     dictionary: {
       ...locales.en,
       multi_column: multiColumnLocales.en,
     },
+    // Adds support for advanced table features.
     tables: {
       splitCells: true,
       cellBackgroundColor: true,
       cellTextColor: true,
       headers: true,
     },
+    // Sets initial editor content.
     initialContent: [
       {
         type: "paragraph",
@@ -377,6 +380,8 @@ export default function App() {
       },
     ],
   });
+
+  // Additional Slash Menu items for page breaks and multi-column blocks.
   const getSlashMenuItems = useMemo(() => {
     return async (query: string) =>
       filterSuggestionItems(
@@ -388,9 +393,10 @@ export default function App() {
         query,
       );
   }, [editor]);
+
+  // Exports the editor content to DOCX and downloads it.
   const onDownloadClick = async () => {
     const exporter = new DOCXExporter(editor.schema, docxDefaultSchemaMappings);
-
     const blob = await exporter.toBlob(editor.document);
 
     const link = document.createElement("a");
@@ -408,21 +414,24 @@ export default function App() {
     window.URL.revokeObjectURL(link.href);
   };
 
-  // Renders the editor instance, and its contents as HTML below.
+  // Renders the editor instance.
   return (
-    <div>
-      <div className={"edit-buttons"}>
-        <button className={"edit-button"} onClick={onDownloadClick}>
-          Download .docx
-        </button>
-      </div>
-      <div className="item">
-        <BlockNoteView editor={editor} slashMenu={false}>
-          <SuggestionMenuController
-            triggerCharacter={"/"}
-            getItems={getSlashMenuItems}
-          />
-        </BlockNoteView>
+    <div className="views">
+      <div className="view-wrapper">
+        <div className="view-label">
+          Editor
+          <span className="view-label-download" onClick={onDownloadClick}>
+            Download DOCX
+          </span>
+        </div>
+        <div className="view">
+          <BlockNoteView editor={editor} slashMenu={false}>
+            <SuggestionMenuController
+              triggerCharacter={"/"}
+              getItems={getSlashMenuItems}
+            />
+          </BlockNoteView>
+        </div>
       </div>
     </div>
   );
diff --git a/examples/05-interoperability/06-converting-blocks-to-docx/src/styles.css b/examples/05-interoperability/06-converting-blocks-to-docx/src/styles.css
index 6d5eeba7fe..dc64a13e98 100644
--- a/examples/05-interoperability/06-converting-blocks-to-docx/src/styles.css
+++ b/examples/05-interoperability/06-converting-blocks-to-docx/src/styles.css
@@ -1,25 +1,63 @@
-.wrapper {
+.views {
+  container-name: views;
+  container-type: inline-size;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
+  height: 100%;
+  padding: 8px;
+}
+
+.view-wrapper {
   display: flex;
   flex-direction: column;
+  height: calc(50% - 4px);
+  width: 100%;
+}
+
+@container views (width > 1024px) {
+  .view-wrapper {
+    height: 100%;
+    width: calc(50% - 4px);
+  }
+}
+
+.view-wrapper:only-child {
   height: 100%;
+  width: 100%;
+}
+
+.view-label {
+  color: #0090ff;
+  display: flex;
+  font-size: 12px;
+  font-weight: bold;
+  justify-content: space-between;
+  margin-inline: 16px;
 }
 
-.item {
-  border-radius: 0.5rem;
+.view-label-download {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.view {
+  border: solid #0090ff 1px;
+  border-radius: 16px;
   flex: 1;
-  overflow: hidden;
+  height: 0;
+  padding: 8px;
 }
 
-.item.bordered {
-  border: 1px solid gray;
+.view .bn-container {
+  height: 100%;
+  margin: 0;
+  max-width: none;
+  padding: 0;
 }
 
-.item pre {
-  border-radius: 0.5rem;
+.view .bn-editor {
   height: 100%;
   overflow: auto;
-  padding-block: 1rem;
-  padding-inline: 54px;
-  width: 100%;
-  white-space: pre-wrap;
 }
diff --git a/examples/05-interoperability/07-converting-blocks-to-odt/README.md b/examples/05-interoperability/07-converting-blocks-to-odt/README.md
index 8b7c159e30..2ebda4547d 100644
--- a/examples/05-interoperability/07-converting-blocks-to-odt/README.md
+++ b/examples/05-interoperability/07-converting-blocks-to-odt/README.md
@@ -1,5 +1,5 @@
-# Exporting documents to .odt (Open Document Text)
+# Exporting documents to ODT (Open Document Text)
 
 This example exports the current document (all blocks) as an Open Document Text (ODT) file and downloads it to your computer.
 
-**Try it out:** Edit the document and click "Download .odt" in top-left corner, to download the ODT file.
+**Try it out:** Edit the document and click "Download .odt" at the top to download the ODT file.
diff --git a/examples/05-interoperability/07-converting-blocks-to-odt/index.html b/examples/05-interoperability/07-converting-blocks-to-odt/index.html
index aa0611a99f..175d808b5e 100644
--- a/examples/05-interoperability/07-converting-blocks-to-odt/index.html
+++ b/examples/05-interoperability/07-converting-blocks-to-odt/index.html
@@ -2,7 +2,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Exporting documents to .odt (Open Document Text)</title>
+    <title>Exporting documents to ODT (Open Document Text)</title>
     <script>
       <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
     </script>
diff --git a/examples/05-interoperability/07-converting-blocks-to-odt/src/App.tsx b/examples/05-interoperability/07-converting-blocks-to-odt/src/App.tsx
index b346e939a1..7a0207cc9a 100644
--- a/examples/05-interoperability/07-converting-blocks-to-odt/src/App.tsx
+++ b/examples/05-interoperability/07-converting-blocks-to-odt/src/App.tsx
@@ -29,19 +29,23 @@ import { useMemo } from "react";
 import "./styles.css";
 
 export default function App() {
-  // Creates a new editor instance with some initial content.
+  // Creates a new editor instance.
   const editor = useCreateBlockNote({
+    // Adds support for page breaks & multi-column blocks.
     schema: withMultiColumn(withPageBreak(BlockNoteSchema.create())),
     dropCursor: multiColumnDropCursor,
     dictionary: {
       ...locales.en,
       multi_column: multiColumnLocales.en,
     },
+    // Adds support for advanced table features.
     tables: {
       splitCells: true,
-      cellTextColor: true,
       cellBackgroundColor: true,
+      cellTextColor: true,
+      headers: true,
     },
+    // Sets initial editor content.
     initialContent: [
       {
         type: "paragraph",
@@ -375,6 +379,8 @@ export default function App() {
       },
     ],
   });
+
+  // Additional Slash Menu items for page breaks and multi-column blocks.
   const getSlashMenuItems = useMemo(() => {
     return async (query: string) =>
       filterSuggestionItems(
@@ -386,9 +392,10 @@ export default function App() {
         query,
       );
   }, [editor]);
+
+  // Exports the editor content to ODT and downloads it.
   const onDownloadClick = async () => {
     const exporter = new ODTExporter(editor.schema, odtDefaultSchemaMappings);
-
     const blob = await exporter.toODTDocument(editor.document);
 
     const link = document.createElement("a");
@@ -406,21 +413,24 @@ export default function App() {
     window.URL.revokeObjectURL(link.href);
   };
 
-  // Renders the editor instance, and its contents as HTML below.
+  // Renders the editor instance.
   return (
-    <div>
-      <div className={"edit-buttons"}>
-        <button className={"edit-button"} onClick={onDownloadClick}>
-          Download .odt
-        </button>
-      </div>
-      <div className="item">
-        <BlockNoteView editor={editor} slashMenu={false}>
-          <SuggestionMenuController
-            triggerCharacter={"/"}
-            getItems={getSlashMenuItems}
-          />
-        </BlockNoteView>
+    <div className="views">
+      <div className="view-wrapper">
+        <div className="view-label">
+          Editor
+          <span className="view-label-download" onClick={onDownloadClick}>
+            Download ODT
+          </span>
+        </div>
+        <div className="view">
+          <BlockNoteView editor={editor} slashMenu={false}>
+            <SuggestionMenuController
+              triggerCharacter={"/"}
+              getItems={getSlashMenuItems}
+            />
+          </BlockNoteView>
+        </div>
       </div>
     </div>
   );
diff --git a/examples/05-interoperability/07-converting-blocks-to-odt/src/styles.css b/examples/05-interoperability/07-converting-blocks-to-odt/src/styles.css
index 6d5eeba7fe..dc64a13e98 100644
--- a/examples/05-interoperability/07-converting-blocks-to-odt/src/styles.css
+++ b/examples/05-interoperability/07-converting-blocks-to-odt/src/styles.css
@@ -1,25 +1,63 @@
-.wrapper {
+.views {
+  container-name: views;
+  container-type: inline-size;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
+  height: 100%;
+  padding: 8px;
+}
+
+.view-wrapper {
   display: flex;
   flex-direction: column;
+  height: calc(50% - 4px);
+  width: 100%;
+}
+
+@container views (width > 1024px) {
+  .view-wrapper {
+    height: 100%;
+    width: calc(50% - 4px);
+  }
+}
+
+.view-wrapper:only-child {
   height: 100%;
+  width: 100%;
+}
+
+.view-label {
+  color: #0090ff;
+  display: flex;
+  font-size: 12px;
+  font-weight: bold;
+  justify-content: space-between;
+  margin-inline: 16px;
 }
 
-.item {
-  border-radius: 0.5rem;
+.view-label-download {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.view {
+  border: solid #0090ff 1px;
+  border-radius: 16px;
   flex: 1;
-  overflow: hidden;
+  height: 0;
+  padding: 8px;
 }
 
-.item.bordered {
-  border: 1px solid gray;
+.view .bn-container {
+  height: 100%;
+  margin: 0;
+  max-width: none;
+  padding: 0;
 }
 
-.item pre {
-  border-radius: 0.5rem;
+.view .bn-editor {
   height: 100%;
   overflow: auto;
-  padding-block: 1rem;
-  padding-inline: 54px;
-  width: 100%;
-  white-space: pre-wrap;
 }
diff --git a/examples/05-interoperability/08-converting-blocks-to-react-email/README.md b/examples/05-interoperability/08-converting-blocks-to-react-email/README.md
index 39cad64a26..68d301ade4 100644
--- a/examples/05-interoperability/08-converting-blocks-to-react-email/README.md
+++ b/examples/05-interoperability/08-converting-blocks-to-react-email/README.md
@@ -1,5 +1,5 @@
-# Exporting documents to React Email
+# Exporting documents to Email (HTML)
 
-This example exports the current document (all blocks) as a React Email document.
+This example exports the current document (all blocks) as an HTML file for use in emails, and downloads it to your computer.
 
-**Try it out:** Edit the document and the preview will update.
+**Try it out:** Edit the document and click "Download email .html" at the top to download the HTML file.
diff --git a/examples/05-interoperability/08-converting-blocks-to-react-email/index.html b/examples/05-interoperability/08-converting-blocks-to-react-email/index.html
index d06d43c35d..a8759093bb 100644
--- a/examples/05-interoperability/08-converting-blocks-to-react-email/index.html
+++ b/examples/05-interoperability/08-converting-blocks-to-react-email/index.html
@@ -2,7 +2,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Exporting documents to React Email</title>
+    <title>Exporting documents to Email (HTML)</title>
     <script>
       <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
     </script>
diff --git a/examples/05-interoperability/08-converting-blocks-to-react-email/src/App.tsx b/examples/05-interoperability/08-converting-blocks-to-react-email/src/App.tsx
index 6b70999d78..ba2fec5510 100644
--- a/examples/05-interoperability/08-converting-blocks-to-react-email/src/App.tsx
+++ b/examples/05-interoperability/08-converting-blocks-to-react-email/src/App.tsx
@@ -12,6 +12,7 @@ import "@blocknote/mantine/style.css";
 import {
   SuggestionMenuController,
   getDefaultReactSlashMenuItems,
+  getPageBreakReactSlashMenuItems,
   useBlockNoteContext,
   useCreateBlockNote,
   usePrefersColorScheme,
@@ -25,18 +26,22 @@ import { useEffect, useMemo, useState } from "react";
 import "./styles.css";
 
 export default function App() {
-  // Stores the editor's contents as HTML.
-  const [emailDocument, setEmailDocument] = useState<any>();
+  // Stores the editor's contents as an email HTML string for download and
+  // displaying the email.
+  const [emailDocument, setEmailDocument] = useState<string>("");
 
-  // Creates a new editor instance with some initial content.
+  // Creates a new editor instance.
   const editor = useCreateBlockNote({
+    // Adds support for page breaks.
     schema: withPageBreak(BlockNoteSchema.create()),
+    // Adds support for advanced table features.
     tables: {
       splitCells: true,
       cellBackgroundColor: true,
       cellTextColor: true,
       headers: true,
     },
+    // Sets initial editor content.
     initialContent: [
       {
         type: "paragraph",
@@ -318,15 +323,26 @@ export default function App() {
     ],
   });
 
+  // Additional Slash Menu items for page breaks.
+  const getSlashMenuItems = useMemo(
+    () => async (query: string) =>
+      filterSuggestionItems(
+        combineByGroup(
+          getDefaultReactSlashMenuItems(editor),
+          getPageBreakReactSlashMenuItems(editor),
+        ),
+        query,
+      ),
+    [editor],
+  );
+
   const existingContext = useBlockNoteContext();
   const systemColorScheme = usePrefersColorScheme();
-  const colorScheme =
-    existingContext?.colorSchemePreference || systemColorScheme;
 
+  // Exports the editor document to email whenever it changes.
   const onChange = async () => {
-    if (!editor || !editor.document) {
-      return;
-    }
+    const colorScheme =
+      existingContext?.colorSchemePreference || systemColorScheme;
     const exporter = new ReactEmailExporter(
       editor.schema,
       reactEmailDefaultSchemaMappings,
@@ -336,36 +352,61 @@ export default function App() {
       },
     );
     const emailHtml = await exporter.toReactEmailDocument(editor.document);
-
     setEmailDocument(emailHtml);
   };
 
+  // Exports the inital editor document to PDF.
   useEffect(() => {
     onChange();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const slashMenuItems = useMemo(() => {
-    return combineByGroup(getDefaultReactSlashMenuItems(editor));
-  }, [editor]);
+  // Downloads the email in HTML format.
+  const onDownloadClick = async () => {
+    const blob = new Blob([emailDocument], { type: "text/html" });
 
-  // Renders the editor instance, and its contents as HTML below.
+    const link = document.createElement("a");
+    link.href = window.URL.createObjectURL(blob);
+    link.download = "My Document (blocknote export).html";
+    document.body.appendChild(link);
+    link.dispatchEvent(
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+      }),
+    );
+    link.remove();
+    window.URL.revokeObjectURL(link.href);
+  };
+
+  // Renders the editor instance and Email view.
   return (
-    <div className="wrapper">
-      <div className="editor">
-        <BlockNoteView editor={editor} slashMenu={false} onChange={onChange}>
-          <SuggestionMenuController
-            triggerCharacter={"/"}
-            getItems={async (query) =>
-              filterSuggestionItems(slashMenuItems, query)
-            }
+    <div className="views">
+      <div className="view-wrapper">
+        <div className="view-label">Editor Input</div>
+        <div className="view">
+          <BlockNoteView editor={editor} slashMenu={false} onChange={onChange}>
+            <SuggestionMenuController
+              triggerCharacter={"/"}
+              getItems={getSlashMenuItems}
+            />
+          </BlockNoteView>
+        </div>
+      </div>
+      <div className="view-wrapper">
+        <div className="view-label">
+          Email Output
+          <span className="view-label-download" onClick={onDownloadClick}>
+            Download
+          </span>
+        </div>
+        <div className="view">
+          <div
+            className="email"
+            dangerouslySetInnerHTML={{ __html: emailDocument }}
           />
-        </BlockNoteView>
+        </div>
       </div>
-      <div
-        className="email"
-        dangerouslySetInnerHTML={{ __html: emailDocument }}
-      />
     </div>
   );
 }
diff --git a/examples/05-interoperability/08-converting-blocks-to-react-email/src/styles.css b/examples/05-interoperability/08-converting-blocks-to-react-email/src/styles.css
index 1ccbb9d746..a40fba5104 100644
--- a/examples/05-interoperability/08-converting-blocks-to-react-email/src/styles.css
+++ b/examples/05-interoperability/08-converting-blocks-to-react-email/src/styles.css
@@ -1,36 +1,63 @@
-.wrapper {
+.views {
+  container-name: views;
+  container-type: inline-size;
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
   height: 100%;
+  padding: 8px;
 }
 
-@media (max-width: 800px) {
-  .wrapper {
-    flex-direction: column;
-  }
+.view-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: calc(50% - 4px);
+  width: 100%;
+}
 
-  .editor {
-    max-height: 500px;
-    overflow-y: scroll;
+@container views (width > 1024px) {
+  .view-wrapper {
+    height: 100%;
+    width: calc(50% - 4px);
   }
 }
 
-.wrapper > div {
+.view-label {
+  color: #0090ff;
+  display: flex;
+  font-size: 12px;
+  font-weight: bold;
+  justify-content: space-between;
+  margin-inline: 16px;
+}
+
+.view-label-download {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.view {
+  border: solid #0090ff 1px;
+  border-radius: 16px;
   flex: 1;
+  height: 0;
+  padding: 8px;
 }
 
-.email {
-  min-height: 500px;
+.view .bn-container {
+  height: 100%;
+  margin: 0;
+  max-width: none;
+  padding: 0;
 }
 
-/* hack to get react-email to show on website */
-@tailwind base;
-@layer base {
-  .email [hidden]:where(:not([hidden="until-found"])) {
-    display: block !important;
-  }
+.view .bn-editor {
+  height: 100%;
+  overflow: auto;
 }
 
-.editor.bordered {
-  border: 1px solid gray;
+.view .email {
+  height: 100%;
+  overflow: auto;
 }
diff --git a/playground/src/examples.gen.tsx b/playground/src/examples.gen.tsx
index 131ade6a07..49ef038167 100644
--- a/playground/src/examples.gen.tsx
+++ b/playground/src/examples.gen.tsx
@@ -1045,7 +1045,7 @@
           "pathFromRoot": "examples/05-interoperability",
           "slug": "interoperability"
         },
-        "readme": "This example exports the current document (all blocks) as an PDF file and downloads it to your computer.\n\n**Try it out:** Edit the document and click \"Download .pdf\" in top-left corner, to download the PDF file."
+        "readme": "This example exports the current document (all blocks) as an PDF file and downloads it to your computer.\n\n**Try it out:** Edit the document and click \"Download .pdf\" at the top to download the PDF file."
       },
       {
         "projectSlug": "converting-blocks-to-docx",
@@ -1065,12 +1065,12 @@
           } as any,
           "pro": true
         },
-        "title": "Exporting documents to .docx (Office Open XML)",
+        "title": "Exporting documents to DOCX (Office Open XML)",
         "group": {
           "pathFromRoot": "examples/05-interoperability",
           "slug": "interoperability"
         },
-        "readme": "This example exports the current document (all blocks) as an Microsoft Word Document (DOCX) file and downloads it to your computer.\n\n**Try it out:** Edit the document and click \"Download .docx\" in top-left corner, to download the DOCX file."
+        "readme": "This example exports the current document (all blocks) as an Microsoft Word Document (DOCX) file and downloads it to your computer.\n\n**Try it out:** Edit the document and click \"Download .docx\" at the top to download the DOCX file."
       },
       {
         "projectSlug": "converting-blocks-to-odt",
@@ -1089,12 +1089,12 @@
           } as any,
           "pro": true
         },
-        "title": "Exporting documents to .odt (Open Document Text)",
+        "title": "Exporting documents to ODT (Open Document Text)",
         "group": {
           "pathFromRoot": "examples/05-interoperability",
           "slug": "interoperability"
         },
-        "readme": "This example exports the current document (all blocks) as an Open Document Text (ODT) file and downloads it to your computer.\n\n**Try it out:** Edit the document and click \"Download .odt\" in top-left corner, to download the ODT file."
+        "readme": "This example exports the current document (all blocks) as an Open Document Text (ODT) file and downloads it to your computer.\n\n**Try it out:** Edit the document and click \"Download .odt\" at the top to download the ODT file."
       },
       {
         "projectSlug": "converting-blocks-to-react-email",
@@ -1113,12 +1113,12 @@
           } as any,
           "pro": true
         },
-        "title": "Exporting documents to React Email",
+        "title": "Exporting documents to Email (HTML)",
         "group": {
           "pathFromRoot": "examples/05-interoperability",
           "slug": "interoperability"
         },
-        "readme": "This example exports the current document (all blocks) as a React Email document.\n\n**Try it out:** Edit the document and the preview will update."
+        "readme": "This example exports the current document (all blocks) as an HTML file for use in emails, and downloads it to your computer.\n\n**Try it out:** Edit the document and click \"Download email .html\" at the top to download the HTML file."
       }
     ]
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b7d7c26e08..b248fe29ee 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23107,7 +23107,7 @@ snapshots:
 
   jest-worker@27.5.1:
     dependencies:
-      '@types/node': 22.15.2
+      '@types/node': 20.17.50
       merge-stream: 2.0.0
       supports-color: 8.1.1