Éditeur HTML WYSIWYG
Un éditeur HTML WYSIWYG vous permet de composer une page web en la regardant pendant que le programme écrit le balisage. Voyez où l'aperçu peut vous tromper et comment Mobirise, notre éditeur gratuit à blocs, se compare à cinq autres outils.
Gratuit pour les sites personnels et commerciaux.
pour l'application et son export HTML
L'application de bureau Mobirise exporte votre site en fichiers statiques sur tous les plans. Ouvrir le code dans l'éditeur demande un plan payant.
Les éditeurs HTML WYSIWYG en un coup d'œil
Données sur les éditeurs réunies par l'équipe Mobirise, octobre 2026.
WYSIWYG signifie « ce que vous voyez est ce que vous obtenez » (de l'anglais what you see is what you get). Dans ce type d'éditeur, vous travaillez sur la page telle qu'elle s'affiche, et non sur son code source : vous cliquez sur un titre et tapez, vous déposez une image ou changez une couleur, et le programme écrit le HTML et le CSS qui correspondent à chaque action. On peut ainsi concevoir une page web en HTML sans saisir de balises, mais l'écran montre un aperçu proche du résultat, pas une garantie.
Éditeurs classiques en mode création, créateurs à blocs, concepteurs CSS visuels et éditeurs de code avec aperçu en direct.
L'éditeur visuel et son export HTML ne coûtent rien sous Windows, Mac ou Linux, et vous démarrez avec 200+ blocs. Avec le plan gratuit, les pages publiées affichent la mention Mobirise.
Des pages .html simples stylées avec Bootstrap 5, accompagnées de leurs scripts. Tout hébergeur capable de servir des fichiers simples peut les diffuser ; aucun code ne s'exécute côté serveur.
Pour lire ou modifier le balisage lui-même, il faut l'extension Code Editor, fournie avec les plans KIT, BASE et GROW, et utilisable par bloc ou par page.
Mobirise ne peut pas charger un site ou un modèle créé ailleurs. Pinegrow, Dreamweaver, Bootstrap Studio et CoffeeCup le peuvent.
Les blocs s'adaptent au téléphone, à la tablette et à l'ordinateur, et vous prévisualisez chaque largeur. Il n'existe pas de mise en page séparée pour le téléphone.
Quel éditeur HTML visuel correspond à votre besoin
Il n'existe pas de meilleur éditeur HTML WYSIWYG dans l'absolu : choisissez selon le travail à accomplir. Pour plusieurs de ces tâches, un concurrent est la meilleure réponse, et sa fiche le dit.
Mobirise
Vous voyez le rendu final pendant que vous faites glisser des blocs, retapez leur texte et ajustez leurs paramètres ; l'application gratuite écrit ensuite un site Bootstrap 5 statique. Le bémol : le HTML venu d'ailleurs ne se charge pas, et voir le code exige un plan payant.
Pinegrow Web Editor
Charge n'importe quel fichier .html existant et affiche une vue visuelle en direct à côté de son balisage ; Tailwind CSS est également pris en charge. Le bémol : 18 $ par mois, 149 $ par an ou 199 $ en une fois.
Bootstrap Studio
Composants Bootstrap en glisser-déposer, éditeur de code intégré et projets hors ligne, pour 29 $ ou 59 $ en paiement unique. Le bémol : vous restez dans la logique de composants de Bootstrap.
Adobe Dreamweaver
Live View permet de cliquer dans la page rendue pour modifier son texte, ses images et ses classes, le code source gardant la main. Le bémol : un abonnement, à 22,99 $ par mois pour l'offre à une seule application, et pas de version Linux.
CoffeeCup HTML Editor
Un aperçu en écran partagé redessine la page pendant que vous tapez ; il existe une édition gratuite, et la version complète coûte 29 $ en une fois. Le bémol : Windows uniquement, et vous écrivez chaque balise.
Webflow
Un concepteur visuel bâti sur le CSS, avec chaque point de rupture réglé à la main ; l'export du code exige un plan payant. Le bémol : les panneaux reflètent le CSS, donc l'outil profite surtout à ceux qui le connaissent déjà.
8B AI
Tapez une phrase et obtenez le design d'un site complet ; l'offre gratuite permet de consulter le vrai HTML et CSS qui le compose. Le bémol : il vit dans le navigateur, et la mise en ligne, l'export complet et les modifications par chat nécessitent le plan Pro (9 $ par mois, facturé annuellement).
Elementor
Un plugin de création de pages pour les sites WordPress. Le bémol : vous n'obtenez aucun dossier HTML autonome, car les pages ont besoin de WordPress sur votre serveur.
Une précision : Mobirise est notre produit, lisez donc cette liste comme celle d'une partie intéressée. Les détails sur chaque concurrent proviennent des pages produit et tarifs de son concepteur, et quand un concurrent fait mieux pour une tâche, nous le disons.
Six outils HTML visuels côte à côte
Des lignes choisies pour ceux qui se soucient du HTML lui-même : ce que l'on modifie à l'écran, l'ouverture du code et le chargement de fichiers externes.
| Caractéristique | Mobirise | Pinegrow Web Editor | Adobe Dreamweaver | 8B AI | Bootstrap Studio | CoffeeCup HTML Editor |
|---|---|---|---|---|---|---|
| Ce que l'on modifie à l'écran | La page elle-même : blocs glissés, texte saisi sur place, réglages par bloc | La page rendue à côté de ses fichiers source | Surtout du code ; Live View permet de modifier la page rendue | Un design généré, retravaillé par chat IA avec le plan Pro | Des composants Bootstrap déposés sur un canevas, avec un panneau de code | Du code, avec un aperçu en direct en écran partagé |
| Saisie de votre propre code | Via l'extension Code Editor (KIT, BASE, GROW), pour un bloc ou une page | Oui, avec synchronisation dans les deux sens avec VS Code | Oui, c'est le mode principal, avec des suggestions de code | Aucune modification manuelle indiquée ; l'offre gratuite montre le vrai HTML et CSS | Oui : HTML, SASS, JavaScript et JSON dans un éditeur inspiré de VS Code | Oui ; il complète le code et vérifie votre balisage |
| Charge un site .html existant | Non, seulement les projets commencés dans Mobirise | Oui, n'importe quel site existant | Oui, y compris les pages Bootstrap existantes | Non précisé par le fournisseur | Oui, en déposant des pages, feuilles de style, scripts et images existants dans un projet | Oui, des fichiers locaux ou des pages ouvertes directement sur un serveur |
| Framework utilisé par le HTML exporté | Bootstrap 5 | Tailwind CSS, Bootstrap, ou aucun | Au choix ; livré avec Bootstrap 5.3.8, 4.4.1 et 3.4.1 | Balisage personnalisé propre à l'outil ; pas de Bootstrap | Bootstrap 5, 4 ou 3 | Votre propre balisage ; des modèles adaptatifs gratuits pour démarrer |
| Fonctionne sur | Windows, macOS (version Apple Silicon ou Intel), Linux basé sur Debian, un navigateur, Android | Windows, macOS, Linux ; une édition navigateur aussi | Windows et macOS | Navigateur uniquement | Windows, macOS, Linux | Windows uniquement |
| Prix et facturation | 0 $ pour l'éditeur et son export HTML. Plans annuels : KIT à 149 $ débloque le Code Editor et les thèmes premium ; BASE (199 $) et GROW (249 $) ajoutent aussi l'hébergement de sites et l'IA | 18 $ par mois, 149 $ par an ou 199 $ en une fois ; essai gratuit | Offre à une seule application à 22,99 $ par mois, engagement annuel payé mensuellement ; essai gratuit | La conception est gratuite ; le plan Pro, nécessaire pour publier, coûte 9 $ par mois facturé annuellement | Paiement unique : 29 $ en Standard ou 59 $ en Lifetime | Édition gratuite, ou licence perpétuelle à 29 $ qui inclut un an de mises à jour |
Quand « ce que vous voyez » n'est plus exact
L'éditeur dessine la page une seule fois, sur votre écran. Chaque visiteur arrive avec un navigateur, un appareil et des polices différents.
Dans la plupart des éditeurs visuels actuels, le canevas est une vraie page web dessinée par un moteur de navigateur : une bonne part de ce que vous voyez est donc authentique, avec les mêmes balises et les mêmes styles. Les écarts apparaissent là où la configuration d'un visiteur diffère de la vôtre. Trois d'entre eux piègent presque tout le monde.
Polices
Un visiteur ne voit votre police que si la page la charge depuis le web ou l'embarque avec le site. Sinon, son appareil la remplace par une autre et les titres se réorganisent. Vérifiez que le thème fournit ses polices.
Tailles d'écran
Le canevas montre une seule largeur à la fois. Un titre qui tient sur un portable peut s'étaler sur plusieurs lignes sur un téléphone, et une rangée de colonnes peut s'empiler. Parcourez l'aperçu à chaque largeur avant de publier.
Scripts
Les carrousels, menus, formulaires, cartes et vidéos intégrées se comportent souvent autrement dans un éditeur, ou y sont volontairement en pause. Considérez-les comme des substituts, testez la page exportée dans de vrais navigateurs et envoyez un formulaire de test depuis l'hébergement en ligne.
Quatre familles d'éditeurs HTML WYSIWYG
Tous montrent la page pendant que vous travaillez. Ils diffèrent par ce que vous manipulez : la page, des blocs prêts à l'emploi, des propriétés CSS ou le code.
Mode création classique
Un canevas façon document posé sur le HTML, généralement à côté du code ; Live View de Dreamweaver en est la forme actuelle. Convient à ceux qui entretiennent des sites codés à la main et veulent corriger un texte sans fouiller dans les balises.
Créateurs à blocs
Les pages se composent à partir de sections ou de composants finis, comme dans Mobirise ou Bootstrap Studio, pendant que le programme écrit le balisage. Beaucoup appellent ce type d'outil un créateur de pages HTML. Idéal pour qui veut un site sans code ; de nombreux constructeurs de pages web faciles pour débutants fonctionnent aussi ainsi.
Concepteurs CSS visuels
Webflow, ou Pinegrow sur vos propres fichiers : vous stylez les éléments dans des panneaux qui correspondent aux propriétés CSS. Convient aux designers qui pensent déjà en boîtes, classes et points de rupture.
Éditeurs de code avec aperçu en direct
CoffeeCup HTML Editor et ses semblables, souvent classés parmi les éditeurs HTML WYSIWYG avec aperçu : vous tapez le HTML et un volet voisin redessine la page. Ils conviennent à ceux qui apprennent le HTML, et aux développeurs qui écrivent chaque balise mais aiment en voir l'effet aussitôt.
Vous créez votre propre application plutôt qu'un site web ? Alors l'éditeur qu'il vous faut est un composant : une zone de texte enrichi que vous intégrez à un formulaire, un CMS ou un service d'assistance pour que vos utilisateurs mettent leur texte en forme. TinyMCE et CKEditor 5 sont les vétérans complets, avec des offres cloud et des modules payants ; Quill est un éditeur HTML WYSIWYG open source plus léger ; TipTap est une boîte à outils sans interface (headless) bâtie sur ProseMirror, vous concevez donc vous-même sa barre d'outils. Ils produisent des fragments de HTML dans votre produit, pas des pages entières, c'est pourquoi ils restent hors du tableau ci-dessus.
Ce qui se règle visuellement dans Mobirise, et ce qui demande du code
L'essentiel d'une page se fait en pointant et en cliquant. L'extension Code Editor couvre ce que les panneaux laissent de côté.
Blocs
Chaque page de l'éditeur est une colonne de sections prêtes à l'emploi. Ajoutez-en une depuis le panneau latéral et supprimez celles dont vous n'avez pas besoin.
Texte et balises de titre
Tapez directement sur la page. Chaque titre prend la balise H de votre choix : le plan de la page vous appartient.
Photos
Cliquez sur une photo pour la remplacer par la vôtre. Redimensionnez les gros fichiers avant de les ajouter ; les conseils ci-dessous expliquent pourquoi.
Paramètres des blocs
Un panneau des paramètres par bloc règle l'espacement, l'arrière-plan, les parties visibles comme le titre ou les boutons, et le nombre de colonnes.
Polices et couleurs
Le Style Editor est l'endroit où vous choisissez les polices et la palette de couleurs utilisées par les blocs.
Du code, quand il le faut
Un attribut supplémentaire, une règle CSS personnalisée ou un balisage remanié passent par l'extension Code Editor, incluse dans KIT, BASE et GROW.
Une limite à connaître : le HTML que vous mettez en page est le HTML que reçoit chaque appareil. Mobirise ne propose pas de mise en page propre au téléphone, et aucun élément ne peut être masqué à une seule taille d'écran.
Les fichiers obtenus à l'export
L'export depuis l'application de bureau ne coûte rien, quel que soit le plan. Vous construisez plutôt dans le navigateur ? Dans ce cas, télécharger le code demande BASE ou GROW.
Pages et images
Un fichier HTML par page, avec des titres, paragraphes et liens ordinaires, plus vos photos et les graphiques du thème dans le dossier exporté.
Styles et scripts
Le CSS et le JavaScript de Bootstrap 5, les styles propres au thème, les choix faits dans les panneaux, et les scripts derrière les menus et les carrousels.
Rien sur le serveur
Pas de PHP, pas de base de données, pas de panneau d'administration : le site fonctionne chez n'importe quel hébergeur web ordinaire ou sur GitHub Pages.
L'export va dans un seul sens. Mobirise construit à partir de son propre projet, pas à partir de HTML ; les modifications apportées aux fichiers exportés dans un autre éditeur restent donc en dehors. Faites vos changements de code dans le Code Editor, ou considérez les retouches manuelles comme l'étape finale.
Garder un HTML créé visuellement propre et rapide
Les outils visuels ajoutent un peu de poids par conception. Ces habitudes le limitent, dans Mobirise ou tout autre éditeur.
Structurez avec les titres, pas avec les tailles
Donnez à chaque page un seul H1, placez des H2 et H3 en dessous, et choisissez chaque balise selon son rang dans le plan. L'aspect visuel est une affaire de style.
Réduisez d'abord les photos
Redimensionnez chaque image à peu près à sa largeur d'affichage maximale et enregistrez-la en WebP ou en JPEG bien compressé. Un seul original d'appareil photo peut peser plus que le reste de la page.
Stylez à un seul endroit
Restyler les boutons un par un laisse une traînée de règles isolées. Réglez polices et couleurs de façon centralisée, dans le Style Editor ou l'équivalent de votre outil, et le CSS reste court.
Testez en dehors de l'éditeur
Ouvrez la page exportée dans plusieurs navigateurs, lancez le validateur W3C et un test de vitesse comme PageSpeed Insights, puis corrigez ce qu'ils signalent avant la mise en ligne.
Thème Mobirise ou modèles de site HTML gratuits ?
Chacun donne un rendu fini dès le premier jour. La différence tient à qui écrit le balisage et à quels éditeurs pourront le charger ensuite.
Un modèle téléchargé
Un dossier de fichiers écrits par quelqu'un d'autre. Modifiez-le dans un éditeur de code ou un outil visuel qui ouvre du HTML externe, comme Pinegrow, Dreamweaver, Bootstrap Studio ou CoffeeCup. Lisez la licence : certains modèles gratuits exigent un lien de crédit.
Un thème Mobirise
Une bibliothèque de blocs qui vit dans l'application plutôt qu'un dossier de fichiers. Vous composez vos pages visuellement à partir d'elle, et l'export produit le HTML. Les utilisateurs gratuits disposent de 200+ blocs dans un seul thème de base ; KIT débloque tous les thèmes premium et extensions, plus de 220 au total.
Reprendre l'aspect d'un modèle
Mobirise ne peut pas ouvrir un modèle créé ailleurs, même bâti sur Bootstrap 5. Reconstruisez l'aspect avec des blocs, ou donnez une capture d'écran comme prompt à Mobirise AI et modifiez les quatre designs qu'il renvoie, si la licence du modèle l'autorise.
Pour qui Mobirise est un bon éditeur visuel
Mobirise convient à certains travaux et pas à d'autres. Voici comment savoir de quel côté se situe le vôtre.
Un bon choix
- Vous voulez mettre vos pages en forme visuellement sans jamais taper une balise
- Il vous faut des fichiers simples pour votre propre hébergeur, sans payer de plan
- Vous créez des sites clients à partir de blocs cohérents et adaptatifs
- Vous travaillez hors ligne sur un portable et publiez plus tard
- Vous voulez d'abord un brouillon IA, puis des retouches à la main dans le même éditeur
Un autre outil convient mieux si
- Votre travail consiste à corriger un vieux site codé à la main ou un modèle téléchargé : Dreamweaver, Pinegrow ou CoffeeCup HTML Editor
- Votre projet exige Tailwind ou aucun framework : Pinegrow
- Vous voulez un contrôle au pixel près et des styles par point de rupture : Webflow
- Vous préférez payer une seule fois pour du travail Bootstrap : Bootstrap Studio
- Vous voulez écrire et prévisualiser du code gratuitement : l'édition gratuite de CoffeeCup
- Le site tourne déjà sous WordPress : Elementor
Questions sur l'édition HTML visuelle
Qu'est-ce qu'un éditeur HTML WYSIWYG ?
Un éditeur où vous modifiez une page web telle qu'elle apparaît à l'écran pendant que le programme écrit le HTML et le CSS. L'acronyme promet que la page que vous modifiez est celle que vous publiez. En pratique, les deux sont proches mais pas identiques, car les polices, la largeur d'écran et les scripts dépendent du navigateur de chaque visiteur.
Mobirise est-il un éditeur HTML par glisser-déposer ?
Oui, au niveau des blocs : vous faites glisser des sections finies depuis un panneau latéral sur la page, puis vous y saisissez votre texte. Vous ne déposez pas d'éléments isolés n'importe où ; la mise en page découle des blocs et de leurs paramètres. Pour en savoir plus sur cette façon de travailler : constructeurs de site web gratuits par glisser-déposer.
Puis-je modifier le code HTML dans Mobirise ?
Oui, dès que vous avez l'extension Code Editor, fournie avec KIT (149 $ par an), BASE et GROW. Elle affiche le balisage et le CSS d'un seul bloc ou de la page entière. Les fichiers exportés avec le plan gratuit s'ouvrent aussi dans n'importe quel éditeur de texte, mais les modifications faites là-bas ne reviennent jamais dans le projet.
Mobirise peut-il ouvrir un modèle HTML que j'ai téléchargé ?
Non. Un modèle de place de marché ou un site codé à la main est du HTML simple, et Mobirise ne travaille qu'avec les projets créés en son sein. Dreamweaver, Pinegrow, Bootstrap Studio et CoffeeCup HTML Editor chargent tous du HTML existant ; dans Mobirise, vous recréeriez l'aspect à partir de blocs.
Existe-t-il un éditeur HTML WYSIWYG gratuit ?
Oui. L'application de bureau Mobirise ne coûte rien pour des sites personnels ou professionnels, pas plus que son export, mais les sites gratuits affichent la mention Mobirise. CoffeeCup propose une édition gratuite de son HTML Editor si vous préférez taper du code. 8B AI génère des designs gratuitement, mais leur publication est payante. Nous comparons d'autres options gratuites dans notre liste de logiciels gratuits de création de sites web.
Le HTML d'un éditeur visuel est-il moins bon que du code écrit à la main ?
Il est généralement plus lourd, car les outils visuels ajoutent des conteneurs et des classes que les pages écrites à la main évitent. Un code produit sur un framework comme Bootstrap 5 reste lisible et prévisible ; pour le côté framework, voir constructeur de site web Bootstrap. Pour un balisage aussi léger que possible, écrivez-le vous-même dans un éditeur de code.
Existe-t-il un éditeur HTML WYSIWYG hors ligne pour Mac, Windows ou Linux ?
Oui. L'application de bureau Mobirise existe pour Windows, pour macOS (Apple Silicon et Intel) et pour Ubuntu et les autres systèmes Linux basés sur Debian, et l'édition ne nécessite aucune connexion. Bootstrap Studio, qui garde les projets hors ligne, et Pinegrow fonctionnent aussi sur les trois systèmes, tandis que Dreamweaver n'a pas de version Linux et que CoffeeCup HTML Editor ne tourne que sous Windows. Les utilisateurs de Mac trouveront plus de choix dans notre guide des créateurs de sites web pour Mac.
Mobirise fonctionne-t-il hors ligne ?
Dans l'application de bureau, oui : l'édition visuelle, les aperçus et tout thème ou bloc déjà installé continuent de fonctionner sans réseau. Une connexion est nécessaire pour l'IA, la publication, la connexion à un compte, les achats, ainsi que pour télécharger les mises à jour ou les thèmes que vous n'avez pas encore. Plus de détails sur cette répartition : logiciel de création de site web hors ligne.
Existe-t-il un éditeur HTML WYSIWYG en ligne pour Android ou iPhone ?
Mobirise n'a pas d'application pour les appareils Apple, mais sur iPhone et iPad son créateur en ligne fonctionne dans Safari ou tout autre navigateur mobile. Sur Android, l'application Mobirise AI, installée depuis Google Play, génère des designs, traduit, publie et exporte du HTML. 8B AI fonctionne aussi dans le navigateur.
Créez votre première page dès aujourd'hui
Commencez avec l'IA dans le navigateur ou téléchargez l'application gratuite. Dans les deux cas, c'est le même Mobirise.