Jaybird – Interaktive Lernumgebung für JSON

Jaybird ist eine browserbasierte, interaktive Lernumgebung zum Erlernen des JSON-Formats. Nutzer schreiben JSON im Editor, erhalten sofortiges Validierungs-Feedback und sehen auf der rechten Seite eine Live-HTML-Vorschau, die die eingegebenen JSON-Daten visuell darstellt.

---

Features

JSON-Editor mit Live-Validierung

• Syntaxhervorhebung für JSON
• Echtzeit-Validierung bei jeder Eingabe
• Verständliche Fehlermeldungen mit Zeilenangabe (z. B. „Komma fehlt in Zeile 5")
• Visuelles Feedback: grüner Rahmen bei gültigem JSON, roter Rahmen bei Fehlern

HTML-Live-Vorschau

• Rechte Seite zeigt eine HTML-Ansicht, die die JSON-Daten dynamisch rendert
• Automatische Aktualisierung bei jeder gültigen Änderung im Editor
• Darstellung als strukturierte Karten, Tabellen oder Listen – je nach JSON-Struktur

Vorgefertigte Beispiele mit steigender Komplexität

Über eine Auswahlbox können Lernende aus vorgefertigten JSON-Beispielen wählen. Diese sind nach Schwierigkeitsgrad geordnet:

Stufe	Thema	Beschreibung
1	Einfache Schlüssel-Wert-Paare	{"name": "Anna", "alter": 28}
2	Verschiedene Datentypen	Strings, Zahlen, Booleans, null
3	Arrays	Liste von Werten, z. B. Hobbys
4	Verschachteltes Objekt	Objekt innerhalb eines Objekts (z. B. Adresse)
5	Array von Objekten	Liste von Personen mit jeweiligen Eigenschaften
6	Mehrstufige Verschachtelung	Objekte → Arrays → Objekte (z. B. Firma mit Abteilungen und Mitarbeitern)
7	Komplexe reale Datenstruktur	API-Response mit Metadaten, Pagination und verschachtelten Ressourcen

---

Aufbau der Oberfläche

┌──────────────────────────────────────────────────────────┐
│  [Beispiel auswählen ▼]                                  │
├────────────────────────────┬─────────────────────────────┤
│                            │                             │
│      JSON-Editor           │      HTML-Vorschau          │
│                            │                             │
│  {                         │  ┌───────────────────┐      │
│    "name": "Anna",         │  │ Name: Anna        │      │
│    "alter": 28,            │  │ Alter: 28         │      │
│    "hobbys": [             │  │ Hobbys:           │      │
│      "Lesen",              │  │  • Lesen          │      │
│      "Schwimmen"           │  │  • Schwimmen      │      │
│    ]                       │  └───────────────────┘      │
│  }                         │                             │
│                            │                             │
├────────────────────────────┴─────────────────────────────┤
│  ✅ JSON ist gültig                                      │
└──────────────────────────────────────────────────────────┘

---

Technologie-Stack

Komponente	Technologie
Editor	CodeMirror mit JSON-Modus
Validierung	Native JSON.parse() mit benutzerdefinierter Fehlermeldung
HTML-Vorschau	Dynamisches DOM-Rendering via JavaScript
Frontend	HTML, CSS, Vanilla JavaScript (kein Framework nötig)

---

Projektstruktur

jaybird/
├── index.html          # Haupt-HTML mit Layout (Editor + Vorschau)
├── css/
│   └── style.css       # Styling für Editor, Vorschau und Statusleiste
├── js/
│   ├── editor.js       # CodeMirror-Initialisierung und Validierungslogik
│   ├── preview.js      # JSON → HTML-Rendering für die Vorschau
│   └── examples.js     # Vorgefertigte JSON-Beispiele für die Auswahlbox
└── README.md

---

Schnellstart

# Repository klonen
git clone <repo-url>
cd jaybird

# Einfach im Browser öffnen – kein Build-Schritt nötig
open index.html

Alternativ mit einem lokalen Entwicklungsserver:

npx serve .

---

Beispiel: Vorgefertigtes JSON (Stufe 6)

{
  "firma": "TechCorp",
  "gruendungsjahr": 2010,
  "abteilungen": [
    {
      "name": "Entwicklung",
      "leitung": "Dr. Müller",
      "mitarbeiter": [
        { "name": "Anna", "rolle": "Frontend" },
        { "name": "Ben", "rolle": "Backend" }
      ]
    },
    {
      "name": "Design",
      "leitung": "Frau Schmidt",
      "mitarbeiter": [
        { "name": "Clara", "rolle": "UX" }
      ]
    }
  ]
}

Die HTML-Vorschau rendert diese Daten automatisch als verschachtelte Karten mit Abteilungs- und Mitarbeiterlisten.

---

Lernziele

• Aufbau und Syntax von JSON verstehen
• Unterschied zwischen Objekten, Arrays und primitiven Datentypen erkennen
• Verschachtelung von Datenstrukturen nachvollziehen
• Typische JSON-Fehler erkennen und beheben
• Verstehen, wie JSON-Daten in HTML/Web-Anwendungen genutzt werden