Je partage un nouveau widget Grist : Grist Design Web, un constructeur de pages web visuel en glisser-déposer (basé sur GrapesJS), directement intégré à Grist.
En bref
Il permet de créer des pages HTML/CSS/JS sans aucune ligne de code : on glisse des blocs (sections Hero, Call-to-Action, Features, Pricing, FAQ, Navbar, Footer, formulaires, colonnes, textes, images…), on ajuste le style dans des panneaux visuels, et c’est prêt.
Ce qu’on peut faire
-
Composer une page par glisser-déposer, 100 % sans code
-
Régler les styles visuellement (mise en page, typo, couleurs, bordures…)
-
Aperçu responsive : Desktop / Tablette / Mobile
-
Sauvegarder les pages dans le document Grist (et les recharger)
-
Générer un fichier ZIP contenant
index.html +
widget.js
Le point clé : réutilisable dans Widget Builder
Le ZIP exporté (HTML + JavaScript) est directement réutilisable comme widget personnalisé : il embarque déjà l’API Grist (grist-plugin-api.js) et grist.ready(). Il suffit d’héberger les deux fichiers et de pointer l’URL du widget dessus. On peut donc concevoir visuellement une page, puis l’utiliser comme widget dans n’importe quel document.
Les images téléchargées depuis votre ordinateur sont directement embarquées dans le code HTML sous forme de données encodées en Base64.
Liens
-
Page / widget (GitHub Pages) : https://isaytoo.github.io/grist-design-web/ -
Code source (GitHub) : https://github.com/isaytoo/grist-design-web
Pour l’essayer dans Grist
-
Ajoutez une vue Widget personnalisé
-
Dans URL personnalisée, collez :
https://isaytoo.github.io/grist-design-web/ -
Réglez le niveau d’accès sur « Accès complet au document » (nécessaire pour enregistrer les pages)
La démo ici : Design Web - Grist
C’est open source et basé sur GrapesJS.
