# glacy/syllabus-viewer architecture

> Architecture diagram of the GitHub repository glacy/syllabus-viewer, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/glacy/syllabus-viewer
- Repository: https://github.com/glacy/syllabus-viewer

## Overview

Syllabus Viewer is a browser-based course-planning viewer and editor. An instructor or learner opens the course syllabus; the app loads its default or saved data, filters sessions, and presents each week’s topics, objectives, activities, evaluations, and references. Editors can update and reorder sessions, import validated JSON, and export JSON, Excel, or standalone HTML. Theme and language preferences are also available. The main entry, context, search, card, and HTML-export paths are source-supported; some feature wiring is documented in the README but its implementation was not sampled.

Main entry points: [`src/context/EditModeContext.tsx`](https://github.com/glacy/syllabus-viewer/blob/main/src/context/EditModeContext.tsx) (Syllabus state), [`src/components/FloatingControls.tsx`](https://github.com/glacy/syllabus-viewer/blob/main/src/components/FloatingControls.tsx) (Floating controls), [`src/App.tsx`](https://github.com/glacy/syllabus-viewer/blob/main/src/App.tsx) (App orchestrator), [`src/components/WeekCard.tsx`](https://github.com/glacy/syllabus-viewer/blob/main/src/components/WeekCard.tsx) (Session cards)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Syllabus presentation"]
  node_app["App orchestrator<br/>[App.tsx]"]
  node_defaultdata["Default syllabus<br/>[planeamiento.json]"]
  node_search["Syllabus search<br/>[SearchBar.tsx]"]
  node_timeline["Filtered timeline<br/>[TimelineGrid.tsx]"]
  node_weekcard["Session cards<br/>[WeekCard.tsx]"]
  node_weeksections["Session sections<br/>[WeekObjectives.tsx]"]
  node_evaluation["Evaluation display<br/>[WeekEvaluation.tsx]"]
  node_references["Reference display<br/>[WeekReferences.tsx]"]
end

subgraph group_editing["Editing and persistence"]
  node_editcontext["Syllabus state"]
  node_browserstorage[("Browser local storage")]
end

subgraph group_tools["User tools"]
  node_importjson["JSON import"]
  node_schemas["Data validation<br/>[schemas.ts]"]
  node_exportjson["JSON export"]
  node_exportexcel["Excel export"]
  node_exporthtml["Standalone HTML export"]
  node_controls["Floating controls"]
end

subgraph group_preferences["Preferences"]
  node_language["Language context"]
  node_translations["Translation strings<br/>[translations.ts]"]
  node_theme["Theme context<br/>[ThemeContext.tsx]"]
  node_settings["Settings modal<br/>[SettingsModal.tsx]"]
end

node_visitor(("Course viewer/editor"))

node_visitor -->|"opens"| node_app
node_app -->|"provides state"| node_editcontext
node_editcontext -->|"loads fallback"| node_defaultdata
node_editcontext -->|"loads and saves"| node_browserstorage
node_app -->|"renders"| node_search
node_search -->|"updates filter"| node_app
node_app -->|"passes filtered weeks"| node_timeline
node_timeline -->|"renders sessions"| node_weekcard
node_weekcard -->|"renders objectives"| node_weeksections
node_weekcard -->|"passes evaluation"| node_evaluation
node_weekcard -->|"passes references"| node_references
node_weekcard -->|"updates sessions"| node_editcontext
node_controls -->|"dispatches import"| node_importjson
node_importjson -->|"validates data"| node_schemas
node_importjson -->|"loads syllabus"| node_editcontext
node_controls -->|"dispatches export"| node_exportjson
node_exportjson -->|"reads syllabus"| node_editcontext
node_controls -->|"dispatches export"| node_exportexcel
node_exportexcel -->|"reads syllabus"| node_editcontext
node_controls -->|"dispatches export"| node_exporthtml
node_exporthtml -->|"reads syllabus"| node_editcontext
node_app -->|"provides context"| node_language
node_language -->|"selects strings"| node_translations
node_controls -->|"uses theme"| node_theme
node_controls -->|"opens"| node_settings
node_settings -->|"updates configuration"| node_editcontext
node_theme -->|"persists preference"| node_browserstorage

click node_app "https://github.com/glacy/syllabus-viewer/blob/main/src/App.tsx"
click node_defaultdata "https://github.com/glacy/syllabus-viewer/blob/main/src/data/planeamiento.json"
click node_editcontext "https://github.com/glacy/syllabus-viewer/blob/main/src/context/EditModeContext.tsx"
click node_search "https://github.com/glacy/syllabus-viewer/blob/main/src/components/SearchBar.tsx"
click node_timeline "https://github.com/glacy/syllabus-viewer/blob/main/src/components/TimelineGrid.tsx"
click node_weekcard "https://github.com/glacy/syllabus-viewer/blob/main/src/components/WeekCard.tsx"
click node_weeksections "https://github.com/glacy/syllabus-viewer/blob/main/src/components/WeekObjectives.tsx"
click node_evaluation "https://github.com/glacy/syllabus-viewer/blob/main/src/components/WeekEvaluation.tsx"
click node_references "https://github.com/glacy/syllabus-viewer/blob/main/src/components/WeekReferences.tsx"
click node_importjson "https://github.com/glacy/syllabus-viewer/blob/main/src/components/ImportJsonButton.tsx"
click node_schemas "https://github.com/glacy/syllabus-viewer/blob/main/src/schemas.ts"
click node_exportjson "https://github.com/glacy/syllabus-viewer/blob/main/src/components/ExportJsonButton.tsx"
click node_exportexcel "https://github.com/glacy/syllabus-viewer/blob/main/src/components/ExportExcelButton.tsx"
click node_exporthtml "https://github.com/glacy/syllabus-viewer/blob/main/src/components/ExportHtmlButton.tsx"
click node_controls "https://github.com/glacy/syllabus-viewer/blob/main/src/components/FloatingControls.tsx"
click node_language "https://github.com/glacy/syllabus-viewer/blob/main/src/context/LanguageContext.tsx"
click node_translations "https://github.com/glacy/syllabus-viewer/blob/main/src/context/translations.ts"
click node_theme "https://github.com/glacy/syllabus-viewer/blob/main/src/context/ThemeContext.tsx"
click node_settings "https://github.com/glacy/syllabus-viewer/blob/main/src/components/SettingsModal.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_defaultdata,node_search,node_timeline,node_weekcard,node_weeksections,node_evaluation,node_references,node_visitor toneBlue
class node_editcontext,node_browserstorage toneAmber
class node_importjson,node_schemas,node_exportjson,node_exportexcel,node_exporthtml,node_controls toneMint
class node_language,node_translations,node_theme,node_settings toneRose
```

## Components

### Syllabus presentation

- [App orchestrator](https://github.com/glacy/syllabus-viewer/blob/main/src/App.tsx): `src/App.tsx`
- [Default syllabus](https://github.com/glacy/syllabus-viewer/blob/main/src/data/planeamiento.json): `src/data/planeamiento.json`
- [Syllabus search](https://github.com/glacy/syllabus-viewer/blob/main/src/components/SearchBar.tsx): `src/components/SearchBar.tsx`
- [Filtered timeline](https://github.com/glacy/syllabus-viewer/blob/main/src/components/TimelineGrid.tsx): `src/components/TimelineGrid.tsx`
- [Session cards](https://github.com/glacy/syllabus-viewer/blob/main/src/components/WeekCard.tsx): `src/components/WeekCard.tsx`
- [Session sections](https://github.com/glacy/syllabus-viewer/blob/main/src/components/WeekObjectives.tsx): `src/components/WeekObjectives.tsx`
- [Evaluation display](https://github.com/glacy/syllabus-viewer/blob/main/src/components/WeekEvaluation.tsx): `src/components/WeekEvaluation.tsx`
- [Reference display](https://github.com/glacy/syllabus-viewer/blob/main/src/components/WeekReferences.tsx): `src/components/WeekReferences.tsx`

### Editing and persistence

- [Syllabus state](https://github.com/glacy/syllabus-viewer/blob/main/src/context/EditModeContext.tsx): `src/context/EditModeContext.tsx`
- **Browser local storage**

### User tools

- [JSON import](https://github.com/glacy/syllabus-viewer/blob/main/src/components/ImportJsonButton.tsx): `src/components/ImportJsonButton.tsx`
- [Data validation](https://github.com/glacy/syllabus-viewer/blob/main/src/schemas.ts): `src/schemas.ts`
- [JSON export](https://github.com/glacy/syllabus-viewer/blob/main/src/components/ExportJsonButton.tsx): `src/components/ExportJsonButton.tsx`
- [Excel export](https://github.com/glacy/syllabus-viewer/blob/main/src/components/ExportExcelButton.tsx): `src/components/ExportExcelButton.tsx`
- [Standalone HTML export](https://github.com/glacy/syllabus-viewer/blob/main/src/components/ExportHtmlButton.tsx): `src/components/ExportHtmlButton.tsx`
- [Floating controls](https://github.com/glacy/syllabus-viewer/blob/main/src/components/FloatingControls.tsx): `src/components/FloatingControls.tsx`

### Preferences

- [Language context](https://github.com/glacy/syllabus-viewer/blob/main/src/context/LanguageContext.tsx): `src/context/LanguageContext.tsx`
- [Translation strings](https://github.com/glacy/syllabus-viewer/blob/main/src/context/translations.ts): `src/context/translations.ts`
- [Theme context](https://github.com/glacy/syllabus-viewer/blob/main/src/context/ThemeContext.tsx): `src/context/ThemeContext.tsx`
- [Settings modal](https://github.com/glacy/syllabus-viewer/blob/main/src/components/SettingsModal.tsx): `src/components/SettingsModal.tsx`

### Other components

- **Course viewer/editor**

## Connections

- Course viewer/editor → App orchestrator: opens
- App orchestrator → Syllabus state: provides state
- Syllabus state → Default syllabus: loads fallback
- Syllabus state → Browser local storage: loads and saves
- App orchestrator → Syllabus search: renders
- Syllabus search → App orchestrator: updates filter
- App orchestrator → Filtered timeline: passes filtered weeks
- Filtered timeline → Session cards: renders sessions
- Session cards → Session sections: renders objectives
- Session cards → Evaluation display: passes evaluation
- Session cards → Reference display: passes references
- Session cards → Syllabus state: updates sessions
- Floating controls → JSON import: dispatches import
- JSON import → Data validation: validates data
- JSON import → Syllabus state: loads syllabus
- Floating controls → JSON export: dispatches export
- JSON export → Syllabus state: reads syllabus
- Floating controls → Excel export: dispatches export
- Excel export → Syllabus state: reads syllabus
- Floating controls → Standalone HTML export: dispatches export
- Standalone HTML export → Syllabus state: reads syllabus
- App orchestrator → Language context: provides context
- Language context → Translation strings: selects strings
- Floating controls → Theme context: uses theme
- Floating controls → Settings modal: opens
- Settings modal → Syllabus state: updates configuration
- Theme context → Browser local storage: persists preference