Pages

Every page has a page.tsx file that exports the default component. You can create pages from scratch or from an image with hotspots.

Option 1: Write a page from scratch

Create a new folder under a chapter, e.g. src/book/01_Chapter/030/, and add:

page.tsx

export default function MyPage() {
  return (
    <div className="p-6">
      <h1>My Page Content</h1>
    </div>
  );
}

The page will appear in the book at the position determined by its folder name and toc.ts (if present).

Option 2: Create a page from an image (with hotspots)

Use this when you have a PDF or scanned page image and want clickable areas (hotspots) that reveal content.

1. Copy your page image into src/book/_img/ (e.g. MyImage.png)
2. Restart the dev server
3. Open the Hotspot Editor (/_admin, via the Admin button or Dev bar link)
4. Select your image and draw hotspots

The generated component receives each hotspot as a prop. In page.tsx:

import { PageMyImage } from "@/@generated/PageMyImage";
import { MyAreaContent } from "./atoms";

export default function Page030() {
  return <PageMyImage area1={<MyAreaContent />} />;
}

Do not edit generated components manually. Regenerate by updating hotspots in the Hotspot Editor; your page.tsx and atoms remain under your control.

Colocating assets

Keep page-specific assets (images, audio, video files) in the same folder as the page.

src/book/
├── _img/              # Page images (used for hotspots)
├── 00_Cover/          # Chapter (alphabetical order by default)
│   ├── toc.ts         # Chapter metadata
│   ├── 001/
│   │   ├── page.tsx   # Page component (required)
│   │   ├── toc.ts     # Page TOC metadata
│   │   └── atoms.tsx   # Hotspot content / atoms (optional)
│   │   ├── assets/      # Page-specific assets
│   │   │   ├── image.png
│   │   │   ├── audio.mp3
│   │   │   └── video.mp4
│   └── 002/

Use book-level _img folder only to store page images.