Instatic + Claude Code: el CMS open source que edita páginas con IA (2026)

¿Qué es Instatic?

Instatic es un CMS visual self-hosted y open source (MIT) que combina editor visual, motor de contenido y publisher en un solo servidor Bun. Creado por el equipo detrás de Motion.page y Core Framework, su propuesta es radical: una sola herramienta para diseñar, construir, gestionar, analizar y extender tu sitio web —sin ensamblar un stack de 10 servicios diferentes.

Lo que lo hace único no es solo el editor visual. Es que las páginas que publica son HTML semántico limpio y CSS compacto, sin runtime de framework, sin div soup, sin atributos del builder. El sitio carga como un archivo static porque, la mayoría del tiempo, lo es.

El problema que resuelve

Un sitio web moderno normalmente requiere ensamblar un stack: un headless CMS, un framework, un host, un servicio de formularios, un vendor de analytics, un CDN de imágenes —cada uno con su factura, su dashboard y su outage a las 2 AM. Instatic apuesta lo contrario:

• Un servidor Bun contiene todo: canvas editor, content engine, media, auth, forms, plugins y publisher
• SQLite o Postgres como base de datos (seleccionado por DATABASE_URL)
• Self-hosted: lo corres donde quieras
• Output limpio: HTML semántico y CSS compacto, sin maquinaria del editor en la página

Stack técnico

Componente	Tecnología
Runtime	Bun (server y tooling)
Lenguaje	TypeScript everywhere
Admin app	React 19 (React Compiler on), Vite, Zustand + Mutative, CodeMirror, dnd-kit
Server	Bun.serve con router hand-written
Database	SQLite o Postgres — un DbClient interface
Validation	TypeBox en cada untyped boundary
Plugins	QuickJS-WASM sandbox, owner-granted permissions
AI	Provider-agnostic drivers over raw HTTP/SSE, no vendor SDKs
Output	Semantic HTML, compact CSS, baked static files

Características principales

🎨 Design — Canvas editor real

El editor es un canvas real, no un form con preview. Pones varios breakpoint frames side-by-side y los editas juntos. Cambias el desktop y el mobile frame reacciona en la misma vista. Flip a live mode para editar una página full-size in place.

Core Framework integrado como core system (no plugin):

• Color tokens que generan su propia shade scale. Define un brand color, obtén el set completo de tints y shades automáticamente
• Type scales fluidas y matemáticas. Una rampa que escala con el viewport
• Spacing scales para que cada página y breakpoint mantenga el mismo ritmo
• Utility-class generator que emite classes locked en un framework.css pequeño. Sin bloat, sin reglas duplicadas

Tu design system completo vive como data. Cambia un token y cada página que lo usa se actualiza.

🧱 Build — Módulos, componentes, templates, loops, forms

• Módulos: containers, text, images, buttons, video, lists, links, SVG, forms. Drag al canvas y nested como quieras
• Visual Components: piezas reutilizables con typed parameters y named slots. Un parameter puede ser string, number, boolean, color, image, URL, rich text, enum, o un slot de contenido completo. Edita el componente una vez y every instance se actualiza
• Templates: shared chrome. Un layout para todo el site, layouts separados por post type, y una 404 page que diseñas tú mismo
• Loops: repite un layout sobre una colección (posts, pages, media, o cualquier source de un plugin). Variantes alternadas para post lists, product grids, galleries
• Forms nativos: builda un form con semantic fields y las submissions van a tus propias data tables. Instatic puede leer los fields y crear la tabla matching. Sin terceros, sin embed, sin mensualidad

🗂 Manage — Content model unificado

• Un content model: pages, posts, components, custom collections y cualquier structured table viven en el mismo store (data_tables y data_rows). Sin tabla especial "pages" escondida
• Data workspace: crea custom post types y custom data tables con sus fields, trabaja las rows en grid spreadsheet-style: search, sort, filter, bulk publish, bulk export
• Content workspace: superficie focused para posts y collections, con live mode para editar dentro del diseño real del site
• Media workspace: folders y smart folders, bulk operations, usage tracking, replacement workflows, pluggable storage adapters
• Access control real: roles con 38 capabilities, token-based sessions, TOTP 2FA con secrets encrypted at rest, account lockout con backoff, step-up prompts antes de acciones peligrosas
• ⌘K: fuzzy command palette sobre todo el admin
• Drafts stay drafts: unpublished edits nunca leak a visitantes

📊 Analyze — Dashboard y audit log

