Weweb - guide pour débutant (tutoriel)

Comprendre les bases de Weweb

WeWeb est avant tout un outil no-code pour créer des applications web.

WeWeb fournit un éditeur visuel puissant dans lequel vous créez des interfaces graphiques sans écrire de code. On place des éléments (boutons, formulaires, listes, etc.) par glisser-déposer, et on définit leur apparence et leur comportement grâce à des propriétés visuelles et des workflows no-code (Javascript).

Pour faire simple : vous construisez l’interface utilisateur et la logique (flux, actions utilisateur, conditions) entièrement visuellement.

WeWeb gère le front-end (ce que l’utilisateur voit) et se connecte à un back-end pour tout le reste (données, authentification, sécurité, etc.).

Dans ce guide, nous verrons comment utiliser WeWeb avec Supabase (un backend open source) pour stocker les données et gérer l’authentification, et nous créerons pas-à-pas une petite application de type “to-do list”.

WeWeb un outil front-end

Le front-end désigne tout ce qui tourne dans le navigateur de l’utilisateur : la structure (HTML), le style (CSS), et le code d’interaction (JavaScript).

• Comprendre le front-end

Avec WeWeb, tout ce que voit l’utilisateur est géré dans le front-end. Lorsque vous avez un bouton ou un intéraction, Weweb se chargera de créer le code HTML, CSS et Javascript pour vous.

• Nécessité d’un back-end

A contrario de Bubble, Weweb ne fournit pas de back-end (ce qui est une bonne chose à mon avis).

Pour stocker vos données ou celui d’autres utilisateurs, vous aurez donc besoin d’un back-end.

C’est dans le back-end que sont stockées également l’authentification, la logique métier et la sécurité.

• Utiliser Supabase en back-end

Weweb s’intègre parfaitement avec Supabase. Je vous est écrit un guide pour débutant sur Supabase ici.

Pour faire simple, Supabase est un “back-end as a service” (similaire à Firebase mais open-source) qui fournit une base de données PostgreSQL (la meilleure du marché), un système d’authentification, des API automatiques, et plus encore.

Comprendre l’interface de l’éditeur WeWeb

Weweb est un outil qui change rapidement, ce guide a été réalisé en septembre 2025.

L’éditeur WeWeb est divisé en plusieurs zones : le haut, la gauche, la droite, et au centre le canvas (la zone où vous voyez la page). Voici les principales sections :

• Le haut (topbar) : La barre de navigation supérieure contient les commandes globales du projet ;

  • Le bouton Backend permet de connecter Weweb à Supabase.

• La gauche (left panel) : Le panneau de gauche comprend plusieurs onglets pour organiser votre contenu et votre logique ;

  • Dans l’onglet Layout (Mise en page), vous voyez l’arborescence des éléments (structure hiérarchique des composants) de la page courante. C’est ici que vous sélectionnez un élément de l’interface (titre, bouton, etc.) pour le modifier ;
  • L’onglet Popups liste les fenêtres modales/pop-ups de l’application ;
  • L’onglet Data affiche toutes les collections de données disponibles et les variables globales. C’est là qu’on crée une nouvelle collection liée à une table Supabase, par exemple ;
  • L’onglet Logic liste les workflows et formules globaux du projet ;
  • Enfin l’onglet Debugger affiche les logs et l’état des variables à la volée.

• La droite (right panel) : Le panneau de droite est le panneau des propriétés de l’élément sélectionné sur la page. Il a deux modes : Edit et AI.

  • En mode Édition (Edit), ce panneau permet de configurer l’élément sélectionné.
  • En mode IA (AI), le panneau de droite vous donne accès à l’agent WeWeb AI.

Connecter Supabase à Weweb

Pour que WeWeb puisse lire et écrire des données, il faut installer et configurer le plugin Supabase. Cela se fait en plusieurs étapes dans l’éditeur WeWeb :

• Cliquez sur Backend > Add Supabase > sous Added plugins cliquez sur Supabase > onglet Guided (recommended) cliquez sur Connect Supabase.

A la fin du processus, Supabase sera connecté à Weweb.

En principe, si vous avez déjà des tables vous aurez la possibilité de sélectionner les tables que vous souhaitez connecter à Weweb, sinon vous n’aurez aucune données d’affichée car vous n’avez aucune table créée.

Créons notre 1ère application sur WeWeb : une to-do liste

Nous allons construire une petite application de type “to-do list” pas à pas. L’idée est la suivante : chaque utilisateur s’authentifie, puis peut voir sa liste de tâches (stockée dans Supabase), en ajouter, cocher comme faites, etc. Voici les étapes :

Notre première table dans Supabase

1. Créer une base de données et une table “tasks”

Dans Supabase, allez dans l’onglet Table Editor. Créez une table, par exemple appelée tasks (dans le schema Public), avec les colonnes suivantes :

• id (type int8, clé primaire) ;
• created_at avec now() en valeur par défaut ;
• title (type text) ;
• completed (type boolean) ;
• user_id (type uuid) avec auth.uid() en valeur par défaut
  • Il faudra définir un clé étrangère
  • cliquer sur la chaîne > schema auth > table users > choississez la colonne id

