Creare Pagine Web con un Web Builder progettato interamente da te

GrapesJS è un potente framework open source che ha guadagnato popolarità per la sua capacità di creare pagine web e landing page in modo rapido e intuitivo. È particolarmente apprezzato da sviluppatori web e designer che desiderano creare pagine web oppure costruire interfacce utente complesse senza scrivere codice HTML o CSS da zero. In questo articolo, esploreremo cos’è GrapesJS, le sue caratteristiche principali, i vantaggi che offre e come utilizzarlo per la costruzione di pagine web personalizzate.

1. Cos’è GrapesJS?

GrapesJS è un web builder gratuito e open source che fornisce una piattaforma completa per la creazione di pagine web, email template e applicazioni web attraverso un’interfaccia visuale “drag-and-drop“. Creato inizialmente con l’obiettivo di aiutare i programmatori a ridurre il tempo di sviluppo front-end, GrapesJS è rapidamente diventato uno strumento indispensabile per chiunque abbia bisogno di un editor visivo per la progettazione di contenuti web. Clicca su questo link per eseguire una demo di GrapesJS.

Demo di GrapesJS
Demo di GrapesJS

2. Caratteristiche Principali di GrapesJS

GrapesJS si distingue per una serie di funzionalità chiave che lo rendono un’opzione formidabile rispetto ad altri builder disponibili sul mercato:

2.1 Editor Visuale Drag-and-Drop

La funzione principale di GrapesJS è il suo editor visuale drag-and-drop che consente agli utenti di posizionare facilmente gli elementi della pagina (come testo, immagini, pulsanti e form) e vedere i cambiamenti in tempo reale. Questo approccio elimina la necessità di conoscere HTML e CSS per costruire una pagina web.

2.2 Editor di Codice Integrato

Sebbene GrapesJS sia focalizzato sull’editing visivo, offre anche la possibilità di accedere e modificare direttamente il codice HTML, CSS e JavaScript. Questo è particolarmente utile per sviluppatori esperti che desiderano personalizzare ulteriormente i loro progetti.

2.3 Componenti Modulari

GrapesJS è basato su un’architettura a componenti modulari. Gli utenti possono scegliere e organizzare i componenti da una vasta libreria, o crearne di nuovi per adattarli a specifiche esigenze. I componenti più comuni includono sezioni di testo, immagini, link, bottoni e persino video.

2.4 Supporto per il Responsive Design

Il framework include strumenti per creare pagine responsive. Gli utenti possono configurare breakpoint e stili personalizzati per adattare le loro pagine a vari dispositivi, come desktop, tablet e smartphone.

2.5 Compatibilità con i Framework di Frontend

GrapesJS può integrarsi facilmente con framework come Bootstrap e Tailwind CSS, semplificando ulteriormente lo sviluppo di layout responsive e componenti complessi.

2.6 Gestione degli Stili CSS

Una delle caratteristiche più apprezzate di GrapesJS è la sua interfaccia grafica per la gestione degli stili CSS. Permette di applicare stili personalizzati a ogni componente, come colore, dimensioni, margini, padding, e altro, attraverso un’interfaccia user-friendly.

2.7 Template Predefiniti

GrapesJS offre numerosi template predefiniti che possono essere utilizzati come base per i progetti. Questo è particolarmente utile per la creazione rapida di landing page o siti web con un design accattivante.

2.8 Integrazione di Plugin

Grazie alla sua architettura aperta, è possibile estendere GrapesJS con plugin di terze parti, che aggiungono funzionalità extra come l’integrazione di form avanzati, gallerie di immagini, animazioni o addirittura il supporto per la creazione di newsletter via email.

3. Vantaggi di GrapesJS

L’adozione di GrapesJS offre numerosi vantaggi sia ai principianti che ai professionisti del web design:

3.1 Gratuito e Open Source:

GrapesJS è completamente gratuito e il suo codice sorgente è disponibile su GitHub. Questo lo rende un’ottima scelta per chi cerca una soluzione senza costi nascosti, con il vantaggio di poter essere personalizzato secondo necessità.

3.2 Nessuna Dipendenza da Librerie Esterne:

GrapesJS è completamente autonomo e non richiede l’installazione di librerie esterne, come jQuery. Questo lo rende leggero e facile da integrare in qualsiasi progetto.

3.3 Semplicità d’uso:

Anche chi ha poca o nessuna esperienza con il codice può iniziare rapidamente a creare pagine web grazie alla sua interfaccia intuitiva. Al contempo, gli sviluppatori esperti apprezzeranno la flessibilità e la possibilità di intervenire direttamente sul codice.

3.4 Riduzione dei Tempi di Sviluppo:

Grazie alle sue caratteristiche visive e alla modularità, GrapesJS consente di risparmiare tempo nello sviluppo di pagine web complesse, facilitando l’iterazione rapida di prototipi e mockup.

3.5 Ampia Documentazione:

GrapesJS è dotato di un’ottima documentazione online che copre tutti gli aspetti del framework, dai concetti di base all’implementazione avanzata di componenti personalizzati.

4. Come Usare GrapesJS?

Utilizzare GrapesJS è semplicissimo, soprattutto per chi è già abituato a lavorare con strumenti di web design visuali. Ecco un breve script su come mettere in azione GrapesJS.

4.1 GrapesJS in azione

