Constructor visual de páginas es un editor WYSIWYG que funciona íntegramente en el navegador, sin backend ni base de datos. Permite componer landing pages B2B añadiendo bloques desde una biblioteca de componentes, editar su contenido tanto en línea (haciendo clic sobre el texto del propio lienzo) como a través de un inspector lateral, reordenarlos, duplicarlos y, al terminar, exportar un fichero HTML autónomo basado en Tailwind CSS, listo para integrar.
El prototipo resuelve un problema concreto del trabajo comercial y de consultoría: pasar de una idea de página a una maqueta editable y a un HTML publicable sin escribir código y sin depender de un CMS. Incluye 18 componentes reales (navbar, hero, logos, features, servicios, métricas, proceso, testimonio, pricing, FAQ, formulario, footer y un set específico para inmobiliaria: hero, buscador, listado de propiedades, inmueble destacado, zona/barrio y perfil de asesor) y 4 plantillas precargadas (Landing B2B, Landing inmobiliaria, SaaS/producto y Servicio local) que montan una composición completa de un clic.
Es una demo de cliente, presentada bajo la marca Bloonde como "Editor CMS". Corre como single-page sin build y está marcada como noindex. Persiste el trabajo en localStorage del navegador, por lo que el estado es local al equipo y no hay multiusuario ni guardado en servidor. Está pensada para enseñar la mecánica de un page builder y para generar maquetas rápidas, no como producto de producción con backend.
- Carga y estado inicial Al abrir la página, el script lee el estado guardado en localStorage (clave joanmedina-component-builder-v1). Si no existe o es inválido, genera un estado semilla con doce bloques de ejemplo ya montados y selecciona el hero por defecto. Antes de restaurar bloques guardados, filtra los que no existan en el catálogo actual. Todo arranca en una IIFE de JavaScript vanilla, sin frameworks.
- Añadir bloques desde la biblioteca El panel izquierdo lista los 18 componentes del catálogo. El usuario los añade haciendo clic (se insertan al final) o arrastrándolos al lienzo con la HTML Drag and Drop API, donde el punto de inserción depende de la posición vertical del cursor. Cada componente nuevo se crea clonando sus valores por defecto y recibe un id único (crypto.randomUUID con fallback).
- Render del lienzo El lienzo se redibuja por completo a partir del array de bloques del estado tras cada cambio. Cada bloque se dibuja con su función renderer específica, que devuelve markup Tailwind; los textos editables se envuelven con contenteditable y un atributo data-edit-key para sincronizar el contenido con el estado.
- Edición de contenido en dos vías El usuario edita escribiendo directamente sobre los textos del lienzo (títulos, párrafos, citas, etiquetas) o desde el inspector lateral, que genera dinámicamente campos de texto, textarea y selector de color según el esquema de cada componente. Listas como enlaces de navegación, tarjetas o filas tabulares se editan solo desde el inspector. Ambas vías escriben en el mismo objeto de estado y disparan guardado y re-render.
- Reordenar, duplicar, eliminar Cada bloque del lienzo tiene una barra con acciones: subir, bajar, duplicar y eliminar. Además se pueden reordenar arrastrando por el tirador (drag handle); el índice de inserción se calcula según la posición vertical del cursor sobre los bloques existentes.
- Vista previa y exportación La vista previa inyecta la página limpia dentro de un iframe (srcdoc) con conmutador de tamaño PC (1280px), tablet (768px) y móvil (390px). La exportación genera un documento HTML completo y autónomo con Tailwind por CDN y las fuentes de Google Fonts, que se puede copiar al portapapeles o descargar como landing-tailwind.html.
Biblioteca de 18 componentes
Catálogo de bloques reales: navbar, hero, logos, features, servicios, métricas, proceso, testimonio, pricing, FAQ y formulario, más un set inmobiliario (hero inmobiliaria, buscador, listado de propiedades, inmueble destacado, zona/barrio y perfil de asesor) y footer.
Edición en línea (contenteditable)
Los títulos, párrafos, citas y etiquetas se editan haciendo clic directamente sobre el texto en el lienzo, con el cambio reflejado al instante en el estado, el inspector y la vista previa.
Inspector por esquema
Cada componente declara su propio esquema de campos (texto, textarea con pista, selector de color). El inspector se genera dinámicamente desde ese esquema, así que cada bloque expone solo los controles que le corresponden, incluidos los datos en formato tabular (tarjetas, planes, propiedades) escritos con separadores.
Drag and drop y reordenación
Arrastrar componentes de la biblioteca al lienzo y reordenar bloques existentes con cálculo del índice de inserción según la posición del cursor; también botones de subir, bajar, duplicar y eliminar por bloque.
Cuatro plantillas precargadas
Landing B2B, Landing inmobiliaria, SaaS/producto y Servicio local. Cada plantilla reemplaza el lienzo por una composición completa de bloques de un clic, varios con valores personalizados (marca, enlaces, colores, copy) ya ajustados al sector.
Vista previa responsive
Render limpio dentro de un iframe con tres tamaños conmutables (PC 1280px, tablet 768px, móvil 390px) para revisar la página sin la interfaz del editor.
Exportación de HTML autónomo
Genera un documento HTML completo con Tailwind por CDN y las tipografías de Google Fonts, que se copia al portapapeles o se descarga como fichero landing-tailwind.html listo para integrar en cualquier sitio.
Persistencia local automática
Cada cambio se guarda en localStorage (bloques, bloque seleccionado y modo de previsualización), de modo que el trabajo sobrevive al refresco de la página en el mismo navegador, sin necesidad de guardar manualmente.
Restaurar demo y vaciar lienzo
Botón para restaurar el estado semilla con los doce bloques de ejemplo y botón para vaciar el lienzo por completo y empezar de cero.
Personalización de color por bloque
Cada componente permite definir color de fondo y color de acento desde el inspector; los valores se validan como hexadecimales (3 a 8 dígitos) en el momento de pintar el markup, con blanco como color seguro por defecto si no son válidos.
- JavaScript vanilla (ES6+): Toda la lógica del editor vive en un único fichero sin frameworks ni build: catálogo de componentes, renderers, estado, drag and drop, inspector y exportación, encapsulado en una IIFE.
- Tailwind CSS (CDN): Sistema de utilidades con el que están escritos los renderers de cada componente y el HTML exportado; se carga por CDN tanto en el editor como en la página generada, sin paso de compilación.
- HTML Drag and Drop API: Soporta arrastrar componentes desde la biblioteca al lienzo y reordenar bloques existentes, calculando el punto de inserción según la posición vertical del cursor.
- contenteditable: Habilita la edición de textos directamente sobre el lienzo; los nodos editables se marcan con data-edit-key para sincronizar el contenido con el objeto de estado.
- localStorage: Persiste el estado completo (bloques, bloque seleccionado, modo de previsualización) en el navegador tras cada cambio; es el único almacenamiento, no hay backend.
- Elemento dialog + iframe srcdoc: Los modales de exportación, vista previa y plantillas usan el elemento nativo dialog (con showModal); la vista previa inyecta el HTML generado en un iframe vía srcdoc para aislar el render del editor.
- Clipboard API y Blob/URL: Copiar el HTML exportado al portapapeles (con fallback a execCommand) y descargarlo como fichero generando un Blob y una URL temporal.
- Lucide Icons (CDN): Iconografía de la interfaz (biblioteca, barra de bloques, acciones, plantillas), re-renderizada tras cada cambio del DOM.
- Google Fonts (Fraunces y Manrope): Tipografías de la interfaz y de las páginas generadas: Manrope para texto y Fraunces para títulos display, incluidas también en el HTML exportado.
- structuredClone y crypto.randomUUID: Clonado seguro de los valores por defecto al crear o duplicar bloques y generación de identificadores únicos por bloque, ambos con fallback para navegadores antiguos.
- Maquetar de forma rápida una propuesta de landing para un cliente B2B en una reunión, partiendo de la plantilla del sector y ajustando textos en vivo.
- Generar el HTML de una landing modular y entregarlo al equipo de desarrollo o a un CMS para su integración, sin partir de cero.
- Crear páginas de captación para una promoción inmobiliaria (buscador, propiedades, inmueble destacado, zona, asesor y formulario) reutilizando los componentes específicos del sector.
- Montar una página de producto SaaS con hero, logos de integraciones, features, pricing y FAQ para validar mensaje y estructura antes de invertir en diseño definitivo.
- Producir una landing de servicio local con confianza, proceso, testimonio y formulario de contacto, adaptando rápidamente marca y colores.
- Usarlo como herramienta de demostración comercial para explicar a un cliente cómo funciona un page builder y la mecánica de componer por bloques.
- Diseño de un sistema de componentes con esquema declarativo: cada bloque define sus campos y su inspector se genera solo a partir de ese esquema.
- Arquitectura de estado en cliente con render derivado del estado y persistencia automática en localStorage, sin framework.
- Dominio del modelo de drag and drop del navegador para añadir y reordenar elementos con cálculo de índice de inserción.
- Generación de código: producción de HTML autónomo y limpio con Tailwind a partir de una estructura de datos interna.
- Edición WYSIWYG real con doble vía sincronizada (en línea sobre el lienzo e inspector lateral) sobre una misma fuente de verdad.
- Higiene de seguridad básica en cliente: escapado de HTML y atributos del contenido del usuario y validación de colores hexadecimales antes de inyectarlos en el markup.
Panel kanban de supervisión de procesos
Tablero operativo con flujo por etapas, tareas con prioridad y responsable, filtros, arrastre entre columnas y un indicador de "presión" que señala qué necesita seguimiento.
Ver prototipo →
CRM inmobiliario con datos públicos e IA
Suite CRM con pipeline, matching de oferta y demanda, tasador automático y radar de mercado alimentado por APIs públicas (Catastro, INE) y scraping controlado.
Ver prototipo →