Sin HTML · Sin CSS · Sin JavaScript que escribir

Un Editor Que Pide Configurar, No Programar

Aquí construir es arrastrar un bloque al lienzo y ajustar sus propiedades, no abrir un editor de texto. Esta página traza la línea con honestidad: qué partes de un sitio son configuración de verdad, a quién le sirve bien ese flujo de trabajo, y qué pasa el día en que la idea necesita algo que el catálogo de bloques no contempla.

La paleta es el vocabulario completo, no un punto de partida

Una promesa de "sin código" solo vale lo que hay en la barra lateral, así que conviene empezar ahí. El registro de componentes tiene 37 tipos de bloque, y 34 se arrastran directamente desde la paleta, repartidos en cuatro categorías: estructura, contenido, formulario y navegación. Ese es todo el vocabulario para montar una página: no hay un caso en que terminar una sección obligue a tocar marcado porque la pieza necesaria no exista como bloque.

Las cuatro categorías cubren cosas distintas. Los bloques de estructura dan los contenedores y las cuadrículas con los que se organiza la página. Los de contenido son títulos, párrafos, imágenes y el resto de lo que lee quien visita el sitio. Los de navegación montan el menú y sus enlaces. Los de formulario —campo de texto, área de texto, etiqueta y botón de envío— permiten montar un formulario de contacto o de cita arrastrando campos y activando su validación desde los ajustes, sin escribir un script; esto no afirma que el envío llegue a ningún sitio, porque eso depende de un servidor que esta demo no tiene.

  • 34 tipos de bloque en la paleta de arrastre, de los 37 que hay en el registro completo, repartidos en estructura, contenido, formulario y navegación.
  • Los tres que faltan son piezas de un compuesto, no bloques sueltos: elemento de acordeón, valor de estadística y pestaña solo existen dentro de su acordeón, su bloque de estadísticas o su conjunto de pestañas, y se añaden desde ahí, no arrastrados por su cuenta.
  • Los 17 temas ya montados se aplican sin abrir una hoja de estilos.

El estilo se ajusta en un panel, no en una hoja de estilos

El diseño visual es el segundo sitio donde suele romperse una promesa de "sin código", y aquí se sostiene. Cada elemento tiene un inspector con controles de estilo en vez de un fichero CSS que editar a mano, y esos controles se aplican por punto de ruptura: la barra de herramientas ofrece cinco anchos —móvil, móvil grande, tableta, portátil y escritorio— y un ajuste hecho en uno de ellos no se filtra a los demás salvo que se repita a propósito. Hacer un título más pequeño en el móvil y más grande en el escritorio son dos ajustes, no una media query.

El texto tiene su propia barra, separada del panel de estilo del bloque: negrita, cursiva, tachado, un enlace, tres niveles de encabezado y los dos tipos de lista, el mismo conjunto que ofrece un procesador de texto. Entre las dos cosas —estilo del bloque por punto de ruptura y formato de texto en línea— las decisiones de maquetación, espaciado y tipografía que normalmente vivirían en una hoja de estilos se toman en los mismos paneles que se usan para colocar el bloque.

Las interacciones son un ajuste, no una etiqueta script

La parte de un sitio que más claramente parecía exigir código es la que se mueve: un menú que se pliega, una imagen que se abre en grande, una sección que aparece al hacer scroll. Builder42 incluye 17 de esos comportamientos como entradas del registro: acordeón, carrusel, contador animado, expandible, validación de formularios, visor de imágenes, marquesina, modal, barra de navegación, parallax, aparición al hacer scroll, progreso de scroll, scroll spy, elemento fijo, pestañas, cambio de tema e interruptor simple. Añadir uno a un bloque es un ajuste sobre ese bloque, no un fragmento que se pega a mano.

Lo que pasa al exportar importa tanto como lo que pasa en el lienzo. Cada comportamiento que realmente se usa se escribe en la descarga como JavaScript sencillo, sin ningún framework: una página que no usa ninguno no lleva ni un archivo de script, y una que usa tres lleva exactamente esos tres módulos más el cargador que los conecta. No es una plantilla genérica que luego hay que adaptar; el ajuste hecho en el inspector es lo que ejecuta el script exportado.

A quién le sirve bien un flujo de paleta y paneles

Este tipo de herramienta sirve especialmente bien para un trabajo concreto: alguien con una idea clara de la página que quiere —la carta y las reservas de un restaurante, los servicios y el formulario de cita de una clínica, la lista de precios de una barbería— y que prefiere montarla con piezas ya hechas antes que abrir un proyecto de código para una sola página. Los sitios de varias páginas son parte natural de ese mismo flujo: un sitio puede tener varias páginas, añadidas y renombradas desde el mismo panel que gestiona todo lo demás, y si el público lee más de un idioma, los idiomas de contenido se añaden igual, cada uno exportando su propio conjunto de páginas.

