Guillermo Valentín Demos

Un framework UI que permite crear, personalizar y sincronizar temas de componentes de interfaz de usuario en tiempo real directamente en su propia App en desarrollo.

1. Diseñar — Editor visual (aplicación de escritorio Tauri 2)

2. Exportar — JSON de tema (colores, tipografía, bordes, sombras, modo oscuro)

3. Instalar — Paquete npm para tu framework

4. Construir — Usá clases CSS en tus plantillas, los estilos se aplican automáticamente

5. Sincronizar — Conectá el editor a tu app vía WebSocket para edición en vivo

6. Publicar — Incluí el JSON de tema final en tu build de producción

Control de Tipografía

Gestiona fuentes, tamaños, pesos e interlineados globalmente desde el panel de Tipografía, o sobrescríbelos por componente y por formulario. Las Google Fonts se cargan automáticamente desde los datos del tema.

Sincronización en vivo

Conecta el editor a cualquier app que ejecute combo-ui-vue, combo-ui-react o combo-ui-angular mediante WebSocket. Activa la edición en vivo y ve el resultado de tus cambios directamente en la app cliente — sin recargar la página.

Generador de Temas

Añade pares de colores claro/oscuro y genera automáticamente un tema completo con variantes consistentes en todos los componentes. Elige tipografía, radio de borde y sombras externas/internas para todos los componentes de una sola vez.

Modo Oscuro Integrado

Cada tema incluye soporte para modo oscuro listo para usar.

Los paquetes incluyen un componente Theme Toggler personalizable compatible con las convenciones de modo oscuro de VueUse y Tailwind.

Variantes Ilimitadas

Crea temas con un número ilimitado de variantes por componente. El editor está diseñado para mantener un bajo consumo de memoria — solo carga las variantes del componente que estás editando activamente, no todos a la vez.

Control de Tipografía

Gestiona fuentes, tamaños, pesos e interlineados globalmente desde el panel de Tipografía, o sobrescríbelos por componente y por formulario. Las Google Fonts se cargan automáticamente desde los datos del tema.

Persistencia con Auto-Guardado

Todos los cambios se guardan automáticamente en IndexedDB mediante Dexie. Nunca pierdas tu trabajo — cierra el editor y continúa en cualquier momento.

BASSCSS y Reset

Todos los temas incluyen clases utilitarias BASSCSS para el diseño rápido de plantillas, además de un reset CSS para un renderizado consistente entre navegadores.

Componentes Soportados

Typography, Forms, Button, Card, Alert, Avatar, Progress, Spinner, Badge, Chip, Tooltip, Popover, Table, ListGroup, Accordion y Pagination.

Guillermo Valentín demos