Livemark, der Markdown-Site-Generator ohne Grenzen

Einführung

Livemark ist ein Markdown-Site-Generator. Zeigen Sie ihm die Markdown-Dateien in Ihrem Projekt, und Sie erhalten eine schnelle Dokumentationsseite mit Suche, Syntaxhervorhebung, Diagrammen und Formeln, Dark Mode sowie eingebauten Bereichen für Doku, Blog und Changelog. Ohne Konfiguration sieht sie bereits gut aus. Wenn Sie mehr brauchen, ist nichts verschlossen: Jede Komponente, jeder Stil und jede Route lässt sich durch eigenen React-, Tailwind- und TanStack-Start-Code ersetzen, ohne das Paket zu forken.

Warum noch ein Doku-Werkzeug

Doku-Werkzeuge stehen meist an einem von zwei Enden. Die einen sind schnell gestartet und schwer zu verbiegen: Sie bekommen das Theme, und an dem Tag, an dem Sie eine Seite brauchen, die das Theme nicht vorgesehen hat, kämpfen Sie dagegen an. Die anderen sind Frameworks, die Sie selbst zusammenbauen, sodass Sie eine App pflegen, bevor Sie einen Absatz geschrieben haben.

Livemark beginnt am ersten Ende und lässt Sie Datei für Datei zum zweiten gehen. Ein neues Projekt ist eine Konfigurationsdatei und ein Ordner mit Markdown. Später kopiert livemark escape jede eingebaute Komponente, jedes Stylesheet und jede Route in einen Ordner .livemark/, wo Ihre Kopie den Standard überlagert. Ihnen gehören nur die Dateien, die Sie geändert haben, und der Rest wird weiter mit dem Paket aktualisiert.

Was Sie bekommen

• Einfach Markdown schreiben — GitHub-Flavored Markdown mit Frontmatter, Fußnoten, Includes und eigenen Überschriften-IDs; MDX steht bereit, wenn eine Seite eine Komponente braucht
• Seiten von überall — die Globs include und exclude wählen die Dateien aus, sodass die Doku neben dem Code liegt und eine CONTRIBUTING.md oder eine CHANGELOG.md, die Sie ohnehin pflegen, Teil der Website wird
• Codeblöcke — Shiki-Hervorhebung in einem hellen und einem dunklen Theme zugleich, mit Titeln, Zeilen- und Worthervorhebung, Diffs, Fokuszeilen und TwoSlash-Typhinweisen
• Diagramme und Formeln — Mermaid-Diagramme und LaTeX-Formeln, die dem Theme folgen
• Reichhaltige Elemente — Callouts, Tabs, Schritte, Karten, Badges, Buttons, Dateibäume, Spalten und Paketmanager-Tabs, als Markdown-Direktiven oder MDX-Komponenten
• Doku, Blog und Changelog — Bereiche mit eigener Navigation: ein Blog mit Tags und RSS-Feed und ein Changelog aus einer CHANGELOG.md oder aus GitHub-Releases
• Suche — Volltextsuche, die im Browser läuft, mit hervorgehobenen Treffern auf der Seite, auf der Sie landen
• Mehrsprachig — Übersetzungen neben ihren Originalen, eine Sprachauswahl und eine übersetzte Oberfläche
• Anpassbar — Tailwind-v4-Tokens für das Theme, und jede Komponente, jeder Stil und jede Route lässt sich Datei für Datei herauslösen und ersetzen
• Für Agenten gemacht — jeder Build veröffentlicht einen Markdown-Zwilling jeder Seite, llms.txt und Ihre Agent Skills, und jeder Befehl spricht JSON
• Auf TanStack Start gebaut — vorgerenderte Seiten, eine Sitemap und clientseitiges Routing, in einem statischen Build, den jeder Host ausliefern kann

Eine Website

Eine Website ist eine Konfigurationsdatei. Sie legt den Titel fest und sagt, wo die Seiten liegen:

import { defineConfig } from "livemark"

export default defineConfig({
  title: "My docs",
  description: "Documentation for my project",
  include: ["docs/**/*.md"],
})

Eine Seite ist eine Markdown-Datei, deren Frontmatter Titel, Beschreibung und Reihenfolge trägt:

---
title: Getting Started
description: Set up the project in five minutes.
order: 1
---

# Getting Started

Welcome!

Ausprobieren

Livemark braucht Node.js 24 oder neuer und wird über npm installiert:

npm install livemark

Danach besteht der ganze Ablauf aus vier Befehlen:

npx livemark start    # Entwicklungsserver mit HMR unter http://localhost:8000
npx livemark build    # Produktions-Build nach .livemark/build/
npx livemark preview  # den Produktions-Build lokal ausliefern
npx livemark clear    # die generierten Dateien entfernen

Der Build ist ein Ordner mit statischen Dateien. Die Doku enthält Anleitungen für Cloudflare, GitHub Pages, Vercel, Netlify und jeden anderen statischen Host.

In Ihrer eigenen App

Die Markdown-Pipeline von Livemark und ihre Komponenten gibt es auch einzeln, als @livemark/vite. Jede mit Vite gebaute React-App kann eine .md-Datei importieren und mit denselben Callouts, Tabs und Codeblöcken rendern, und eine Collection listet einen Ordner mit Beiträgen auf, ohne deren Inhalte zu laden. Dieser Blog wird damit gerendert.

Agent Skills

Livemark liefert fünf Agent Skills mit, die Coding-Agenten wie Claude Code, Cursor und Codex beibringen, wie ein Projekt funktioniert: Artikel schreiben, die Konfigurationsoptionen, die Oberfläche anpassen, eine Landingpage gestalten und deployen. Sind sie installiert, müssen Sie nichts davon im Prompt erklären.

Wie es weitergeht

Livemark ist Open Source unter der MIT-Lizenz. Es ist seit Mai 2025 auf npm, mit mehr als 80 Releases, und seine eigene Doku auf livemark.dev ist damit gebaut. Probieren Sie es aus, eröffnen Sie ein Issue mit Ihrem Feedback und geben Sie dem Projekt einen Stern auf GitHub, damit es wächst — https://github.com/datisthq/livemark