Hotspots

Hotspots are clickable regions on a page image. They let you overlay interactive content (explanations, exercises, etc.) on top of the image. You can add / edit hotspots from the Hotspot Editor.

Adding hotspots

1. Add the page image to src/book/_img/
2. Restart the dev server
3. Open the Hotspot Editor (/_admin)
4. Select your image using the page selector (or use the previous/next buttons)
5. Draw rectangles on the image for each interactive area
6. Click Save — the generated page component will expose each area as a prop (e.g. area1, area2)

Naming

Name hotspots clearly; their names become prop names on the generated page component. For example, a hotspot named intro becomes the intro prop: <PageMyImage intro={<IntroContent />} />.

To edit a hotspot's name and type, hover over the area and click the pencil icon in the action menu. The name must be a valid identifier:

• Use only letters, digits, _, or $
• Cannot start with a digit
• Examples: my_area, area_51, intro, exercise_1

Area types

Each hotspot has a type that describes its content:

Set the type when editing an area's name in the Hotspot Editor.

Content

Each hotspot receives content from an atom — a React component defined in atoms.tsx in the page folder. Pass atoms as props when using the generated page component.

Workflow

1. Create the page via Page Creator in the Hotspot Editor (after drawing hotspots)
2. Define atoms in atoms.tsx for each hotspot
3. In page.tsx, pass atoms to the generated component: <PageMyImage area1={<Area1Atom />} area2={<Area2Atom />} />

To add or change hotspots, edit in the Hotspot Editor and save. The generated component updates; your page.tsx and atoms.tsx stay the same unless you add or remove areas.