• Dashboard personalizable: grid 12-column con tile widgets drag, resize, rearrange. Per-user layout. Plugins pueden ship sus propios widgets
• Audit log append-only: cada admin action escribe una row: logins, content changes, role edits, plugin lifecycle. Registro real de who did what y when
• Form data yours: submissions en tus propias tablas. Query, export, build on them. Sin vendor en el medio

🔌 Extend — Plugins sandboxed

Un plugin de Instatic es un zip package con manifest. Su server entrypoint corre en un QuickJS-WASM sandbox per-plugin: sin filesystem, sin environment variables, sin network —a menos que el site owner lo conceda explícitamente.

A través del SDK, un plugin puede añadir:

• HTTP routes y admin pages propias
• Storage y scheduled background jobs
• Loop data sources (content loops desde cualquier fuente)
• Canvas modules (nuevos blocks en el editor)
• Media storage adapters y frontend assets
• Lifecycle hooks: install, activation, beyond

CLI de plugins:

bun instatic-plugin init my-plugin    # scaffold
bun instatic-plugin lint              # validate manifest + sources
bun instatic-plugin build             # produce dist/ + .plugin.zip
bun instatic-plugin dev               # watch + sync to running CMS

El AI Agent: Claude Code dentro del CMS

La característica más innovadora de Instatic es su AI agent integrado que edita la página real. No es un chatbot que sugiere código. Es un agente que:

• Construye en el canvas como nodos reales editables, no screenshots ni walls of code
• Escribe HTML semántico para estructura y CSS para estilo, a través del mismo import pipeline que usas al pegar markup
• 35-tool Site scope para construir páginas completas
• 15-tool Content scope para editar entries
• Bring your own model: Claude, OpenAI, OpenRouter, o local Ollama. Tu key, tu modelo, tu factura

CLAUDE.md: el agent rule book

Instatic incluye un archivo CLAUDE.md en su repo —el agent rule book que Claude Code lee antes de cambiar código. Esto significa que puedes usar Claude Code directamente sobre el codebase de Instatic para:

• Crear plugins personalizados
• Modificar modules del editor
• Extender el content model
• Customizar el publisher
• Añadir integraciones con servicios externos

El CLAUDE.md define las reglas: arquitectura del server, convenciones de código, estructura de módulos, y dónde encontrar cada cosa. Claude Code lo carga automáticamente al inicio de cada sesión.

Cómo usar Claude Code con Instatic

# 1. Clonar el repo
git clone https://github.com/corebunch/instatic.git
cd instatic

# 2. Instalar dependencias
bun install

# 3. Arrancar en modo dev (SQLite por defecto)
bun run dev
# → http://localhost:5173

# 4. Abrir Claude Code en el proyecto
claude

# Claude Code leerá CLAUDE.md automáticamente
# y entenderá la arquitectura del proyecto

# 5. Pedir a Claude Code que cree un plugin
> "Crea un plugin de Instatic que añada un módulo de testimonios
> con rating de estrellas, usando el SDK de plugins y el template
> plugin de examples/plugins/template/"

# 6. O pedir mejoras al core
> "Añade soporte para exportar páginas a Markdown
> en el publisher, siguiendo la arquitectura de server/publish/"

Usar el AI Agent dentro del editor

1. Abre Instatic en tu navegador
2. Ve al editor de canvas
3. Configura tu provider de IA en Settings (Claude, OpenAI, OpenRouter, u Ollama)
4. Describe lo que quieres: "Crea una landing page con hero, features grid, testimonios y CTA"
5. El agente construye nodos reales en el canvas —HTML semántico + CSS
6. Edita manualmente lo que el agente generó, igual que cualquier otro contenido

Velocidad: casi nada que cargar

Una página publicada de Instatic es principalmente un archivo en disco. Sin framework que bootear, sin hydration, sin database round-trip en el path común. El browser descarga HTML semántico y CSS compacto, y ya.

Tres capas de publishing:

1. Static pages baked to disk al publicar, swapped in atomically. Visitors reciben un archivo, no un render
2. Versioned in-memory cache para routes que cambian. Publishing bumps la versión, entries stale miss lazily
3. Per-visitor parts detectados automáticamente y lazy-loaded por un runtime de ~1.1 kB. Más pequeño que este párrafo

Lo que sale es HTML y CSS, todo el camino. Nada del editor viaja: sin React en páginas públicas, sin editor runtime, sin framework en el markup. Puedes leerlo, hostearlo donde quieras, o llevártelo.

Quick start: 1 minuto

# Necesitas Bun (https://bun.sh). Nada más.