Si vous souhaitez aller plus vite, voici une commande SQL :

create table public.tasks (
  id bigint generated by default as identity not null,
  created_at timestamp with time zone not null default now(),
  title text null,
  completed boolean null default false,
  user_id uuid null default auth.uid (),
  constraint tasks_pkey primary key (id),
  constraint tasks_user_id_fkey foreign KEY (user_id) references auth.users (id) on update CASCADE on delete CASCADE
);

2. Définir les règles de sécurité (Row-Level Security, RLS)

Par défaut, dans Supabase, toutes les données du schéma public sont accessibles sans restriction.

Pour un usage d’authentification, il est souvent préférable d’activer la RLS (Row-Level Security) et d’ajouter des politiques (Policies) qui limitent l’accès aux données.

Par exemple, vous pouvez créer une politique pour dire « un utilisateur ne peut lire ou écrire que ses propres tâches ».

Pour appliquer cette RLS, allez dans Add RLS policy depuis la table tasks, cliquez sur Create policy.

Le nom de la policy peut être “USERS, crud all”. Ensuite, vous allez cliquer sur ALL et insérer cette requête SQL :

(select auth.uid()) = user_id

Dans cette exemple nous allons utiliser ALL mais en pratiquer, veuillez à séparer chacune de vos policies et ne quasiment jamais utiliser ALL

Nous avons maintenant notre table de tâches dans Supabase. Nous allons créer un utilisateur fictif avant de passer sur Weweb.

Allez dans Authentication > Users > Add user > Create new user > on mettra comme mail test@exemple.com et comme mot de passe azerty.

On ajouera une ligne pour nos tests afin que ça soit plus facilement configurable sur Weweb.

Retourner sur la table tasks. Nous allons sélectionner l’utilisateur créé avant d’insérer la ligne :

Cliquez sur Role > authenticated role > cliquez sur l’utilisateur.

Supabase considérera que vous êtes authenfié comme l’utilisateur test@exemple.com.

Ajouter une ligne de test pour s’assurer que tout est OK. Ne renseigner que le title.

Ajoutons une page d’authentification

En principe, vous avez Supabase connecter à Weweb.

Pour ajouter une page d’athentification, cliquez sur le 2ème bouton en partant de la droite et créez une nouvelle page, qu’on appellera login.

Créons également une page Todo de la même manière.

Dans la page Login, nous allons ajouté le composant qui permet de se connecter :

• Cliquez sur le bouton + Add ;
• Choississez Supabase Auth > ajouter le composant Login.

Sur la gauche, dans l’onglet Layout vous aurez le composant Login avec tous les sous composant.

Cliquez sur Form Container puis dans le panneau de droite cliquez sur l’icon en forme d’éclair (Workflows), et en fin le workflow Login.

Dans l’action Redirect user after login, nous sélectionnerons la page Todo.

Puis fermer le workflow.

Cliquez sur Preview (en haut à gauche) et renseignez l’adresse mail et le mot de passe de l’utilisateur que nous avions créé puis Sign in.

En principe, vous devriez être connecté. Si vous regardez dans les Logs vous verrez ce genre d’informations :

Créons notre page to-do

Passons maintenant à la page principale qui affiche et gère la liste des tâches.

Ici on ne se focalisera uniquement sur l’aspect fonctionnel et non du design. Passez en mode Edit (cliquez à nouveau sur Preview)

On décomposera la page un 2 partie : le titre de la page et la table qui contient nos données.

0. Connecter les données à la table

Il faudra ajouter une nouvelle collection.

Dans le panneau de gauche, onglet Data, ajoutez une nouvelle collection.

• On l’appellera Todos ;
• La source : Supabase. Cliquez sur Create ;
• La table : tasks (si vous n’avez pas de liste déroulante, cliquez sur le bouton à côté pour actualiser) ;
• Continuer pour valider toutes les étapes.

1. Le titre

• Cliquez sur + Add > Basics > Ajoutez le composant Section ;
• Puis vous allez ajouter un composant Container ;
• Enfin ajouter un composant Heading, on mettra comme titre “Ma to-do” (cliquez 2 fois pour en modifier la valeur).

2. La table

• Ajoutez un autre composant Container (attention à le mettre en dehors du précedent Container) ;
• Dans ce nouveau Container on ajoutera le composant Datagrid ;
• Dans Specific > Data > on modifiera la formule pour mettre la données provenant de notre collections Todos

• Dans Specific > Unique Row Id > on modifierala formule pour mettre l’id de supabase

• Enfin on cliquera sur Generate columns

3. Modifier les données depuis Weweb

Pour pouvoir intéragir sur notre table Supabase depuis Weweb, vous devez rendre les colonnes éditables.

• Cliquez sur la colonne title puis dans Editable cliquez sur On
• Faites également de même avec Completed
• Créez le workflow lors de la modification d’un valeur
  • Le déclencheur sera On cell Value Changed
  • On ajoutera l’action Databse | Update
  • Sélectionner la table tasks
  • Il faudra bind l’id Event.row.id
  • Il faudra également bind le title et le completed

