@@ -922,7 +922,13 @@ describe("AssetAccess", () => {
       const directory = path.join(root, "assets#archive");
       yield* fileSystem.makeDirectory(directory);
 
-      for (const name of ["icon#v2.png", "report#draft.pdf"]) {
+      for (const name of [
+        "icon#v2.png",
+        "report#draft.pdf",
+        "report.docx",
+        "workbook.xlsx",
+        "slides.pptx",
+      ]) {
         const filePath = path.join(directory, name);
         yield* fileSystem.writeFileString(filePath, "preview fixture");
         const canonicalFile = yield* fileSystem.realPath(filePath);
 
@@ -87,6 +87,9 @@ const inlinePreviewMimeTypeForExtension = (extension: string) =>
 const PREVIEW_ASSET_EXTENSIONS = new Set([
   ...WORKSPACE_BROWSER_PREVIEW_EXTENSIONS,
   ...WORKSPACE_IMAGE_PREVIEW_EXTENSIONS,
+  ".docx",
+  ".xlsx",
+  ".pptx",
   ".css",
   ".js",
   ".mjs",
 
@@ -13,6 +13,8 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.4.1",
+    "@betteroffice/fonts": "0.4.0",
+    "@betteroffice/pptx": "0.2.0",
     "@clerk/clerk-js": "catalog:",
     "@clerk/electron": "catalog:",
     "@clerk/react": "catalog:",
@@ -53,6 +55,7 @@
     "@tiptap/starter-kit": "^3.31.3",
     "class-variance-authority": "^0.7.1",
     "culori": "^4.0.2",
+    "docx-preview": "0.4.1",
     "dompurify": "^3.4.16",
     "effect": "catalog:",
     "hast-util-to-html": "^9.0.5",
@@ -68,6 +71,7 @@
     "react": "19.2.6",
     "react-dom": "19.2.6",
     "react-markdown": "^10.1.0",
+    "read-excel-file": "9.3.12",
     "remark-gfm": "catalog:",
     "tailwind-merge": "^3.4.0",
     "unbash": "^5.0.0",
 
@@ -5,7 +5,11 @@ import { readFilePreviewResponse } from "@t3tools/client-runtime/file-preview";
 import { settlePromise } from "@t3tools/client-runtime/state/runtime";
 import * as AsyncResult from "effect/reactivity/AsyncResult";
 import * as Cause from "effect/Cause";
-import { filePreviewKind, FILE_TEXT_PREVIEW_MAX_BYTES } from "@t3tools/shared/filePreview";
+import {
+  filePreviewKind,
+  officePreviewKind,
+  FILE_TEXT_PREVIEW_MAX_BYTES,
+} from "@t3tools/shared/filePreview";
 import { ChevronRightIcon, DownloadIcon, Trash2Icon, WrapTextIcon, XIcon } from "lucide-react";
 import { Check, Code2, Copy, Eye, Table2 } from "lucide";
 import { lazy, Suspense, useEffect, useRef, useState } from "react";
@@ -22,6 +26,7 @@ import { cn } from "~/lib/utils";
 import { AudioPreview } from "./AudioPreview";
 import { BrowserDocumentFrame } from "./BrowserDocumentFrame";
 import { DelimitedTablePreview } from "./DelimitedTablePreview";
+import { OfficeFilePreview } from "./OfficeFilePreview";
 import {
   FILE_SURFACE_SUBHEADER_CLASS,
   FileSurfaceAction,
@@ -61,6 +66,7 @@ export function AttachmentFilePreview(props: {
   onClose?: () => void;
 }) {
   const kind = filePreviewKind(props);
+  const officeKind = officePreviewKind(props);
   const delimiter = filePreviewDelimiter(props);
   const renderedMode =
     kind === "markdown" ? "markdown" : kind === "html" ? "html" : delimiter ? "table" : null;
@@ -219,6 +225,8 @@ export function AttachmentFilePreview(props: {
     ) : (
       <ReadOnlySourcePreview name={props.name} text={content.text} />
     )
+  ) : officeKind ? (
+    <OfficeFilePreview src={url} name={props.name} kind={officeKind} sizeBytes={props.sizeBytes} />
   ) : kind === "pdf" || kind === "html" ? (
     <BrowserDocumentFrame
       src={url}
 
@@ -12,6 +12,7 @@ import {
   isWorkspaceAudioPreviewPath,
   isWorkspaceImagePreviewPath,
   isWorkspaceVideoPreviewPath,
+  officePreviewKind,
 } from "@t3tools/shared/filePreview";
 import {
   DEFAULT_TOKENIZE_MAX_LENGTH,
@@ -75,6 +76,7 @@ import { AttachmentFilePreview } from "./AttachmentFilePreview";
 import { AudioPreview } from "./AudioPreview";
 import { BrowserDocumentFrame, isPdfPreviewFile } from "./BrowserDocumentFrame";
 import { DelimitedTablePreview } from "./DelimitedTablePreview";
+import { OfficeFilePreview } from "./OfficeFilePreview";
 import FileBrowserPanel from "./FileBrowserPanel";
 import { FileBreadcrumbs } from "./FileBreadcrumbs";
 import { breadcrumbPathOf, retainedBreadcrumbTrail, trailChildOf } from "./filePath";
@@ -251,6 +253,15 @@ function WorkspaceBrowserPreview(props: {
       </div>
     );
   }
+  const officeKind = officePreviewKind({ name: props.absolutePath });
+  if (officeKind)
+    return (
+      <OfficeFilePreview
+        src={`${assetUrl.url}${revisionSuffix}`}
+        name={props.title}
+        kind={officeKind}
+      />
+    );
   return (
     <BrowserDocumentFrame
       src={`${assetUrl.url}${revisionSuffix}`}
@@ -1004,6 +1015,7 @@ export default function FilePreviewPanel({
   const isImage = relativePath !== null && !isVideo && isWorkspaceImagePreviewPath(relativePath);
   const isMedia = isImage || isVideo || isAudio;
   const isPdf = relativePath !== null && isPdfPreviewFile(relativePath);
+  const isOffice = relativePath !== null && officePreviewKind({ name: relativePath }) !== null;
   const isHtml = relativePath !== null && !isPdf && isBrowserPreviewFile(relativePath);
   const isHostFile =
     attachment !== undefined || (relativePath !== null && isAbsolutePath(relativePath));
@@ -1089,7 +1101,8 @@ export default function FilePreviewPanel({
     file.data !== null &&
     !(isMarkdown && renderMarkdown) &&
     !(tableDelimiter && renderTable) &&
-    !renderBrowserFile;
+    !renderBrowserFile &&
+    !isOffice;
   const rendered = isMarkdown ? renderMarkdown : tableDelimiter ? renderTable : renderBrowserFile;
   const setRenderedPreferred = isMarkdown
     ? setRenderMarkdownPreferred
@@ -1126,7 +1139,7 @@ export default function FilePreviewPanel({
       // Media and PDFs never show their contents, so re-reading them on every
       // workspace mutation is waste. A folder named like one still re-reads, so
       // it notices when the path becomes a file.
-      (isFolder || (!isMedia && !isPdf)) &&
+      (isFolder || (!isMedia && !isPdf && !isOffice)) &&
       !selectedFilePending,
     mutationId: workspaceMutationId,
     refresh: file.refresh,
@@ -1337,7 +1350,7 @@ export default function FilePreviewPanel({
               alt={relativePath}
               workspaceMutationId={workspaceMutationId}
             />
-          ) : relativePath && renderBrowserFile && absolutePath ? (
+          ) : relativePath && (renderBrowserFile || isOffice) && absolutePath ? (
             <WorkspaceBrowserPreview
               key={absolutePath}
               environmentId={environmentId}
@@ -1448,7 +1461,7 @@ export default function FilePreviewPanel({
               selectedPathRevealId={revealRequestId}
               onOpenFile={onOpenFile}
               workspaceMutationId={workspaceMutationId}
-              {...(previewPath && !isMedia && !isPdf
+              {...(previewPath && !isMedia && !isPdf && !isOffice
                 ? { onRefreshSelectedFile: file.refresh }
                 : {})}
             />
 
@@ -0,0 +1,19 @@
+import type { OfficePreviewKind } from "@t3tools/shared/filePreview";
+import { lazy, Suspense } from "react";
+
+import { FileSurfaceLoading } from "./fileSurfaceChrome";
+
+const OfficeViewer = lazy(() => import("./OfficeViewer"));
+
+export function OfficeFilePreview(props: {
+  readonly src: string;
+  readonly name: string;
+  readonly kind: OfficePreviewKind;
+  readonly sizeBytes?: number;
+}) {
+  return (
+    <Suspense fallback={<FileSurfaceLoading />}>
+      <OfficeViewer key={props.src} {...props} />
+    </Suspense>
+  );
+}