È possibile iniziare a utilizzare GrapesJS includendolo semplicemente, tramite un link CDN, GrapesJS in un progetto HTML. Per chi desidera approfondire, è anche possibile integrarlo in applicazioni più complesse. Ecco il codice di esempio per avviare GrapesJS:


   <link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" />
   <script src="https://unpkg.com/grapesjs"></script>
   <script src="https://unpkg.com/grapesjs-blocks-basic"></script>
   <script src="https://unpkg.com/grapesjs-preset-webpage"></script>
   <script src="https://unpkg.com/grapesjs-plugin-export"></script>
   <script src="https://unpkg.com/grapesjs-touch"></script>
   <script src="https://unpkg.com/grapesjs-plugin-forms"></script>
   <script src="https://unpkg.com/grapesjs-tailwind"></script>
   <script src="https://unpkg.com/grapesjs-custom-code"></script>

   <div id="gjs"></div>

   <script type="text/javascript">
      var editor = grapesjs.init({
         container : '#gjs',
         height: '100%',
         fromElement: true,
         storageManager: true,      
         plugins: [
                     "grapesjs-preset-webpage", 
                     "gjs-blocks-basic", 
                     "grapesjs-plugin-export",
                     "grapesjs-touch",
                     "grapesjs-plugin-forms",
                     "grapesjs-tailwind",
                     "grapesjs-custom-code"
                  ],
         canvas: {
             styles: [
                 'https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'
             ],
             scripts: [
                 'https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js',
                 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js',
                 'https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'
             ],
         }
     });
   </script>

Per quanto ti possa sembrare strano per utilizzare GrapesJS non devi fare altro che includere il foglio di stile e il file Javascript che compongono il CORE del web builder. In questo esempio però il codice è più complesso in quanto sono stati integrati in GrapesJS altri strumenti. Ad ogni modo se vuoi provarlo immediatamente puoi aprire la pagina di W3Schools per eseguire GrapesJS Online senza creare nessuna pagina html. Quindi clicca su questo link e incolla il codice riportato precedentemente. Clicca sul pulsante “RUN” e GrapesJS prenderà vita.

Esecuzione di GrapesJS con W3schools
Esecuzione di GrapesJS con W3schools

Con il codice che ti ho appena fornito, hai la possibilità di avere a disposizione in GrapesJS tutti i componenti della libreria TailwindCSS, BootStrap e JQuery. TailwindCSS è un framework CSS che ti permette di progettare interfacce utente in modo rapido e flessibile. Avrai a disposizione in GrapesJS tutti i componenti che TailWindCSS espone. Nell’esempio puoi vedere il componente “Pricing” che crea una sezione Prezzi così come siamo abituati a vedere nei vari siti web di e-commerce.

C’è un’altra cosa che non devi trascurare, GrapesJS è estendibile con altri componenti realizzati da te e che puoi importare nel suo Block Manager, cioè nel suo gestore di componenti. Ora una domanda sarebbe legittima, “Come si progetta un nuovo componente in GrapesJS ?“, Il processo è semplice, ma è necessario avere le competenze giuste per farlo. Ad ogni modo noi abbiamo a disposizione un grande amico: “ChatGPT”. Sì ChatGPT può sviluppare per te componenti personalizzati da aggiungere a quelli già presenti in GrapesJS. Infatti prova ad aprire ChatGPT, digita questo prompt, copia e incolla il codice nella solita finestra messa a disposizione da W3Schools e troverai il tuo componente nel Block Manager dei componenti di GrapesJS.

Prompt di richiesta creazione componente aggiuntivo a GrapesJS
Prompt di richiesta creazione componente aggiuntivo a GrapesJS

4.2 Interfaccia Grafica:


Come hai potuto notare l’editor visuale si aprirà in un container HTML. L’interfaccia mostra una tela centrale dove è possibile trascinare e rilasciare gli elementi, una barra laterale con i componenti, e un’area per modificare le proprietà e lo stile degli elementi selezionati.

4.3 Creazione del Layout


A questo punto, si possono selezionare componenti predefiniti come sezioni, colonne, immagini o testi e disporli sulla pagina. Ogni componente può essere personalizzato utilizzando il pannello di proprietà, dove si possono impostare colori, font, dimensioni e molto altro.

4.4 Esportazione del Codice:


Una volta completata la pagina, è possibile esportare il codice HTML e CSS generato per utilizzarlo in qualsiasi altro progetto o ambiente di hosting. Basta cliccare sulla freccia in alto a destra

Esportazione del codice prodotto da GrapesJS
Esportazione del codice prodotto da GrapesJS

5. Applicazioni di GrapesJS

GrapesJS è adatto a una vasta gamma di utilizzi:

5.1 Landing Page:

È perfetto per la creazione rapida di landing page ottimizzate per conversioni, grazie ai suoi modelli e alla facilità di personalizzazione.

5.2 Email Template:

Con l’aiuto di plugin specifici, può essere utilizzato per creare email template compatibili con vari client di posta elettronica. Clicca su questo link per vedere GrapesJS Newsletter in azione.

5.3 Prototipazione Web:

Grazie alla sua velocità di utilizzo, GrapesJS è ideale per creare prototipi di siti web da presentare ai clienti o da utilizzare come base per sviluppi futuri.


Leggi anche: Cronjob: Esegui script schedulati gratuitamente


Come costruire pagine web con GrapesJS

6. Conclusioni

GrapesJS è uno strumento versatile che offre una soluzione completa e gratuita per la creazione di pagine web e landing page. La sua flessibilità, unita alla semplicità d’uso, lo rende adatto sia ai principianti che agli sviluppatori esperti. Se sei alla ricerca di un web builder open source, potente e personalizzabile, GrapesJS è sicuramente un’opzione da considerare.

Grazie alla sua ampia comunità e alla continua evoluzione del progetto, GrapesJS rappresenta un’ottima alternativa ad altre piattaforme di web design, con il grande vantaggio di essere libero da vincoli commerciali.

Antonio Lamorgese

Amministratore di rete e sviluppatore. Dopo anni di esperienza nel settore, ho ideato un sistema di gestione dati MYSQL in PHP senza scrivere una sola riga di codice. Scopri di più....