Zeitstrahl erstellen: Reicht dafür auch Open Source?

Zeitstrahl erstellen: Die eigene Empfehlung dazu ist im Beitrag von 2023 auf Canva-Vorlagen und das Elementor-Plugin gefallen, zwei kommerzielle Werkzeuge ohne echten Open-Source-Anspruch. Eine lizenzkostenfreie Alternative findet sich auf der ersten Trefferseite meist nicht.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

TimelineJS vom Knight Lab der Northwestern University schließt genau diese Lücke. Die Bibliothek steht unter der Mozilla Public License 2.0, lässt sich kostenlos einsetzen und komplett auf einem eigenen Server betreiben.

Zeitstrahl erstellen mit echtem Open Source: TimelineJS vom Knight Lab

Die MPL-2.0-Lizenz erlaubt Nutzung, Vervielfältigung, Veränderung und Weitergabe ohne Rückfrage und ohne Gebühr, das bestätigt die offizielle Lizenzseite des Projekts. Eigene Änderungen am Code bleiben erlaubt, bei öffentlichem Einsatz einer geänderten Version muss der geänderte Quelltext offengelegt werden, alles andere darunter bleibt frei nutzbar.

Der Quellcode liegt komplett offen auf GitHub, ein Vendor-Lock-in entsteht dadurch nicht. Ähnlich hat es Wordgard vorgemacht: ein Editor, der komplett im Browser läuft und ohne Cloud-Zwang eines einzelnen Anbieters auskommt. Genau dieses Prinzip fehlt bei Canva und Elementor, beide bleiben an ein zahlungspflichtiges Konto gebunden.

So entsteht ein Zeitstrahl ganz ohne Code

Für Redakteure ohne Codezugriff reicht der Google-Sheet-Weg völlig aus, eine Installation ist dafür nicht nötig.

1. Die TimelineJS-Vorlage per „Datei → Kopie erstellen“ ins eigene Google-Drive-Konto übernehmen.
2. Datum, Überschrift, Text und optional eine Medien-URL (Bild, YouTube, Tweet) pro Zeile eintragen.
3. Unter „Datei“ → „Im Web veröffentlichen“ bestätigen und die URL aus der Adresszeile kopieren.
4. Die URL beim Knight-Lab-Generator einfügen und den fertigen Embed-Code übernehmen.

Und was bleibt eigentlich bestehen, sobald der verknüpfte Google-Account einmal gelöscht wird? Beim selbst gehosteten Weg bleibt der komplette Code erhalten, beim Page-Builder oft nur eine Exportfunktion, die vorher kaum jemand getestet hat.

Der Entwicklerweg: TimelineJS selbst hosten

Für den eigenen Server genügen zwei Dateien und ein JSON-Objekt anstelle des Google Sheets:

<link rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
<script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>

<div id="timeline-embed" style="width: 100%; height: 600px"></div>
<script>
  const timelineData = {
    events: [
      {
        start_date: { year: "2026", month: "7", day: "1" },
        text: { headline: "Meilenstein 1", text: "<p>Kurzbeschreibung.</p>" }
      }
    ]
  };
  window.timeline = new TL.Timeline('timeline-embed', timelineData);
</script>

Statt der CDN-Variante lässt sich das Paket auch komplett lokal einbinden: npm install @knight-lab/timelinejs, danach CSS und JS aus dem node_modules-Ordner laden. Damit entstehen beim Seitenaufruf keine Anfragen an Google oder das Knight Lab, ein Vorteil für datenschutzbewusste Projekte. Das JSON-Format lässt sich zudem ohne größeren Aufwand aus einer PHP-Anwendung heraus dynamisch erzeugen, etwa direkt aus einer Datenbanktabelle mit Ereignissen.

Für eine einmalige Präsentation reicht der Google-Sheet-Weg völlig aus, schneller lässt sich kaum ein Ergebnis vorzeigen. Für die dauerhafte Einbindung in eine bestehende WordPress- oder PHP-Anwendung ist die selbst gehostete Variante die robustere Wahl, weil die Abhängigkeit von einem fremden Google-Konto komplett entfällt. Für die optische Feinjustierung liefert der Beitrag zu CSS-Easing zusätzliche Ansatzpunkte, etwa für weichere Übergänge beim Durchklicken der Slides.

Die alte Empfehlung aus dem ursprünglichen Beitrag bleibt damit nicht falsch, aber unvollständig. Canva und Elementor lösen die Aufgabe ebenfalls, kosten dabei aber ein laufendes Abonnement und binden das Ergebnis an die eigene Plattform. TimelineJS bleibt kostenlos, offen und portabel, drei Eigenschaften, die sich in einer einzigen Zeile Lizenztext zusammenfassen lassen: MPL-2.0.