The Complete Interactive Book Playbook

Welcome to the Author OS platform. This chapter demonstrates every single interactive widget available for your books. Each of these works live on the web — and gracefully degrades to static text when exported to Amazon KDP.

Callouts & Annotations

Use callouts to draw attention to key information:

Why Interactive Books?

Interactive books have 3x higher engagement than static PDFs. Readers retain 40% more information when they can interact with the content directly.

KDP Compatibility

When exporting to Amazon Kindle, all interactive widgets are automatically replaced with static fallback text. Your readers will see a note directing them to the web edition for the full experience.

You can also highlight important text This is an annotation! inline, and readers can hover to see your notes. Try different colors and annotated highlights Annotations support full explanations too.

Knowledge Checks

Embed quizzes directly into any chapter. Readers get instant feedback:

🧠 Knowledge Check

What file format does Amazon KDP NOT support for interactive content?

Study Flashcards

Perfect for educational books, language learning, and revision guides:

What is Single-Source Publishing?

Click to reveal

Writing content once and automatically exporting it to multiple formats — web, EPUB, PDF, and mobile apps — from the same source files.

Click to flip back

What technology powers this platform?

Click to reveal

Next.js (React) + MDX (Markdown with embedded React components) + a custom Node.js export pipeline.

Click to flip back

Expandable FAQ Sections

Use accordions to keep chapters clean while hiding detailed content behind expandable panels:

Create a new .mdx file in the content/chapters/ folder. Name it with a number prefix like 02-my-chapter.mdx. The platform automatically detects and renders it.

Absolutely. Create your component in src/components/mdx/, register it in the chapter page.tsx components map, and use it directly in any .mdx file.

Run the build-static.js script. It reads every .mdx file, uses regex to detect React components, replaces them with markdown-friendly fallbacks, converts to HTML, and packages everything into an .epub file.

Yes. Every technology used — Next.js, React, Tailwind CSS, and all dependencies — is MIT-licensed and 100% free for commercial use. You own everything you build.

Visual Timelines

Perfect for history books, project documentation, and storytelling:

Phase 1

Foundation Built

Next.js scaffold, MDX content engine, and basic chapter rendering established.

Phase 2

Reader UI Created

Premium dark-mode interface with sidebar navigation and responsive layout.

Phase 3

Export Pipeline

Custom Node.js script that strips React components and generates EPUB files for Amazon KDP.

Phase 4

Widget Library

10 interactive components: Quiz, Flashcard, Tabs, Accordion, Timeline, Callout, ImageCompare, AudioPlayer, Highlight, and DefinitionTooltip.

Phase 5

Professional UX

Reading progress bar, dark/light theme toggle, font size controls, chapter navigation, and reading time estimates.

Audio Narration

Embed audio players for narrated chapters, podcasts, or supplementary audio content:

Chapter 1 — Audio Narration (Sample)

0:00 / 0:00

Reader Controls

Notice the floating control panel in the bottom-right corner of your screen. It lets you:

Toggle Dark/Light Mode — Switch between the sleek dark theme and a clean light reading mode
Adjust Font Size — Increase or decrease text size for comfortable reading
Change Font Family — Switch between Sans-serif, Serif, and Monospace typefaces

All preferences are automatically saved to your browser and persist between sessions.

What You Get Out of the Box

Every feature listed below is already built and functional:

✅ 10 Interactive Widgets — Quiz, Flashcard, Callout, Tabs, Accordion, Timeline, ImageCompare, AudioPlayer, DefinitionTooltip, Highlight
✅ Premium Reader UI — Dark/light theme, glassmorphism panels, gradient accents
✅ Reading Progress — Scroll-tracking gradient bar at the top of every page
✅ Font Controls — Size, family, and spacing adjustable from the floating panel
✅ Chapter Navigation — Previous/Next chapter buttons with keyboard support
✅ Reading Analytics — Word count and estimated reading time per chapter
✅ EPUB Export — One-click static export for Amazon KDP and Google Play Books
✅ Responsive Design — Works perfectly on desktop, tablet, and mobile
✅ Zero Cost — Every dependency is MIT-licensed, free, and commercially safe