Presentation

Presentation renders a presentation editor (tool="present"). It reads token and theme from AiqlProvider. Pass the presentation id to load a saved deck. Inside the embed you can edit slides, apply a theme or design system, export PPTX, and enter Present mode for a fullscreen slide player.

Try it live

Import

import { Presentation } from "@aiql.io/react";

Usage

Basic

import { AiqlProvider, Presentation, useToken } from "@aiql.io/react";

function PresentationEmbed({ presentationId }: { presentationId: string }) {
  const { token, status } = useToken();
  if (status !== "ready" || !token) return null;

  return (
    <AiqlProvider token={token}>
      <Presentation presentationId={presentationId} title="Presentation" />
    </AiqlProvider>
  );
}

Custom loading and error UI

<Presentation
  presentationId={presentationId}
  renderLoading={() => <p>Opening presentation…</p>}
  renderError={(message) => <p role="alert">{message}</p>}
  onLoad={() => console.log("iframe loaded")}
  onError={(message) => console.error(message)}
/>

Styling

<Presentation
  presentationId={presentationId}
  className="my-presentation"
  style={{ minHeight: 720, borderRadius: 16 }}
/>

Present mode

Click Present in the editor toolbar to open a slide player over the editor:

The active slide scales to fit and stays centered on a dark backdrop
Next: Right, Down, Space, Page Down, Enter, or click the right two-thirds of the stage
Previous: Left, Up, Page Up, Backspace, or click the left third of the stage
Home / End jump to the first or last slide
Escape exits Present mode and returns you to the last slide you viewed

Present mode requests native fullscreen when the browser allows it. The iframe from @aiql.io/react includes allow="fullscreen" so this works when the host page permits it. If fullscreen is blocked, the player still runs as an in-page overlay.

Themes and fonts

Decks can use a built-in theme (Modern, Dark, Minimal) or a workspace design system. Design systems set heading and body fonts from a fixed list (Inter, Geist, Roboto, Open Sans, Lato, Montserrat, Poppins, Source Sans 3, IBM Plex Sans, Space Grotesk). AiQL self-hosts those webfonts in the embed, so slides look the same in Observatory and in your product. You do not need to load fonts on the host page.

API Reference

Presentation props

Prop	Type	Default	Description
`presentationId`	`string`	—	Required. Presentation/deck id to embed.
`title`	`string`	—	iframe `title` attribute.
`className`	`string`	—	Class name on the iframe.
`style`	`CSSProperties`	—	Inline styles on the iframe (merged after the reset).
`onLoad`	`() => void`	—	Called when the iframe fires `load`.
`onError`	`(error: string) => void`	—	Called when the embed URL cannot be built or the token is missing.
`renderLoading`	`() => ReactNode`	—	Custom loading UI.
`renderError`	`(error: string) => ReactNode`	—	Custom error UI.

token and theme come from AiqlProvider. They are not Presentation props. Provider theme controls the AiQL chrome (light/dark/auto), not the deck’s slide theme or fonts.

React Components

React Hooks

React Server

Try it live

Import

Usage

Basic

Custom loading and error UI

Styling

Present mode

Themes and fonts

API Reference

Presentation props

​Try it live

​Import

​Usage

​Basic

​Custom loading and error UI

​Styling

​Present mode

​Themes and fonts

​API Reference

​Presentation props

Try it live

Import

Usage

Basic

Custom loading and error UI

Styling

Present mode

Themes and fonts

API Reference

Presentation props