Un'idea semplice
E' un progetto nato con un'idea semplice: costruire pagine senza rumore, senza dipendenze, senza librerie da inseguire. Solo HTML, CSS e vanilla JavaScript. Page Builder non vuole essere un mostro pieno di ingranaggi nascosti; vuole essere uno strumento chiaro, leggero, comprensibile anche quando lo si apre dopo mesi.
All'inizio il canvas era il suo territorio principale: uno spazio dove trascinare componenti, selezionarli, modificarli e vederli prendere forma. Ogni elemento aveva un compito preciso. Un header doveva parlare forte, un paragrafo doveva raccontare, un bottone doveva invitare all'azione, un link doveva aprire una strada. La magia, però, non stava in effetti spettacolari: stava nel far sembrare naturale ogni gesto.
Caricamento immagine
Versione 1.0.1: meno attrito nel canvas
Con la versione 1.0.1 arrivò il primo vero cambio di ritmo. I componenti della sidebar impararono a rispondere al doppio click: non serviva più trascinare sempre, bastava un gesto rapido per aggiungere un nuovo elemento in fondo al canvas. Era una piccola scorciatoia, ma cambiava il modo di lavorare. Page Builder cominciava a capire che un editor non deve solo funzionare: deve togliere attrito.
Nella stessa fase, la selezione del testo diventò più intelligente. Quando l'utente sceglieva un Header, un Paragraph, un Button o un Anchor, il testo editabile veniva selezionato automaticamente. Il progetto iniziava a comportarsi come ci si aspetta da uno strumento vivo: clicchi un testo, e sei già pronto a riscriverlo. Anche gli input ricevettero attenzione: gli elementi clonati mantennero i loro propri gestori di evento, con la possibilità di aggiungere i tipi più particolari, come data, ora, colore, file e molti altri.
Versione 1.0.2: ordine nello stage
Poi arrivò la versione 1.0.2, e Page Builder fece una cosa meno appariscente ma più importante: mise ordine. La gestione dello stage venne rifattorizzata attorno a un registry centrale. Non era una modifica da copertina, ma era il tipo di scelta che decide il futuro di un progetto. Registrare e recuperare gli stage in modo centralizzato significava ridurre la dispersione della logica, rendere il codice più leggibile e preparare il terreno per estensioni future senza trasformare ogni nuova funzione in una caccia al punto giusto da modificare.
Versione 1.0.3: il registry diventa il cuore
Con la versione 1.0.3, questa filosofia diventò ancora più chiara. Anche il rendering dei componenti passò attraverso un registry centrale. La vecchia logica basata su switch lasciò spazio a definizioni più ordinate: ogni componente poteva dichiarare le proprie capacità, il proprio target per il doppio click, il proprio supporto alla selezione automatica del testo. Page Builder smise di chiedere agli handler condivisi di conoscere tutti i dettagli di ogni componente. Era il componente stesso a raccontare chi era.
Questa svolta rese il progetto più semplice proprio perchè lo rese più esplicito. Aggiungere un nuovo tipo non doveva più significare spargere condizioni in giro: bastava estendere il registry con i metadati giusti. La semplicità non era assenza di struttura, ma struttura abbastanza chiara da non diventare un peso.
Caricamento immagine
Editing più solido
Nello stesso rilascio, l'esperienza di editing venne affinata. Il clic destro su un elemento editabile già selezionato non lo deselezionava più: l'elemento restava pronto per l'editing inline. Anche la selezione differita del testo venne resa più robusta, con controlli difensivi per evitare di mettere focus su nodi rimossi o sostituiti prima dell'esecuzione asincrona. Era un dettaglio sottile, quasi invisibile quando tutto andava bene, ma fondamentale quando si aggiungono, si spostano, si duplicano e si eliminano componenti velocemente.
Le restrizioni sui click predefiniti degli input vennero spostate nella definizione registry del componente input, e agli handler di editing vengono aggiunti controlli più sicuri sui target degli eventi. Page Builder stava imparando una lezione da progetto maturo: la robustezza non deve appesantire l'esperienza, deve proteggerla in silenzio.
Versione 1.0.4: una nuova luce
Infine, con la versione 1.0.4, il progetto alzò lo sguardo anche verso l'aspetto visivo. Arrivò la dark mode, con un toggle nella navbar e una preferenza utente persistente. Non era solo un cambio di colori: era il riconoscimento che un editor viene usato, spesso a lungo, e deve adattarsi al modo in cui le persone lavorano.
Colori, tipografia, spaziature, ombre, modali e contrasti vennero rivisti. La modalità chiara e quella scura trovarono un equilibrio più curato. Page Builder rimase fedele alla sua natura: niente dipendenze, niente sovrastrutture inutili, niente complessità gratuita. Ma diventò più piacevole da guardare, più comodo da usare, più credibile come strumento quotidiano.
Caricamento immagine
Una scelta di chiarezza
Questa è la storia di Page Builder dalla 1.0.1 alla 1.0.4: un progetto che non ha cercato di diventare grande accumulando pezzi, ma togliendo attrito, ordinando responsabilità e rendendo ogni gesto più diretto. Un editor costruito in vanilla JavaScript, semplice non per mancanza di ambizione, ma per scelta.
Perchè a volte la vera forza di un progetto non sta nel numero di dipendenze che può vantare, ma nella chiarezza con cui riesce a far lavorare chi lo usa.
Un semplice Page Builder drag-and-drop realizzato interamente in Vanilla JavaScript, con il supporto di Bootstrap per la struttura e lo stile.
Versione online: Provalo online →
Codice sorgente: Apri pageBuilderDaros su GitHub →
