Playground

Try a PPTX, XLSX or DOCX from the examples, or select your own local file. Your choice follows you between tabs; local files stay in your browser and are not uploaded. All four integrations use the same renderers.

New here? Start with HTML element for built-in controls. The other tabs show a minimal mount example beside a live viewer. Their paging and zoom bars are app-owned demo UI, not controls automatically created by those snippets; add your own controls when you need them.

This is a view-only preview: no editing, conversion or formula recalculation. Getting started covers installation and host sizing; fidelity and limits describes what to expect.

The easiest way: one tag. Import @aared/viewer/element once in the app code your bundler builds, then add <aared-viewer src=“file.pptx” controls> — it detects the format, opens the file, and draws it with built-in paging and zoom. Use it when you want a viewer without writing render code. Removing the element cleans up; changing its source replaces the file.

Viewer with built-in controls

htmlindex.html

<!-- once, in your bundled app code: import "@aared/viewer/element"; -->
<aared-viewer
  src="./post-production-review.pptx"
  style="height: 480px"
  controls>
</aared-viewer>

Viewer with built-in controls

htmlindex.html

<!-- once, in your bundled app code: import "@aared/viewer/element"; -->
<aared-viewer
  src="./post-production-tracker.xlsx"
  style="height: 480px"
  controls>
</aared-viewer>

Viewer with built-in controls

htmlindex.html

<!-- once, in your bundled app code: import "@aared/viewer/element"; -->
<aared-viewer
  src="./docx-coverage.docx"
  style="height: 480px"
  controls>
</aared-viewer>

Pick a fixture to begin.

A hook for React apps. usePreview({ source }) gives you a ref for a <div> plus the loading and error state, and cleans up when the component unmounts or the file changes. Use it when your app is React and you want a viewer without managing the lifecycle yourself. The hook cleans up on unmount or source replacement. The minimal example includes loading and error UI; the live demo also adds an app-owned toolbar.

Minimal mount example · demo toolbar not included

tsxViewer.tsx

import { usePreview } from "@aared/viewer/react";
import { messageFor } from "@aared/viewer/core";

function Viewer({ file }: { file: string | File }) {
  // No built-in bar. The hook owns cleanup; add app-owned controls if needed.
  const { ref, status, error, retry } = usePreview({ source: file });
  return <>
    <div ref={ref} style={{ height: 480 }} aria-busy={status === "loading"} />
    {status === "loading" && <p role="status">Loading...</p>}
    {status === "error" && <p role="alert">{messageFor(error)} <button onClick={retry}>Retry</button></p>}
  </>;
}

Minimal mount example · demo toolbar not included

tsxViewer.tsx

import { usePreview } from "@aared/viewer/react";
import { messageFor } from "@aared/viewer/core";

function Viewer({ file }: { file: string | File }) {
  // No built-in bar. The hook owns cleanup; add app-owned controls if needed.
  const { ref, status, error, retry } = usePreview({ source: file });
  return <>
    <div ref={ref} style={{ height: 480 }} aria-busy={status === "loading"} />
    {status === "loading" && <p role="status">Loading...</p>}
    {status === "error" && <p role="alert">{messageFor(error)} <button onClick={retry}>Retry</button></p>}
  </>;
}

Minimal mount example · demo toolbar not included

tsxViewer.tsx

import { usePreview } from "@aared/viewer/react";
import { messageFor } from "@aared/viewer/core";

function Viewer({ file }: { file: string | File }) {
  // No built-in bar. The hook owns cleanup; add app-owned controls if needed.
  const { ref, status, error, retry } = usePreview({ source: file });
  return <>
    <div ref={ref} style={{ height: 480 }} aria-busy={status === "loading"} />
    {status === "loading" && <p role="status">Loading...</p>}
    {status === "error" && <p role="alert">{messageFor(error)} <button onClick={retry}>Retry</button></p>}
  </>;
}

Auto-detect preview. preview({ source, target: container }) from @aared/viewer/preview detects the format, loads only the code it needs, draws into your container, and returns a handle (goTo, setZoom, destroy). Use it when you build your own UI around the viewer but don’t want a separate code path for each format. Call destroy() when the feature unmounts. The snippet mounts the viewer; the live demo adds an app-owned toolbar.

Minimal mount example · demo toolbar not included

tsapp.ts

import { preview } from "@aared/viewer/preview";

const viewer = await preview({ source: file, target: el });

viewer.format;      // "pptx" | "xlsx" | "docx"
viewer.info.count;  // slides, sheets, or 1 for a document

// Call when the feature unmounts.
function cleanup() { viewer.destroy(); }

Minimal mount example · demo toolbar not included

tsapp.ts

import { preview } from "@aared/viewer/preview";

// el needs a height: a sheet or document scrolls inside it
const viewer = await preview({ source: file, target: el });

viewer.format;      // "pptx" | "xlsx" | "docx"
viewer.info.count;  // slides, sheets, or 1 for a document

// Call when the feature unmounts.
function cleanup() { viewer.destroy(); }

Minimal mount example · demo toolbar not included

tsapp.ts

import { preview } from "@aared/viewer/preview";

// el needs a height: a sheet or document scrolls inside it
const viewer = await preview({ source: file, target: el });

viewer.format;      // "pptx" | "xlsx" | "docx"
viewer.info.count;  // slides, sheets, or 1 for a document

// Call when the feature unmounts.
function cleanup() { viewer.destroy(); }

Pick a fixture to begin.

Own the document and its renders separately. open() → .get() → render() from @aared/viewer/pptx, @aared/viewer/xlsx or @aared/viewer/docx, with explicit cleanup. The format you pick switches which module runs, and the code on the left follows. Use it for semantic data reads, manual paging or a document kept beyond any view. Render handles, not data copies. Destroy each render, then close the document. The live demo adds manual paging and zoom around the minimal example; navigation differs by format. For thumbnails beside an existing viewer, prefer its borrowed content instead of reopening it.

Minimal mount example · demo toolbar not included

tsapp.ts

import { open, render } from "@aared/viewer/pptx";

const deck = await open(file);
const slideView = await render({ slide: deck.slides.get(0), target: el });

// Call when the feature unmounts: renders first, then the document.
function cleanup() { slideView.destroy(); deck.close(); }

Minimal mount example · demo toolbar not included

tsapp.ts

import { open, render } from "@aared/viewer/xlsx";

const workbook = await open(file);
// el needs a height: a sheet or document scrolls inside it
const sheetView = await render({
  sheet: workbook.sheets.get(0),
  target: el,
  appearance: { spreadsheet: { sheetTabs: true } },
});

// Call when the feature unmounts: renders first, then the document.
function cleanup() { sheetView.destroy(); workbook.close(); }

Minimal mount example · demo toolbar not included

tsapp.ts

import { open, render } from "@aared/viewer/docx";

const doc = await open(file); // not `document`: that would shadow the page's
// el needs a height: a sheet or document scrolls inside it
const docView = await render({ document: doc, target: el });

// Call when the feature unmounts: renders first, then the document.
function cleanup() { docView.destroy(); doc.close(); }

Pick a fixture to begin.