TinaCMS

Qué es

TinaCMS es un CMS headless open source desarrollado por Tina (tina.io) que guarda el contenido como archivos Markdown, MDX, JSON o YAML directamente en tu repositorio de Git. Sobre esos archivos añade un editor visual con vista previa en vivo, pensado para que personas no técnicas editen el contenido sin salir del flujo de trabajo basado en Git. Está escrito principalmente en TypeScript y se apoya en React, GraphQL y, frecuentemente, en frameworks como Next.js o Astro. El código está publicado bajo licencia Apache-2.0.

Para qué sirve

• Dar a editores no técnicos una interfaz visual para modificar el contenido de un sitio sin tocar archivos a mano.
• Mantener el contenido versionado en Git como Markdown o MDX, portable y libre de bases de datos propietarias.
• Consultar el contenido mediante una API GraphQL generada a partir de tu esquema, con referencias entre documentos.
• Integrar la edición en sitios construidos con Next.js, Astro, Hugo o Jekyll.

Cuándo usarlo

Encaja bien cuando ya tienes (o quieres) un sitio estático con el contenido en Markdown dentro del repo y necesitas que personas no técnicas lo editen sin perder el control sobre el código y el versionado en Git. Si prefieres un CMS con base de datos y panel totalmente gestionado, alternativas como Strapi, Sanity o Contentful pueden ajustarse mejor; frente a ellas, la ventaja de TinaCMS es que el contenido sigue siendo Git-native.

Ejemplo

Instalación e inicialización en un proyecto existente:

npx @tinacms/cli@latest init

Esto crea una carpeta tina/ con la configuración. Un esquema mínimo en tina/config.ts define una colección de posts en Markdown:

import { defineConfig } from "tinacms";

export default defineConfig({
  branch: "main",
  schema: {
    collections: [
      {
        name: "post",
        label: "Posts",
        path: "content/posts",
        format: "md",
        fields: [
          { type: "string", name: "title", label: "Título" },
          { type: "rich-text", name: "body", label: "Cuerpo", isBody: true },
        ],
      },
    ],
  },
});

Después se arranca el sitio junto al editor con:

npx tinacms dev -c "next dev"

El panel de edición visual queda disponible en la ruta /admin.

Puntos clave

• Contenido Git-native: los cambios se guardan como archivos en el repositorio, no en una base de datos externa.
• Editor visual con vista previa en vivo sobre Markdown y MDX, para usuarios no técnicos.
• API GraphQL generada desde tu esquema, con soporte para referencias entre documentos.
• Modelo dual: núcleo open source autoalojable y servicio gestionado TinaCloud opcional.

Ten en cuenta

El CMS es gratuito y autoalojable, pero la autenticación, el alojamiento del backend y la colaboración en equipo se ofrecen a través de TinaCloud, cuyo plan gratuito está limitado (2 usuarios) y cuyos planes de equipo son de pago. Para evitar TinaCloud puedes configurar un backend autogestionado, lo que añade complejidad de despliegue. Además, definir el esquema y conectar el editor requiere trabajo de desarrollo, por lo que no es una solución sin código.