Vista previa técnicaDanos tu opinión
Livemark
LivemarkGenerador de sitios estáticos

Introducción

Actualizado el 12 nov 2026

Livemark convierte Markdown simple en un sitio de documentación rápido y moderno. Apúntalo a una carpeta de archivos .md y te da un sitio React + Vite desplegable con búsqueda, resaltado de sintaxis, secciones de blog y registro de cambios, modo oscuro y una biblioteca de componentes personalizable, todo integrado.

Lo que obtienes

  • Solo escribe Markdown. El Markdown al estilo GitHub funciona de serie, con frontmatter, IDs de encabezado personalizados, notas al pie, listas de definiciones y gemoji.
  • Bloques de código preciosos. Resaltado de sintaxis con Shiki para más de 100 lenguajes, temas duales claro/oscuro, líneas resaltadas, diffs y pistas de tipos con TwoSlash.
  • Diagramas y matemáticas. Diagramas de flujo de Mermaid y ecuaciones de KaTeX, adaptados al tema y sin configuración.
  • Elementos enriquecidos. Avisos, pestañas, árboles de archivos, tarjetas, columnas, insignias, pestañas de paquetes (npm/pnpm/yarn/bun), contenido incrustado (YouTube, SoundCloud) y más, todo como directivas de Markdown o componentes MDX.
  • Secciones. Soporte de primera clase para documentación, blog (con etiquetas + RSS) y registro de cambios (un CHANGELOG.md local o las releases de GitHub).
  • Búsqueda. Búsqueda de texto completo con Orama, con las coincidencias resaltadas en la página a la que llegas, atajos de teclado y una tabla de contenidos inteligente.
  • Personalizable con temas. Tailwind v4, primitivas al estilo shadcn, modo oscuro y sobrescrituras por archivo mediante una carpeta .livemark/.
  • Construido sobre TanStack Start. SSR, prerenderizado, sitemap y enrutado gratis.

Inicio rápido

Necesitas Node.js 24+ y un gestor de paquetes (pnpm, npm, yarn o bun).

Instalación

npm install livemark

Configuración

Crea livemark.config.ts en la raíz de tu proyecto:

livemark.config.ts
import { defineConfig } from "livemark"

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

Añade contenido

docs/
docs/
├── getting-started.md
└── usage.md

Cada archivo .md admite frontmatter:

docs/getting-started.md
---
title: Getting Started
description: Set up the project in five minutes.
icon: rocket
order: 1
---

# Getting Started

Welcome!

Ejecuta

npx livemark start    # dev server with HMR at http://localhost:8000 (--host: also on the LAN, --open: in the browser)
npx livemark build    # production build to .livemark/build/
npx livemark preview  # serve the production build locally
npx livemark clear    # wipe the generated .livemark/.serve/, .build/ and .cache/ (stop the dev server first)

Ese es todo el ciclo. Añade .livemark/build/ a tu .gitignore.

Estructura del proyecto

Un sitio Livemark típico:

my-project/
my-project/
├── livemark.config.ts   # configuration
├── docs/                # markdown content
├── blog/                # blog posts (optional)
├── CHANGELOG.md         # changelog source (optional)
└── .livemark/           # overrides + build cache (generated)

Todo lo que pongas en .livemark/components/, .livemark/elements/ o .livemark/styles/ sustituye al valor por defecto de Livemark con la misma ruta, así que puedes personalizar componentes, primitivas y CSS base sin hacer un fork del paquete. Ejecuta npx livemark escape <path> para copiar un archivo por defecto a .livemark/, listo para editar.

Personalización

Livemark está pensado para verse genial sin configuración y no estorbarte cuando necesitas más. Personalizaciones habituales:

  • Metadatos del sitio: título, descripción, favicon, logo. Consulta la guía de metadatos del sitio.
  • Secciones: divide el contenido en Docs / Blog / Changelog, cada una con su propio prefijo de URL. Consulta Secciones de artículos.
  • Enlaces externos: enlaces en la cabecera y la barra lateral a cualquier sitio. Consulta Enlaces externos.
  • Temas de sintaxis: un tema de Shiki para claro y otro para oscuro. Consulta Temas de sintaxis.
  • Parches de artículos: sobrescribe el frontmatter de un archivo Markdown desde livemark.config.ts sin tocar el archivo. Consulta Parches de artículos.
  • Escape: sustituye cualquier componente u hoja de estilos integrados desde tu proyecto. Consulta Escape.
  • Rutas personalizadas: coloca un archivo .tsx en .livemark/routes/ para añadir una página totalmente personalizada. Consulta Rutas personalizadas.

Documentación

La documentación completa está en livemark.dev:

Recursos

Licencia

MIT; consulta LICENSE.md.

Hecho con ❤ y Livemark