Un CMS con ámbitos por ruta
para SvelteKit
Agrega unos cuantos componentes a tus rutas y tu sitio se vuelve editable. Funciona con cualquier adaptador de SvelteKit — estático, servidor o serverless. Sin esquemas que mantener ni una aplicación de administración aparte que alojar.
<script>
import { CmsText, CmsRichText } from '@velastack/cms';
</script>
<h1>
<CmsText name="hero.title" fallback="About us" />
</h1>
<CmsRichText name="body" />
Agrega el CMS a un proyecto SvelteKit en cuatro pasos
Pensado para los proyectos que ya tienes. Sin reestructurar nada, sin convenciones nuevas y sin una segunda aplicación de administración que desplegar.
El plugin recorre los imports de tus rutas en tiempo de compilación y genera un manifiesto con cada campo editable.
Elige un adaptador — mock para desarrollo local, la API alojada o uno propio. Los locales son opcionales.
Una sola función load del servidor resuelve todos los campos editables alcanzables desde la ruta actual.
Reemplaza el texto estático con un componente del CMS. La barra de administración se encarga de la edición — los visitantes ven HTML simple.
Una identidad que sigue a tus rutas
Un <Header /> reutilizable montado en (marketing) y en (app) no debería compartir el mismo titular. El plugin recorre el grafo de imports de cada ruta y vincula cada campo del CMS al layout o a la página que lo importa.
src/routes/
├── +layout.svelte → layout:/
├── (marketing)/
│ ├── +layout.svelte → layout:/(marketing)
│ ├── about/+page.svelte → page:/(marketing)/about
│ └── rooms/[slug]/+page.svelte
│ → page:/(marketing)/rooms/[slug]?slug=suite-1
└── (app)/
└── +layout.svelte → layout:/(app)
✔ Same Header.svelte → distinct content per scope
✔ Dynamic params bound to scope identity
✔ Discovered statically — no runtime cost
Nombras los campos donde los usas. El ámbito se deduce de la ruta que importa ese componente.
Los campos de un layout se comparten entre todas sus rutas hijas; los de una página pertenecen solo a esa ruta — incluso con parámetros dinámicos.
El plugin de Vite genera un manifiesto tipado. Sin registros, sin decoradores y sin escanear campos en tiempo de ejecución.
Funciona con cualquier adaptador de SvelteKit
Renderiza de forma estática, en un servidor Node o en el edge. El CMS es independiente del adaptador — la edición y la capa de datos se mantienen fuera de tu ruta de ejecución.
adapter-static con prerender = true. generateEntries() enumera las rutas dinámicas por ti.
adapter-node, adapter-vercel, adapter-cloudflare — las páginas se resuelven de nuevo en cada solicitud, con el mismo código de componentes.
Combina páginas de marketing prerenderizadas con un app shell renderizado en servidor en el mismo proyecto. El CMS ve ambos — a los ámbitos les da igual.
Edita directamente en la página
Los editores con sesión iniciada ven una barra de administración. Haz clic en cualquier campo y edítalo ahí mismo. Los visitantes reciben un sitio HTML simple — nada del editor llega al tráfico público.
Barra de herramientas basada en TipTap para títulos, listas, enlaces y formato en línea, sin salir de la página.
Sube, reemplaza y reutiliza imágenes. <CmsImage /> se encarga automáticamente del texto alternativo y las dimensiones.
Título, descripción, canonical y robots por página, con vista previa en vivo del resultado en Google y contadores de caracteres.
Explora todas las rutas que detectó el plugin. Crea nuevas entradas para rutas con parámetros directamente desde la barra.
La interfaz de edición está protegida por autenticación y separada de los bundles públicos. Tus visitantes no descargan ni un kilobyte de código de administración.
PAGE
├── Edit content
├── Edit metadata · SEO
├── Copy preview link
└── Discard changes
SITE
├── Pages
├── Media
├── History
├── Review & publish…
└── Share preview link
STATUS
● 3 pages drafted
○ Editing: about
Borradores, enlaces de vista previa, versiones
Un flujo editorial sencillo que cabe en un solo modelo mental: copia de trabajo, versión con nombre, historial completo.
Cada edición queda en tu borrador personal. El sitio publicado no cambia hasta que publiques.
Genera una clave de vista previa firmada. Tus clientes y colaboradores ven tu borrador en el sitio real, sin iniciar sesión. Rótala o revócala cuando quieras.
Publica de una sola vez una versión con nombre que reúne cambios en muchas páginas. Consulta todas las versiones anteriores en el historial. Revierte con un clic.
Pensado para varios idiomas desde el primer día
Define tus locales al crear el CMS. Cada campo se guarda por locale y se consulta por solicitud. Funciona con cualquier estrategia de i18n de SvelteKit.
import { createCms } from '@velastack/cms/server';
export const { load: loadCms } = createCms({
adapter: apiAdapter({ endpoint }),
locales: ['en', 'es', 'fr-CA', 'ja']
});
// in your layout
const { cms } = await loadCms(event, { locale });
La identidad de cada campo incluye la etiqueta de locale BCP-47. en, es-MX y fr-CA conviven sin problema.
Cambia de locale desde la barra de administración. Cada locale tiene su propia copia de trabajo e historial de versiones.
Funciona con wuchale, Paraglide, sveltekit-i18n o tu propia estrategia de URL. El CMS solo necesita el locale resuelto al momento de cargar.
Pocas primitivas, infinitamente componibles
Seis componentes cubren la mayoría de las necesidades de edición. Si necesitas más, pon un componente Svelte en src/lib/components/cms/ y el plugin lo detecta.
Campos de texto plano en línea. Títulos, etiquetas, pies de foto.
Contenido con formato y edición en línea con TipTap.
Imágenes con texto alternativo, dimensiones y un selector de medios integrado.
Listas: galerías, navegación, preguntas frecuentes. Cada elemento expone un snippet para definir su diseño.
Interruptores con un indicador visual en modo de edición.
Enlaces editables (ruta interna o URL externa) con un selector de rutas.
<CmsEntries /> para recorrer las páginas publicadas, y tus propios componentes detectados automáticamente en src/lib/components/cms/.Edita sin depender del desarrollador
Una vez que tu desarrollador coloca los componentes, los textos quedan en manos de tu equipo. Nada nuevo que aprender: editan directamente en el sitio en vivo.
Sin un panel de CMS que aprender. Haz clic en el campo de la página y escribe el nuevo texto.
Envía una URL de vista previa a quien deba aprobar antes de publicar. Verá el sitio completo tal como va a quedar.
Prepara cambios en muchas páginas y luego publícalos juntos como una sola versión con nombre.
Cada versión publicada es una instantánea. Vuelve a los textos de la semana pasada en dos clics.
VelaStack Haz que tu sitio SvelteKit
sea editable hoy
Instala el paquete, coloca los componentes y conéctalo al backend en la nube o alójalo tú mismo. No necesitas una cuenta para probarlo.