Sirve para ese trabajo justamente porque la paleta no da por hecho ningún conocimiento previo. Arrastrar un bloque, elegir una categoría, ajustar una propiedad y revisar el resultado en un punto de ruptura son los mismos cuatro gestos para un título, un formulario, una galería o una cuenta atrás, así que la curva de aprendizaje es una sola habilidad repetida, no una habilidad distinta por función. Lo que no cubre es una página cuya idea central sea un mecanismo que nadie ha registrado como bloque, que es justo donde empieza el siguiente apartado.

Dónde está el límite, y cómo salir de él

Ser honesto sobre una herramienta sin código exige nombrar su borde, no solo su alcance. Si lo que se necesita no es uno de los 37 tipos de bloque registrados, ni uno de los 17 comportamientos, ni una propiedad expuesta en un panel del inspector, arrastrar y hacer clic no lo va a producir —eso es cierto en cualquier editor que funcione sobre un registro, y fingir lo contrario solo costaría una tarde buscando un ajuste que no existe.

La salida de ese borde viene incorporada, no añadida después, y es la propia descarga. Lo que llega a tu ordenador es HTML, CSS y JavaScript corrientes, sin ningún framework: el tipo de código que cualquier desarrollador puede leer y ampliar a mano, no un formato propio que deje el último tramo encerrado dentro de este editor. Así que el límite es real sin ser un callejón sin salida: el trabajo sale de aquí en los lenguajes que la web ya habla, y quien lo recoja después no tiene que aprender ninguno nuevo antes.

Dos temas quedan justo al otro lado de este límite y se mencionan en una sola frase, sin apartado propio: qué contiene el archivo exportado, fichero por fichero, es el trabajo de la próxima guía, y dónde vive un borrador mientras se trabaja —aquí, sin cuenta, en el mismo navegador que se está usando— es el de la anterior. Las dos merecen leerse si el límite de "sin código" es lo que se busca entender.

Cuatro páginas de negocio que un flujo sin código cubre bien

Las reservas y la carta de un restaurante, los servicios y precios de una barbería, los tratamientos y el formulario de cita de una clínica dental, los horarios y reseñas de un spa: ninguna necesitó una línea de código, y cada una es una página completa para abrir y desmontar.

Lo que se pregunta primero

¿Hay algo que tenga que escribir como código para terminar una página normal?

No. Colocar bloques, ajustar sus propiedades, darles estilo por punto de ruptura y añadirles un comportamiento se hace todo desde paneles. El código aparece después, en el sitio que descargas, y solo si vas a buscarlo: nada del proceso de creación te pide escribirlo.

¿Puedo montar un formulario de contacto o de cita sin escribir un script?

Sí, hasta el punto de montarlo y validarlo. El registro tiene bloques de campo de texto, área de texto, etiqueta y botón de envío, y la validación es un comportamiento que se activa desde los ajustes, no código que se escribe. A dónde llega el envío depende de un servidor, y este sitio estático no tiene uno.

¿Qué pasa si el bloque que necesito no está en la paleta?

Ahí arrastrar y hacer clic deja de bastar, que es el límite honesto de cualquier editor que funciona sobre un registro. Lo que descargas es HTML, CSS y JavaScript corrientes, así que una persona con conocimientos de desarrollo puede continuar justo donde termina la paleta.

¿Necesito saber CSS para que la página se vea bien en distintos tamaños?

No. El inspector aplica los cambios de estilo por punto de ruptura —móvil, móvil grande, tableta, portátil y escritorio— con los mismos controles que se usan para cualquier otra propiedad, así que ajustar un título para el móvil es un ajuste, no una media query.

¿Las partes interactivas, como un acordeón o un modal, vienen hechas o hay que montarlas?

Vienen hechas: son 17 comportamientos —entre ellos acordeón, modal, carrusel y aparición al hacer scroll— que se activan sobre un bloque desde sus ajustes. Solo los que realmente usa una página se escriben en la exportación, como JavaScript sencillo y sin framework.

Gratis · Sin registro

Ábrelo, créalo, descárgalo.

Se necesita una pantalla más grande

El editor necesita más espacio

Builder42 coloca la paleta de componentes, el lienzo y el inspector uno junto al otro, lo que requiere una ventana de al menos 960px de ancho. Abre esta página en un portátil o un ordenador de escritorio y el editor está a un clic.