CMS visual con page builder drag & drop. Construye sitios web dibujando bloques sobre un CSS Grid, con soporte multi-idioma, responsive completo, dark/light y renderizado estático.

WAXP (Web App ExPress) no es una app en producción con soporte, tan solo son una serie de ideas que expongo como proyecto demo de mi portafolio, es un CMS basado en page builder, multi site, que además de generar páginas estáticas, las sirve... las páginas creadas con WAXP tiene por defecto, soporte para móvil, tablet y modo desktop, multi idioma y los modos dark y light con soporte para imágenes. Son dos proyectos, el back office construido en Vue, donde está todo el sistema de creación de páginas visual y el backend con postgres construido en GO/Echo. Hay una demo del BackOffice aquí con este mismo site cargado, obviamente con las opciones de guardado desactivadas.

Código fuente

Descarga (Mac)

Tipos de bloque disponibles

Text • Contenido multilenguaje con editor TipTap (bold, italic, headings, lists, tables, code, links...)

Image • Imagen responsiva con URLs por dispositivo, focal point, zoom y fit modes

Button • Botón con estilos completos: colores light/dark para bg, texto, bordes, hover, active, focus

Icon • Icono vectorial (Tabler Icons) con enlace, color y tamaño configurable

Menu • Menú de navegación jerárquico con items recursivos, fuentes por nivel y colores de estado

Space • Espaciador con divisor configurable (color, grosor, estilo de línea)

DarkMode • Toggle de tema dark/light con detección de preferencia del sistema

LanguageSwitcher • Selector de idioma que cambia el locale activo

Backend

| Go 1.26 | Lenguaje principal |

| Echo v5 | Framework HTTP |

| PostgreSQL | Base de datos |

| pgx/v5 | Driver PostgreSQL |

| sqlc | Generación de código SQL type-safe |

| golang-migrate | Migraciones de base de datos |

| golang-jwt | Autenticación JWT |

| godotenv | Variables de entorno desde .env |

| webp | Generación de thumbnails WebP |

Traducción de páginas por IA

Pulsando un botón, traduce la página actual utilizando el idioma actual como base utilizando un LLM en la nube.

Page Builder

El editor visual permite construir páginas arrastrando bloques sobre un grid responsivo con 3 breakpoints independientes. Los bloques son unidades de contenido que se posicionan como hijos directos del CSS Grid.

Motor de renderizado

El backend genera HTML+CSS estático a partir del layout almacenado y lo cachea en la tabla page_renders.

El resultado se sirve como HTML estático desde ServePage sin pasar por Vue

Idiomas

Cada site puede tener múltiples idiomas (locales). El contenido se almacena como un mapa anidado por locale en la base de datos y se resuelve al locale solicitado en la respuesta de la API.

Secciones

Las páginas se componen de secciones. Cada sección es un CSS Grid independiente con su propia configuración de columnas, filas, gap, fondo, bordes, padding y margin.

Site header & footer: Secciones especiales definidas en site.options.header y site.options.footer, compartidas entre todas las páginas del sitio.

Opciones de sección:

- Ancho máximo y fullWidth

- Ocultar en breakpoints específicos

- Background: color, imagen, gradiente (con soporte light/dark)

- Padding y margin por lado

- Filas dinámicas: crecen automáticamente al insertar bloques y se reducen con trimRows

Internacionalización (i18n)

Cada site puede tener múltiples idiomas (locales). El contenido se almacena como un mapa anidado por locale en la base de datos y se resuelve al locale solicitado en la respuesta de la API.

Módulo independiente en src/i18n/reference/ con nombres de idiomas (ISO 639-1, 184 entradas) y países (ISO 3166, ~249 entradas) traducidos a es e en. El composable useReferenceData() reacciona al locale actual de la app.