Escapar para sobrescribir componentes

Actualizado el 12 nov 2026

Livemark incluye una biblioteca de componentes React, primitivas al estilo shadcn y una hoja de estilos base. Cada archivo se puede sobrescribir colocando un archivo con el mismo nombre en .livemark/:

Una directiva de Markdown renderiza el componente que lleva su nombre: :::card es components/Card.tsx, ::video es components/Video.tsx y un grupo de tarjetas es components/Cards.tsx. Los avisos note, tip, info, warning y danger renderizan todos components/Callout.tsx.

Las rutas source/ están dentro de node_modules/livemark/, o de node_modules/@livemark/markdown/ para los componentes, elementos y estilos que renderizan Markdown; livemark escape --list muestra ambos. Los archivos de .livemark/public/ se añaden a los recursos estáticos del sitio y se sirven desde su raíz.

No hace falta cambiar ningún import. El resto de Livemark detecta automáticamente el archivo sobrescrito.

El comando livemark escape

Buscar y copiar un archivo por defecto para sobrescribirlo está automatizado:

# Pick files from a searchable list:
livemark escape

# Print every overridable file:
livemark escape --list

# Copy specific defaults into .livemark/:
livemark escape components/Footer.tsx elements/button.tsx

En una terminal, livemark escape abre un selector: escribe para filtrar, Tab para seleccionar, Enter para copiar. Los archivos que ya sobrescribes se muestran, pero no se pueden elegir. Fuera de una terminal (una tubería, CI) imprime la lista, igual que --list.

livemark escape se niega a sobrescribir un archivo existente. Borra primero tu versión si quieres empezar de cero.

Borrar una sobrescritura restaura el archivo por defecto: al instante mientras se ejecuta el servidor de desarrollo, o si no, en el siguiente start o build.

Ejemplo: pie de página personalizado

livemark escape components/Footer.tsx

Después edita .livemark/components/Footer.tsx:

export function Footer() {
  return (
    <p className="mt-12 text-center text-sm text-muted-foreground">
      Built by my team · 2026
    </p>
  )
}

Guarda: el servidor de desarrollo lo detecta de inmediato.

Ejemplo: cambiar el estilo de los botones

livemark escape elements/button.tsx

Edita la lista de clases de cva en .livemark/elements/button.tsx para cambiar el estilo de los botones de forma global. Como todos los componentes que incluye Livemark importan su Button a través del sistema de sobrescritura, tu variante se aplica en todas partes.

Ejemplo: ajustar un token

livemark escape styles/general.css

Edita el bloque :root de .livemark/styles/general.css para cambiar la marca:

:root {
  --primary: oklch(0.55 0.24 27); /* red */
}

Importar otros módulos de Livemark desde una sobrescritura

Dentro de una sobrescritura, importa otros módulos de Livemark desde los exports de subruta livemark/<subdir>/*:

import { cn } from "cn"
import { Button } from "livemark/elements/button"

Esas rutas se resuelven durante la compilación y pasan por la misma búsqueda de sobrescrituras: si también has sobrescrito button, tu versión gana ahí también.

Comprobación de tipos de las sobrescrituras

Un archivo escapado conserva los imports relativos del archivo por defecto del que se copió (../hooks/site.ts). Estos se resuelven dentro del montaje que Livemark genera para start y build, no junto a .livemark/, así que el tsc --noEmit de tu propio proyecto no puede comprobar un archivo escapado: deja .livemark/ fuera de su programa. Lo que verifica una sobrescritura es livemark build: la empaqueta con el resto de Livemark y falla cuando un import no se resuelve.

Un archivo que escribas tú mismo y que solo importe desde los exports livemark/<subdir>/* sí se puede comprobar, incluido el módulo livemark:virtual del que sale la configuración del sitio. Sus tipos se cargan con el paquete livemark: cualquier programa que incluya livemark.config.ts ya los tiene. Un programa que no lo incluya añade una línea a un archivo .d.ts:

/// <reference types="livemark/env" />

No declares livemark:virtual por tu cuenta: una declaración escrita a mano se desvía del tipo real de la configuración.

Lo que no puedes sobrescribir así

• Páginas nuevas: son rutas personalizadas, que se añaden en la misma carpeta .livemark/routes/.
• Código de servidor (actions/, commands/): no se puede sobrescribir; haz un fork del repositorio si necesitas cambiarlo.
• Esquema de configuración: la forma de livemark.config.ts es fija.

Ver también

• Temas de sintaxis: el ajuste más ligero si solo quieres cambiar los colores del código.
• Rutas personalizadas: crear páginas nuevas (en lugar de reemplazar las existentes).