Livemark, generatore di siti Markdown senza limiti

Introduzione

Livemark è un generatore di siti Markdown. Indicagli i file Markdown del tuo progetto e ti restituisce un sito di documentazione veloce, con ricerca, evidenziazione della sintassi, diagrammi e formule, tema scuro e sezioni di documentazione, blog e changelog integrate. Ha un bell'aspetto senza alcuna configurazione. Quando ti serve di più, niente è bloccato: qualsiasi componente, stile o route si può sostituire con il tuo codice React, Tailwind e TanStack Start, senza fare il fork del pacchetto.

Perché un altro strumento per la documentazione

Gli strumenti per la documentazione tendono a stare a uno di due estremi. Alcuni partono in fretta e si piegano a fatica: ricevi il tema e, il giorno in cui ti serve una pagina che il tema non aveva previsto, ti ritrovi a combatterlo. Altri sono framework che assembli da te, e così mantieni un'applicazione prima di aver scritto un paragrafo.

Livemark parte dal primo estremo e ti lascia arrivare al secondo, un file alla volta. Un nuovo progetto è un file di configurazione e una cartella di Markdown. Più avanti, livemark escape copia qualsiasi componente, foglio di stile o route integrati in una cartella .livemark/, dove la tua copia prevale su quella predefinita. Possiedi solo i file che hai modificato, e il resto continua ad aggiornarsi con il pacchetto.

Cosa ottieni

• Scrivi semplicemente Markdown — Markdown in stile GitHub con frontmatter, note a piè di pagina, inclusioni e ID dei titoli personalizzati; MDX è lì quando una pagina ha bisogno di un componente
• Pagine da qualsiasi posto — i glob include ed exclude scelgono i file, così la documentazione sta accanto al codice, e un CONTRIBUTING.md o un CHANGELOG.md che già mantieni entra a far parte del sito
• Blocchi di codice — evidenziazione con Shiki in un tema chiaro e in uno scuro insieme, con titoli, evidenziazione di righe e parole, diff, righe in primo piano e suggerimenti sui tipi TwoSlash
• Diagrammi e formule — diagrammi Mermaid ed equazioni LaTeX che seguono il tema
• Elementi ricchi — callout, schede, passaggi, card, badge, pulsanti, alberi di file, colonne e schede per i gestori di pacchetti, come direttive Markdown o componenti MDX
• Documentazione, blog e changelog — sezioni con una navigazione propria: un blog con tag e feed RSS, e un changelog generato da un CHANGELOG.md o dalle release di GitHub
• Ricerca — ricerca full-text che gira nel browser, con le corrispondenze evidenziate nella pagina su cui arrivi
• Multilingue — traduzioni accanto agli originali, un selettore della lingua e un'interfaccia tradotta
• Personalizzabile — token di Tailwind v4 per il tema, e ogni componente, stile e route si può estrarre e sostituire file per file
• Fatto per gli agenti — ogni build pubblica un gemello Markdown di ogni pagina, llms.txt e le tue agent skill, e ogni comando parla JSON
• Costruito su TanStack Start — pagine prerenderizzate, una sitemap e routing lato client, in una build statica che qualsiasi hosting può servire

Un sito

Un sito è un file di configurazione. Imposta il titolo e dice dove si trovano le pagine:

import { defineConfig } from "livemark"

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

Una pagina è un file Markdown il cui frontmatter porta titolo, descrizione e ordine:

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

# Getting Started

Welcome!

Provarlo

Livemark richiede Node.js 24 o successivo e si installa da npm:

npm install livemark

Poi l'intero ciclo sono quattro comandi:

npx livemark start    # server di sviluppo con HMR su http://localhost:8000
npx livemark build    # build di produzione in .livemark/build/
npx livemark preview  # serve la build di produzione in locale
npx livemark clear    # rimuove i file generati

La build è una cartella di file statici. La documentazione ha guide per Cloudflare, GitHub Pages, Vercel, Netlify e qualsiasi altro hosting statico.

Nella tua applicazione

La pipeline Markdown di Livemark e i suoi componenti sono distribuiti anche separatamente, come @livemark/vite. Qualsiasi applicazione React costruita con Vite può importare un file .md e renderizzarlo con gli stessi callout, schede e blocchi di codice, e una collezione elenca una cartella di articoli senza caricarne il contenuto. Questo blog è renderizzato con esso.

Agent skill

Livemark include cinque Agent Skills che insegnano ad agenti di programmazione come Claude Code, Cursor e Codex come funziona un progetto: scrivere gli articoli, le opzioni di configurazione, personalizzare l'interfaccia, progettare una landing page e fare il deploy. Una volta installate, non devi spiegare nulla di tutto questo nel prompt.

Prossimi passi

Livemark è open source, con licenza MIT. È su npm da maggio 2025, con più di 80 versioni pubblicate, e la sua documentazione su livemark.dev è costruita con Livemark stesso. Provalo, apri una issue con il tuo feedback e metti una stella su GitHub per aiutare il progetto a crescere — https://github.com/datisthq/livemark