diff --git a/examples/vite_basic/src/App.tsx b/examples/vite_basic/src/App.tsx
index 4b460b7..64275e5 100644
--- a/examples/vite_basic/src/App.tsx
+++ b/examples/vite_basic/src/App.tsx
@@ -18,11 +18,10 @@ const App = () => {
     handleFileChange,
   } = useFileLoader(AVAILABLE_FILES[0]);
 
-  console.log("test page ", testPage);
-
-  if (testPage) {
-    testPage.children = [undefined];
-  }
+  // uncomment to trigger error in renderer
+  // if (testPage) {
+  //   testPage.children = [undefined];
+  // }
 
   // Get backrefs for the currently selected file
   const currentBackrefs = selectedFile?.backrefs || [];
@@ -112,6 +111,10 @@ const App = () => {
                 return <PageDelimiter {...props} />;
               },
             }}
+            pageOverride={{
+              pageNum: 1,
+              component: <p>hehe</p>,
+            }}
           />
         )}
       </div>
diff --git a/typescript/src/renderer/JsonDocRenderer.tsx b/typescript/src/renderer/JsonDocRenderer.tsx
index e4c4238..044f65c 100644
--- a/typescript/src/renderer/JsonDocRenderer.tsx
+++ b/typescript/src/renderer/JsonDocRenderer.tsx
@@ -22,6 +22,10 @@ interface JsonDocRendererProps {
   viewJson?: boolean;
   backrefs?: Backref[];
   onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+  pageOverride?: {
+    pageNum: number;
+    component: React.ReactNode;
+  };
 }
 
 export const JsonDocRenderer = ({
@@ -34,6 +38,7 @@ export const JsonDocRenderer = ({
   viewJson = false,
   backrefs = [],
   onError,
+  pageOverride,
 }: JsonDocRendererProps) => {
   console.log("theme: ", theme);
   return (
@@ -50,6 +55,7 @@ export const JsonDocRenderer = ({
           resolveImageUrl={resolveImageUrl}
           viewJson={viewJson}
           backrefs={backrefs}
+          pageOverride={pageOverride}
         />
       </GlobalErrorBoundary>
     </div>
diff --git a/typescript/src/renderer/components/RendererContainer.tsx b/typescript/src/renderer/components/RendererContainer.tsx
index cd5e654..2e36167 100644
--- a/typescript/src/renderer/components/RendererContainer.tsx
+++ b/typescript/src/renderer/components/RendererContainer.tsx
@@ -24,6 +24,10 @@ interface RendererContainerProps {
   resolveImageUrl?: (url: string) => Promise<string>;
   viewJson?: boolean;
   backrefs?: Backref[];
+  pageOverride?: {
+    pageNum: number;
+    component: React.ReactNode;
+  };
 }
 
 export const RendererContainer: React.FC<RendererContainerProps> = ({
@@ -34,6 +38,7 @@ export const RendererContainer: React.FC<RendererContainerProps> = ({
   resolveImageUrl,
   viewJson = false,
   backrefs = [],
+  pageOverride,
 }) => {
   // Use the modular hooks for highlight management
   const { highlightCount, currentActiveIndex, navigateToHighlight } =
@@ -41,6 +46,8 @@ export const RendererContainer: React.FC<RendererContainerProps> = ({
       backrefs,
     });
 
+  console.log("pageOverride ", pageOverride);
+
   useEffect(() => {
     try {
       //TODO: this is not throwing for invalid page object (one that doesn't follow schema)
@@ -78,6 +85,38 @@ export const RendererContainer: React.FC<RendererContainerProps> = ({
                 ? (page.children[index + 1]?.metadata as any)?.origin?.page_num
                 : null;
 
+            console.log("pageOverride ", pageOverride);
+            console.log("currentPageNum ", currentPageNum);
+            console.log(
+              "pageOverride && currentPageNum === pageOverride.pageNum ",
+              pageOverride && currentPageNum === pageOverride.pageNum
+            );
+            console.log("\n".repeat(5));
+
+            // Check if this page should be replaced with override component
+            if (pageOverride && currentPageNum === pageOverride.pageNum) {
+              // Skip rendering blocks for this page and show override instead
+              const isLastBlockOfPage =
+                nextPageNum !== currentPageNum ||
+                index === page.children.length - 1;
+              if (isLastBlockOfPage) {
+                return (
+                  <React.Fragment key={`page-override-${currentPageNum}`}>
+                    {pageOverride.component}
+                    {/* Still show page delimiter after override */}
+                    {!components?.page_delimiter && (
+                      <PageDelimiter pageNumber={currentPageNum} />
+                    )}
+                    {components?.page_delimiter && (
+                      <components.page_delimiter pageNumber={currentPageNum} />
+                    )}
+                  </React.Fragment>
+                );
+              }
+              // Skip other blocks of the same page
+              return null;
+            }
+
             // Show delimiter after the last block of each page
             const showPageDelimiter =
               currentPageNum &&