Livemark, generador de sitios Markdown sin límites

Introducción

Livemark es un generador de sitios Markdown. Apúntalo a los archivos Markdown de tu proyecto y te da un sitio de documentación rápido, con búsqueda, resaltado de sintaxis, diagramas y fórmulas, modo oscuro y secciones de documentación, blog y changelog integradas. Se ve bien sin ninguna configuración. Cuando necesitas más, nada está cerrado: cualquier componente, estilo o ruta se puede reemplazar con tu propio código de React, Tailwind y TanStack Start, sin hacer un fork del paquete.

Por qué otra herramienta de documentación

Las herramientas de documentación suelen quedarse en uno de dos extremos. Unas son rápidas de empezar y difíciles de adaptar: recibes el tema y, el día que necesitas una página que el tema no había previsto, acabas peleando con él. Otras son frameworks que montas tú mismo, así que mantienes una aplicación antes de haber escrito un párrafo.

Livemark empieza en el primer extremo y te deja caminar hacia el segundo, archivo a archivo. Un proyecto nuevo es un archivo de configuración y una carpeta de Markdown. Más adelante, livemark escape copia cualquier componente, hoja de estilos o ruta integrados a una carpeta .livemark/, donde tu copia tiene prioridad sobre la predeterminada. Solo eres dueño de los archivos que cambiaste, y el resto se sigue actualizando con el paquete.

Qué incluye

• Solo escribe Markdown — Markdown al estilo de GitHub con frontmatter, notas al pie, inclusiones e IDs de encabezado personalizados; MDX está ahí cuando una página necesita un componente
• Páginas desde cualquier lugar — los globs include y exclude eligen los archivos, así que la documentación vive junto al código, y un CONTRIBUTING.md o un CHANGELOG.md que ya mantienes pasa a formar parte del sitio
• Bloques de código — resaltado con Shiki en un tema claro y otro oscuro a la vez, con títulos, resaltado de líneas y de palabras, diffs, líneas enfocadas y pistas de tipos TwoSlash
• Diagramas y fórmulas — diagramas Mermaid y ecuaciones LaTeX que siguen el tema
• Elementos enriquecidos — avisos, pestañas, pasos, tarjetas, insignias, botones, árboles de archivos, columnas y pestañas de gestores de paquetes, como directivas de Markdown o componentes MDX
• Documentación, blog y changelog — secciones con su propia navegación: un blog con etiquetas y feed RSS, y un changelog generado a partir de un CHANGELOG.md o de las releases de GitHub
• Búsqueda — búsqueda de texto completo que se ejecuta en el navegador, con las coincidencias resaltadas en la página a la que llegas
• Multilingüe — traducciones junto a sus originales, un selector de idioma y una interfaz traducida
• Personalizable — tokens de Tailwind v4 para el tema, y cada componente, estilo y ruta se puede extraer y reemplazar archivo a archivo
• Hecho para agentes — cada build publica un gemelo en Markdown de cada página, llms.txt y tus agent skills, y todos los comandos hablan JSON
• Construido sobre TanStack Start — páginas prerrenderizadas, un sitemap y enrutado en el cliente, en un build estático que cualquier hosting puede servir

Un sitio

Un sitio es un archivo de configuración. Define el título y dice dónde están las páginas:

import { defineConfig } from "livemark"

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

Una página es un archivo Markdown cuyo frontmatter lleva el título, la descripción y el orden:

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

# Getting Started

Welcome!

Cómo probarlo

Livemark necesita Node.js 24 o posterior y se instala desde npm:

npm install livemark

Después, el ciclo completo son cuatro comandos:

npx livemark start    # servidor de desarrollo con HMR en http://localhost:8000
npx livemark build    # build de producción en .livemark/build/
npx livemark preview  # sirve el build de producción en local
npx livemark clear    # elimina los archivos generados

El build es una carpeta de archivos estáticos. La documentación tiene guías para Cloudflare, GitHub Pages, Vercel, Netlify y cualquier otro hosting estático.

En tu propia aplicación

El pipeline de Markdown de Livemark y sus componentes también se publican por separado, como @livemark/vite. Cualquier aplicación de React construida con Vite puede importar un archivo .md y renderizarlo con los mismos avisos, pestañas y bloques de código, y una colección lista una carpeta de artículos sin cargar sus cuerpos. Este blog se renderiza con él.

Agent skills

Livemark incluye cinco Agent Skills que enseñan a agentes de programación como Claude Code, Cursor y Codex cómo funciona un proyecto: escribir artículos, las opciones de configuración, personalizar la interfaz, diseñar una landing page y desplegar. Una vez instaladas, no tienes que explicar nada de eso en el prompt.

Qué sigue

Livemark es open source bajo la licencia MIT. Lleva en npm desde mayo de 2025, con más de 80 versiones publicadas, y su propia documentación en livemark.dev está hecha con él. Pruébalo, abre un issue con tus comentarios y dale una estrella en GitHub para ayudar a que el proyecto crezca — https://github.com/datisthq/livemark