Créons la même application mais avec l’IA de WeWeb

WeWeb dispose d’un assistant IA intégré qui peut accélérer la création d’interfaces. Plutôt que de tout construire manuellement, vous pouvez demander à WeWeb AI de générer des pages ou des éléments. Par exemple, il est possible de dire à l’IA : « Crée une page to-do list pour l’utilisateur connecté en utilisant la table Supabase tasks ». L’IA va alors créer pour vous une page avec un titre, un input pour ajouter une tâche, une liste liée à la base, etc.

Elle peut générer également :

• des mises en page (en mode “Design & layouts”) : vous lui décrivez une interface (titre, listes, boutons) et elle la construit.
• des workflows et formules (en mode “Workflows & formulas”) : vous décrivez une logique (par ex. « au clic sur le bouton, inserer la tâche dans Supabase ») et l’IA configure l’action correspondante.
• l’intégration backend et données (mode “Backend & data”) : en lui indiquant le nom de la table Supabase, il peut générer les collections et lier les champs automatiquement.
• des composants sur mesure (mode “Custom components”) : pour créer des éléments réutilisables.

Ainsi, en utilisant le mode AI de l’éditeur (bouton “AI” dans la barre du haut), vous pourriez obtenir rapidement une version de votre app to-do en décrivant simplement ce qu’il doit faire. Cela permet notamment aux débutants d’être guidés dans la création, tout en pouvant affiner le résultat manuel par la suite.

Pour aller plus loin

PWA

WeWeb permet de transformer votre application en Progressive Web App (PWA) installable sur mobile.

Une PWA est une application web qui se comporte comme une app mobile installable, avec icône sur l’écran d’accueil, lancement plein écran, etc.

Plugins

WeWeb dispose d’un système de plugins très riche. Les plugins sont des « intégrations natives » qui étendent l’application en connectant des services tiers. On distingue trois catégories principales :

• Data sources (sources de données) : par exemple Supabase, Xano, Airtable, REST API, etc. Ces plugins vous permettent de connecter WeWeb à une base de données externe ;
• Authentication : plugins pour l’authentification (Auth0, OpenID, Supabase Auth, etc.) ;
• Extensions : ce sont des composants additionnels (comme des cartes Google Maps, des graphiques Charts, Stripe pour paiement, etc.). Ils ajoutent des fonctionnalités visuelles ou logiques complémentaires à votre app.

Vous pouvez ajouter un plugin via Plugins > Data sources/Authentication/Extensions dans l’éditeur WeWeb. L’onglet “Plugins” liste les plugins installés et ceux disponibles par catégorie. Si le service désiré n’a pas de plugin, vous pouvez toujours utiliser un appel REST API personnalisé ou le plugin JavaScript. Grâce aux plugins, l’intégration de Supabase (et bien d’autres) devient très simple.

FAQ

Voici quelques questions fréquentes sur WeWeb et son utilisation avec Supabase :

• WeWeb est-il gratuit ?

  WeWeb propose un plan gratuit qui permet de créer et tester des projets de base. Les projets gratuits ont certaines limitations (nombre de pages, trafic mensuel, etc.) et restent “en veille” après un certain temps d’inactivité. Pour publier en production et bénéficier de plus de ressources, des plans payants sont disponibles.

• Faut-il savoir coder pour utiliser WeWeb ?

  Non, WeWeb est conçu pour être utilisé sans écrire de code. Tout se fait visuellement via l’interface graphique et les workflows no-code. Cependant, pour aller plus loin, WeWeb permet d’ajouter du code personnalisé (JavaScript, CSS) si besoin. Mais ce n’est pas nécessaire pour une application basique.

• WeWeb gère-t-il la base de données ?

  Non, WeWeb ne gère pas les bases de données en interne. On utilise un service externe (comme Supabase) qui stocke les données. WeWeb se connecte à cette base via ses plugins « Data source ». Par exemple, le plugin Supabase fait le lien entre WeWeb et votre base de données PostgreSQL Supabase.

• Peut-on utiliser Supabase gratuitement ?

  Oui, Supabase propose un plan gratuit qui inclut une base PostgreSQL de taille limitée, l’authentification, le stockage de fichiers, etc. C’est souvent suffisant pour des projets de test ou de petite échelle. Au-delà, Supabase propose des plans payants pour plus de trafic ou de stockage.

• Quelle différence entre WeWeb et un autre outil no-code comme Webflow ou Bubble ?

  WeWeb est spécialisé pour créer des applications web (interfaces dynamiques) plutôt que de simples sites vitrines. Son originalité est la connexion facile à tout back-end (bases de données, APIs) via des plugins natifs, et la présence d’un assistant IA. Comparé à Webflow (orienté design) ou Bubble (qui gère backend+frontend), WeWeb se concentre sur le frontend visuel avec la liberté de choisir son backend (ex. Supabase, Xano, etc.).