Elderleaf: Interactive Textbooks

UI Demo

Image: Elderleaf main UI demo (loading)

What is Elderleaf

• An interactive textbook system for course creators, learners and software documentation
• Optimized for learning software tools, skills, concepts: i.e. memorizing steps, maximizing conceptual understanding, tracking progress
• UX:
  • Authors write lessons/tutorials/docs in MDX (markdown with React components)
  • Readers switch between Study and Test modes to learn and practice

Why Elderleaf

Here are a list of learning problems Elderleaf aims to simplfiy:

• Multimodal: Some representations of concepts (prose, diagram, video, etc.) better facilitate comprehension, i.e. a person's ability to understand that concept.
  • Text: with the ability to follow tangential topics in a graph-like exploration structure
  • Animated Diagrams: sequence diagrams, state diagrams, etc.
  • Executable Code Blocks
• Active Recall in Test Mode: Ever read something, then close the book and try to recall it from memory? Or read a tutorial, and try to 'build it yourself'? This boosts true learning and retention.
  • Learning by doing: Re-create the text, diagrams, and code yourself and get AI feedback until you get it right
  • View progress of how many you got correct/wrong, how you're improving etc.
  • Long-term memory: Revision schedule so you'll never forget, using a scientific Spaced Repetition schedule
• Hands-on
• Personalized tutoring with AI
  • Hints so you don't get stuck with a problem for longer than the optimal number of attempts
  • Feedback on your wrong answers that teach you more than if you're right or wrong
  • A mindmap that tracks your understanding against the expected
• Personalizing learning plans with AI
  • Learn only what you need to know with personalized learning paths generated for your side project or unique learning goals
  • Return later to complete topics and subjects by using progress tracker to see what you didn't touch

Features

• Study Mode: Read through lessons with full content visible
• Test Mode: Fill-in-the-blank exercises for text, code, and diagrams
• Progress Tracking: Per-item attempt history stored in localStorage
• Progress Dashboard: Visualize completion rates and review past attempts
• Syntax Highlighting: Code blocks with Prism
• Mermaid Diagrams: Interactive sequence, block, and state diagrams

Tech Stack

• Framework: Next.js 15 (App Router)
• UI: React 18 + styled-components
• Content: MDX with custom components
• Diagrams: Mermaid JS
• Code Display: prism-react-renderer
• Storage: Browser localStorage

Getting Started

# Install dependencies
npm install

# Run development server
npm run dev

Open http://localhost:3000 to view the app.

Project Structure

interactive-textbooks/
├── app/                    # Next.js app router pages
│   ├── lesson/[slug]/      # Dynamic lesson pages
│   └── progress/[slug]/    # Progress dashboard pages
├── components/
│   ├── layout/             # Header, LessonLayout, ModeToggle
│   ├── progress/           # ProgressDashboard, charts
│   └── textbook/           # Recipe, Item, CodeBlank, DiagramBlank
├── content/lessons/        # MDX lesson files
├── contexts/               # React contexts (Mode, Progress, Textbook)
├── lib/                    # Utilities
└── types/                  # TypeScript types

Writing Lessons

Create MDX files in content/lessons/:

import { Recipe, Item, CodeBlank, DiagramBlank } from '@/components/textbook'

# Lesson Title

<Recipe id="topic" title="Topic Name">
  <Item id="concept">
    Plain text becomes a fill-in-blank in test mode.
  </Item>

  <Item id="code-example">
    <CodeBlank language="python" id="func">
{`def example():
    return "hello"`}
    </CodeBlank>
  </Item>

  <Item id="diagram">
    <DiagramBlank type="sequence" id="flow">
      {[
        `sequenceDiagram\n  A->>B: Step 1`,
        `sequenceDiagram\n  A->>B: Step 1\n  B->>C: Step 2`
      ]}
    </DiagramBlank>
  </Item>
</Recipe>

Available Lessons

• Getting Started: Tutorial on using the system
• Introduction to LLMs: AI fundamentals with interactive examples
• Python Basics: Programming fundamentals
• System Design Basics: Architecture concepts with diagrams

Development Status

Phases 1-6b complete. See docs/remaining-plan.md for upcoming work:

• Phase 7: LLM Hint Integration (Socratic tutor)
• Phase 8: LLM Grading (semantic comparison)
• Phase 9: Tangent Links (hover previews)
• Phase 10: Polish & Deploy

Documentation

• docs/context.md - Current project state
• docs/remaining-plan.md - Upcoming phases
• docs/0X-phase-*.md - Architecture Decision Records

License

Private