Frameworks

Vite

Build a client-rendered Vite PPTX editor with React.

Install

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

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

Mount the editor

Vite renders on the client, so you do not need a server-rendering boundary. Import the stylesheet in the entry and mount the app:

// src/main.tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import '@pptx-editor.dev/core/styles/editor.css';
import { App } from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Render the editor in a container with a height:

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

export function App() {
  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

  • Vite emits the engine's harfbuzz.wasm with no configuration. See Set up your bundler.
  • The editor fills its parent, so the parent needs a measured height.
  • Without document, the editor shows its loading sheet until bytes arrive.

Run the example

The examples/vite app builds against the package source, so it needs no package build. After you clone the repository and run bun install, run:

bun run dev   # http://localhost:5274

Next steps

Frameworks

Choose a React or Vue framework setup for your PPTX editor.

Vite with Vue

Set up a client-rendered Vue 3 PPTX editor with Vite.