git clone https://github.com/corebunch/instatic.git
cd instatic
bun install
bun run dev

# → http://localhost:5173
# La primera visita te guía para crear tu site y owner account

# Modo production:
bun run start
# → http://localhost:3001/admin

Deploy: one-click en Railway

Instatic ofrece deploy en Railway con un click, con Postgres managed:

• Web service desde Docker image oficial (corebunch/instatic:latest)
• Railway Postgres database
• Persistent volume en /app/storage
• INSTATIC_SECRET_KEY generado para encriptar API keys y MFA
• Migraciones automáticas en boot

También puedes deployar en cualquier VPS con Bun instalado, o usar Docker directamente.

Backups

En una frase: back up la database (Postgres dump o SQLite file) y la carpeta uploads, y has backupeado todo el site.

Instatic vs otros CMS

Aspecto	Instatic	WordPress	Strapi	Webflow
Licencia	MIT (open source)	GPL	MIT (SaaS option)	Propietario
Self-hosted	Sí (Bun)	Sí (PHP)	Sí (Node)	No (SaaS)
Editor visual	Canvas real con breakpoints	Gutenberg / page builders	No (headless)	Canvas visual
Output	HTML semántico + CSS (static)	PHP render dinámico	API JSON (headless)	HTML + JS bundles
AI agent	Sí (35 tools, BYOM)	Plugins de terceros	No	Limitado
Plugins	QuickJS-WASM sandbox	PHP (sin sandbox)	Node plugins	No
Forms	Nativos, data en tus tables	Plugins (WPForms, etc.)	Custom	SaaS de terceros
Database	SQLite o Postgres	MySQL	Postgres/MySQL/SQLite	Propietario
Design tokens	Core Framework integrado	Depende del theme	No	Sí
Claude Code	CLAUDE.md incluido	Vía plugins	Vía repo	No

Estado del proyecto (julio 2026)

• Stars: ~2,952
• Forks: ~249
• Releases: 10 (latest: v0.0.10, 1 julio 2026)
• Creado: 30 abril 2026
• Last push: 8 julio 2026
• Contribuidores: 6 (top: DavidBabinec)
• Lenguaje: TypeScript 95.3%, CSS 4.4%
• Licencia: MIT

Roadmap: lo que viene

• Analytics real: first-party y privacy-respecting
• Mayor ecosistema de modules y plugins: más first-party blocks, más SDK surface, más examples
• AI agent más sharp: más tools, deeper awareness del site
• Todo más tight: pre-1.0 a propósito, el momento más barato para descartar malas ideas

Quién está detrás

El equipo detrás de Motion.page y Core Framework —tools que miles de personas usan para build websites profesionalmente, mayormente en el mundo WordPress. Pasaron años haciendo otras plataformas más bearable. En algún punto la pregunta obvia no se fue: ¿y si la cosa underneath estuviera right desde el principio? Sin legacy que work around, sin markup que no se puede tocar, sin business model que dependa de mantener tu site donde pueden verlo.

Por qué importa para el ecosistema IA

Instatic representa una tendencia importante: CMS que integran IA agents nativamente, no como add-on. El AI agent de Instatic no genera código que luego pegas —construye directamente en el canvas como nodos editables. Esto es diferente de:

• Cursor / Claude Code / OpenCode: Son coding agents para developers. Instatic es un CMS para builders no-técnicos que también puede ser extendido con Claude Code
• v0 / Bolt: Generan apps desde prompts pero el output no es editable visualmente después
• Webflow AI: SaaS propietario, no self-hosted, no open source

La combinación de editor visual + AI agent + Claude Code para extender el core + plugins sandboxed + output static limpio hace de Instatic una propuesta única en el panorama de CMS de 2026.

Conclusión

Instatic es uno de los proyectos open source más interesantes de 2026 para web builders. Combina lo mejor de varios mundos: la simplicidad de un UI local, el control de self-hosting, la velocidad del static publishing, y la potencia de Claude Code como agent de editing y development.

Para developers: el CLAUDE.md incluido hace que Claude Code entienda el codebase inmediatamente. Para designers: el canvas editor con Core Framework es un design system real. Para no-técnicos: el AI agent construye páginas desde descripciones. Para todos: el output es HTML y CSS que puedes hostear donde quieras.

Está en v0.0.x, lo que significa que es el momento de involucrarse temprano y ayudar a shapear el producto. Si estás cansado de ensamblar stacks de 10 servicios para cada sitio web, Instatic es la apuesta alternativa que vale la pena probar.