Livemark, o gerador de sites Markdown sem limites

Introdução

O Livemark é um gerador de sites Markdown. Aponte-o para os ficheiros Markdown do seu projeto e ele devolve um site de documentação rápido, com pesquisa, realce de sintaxe, diagramas e matemática, modo escuro e secções de documentação, blogue e changelog já incluídas. Fica com bom aspeto sem qualquer configuração. Quando precisar de mais, nada está fechado: qualquer componente, estilo ou rota pode ser substituído pelo seu próprio código React, Tailwind e TanStack Start, sem fazer fork do pacote.

Porquê mais uma ferramenta de documentação

As ferramentas de documentação costumam ficar num de dois extremos. Umas são rápidas de começar e difíceis de moldar: recebe o tema e, no dia em que precisar de uma página que o tema não previu, passa a lutar contra ele. Outras são frameworks que tem de montar por si, e por isso mantém uma aplicação antes de ter escrito um parágrafo.

O Livemark começa no primeiro extremo e deixa-o caminhar até ao segundo, um ficheiro de cada vez. Um projeto novo é um ficheiro de configuração e uma pasta de Markdown. Mais tarde, livemark escape copia qualquer componente, folha de estilos ou rota de origem para uma pasta .livemark/, onde a sua cópia se sobrepõe à predefinição. Só é dono dos ficheiros que alterou, e o resto continua a atualizar-se com o pacote.

O que recebe

• Basta escrever Markdown — Markdown ao estilo do GitHub com frontmatter, notas de rodapé, inclusões e IDs de títulos personalizados; o MDX está lá quando uma página precisa de um componente
• Páginas de qualquer lado — os globs include e exclude escolhem os ficheiros, por isso a documentação fica ao lado do código, e um CONTRIBUTING.md ou um CHANGELOG.md que já mantém passa a fazer parte do site
• Blocos de código — realce com Shiki num tema claro e num escuro em simultâneo, com títulos, destaque de linhas e de palavras, diffs, linhas em foco e dicas de tipos TwoSlash
• Diagramas e matemática — diagramas Mermaid e equações LaTeX que acompanham o tema
• Elementos ricos — avisos, separadores, passos, cartões, emblemas, botões, árvores de ficheiros, colunas e separadores de gestores de pacotes, como diretivas Markdown ou componentes MDX
• Documentação, blogue e changelog — secções com navegação própria: um blogue com etiquetas e feed RSS, e um changelog gerado a partir de um CHANGELOG.md ou das releases do GitHub
• Pesquisa — pesquisa de texto integral que corre no browser, com as correspondências destacadas na página a que chega
• Multilingue — traduções ao lado dos originais, um seletor de idioma e uma interface traduzida
• Personalizável — tokens do Tailwind v4 para o tema, e cada componente, estilo e rota pode ser extraído e substituído ficheiro a ficheiro
• Feito para agentes — cada build publica um gémeo em Markdown de cada página, o llms.txt e as suas agent skills, e todos os comandos falam JSON
• Assente em TanStack Start — páginas pré-renderizadas, um sitemap e navegação no cliente, num build estático que qualquer alojamento serve

Um site

Um site é um ficheiro de configuração. Define o título e diz onde estão as páginas:

import { defineConfig } from "livemark"

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

Uma página é um ficheiro Markdown cujo frontmatter traz o título, a descrição e a ordem:

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

# Getting Started

Welcome!

Experimentar

O Livemark precisa do Node.js 24 ou mais recente e instala-se a partir do npm:

npm install livemark

Depois, o ciclo completo são quatro comandos:

npx livemark start    # servidor de desenvolvimento com HMR em http://localhost:8000
npx livemark build    # build de produção em .livemark/build/
npx livemark preview  # serve o build de produção localmente
npx livemark clear    # remove os ficheiros gerados

O build é uma pasta de ficheiros estáticos. A documentação tem guias para Cloudflare, GitHub Pages, Vercel, Netlify e qualquer outro alojamento estático.

Na sua própria aplicação

O pipeline de Markdown do Livemark e os seus componentes também são distribuídos em separado, como @livemark/vite. Qualquer aplicação React construída com Vite pode importar um ficheiro .md e renderizá-lo com os mesmos avisos, separadores e blocos de código, e uma coleção lista uma pasta de artigos sem carregar os respetivos corpos. Este blogue é renderizado com ele.

Agent skills

O Livemark inclui cinco Agent Skills que ensinam agentes de programação como o Claude Code, o Cursor e o Codex a trabalhar num projeto: escrever artigos, as opções de configuração, personalizar a interface, desenhar uma landing page e publicar. Uma vez instaladas, não precisa de explicar nada disso no prompt.

O que se segue

O Livemark é open source, sob a licença MIT. Está no npm desde maio de 2025, com mais de 80 versões publicadas, e a sua própria documentação em livemark.dev é feita com ele. Experimente-o, abra uma issue com o seu feedback e dê-lhe uma estrela no GitHub para ajudar o projeto a crescer — https://github.com/datisthq/livemark