Next.js

Install

In your existing application, install the adapter and its engine peer:

npm install @pptx-editor.dev/react @pptx-editor.dev/core

Import the stylesheet

Import the stylesheet once in the root layout:

// app/layout.tsx
import '@pptx-editor.dev/core/styles/editor.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Load the editor on the client

The editor measures text with HarfBuzz and paints into the DOM, so it renders in the browser only. Load the editor component with dynamic() and ssr: false from a client component:

// app/page.tsx
'use client';

import dynamic from 'next/dynamic';

const Editor = dynamic(() => import('./components/Editor').then((m) => m.Editor), {
  ssr: false,
  loading: () => <div>Loading editor...</div>,
});

export default function Page() {
  return <Editor />;
}

The "use client" directive alone does not turn off server rendering. ssr: false skips the server render, and the editor starts after the component mounts in the browser.

Mount the editor

The editor component fetches a deck and fills a container with a height:

// app/components/Editor.tsx
'use client';

import { PptxEditor, usePptxSource } from '@pptx-editor.dev/react';

export function Editor() {
  const { document: bytes, error } = usePptxSource('/deck.pptx');
  if (error) return <p role="alert">{error.message}</p>;
  return (
    <div style={{ height: '100vh' }}>
      <PptxEditor document={bytes} />
    </div>
  );
}

Put deck.pptx in the public folder. usePptxSource checks HTTP failures and cancels its fetch on unmount. To open and download local files, use the component from the quickstart.

Limits

• dynamic(..., { ssr: false }) keeps the editor module off the server and out of the route's first bundle.
• Keep the rest of the page as server components. Only the editor needs the client boundary.
• Turbopack and webpack emit the engine's harfbuzz.wasm with no configuration.
• Without document, the editor shows its loading sheet until bytes arrive.

Run the example

The examples/nextjs app uses the built packages, as an application that installs them from npm does. After you clone the repository and run bun install, run:

bun run build:packages
bun run dev:nextjs   # http://localhost:3000

Next steps

• Quickstart: open, edit, and save a deck.
• React props: configure <PptxEditor> and its ref.
• Installation: requirements and bundler setup.