Add offline visual form builder tool

[Copilot]

Implements a standalone HTML/CSS/JS form builder for visually designing web forms with live preview and automatic code generation. No external dependencies required.

Changes

index.html - Two-column layout UI

• Left panel: form settings, field type buttons, field list with actions
• Right panel: tabbed view (preview, HTML, CSS, JS), copy/export buttons
• Modal for field property editing

styles.css - Responsive styling

• CSS variables for theming
• Base styles for generated forms
• Drag-and-drop visual feedback
• Mobile breakpoints

app.js - Core logic

• Field CRUD with support for: text, email, password, number, date, textarea, checkbox, radio, select, file, submit, reset, fieldset
• Drag-and-drop + button reordering
• Real-time preview rendering
• HTML/CSS/JS code generation with configurable validation
• Save/load config as JSON, export as files
• XSS-safe HTML escaping

Screenshots

Builder Interface

Generated Code View

Field Editor Modal

Original prompt

Objetivo general: crear una herramienta offline, basada en HTML/CSS/JavaScript (sin dependencia externa), que permita a un usuario diseñar visualmente formularios web, personalizar sus campos y estilos, previsualizarlos, y obtener el código generado de forma automática (HTML + CSS + JS si aplica).

Estructura de la interfaz

Layout de dos columnas:

Columna izquierda (Panel de configuración): opciones para configurar el formulario y sus campos.

Columna derecha (Vista previa + Código generado): muestra en tiempo real cómo quedaría el formulario, y un área con el código listo para copiar.

Funcionalidades / Controles disponibles

Gestión de campos del formulario — permitir añadir distintos tipos de campos:

Input de texto (text, email, password, number, date, etc.)

Textarea

Checkbox

Radio buttons

Select / dropdown

File upload

Botón submit (y/o botones de reset)

Al añadir un campo, permitir editar sus propiedades:

name, id, label / texto visible, placeholder, valor por defecto

Tipo (según los tipos anteriores)

Atributos HTML: required, min / max / pattern / step (cuando aplique), maxlength, etc.

Para radio/select: opciones, valores, etiquetas.

Para estilo: clases CSS, estilos inline, o permitir añadir clases personalizadas.

Orden y estructura del formulario:

Permitir reordenar campos (drag & drop o botones arriba/abajo).

Agrupar campos en secciones/fieldsets, con leyenda (legend).

Permitir duplicar campos o secciones (útil para formularios repetitivos).

Vista previa en vivo: cada vez que se modifique la configuración o se mueva un campo, la vista de la derecha se actualiza automáticamente mostrando el formulario resultante.

Generación de código automático: debajo o al lado de la vista previa, mostrar dos pestañas o secciones:

HTML resultante (form + campos)

CSS por defecto + CSS personalizado (espacio donde el usuario puede escribir sus propias reglas).

(Opcional) un bloque JS para validación ligera, si el usuario lo desea.

Botón “Copiar código”: permite copiar al portapapeles el HTML + CSS (y JS si hay) generado.

Estilos base predeterminados: al cargar la página por primera vez, el formulario de la vista previa debe tener un estilo genérico limpio (bordes suaves, márgenes y paddings razonables, tipografía neutra), de modo que el resultado sea usable sin necesidad de CSS extra. Luego el usuario puede modificar estilos a su gusto.

Responsive: la interfaz de la herramienta y el formulario generado deben adaptarse a distintos anchos de pantalla.

Sin dependencia externa / offline: todo el código debe residir localmente (index.html, styles.css, app.js), para que funcione sin conexión.

Estructura de archivos / Organización

index.html: esqueleto de la UI de la herramienta — contenedor principal con columnas, panel de configuración, vista previa, área de código, botones.

styles.css: estilos de la interfaz de la herramienta (layout, paneles, tipografía, colores, scrolls, responsividad). También puede incluir los estilos base predeterminados para el formulario.

app.js: lógica para: crear nuevos campos, editar sus propiedades, reordenar, renderizar la vista previa, generar el código HTML + CSS + JS, copiar al portapapeles. Todo con DOM puro (o con librerías ligeras internas, si se desea), sin dependencias externas.

Diseño / UX / Interfaz

Estética limpia y minimalista, con un esquema preferentemente claro (fondos claros, bordes suaves, tipografía legible). Finas divisiones visuales entre panel izquierdo y vista previa.

Panel de configuración con scroll si hay muchos campos, ordenado de forma clara (lista de campos, con cada campo colapsable/expandible para editar sus propiedades).

Vista previa y código visible simultáneamente — idealmente en pestañas o secciones separadas.

Feedback visual inmediato: cuando se cambie una propiedad, la vista previa se actualiza, y el código también.

Botones claros: “Añadir campo”, “Eliminar campo”, “Duplicar”, “Subir / bajar orden”, “Copiar código”.

Extras recomendables (opcional, pero útil)

Guardar / cargar configuración del formulario (por ejemplo, en JSON), para poder reutilizar o editar más tarde.

Opción para exportar como archivo .html + .css + .js.

Validación previa simple: asegurar que campos tengan name únicos, select/radio tengan opciones válidas, avisar al usuario si algo no está bien configurado antes de generar código.

Soporte para campos más avanzados: date-picker, email, patterns, validaciones HTML5, etc.

Entregables esperados

Código completo listo para descargar / clonar y usar offline: index.html, styles.css, app.js. Con estructura modular clara y comentada, para facilitar futuras expansiones.

Público objetivo / Uso ideal

Esta herramienta está pensada para desarrolladores o diseñadores que quieren crear rápidamente formularios HTML sin escribir manualmente todo el código, para prototipado rápido o como generador de formularios reutilizables.

🧰 Inspiración en herramientas reales

DHTMLX Form Builder — permite diseñar formulario...

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[CorsoCoder]

no tengo ni idea de que va esto