WYSIWYG HTML-editor
Een WYSIWYG HTML-editor laat je een webpagina vormgeven terwijl je hem bekijkt, en het programma schrijft ondertussen de markup. Lees waar de preview je kan misleiden en hoe Mobirise, onze gratis blokgebaseerde editor, zich verhoudt tot vijf andere tools.
Gratis voor persoonlijke en commerciële websites.
voor de app en de HTML-export
De desktop-app van Mobirise exporteert je website bij elk abonnement als statische bestanden. De code in de editor openen vraagt een betaald abonnement.
WYSIWYG HTML-editors in één oogopslag
Feiten over de editors, verzameld door het Mobirise-team in oktober 2026.
WYSIWYG staat voor “what you see is what you get”: wat je ziet, krijg je. In een editor van dit soort werk je aan de pagina zoals die eruitziet, niet aan de broncode: je klikt op een kop en typt, plaatst een afbeelding of verandert een kleur, en het programma schrijft bij elke handeling de HTML en CSS. Zo kun je webpagina's in HTML ontwerpen zonder tags te typen, al is het scherm een goede benadering en geen garantie.
Klassieke editors met ontwerpweergave, blokbouwers, visuele CSS-ontwerptools en code-editors met een live preview.
De visuele editor en de HTML-export kosten niets op Windows, Mac of Linux, en je begint met 200+ blokken. In het gratis abonnement tonen gepubliceerde pagina's Mobirise-branding.
Gewone .html-pagina's, opgemaakt met Bootstrap 5, plus de bijbehorende scripts. Elke host die gewone bestanden aanbiedt kan ze leveren; er draait geen code aan de serverkant.
Om de markup zelf te lezen of te wijzigen heb je de extensie Code Editor nodig, die bij de abonnementen KIT, BASE en GROW zit en per blok of per pagina werkt.
Mobirise kan geen website of template laden die elders is gemaakt. Pinegrow, Dreamweaver, Bootstrap Studio en CoffeeCup kunnen dat wel.
Blokken passen zich aan voor telefoon, tablet en desktop, en je bekijkt elke breedte in de preview. Een aparte indeling voor telefoons bestaat niet.
Welke visuele HTML-editor past bij jouw klus
Er bestaat niet één beste WYSIWYG HTML-editor, dus kies op basis van het werk dat je gedaan wilt krijgen. Bij een aantal klussen is een concurrent het betere antwoord, en dat staat dan op zijn kaart.
Mobirise
Je ziet het eindresultaat terwijl je blokken op hun plek sleept, hun tekst opnieuw typt en blokparameters aanpast; de gratis app schrijft er vervolgens een statische Bootstrap 5-website van. Het nadeel: HTML van elders laadt niet, en de code bekijken kost een abonnement.
Pinegrow Web Editor
Laadt elk bestaand .html-bestand en toont een live visuele weergave naast de markup; Tailwind CSS wordt ook ondersteund. Het nadeel: $18 per maand, $149 per jaar of $199 eenmalig.
Bootstrap Studio
Bootstrap-componenten die je sleept en neerzet, een ingebouwde code-editor en offline projecten, voor $29 of $59 eenmalig. Het nadeel: je blijft binnen het componentmodel van Bootstrap.
Adobe Dreamweaver
Met Live View klik je in de weergegeven pagina en wijzig je tekst, afbeeldingen en klassen, terwijl de broncode de baas blijft. Het nadeel: een abonnement, $22,99 per maand bij het abonnement voor één app, en geen Linux-versie.
CoffeeCup HTML Editor
Een gesplitste preview tekent de pagina opnieuw terwijl je typt; er is een gratis editie, en de volledige versie kost eenmalig $29. Het nadeel: alleen Windows, en je schrijft elke tag zelf.
Webflow
Een visuele ontwerptool op basis van CSS, met elk breakpoint met de hand ingesteld; de code exporteren vereist een betaald abonnement. Het nadeel: de panelen spiegelen CSS, dus het loont vooral voor wie CSS al kent.
8B AI
Typ een zin en krijg een compleet websiteontwerp; in het gratis niveau kun je de echte HTML en CSS erachter bekijken. Het nadeel: het draait in de browser, en live gaan, de volledige export en bewerken via chat vereisen het Pro-abonnement ($9 per maand, jaarlijks betaald).
Elementor
Een paginabouwer-plug-in voor WordPress-websites. Het nadeel: je krijgt geen losse map met HTML, want de pagina's hebben WordPress nodig dat op je server draait.
Een kanttekening: Mobirise is van ons, dus lees deze lijst als geschreven door een belanghebbende. De gegevens over elke concurrent komen van de product- en prijspagina's van de leverancier zelf, en waar een concurrent een klus beter aanpakt, zeggen we dat.
Zes visuele HTML-tools naast elkaar
Rijen gekozen voor mensen die om de HTML zelf geven: wat je op het scherm bewerkt, hoe open de code is en of bestanden van buiten laden.
| Kenmerk | Mobirise | Pinegrow Web Editor | Adobe Dreamweaver | 8B AI | Bootstrap Studio | CoffeeCup HTML Editor |
|---|---|---|---|---|---|---|
| Wat je op het scherm bewerkt | De pagina zelf: blokken die je sleept, tekst die je ter plekke typt, instellingen per blok | De weergegeven pagina naast de bronbestanden | Vooral code; met Live View kun je de weergegeven pagina bewerken | Een gegenereerd ontwerp, aan te passen via AI-chat in Pro | Bootstrap-componenten die op een canvas worden neergezet, met een codepaneel | Code, met een live preview in een gesplitst scherm |
| Je eigen code typen | Via de extensie Code Editor (KIT, BASE, GROW), voor een blok of een pagina | Ja, met tweerichtingssynchronisatie met VS Code | Ja, het is de hoofdmodus, met codehints | Geen handmatig bewerken vermeld; het gratis niveau toont de echte HTML en CSS | Ja: HTML, SASS, JavaScript en JSON in een editor naar het model van VS Code | Ja; hij vult code aan en controleert je markup |
| Laadt een bestaande .html-website | Nee, alleen projecten die in Mobirise zijn gestart | Ja, elke bestaande website | Ja, ook bestaande Bootstrap-pagina's | Niet vermeld door de leverancier | Ja, door bestaande pagina's, stylesheets, scripts en afbeeldingen in een project te slepen | Ja, lokale bestanden of pagina's die rechtstreeks op een server worden geopend |
| Framework dat de geëxporteerde HTML gebruikt | Bootstrap 5 | Tailwind CSS, Bootstrap of geen | Elk; wordt geleverd met Bootstrap 5.3.8, 4.4.1 en 3.4.1 | Eigen markup; geen Bootstrap | Bootstrap 5, 4 of 3 | Je eigen markup; gratis responsieve templates om mee te beginnen |
| Draait op | Windows, macOS (build voor Apple Silicon of Intel), Linux op Debian-basis, een browser, Android | Windows, macOS, Linux; ook een browserversie | Windows en macOS | Alleen browser | Windows, macOS, Linux | Alleen Windows |
| Prijs en facturering | $0 voor de editor en de HTML-export. Jaarabonnementen: KIT voor $149 ontgrendelt de Code Editor en premium thema's; BASE ($199) en GROW ($249) brengen ook gehoste websites en AI | $18 per maand, $149 per jaar of $199 eenmalig; gratis proefperiode | Abonnement voor één app voor $22,99 per maand, jaarcontract maandelijks betaald; gratis proefperiode | Ontwerpen is gratis; Pro, nodig om te publiceren, kost $9 per maand, jaarlijks gefactureerd | Eenmalig betaald: $29 Standard of $59 Lifetime | Gratis editie, of een eeuwigdurende licentie van $29 inclusief een jaar upgrades |
Waar “wat je ziet” niet meer klopt
De editor tekent de pagina één keer, op jouw scherm. Elke bezoeker brengt een andere browser, een ander apparaat en andere lettertypen mee.
In de meeste huidige visuele editors is het canvas een echte webpagina die door een browserengine wordt getekend, dus veel van wat je ziet klopt echt: dezelfde tags, dezelfde stijlen. De verschillen ontstaan waar de opstelling van een bezoeker van de jouwe afwijkt. Drie ervan treffen bijna iedereen.
Lettertypen
Een bezoeker ziet jouw lettertype alleen als de pagina het van het web laadt of het met de website meelevert. Zo niet, dan kiest hun apparaat een ander lettertype en breken koppen anders af. Controleer of het thema zijn lettertypen meelevert.
Schermformaten
Het canvas toont één breedte tegelijk. Een kop die op een laptop past, kan op een telefoon over meerdere regels lopen, en een rij kolommen kan onder elkaar komen te staan. Loop vóór het publiceren alle breedtes in de preview na.
Scripts
Sliders, menu's, formulieren, kaarten en ingesloten video gedragen zich in een editor vaak anders of staan er met opzet stil. Zie ze daar als plaatshouders, test de geëxporteerde pagina in echte browsers en verstuur een testformulier vanaf de live host.
Vier soorten WYSIWYG HTML-editors
Ze tonen allemaal de pagina terwijl je werkt. Ze verschillen in wat je aanraakt: de pagina, kant-en-klare blokken, CSS-eigenschappen of de code.
Klassieke ontwerpweergave
Een documentachtig canvas boven de HTML, meestal naast de code; Live View van Dreamweaver is de huidige vorm ervan. Past bij mensen die met de hand gebouwde websites onderhouden en tekst willen aanpassen zonder door tags te zoeken.
Blokgebaseerde bouwers
Pagina's ontstaan uit kant-en-klare secties of componenten, zoals in Mobirise of Bootstrap Studio, terwijl het programma de markup schrijft. Veel mensen noemen dit soort een HTML-paginabouwer. Geschikt voor wie een website zonder code wil; veel eenvoudige websitebouwers voor beginners werken ook zo.
Visuele CSS-ontwerptools
Webflow, of Pinegrow op je eigen bestanden: je stijlt elementen in panelen die overeenkomen met CSS-eigenschappen. Past bij ontwerpers die al denken in vakken, klassen en breakpoints.
Code-editors met live preview
CoffeeCup HTML Editor en soortgenoten, vaak vermeld als WYSIWYG HTML-editors met preview: jij typt de HTML en een paneel ernaast tekent de pagina opnieuw. Ze passen bij mensen die HTML leren en bij ontwikkelaars die elke tag zelf schrijven maar het effect meteen willen zien.
Bouw je een eigen app in plaats van een website? Dan is de editor die je zoekt een component: een rich-text-vak dat je inbouwt in een formulier, een CMS of een helpdesk, zodat je gebruikers tekst kunnen opmaken. TinyMCE en CKEditor 5 zijn de uitgebreide veteranen, met betaalde cloudabonnementen en add-ons; Quill is een lichtere open source WYSIWYG HTML-editor; TipTap is een headless toolkit op basis van ProseMirror, dus je ontwerpt de werkbalk zelf. Ze leveren stukjes HTML binnen jouw product, geen hele pagina's, en daarom staan ze buiten de tabel hierboven.
Wat je in Mobirise visueel instelt en wat code vraagt
Het grootste deel van een pagina maak je door te wijzen en te klikken. De extensie Code Editor dekt wat de panelen laten liggen.
Blokken
Elke pagina in de editor is een kolom van kant-en-klare secties. Haal een nieuwe binnen via het zijpaneel en verwijder wat je niet nodig hebt.
Woorden en koptags
Typ rechtstreeks op de pagina. Elke titel krijgt de H-tag die je kiest, dus de opbouw van de pagina bepaal je zelf.
Foto's
Klik op een foto om je eigen foto te plaatsen. Verklein grote bestanden voordat je ze toevoegt; de tips hieronder leggen uit waarom.
Blokparameters
Via het parameterpaneel van elk blok stel je de ruimte, de achtergrond, zichtbare onderdelen zoals de titel of knoppen en het aantal kolommen in.
Lettertypen en kleuren
In de Style Editor kies je de lettertypen en het kleurenpalet die de blokken gebruiken.
Code, als je het nodig hebt
Een extra attribuut, een eigen CSS-regel of aangepaste markup gaat via de extensie Code Editor, die bij KIT, BASE en GROW zit.
Een beperking om te weten: de HTML die je opmaakt is de HTML die elk apparaat krijgt. Mobirise biedt geen indeling alleen voor telefoons, en geen enkel element kan op slechts één schermformaat worden verborgen.
De bestanden die je uit een export krijgt
Exporteren vanuit de desktop-app kost niets, bij elk abonnement. Bouw je liever in de browser? Dan vereist het downloaden van de code BASE of GROW.
Pagina's en afbeeldingen
Eén HTML-bestand per pagina, met gewone koppen, alinea's en links, plus je foto's en de afbeeldingen van het thema in de geëxporteerde map.
Stijlen en scripts
De CSS en JavaScript van Bootstrap 5, de eigen stijlen van het thema, de keuzes die je in de panelen hebt gemaakt en de scripts achter menu's en sliders.
Niets op de server
Geen PHP, geen database, geen beheerpaneel, dus de website draait op elke gewone webhost of op GitHub Pages.
Exporteren werkt maar één kant op. Mobirise bouwt vanuit zijn eigen project, niet vanuit HTML, dus wijzigingen die je in een andere editor in de geëxporteerde bestanden aanbrengt, komen er niet in terug. Pas code aan in de Code Editor, of beschouw handmatige wijzigingen als de laatste stap.
Zo houd je visueel gemaakte HTML schoon en snel
Visuele tools voegen van nature wat gewicht toe. Met deze gewoontes houd je dat laag, in Mobirise of in elke andere editor.
Bouw de opzet met koppen, niet met groottes
Geef elke pagina één H1, plaats H2's en H3's daaronder en kies elke tag op basis van zijn plek in de opzet. Hoe groot iets eruitziet, is een kwestie van opmaak.
Verklein foto's eerst
Pas elke afbeelding aan tot ongeveer de breedste weergave en sla hem op als WebP of een goed gecomprimeerde JPEG. Eén origineel van een camera kan zwaarder wegen dan de rest van de pagina.
Stijl op één plek
Knoppen één voor één opnieuw stijlen laat een spoor van losse regels achter. Stel lettertypen en kleuren centraal in, in de Style Editor of het equivalent in jouw tool, dan blijft de CSS kort.
Test buiten de editor
Open de geëxporteerde pagina in meer dan één browser, draai de W3C-validator en een snelheidstest zoals PageSpeed Insights en los op wat ze signaleren vóór de lancering.
Een Mobirise-thema of gratis HTML-templates voor websites?
Beide geven je vanaf dag één een kant-en-klare look. Het verschil zit in wie de markup schrijft en welke editors die daarna kunnen laden.
Een gedownload template
Een map met bestanden die iemand anders heeft geschreven. Bewerk hem in een code-editor of in een visuele tool die HTML van buitenaf opent, zoals Pinegrow, Dreamweaver, Bootstrap Studio of CoffeeCup. Lees de licentie: sommige gratis templates eisen een link naar de maker.
Een Mobirise-thema
Een bibliotheek van blokken die in de app zit in plaats van een map met bestanden. Je stelt er visueel pagina's mee samen, en de export levert de HTML. Gratis gebruikers krijgen 200+ blokken in één basisthema; KIT ontsluit elk premium thema en elke extensie, meer dan 220 in totaal.
De look van een template overzetten
Mobirise kan geen template openen dat elders is gemaakt, ook niet als het op Bootstrap 5 is gebouwd. Bouw de look na met blokken, of geef Mobirise AI een screenshot als prompt en bewerk de vier ontwerpen die je terugkrijgt, als de licentie van het template dat toestaat.
Voor wie Mobirise werkt als visuele HTML-editor
Mobirise is geschikt voor sommige klussen en ongeschikt voor andere. Zo zie je aan welke kant de jouwe valt.
Een goede match
- Je wilt pagina's visueel opmaken en nooit een tag typen
- Je hebt gewone bestanden nodig voor je eigen host, zonder een abonnement te betalen
- Je bouwt klantwebsites uit consistente, responsieve blokken
- Je werkt offline op een laptop en publiceert later
- Je wilt eerst een AI-ontwerp en daarna handmatige aanpassingen in dezelfde editor
Een andere tool past beter als
- Je klus het herstellen van een oude, met de hand gecodeerde website of een gedownload template is: Dreamweaver, Pinegrow of CoffeeCup HTML Editor
- Je project om Tailwind of helemaal geen framework vraagt: Pinegrow
- Je controle tot op de pixel en opmaak per breakpoint wilt: Webflow
- Je liever eenmalig betaalt voor Bootstrap-werk: Bootstrap Studio
- Je gratis code wilt schrijven en bekijken: de gratis editie van CoffeeCup
- De website al op WordPress draait: Elementor
Vragen over visueel bewerken van HTML
Wat is een WYSIWYG HTML-editor?
Een editor waarmee je een webpagina bewerkt zoals hij op het scherm staat, terwijl het programma de HTML en CSS schrijft. Het acroniem belooft dat de pagina die je bewerkt de pagina is die je publiceert. In de praktijk liggen die twee dicht bij elkaar maar zijn ze niet identiek, omdat lettertypen, schermbreedte en scripts afhangen van de browser van elke bezoeker.
Is Mobirise een drag-and-drop-HTML-editor?
Ja, op blokniveau: je sleept kant-en-klare secties uit een zijpaneel naar de pagina en typt er daarna in. Je plaatst geen losse elementen op willekeurige plekken; de indeling komt van de blokken en hun parameters. Meer over die manier van werken: gratis drag-and-drop-websitebouwers.
Kan ik de HTML-code in Mobirise bewerken?
Dat kan zodra je de extensie Code Editor hebt, die bij KIT ($149 per jaar), BASE en GROW zit. Hij toont de markup en CSS van één blok of van de hele pagina. Bestanden die je met het gratis abonnement exporteert, openen ook in elke teksteditor, maar wijzigingen die je daar maakt, stromen nooit terug naar het project.
Kan Mobirise een gedownload HTML-template openen?
Nee. Een template van een marktplaats of een met de hand gecodeerde website is gewone HTML, en Mobirise werkt alleen met projecten die erin zijn gemaakt. Dreamweaver, Pinegrow, Bootstrap Studio en CoffeeCup HTML Editor laden allemaal bestaande HTML; in Mobirise bouw je de look opnieuw op met blokken.
Bestaat er een gratis WYSIWYG HTML-editor?
Ja. De desktop-app van Mobirise kost niets voor hobbywebsites of zakelijke websites, en de export ook niet, al tonen gratis websites Mobirise-branding. CoffeeCup heeft een gratis editie van zijn HTML Editor als je liever code typt. 8B AI genereert ontwerpen zonder kosten, al is publiceren ervan betaald. Meer kosteloze opties vergelijken we in ons overzicht van gratis websitebouwsoftware.
Is HTML uit een visuele editor slechter dan met de hand geschreven code?
Meestal is hij zwaarder, omdat visuele tools wrappers en klassen toevoegen die met de hand geschreven pagina's overslaan. Uitvoer die op een framework als Bootstrap 5 is gebouwd, blijft leesbaar en voorspelbaar; voor de kant van het framework, zie de Bootstrap-websitebouwer. Voor de kleinst mogelijke markup schrijf je hem zelf in een code-editor.
Bestaat er een offline WYSIWYG HTML-editor voor Mac, Windows of Linux?
Ja. De desktop-app van Mobirise heeft versies voor Windows, voor macOS (Apple Silicon en Intel) en voor Ubuntu en andere Linuxsystemen op Debian-basis, en bewerken vraagt geen verbinding. Bootstrap Studio, dat projecten offline bewaart, en Pinegrow draaien ook op alle drie de systemen, terwijl Dreamweaver geen Linux-versie heeft en CoffeeCup HTML Editor alleen op Windows draait. Mac-gebruikers vinden meer keuze in onze gids over de websitemaker voor Mac.
Werkt Mobirise offline?
In de desktop-app wel: visueel bewerken, previews en elk thema of blok dat je hebt geïnstalleerd blijven werken zonder netwerk. Voor AI, publiceren, inloggen, aankopen en het ophalen van updates of thema's die je nog niet hebt, is een verbinding nodig. Meer over die verdeling: offline websitesoftware.
Bestaat er een online WYSIWYG HTML-editor voor Android of iPhone?
Mobirise heeft geen app voor Apple-apparaten, maar op iPhone en iPad werkt de browserversie online in Safari of een andere mobiele browser. Op Android genereert de Mobirise AI-app, te installeren via Google Play, ontwerpen, vertaalt, publiceert en exporteert HTML. 8B AI werkt ook in de browser.
Maak vandaag je eerste pagina
Begin met AI in de browser of download de gratis app. Het is in beide gevallen hetzelfde Mobirise.