HTML-editor & Live Voorbeeld
Schrijf HTML in een code-editor van VS Code-niveau of in een visuele editor, met een live voorbeeld ernaast dat je naar elk apparaat kunt schalen. Beweeg over een element om het in zowel de code als het voorbeeld te markeren. Alles draait in je browser — er wordt niets geüpload.
Overview
Deze HTML-editor combineert een professionele code-editor met een visuele editor en een live, responsief voorbeeld — allemaal volledig in je browser. Schrijf echte HTML met syntaxiskleuring, invouwen, automatisch sluiten van tags en aanvulling, of schakel naar de visuele editor om koppen, tabellen, afbeeldingen en links op te maken zonder de opmaak aan te raken; beide bewerken hetzelfde document. Het voorbeeld rendert ernaast in een sandboxed iframe dat je kunt schalen naar mobiel, tablet, desktop of elke eigen breedte, met een optioneel kolomraster en Figma-achtige linialen voor de uitlijning. Zet inspectie aan om elk element te markeren in zowel de code als het voorbeeld terwijl je eroverheen beweegt. Documenten worden lokaal automatisch opgeslagen en kunnen op elk moment worden gewist, en je kunt een zelfstandig HTML-bestand exporteren, de opmaak kopiëren of afdrukken — allemaal privé en offline zodra de pagina is geladen.
Key Features
- Live voorbeeld ernaast dat rendert terwijl je typt
- Code-editor van VS Code-niveau met syntaxiskleuring, invouwen, automatisch sluiten en aanvulling
- Visuele editor voor koppen, tabellen, afbeeldingen, links en opmaak
- Wissel op elk moment tussen de code- en de visuele editor over één document
- Responsief voorbeeld: presets voor mobiel, tablet en desktop plus vrij verslepen
- Kolomraster en Figma-achtige linialen (boven & links) voor uitlijning
- Optionele hover-inspectie: markeer een element in zowel de code als het voorbeeld
- Documenten worden automatisch in je browser opgeslagen (IndexedDB); wis alles met één tik
- Exporteer als een zelfstandig .html-bestand, kopieer de HTML of druk af
- Werkt volledig offline en past zich aan lichte en donkere modus aan
Common Use Cases
- Paginasecties prototypen en bijschaven — Ontwikkelaars en ontwerpers schetsen landingssecties, kaarten en lay-outs en zien ze live renderen op meerdere schermformaten voordat ze in een project worden geplakt.
- Rijke e-mail- en CMS-inhoud maken — Schrijf opgemaakte inhoud — koppen, tabellen, afbeeldingen en links — visueel en kopieer schone HTML naar een nieuwsbrief, CMS of kennisbank.
- HTML leren en onderwijzen — Studenten en docenten experimenteren met HTML en zien direct het resultaat, met inspectie op aanwijzen om opmaak te koppelen aan wat op het scherm verschijnt.
- Responsief gedrag testen — Bekijk een pagina op mobiele, tablet- en desktopbreedtes, of een vrij formaat, om te controleren hoe een lay-out zich aanpast voordat je hem uitbrengt.
- Privé, offline HTML bewerken — Iedereen die met gevoelige opmaak werkt, houdt alles op het apparaat, met automatisch opslaan en lokaal documentbeheer en nul uploads.
How It Works
Schrijf in code of visueel
Typ echte HTML in de code-editor of schakel naar de visuele editor om koppen, tabellen, afbeeldingen en links visueel op te maken. Beide bewerken hetzelfde document.
Bekijk live, op elk formaat
Zie een schone weergave ernaast. Wissel tussen breedtes voor mobiel, tablet en desktop, sleep de greep voor een eigen formaat en schakel een kolomraster of Figma-achtige linialen in.
Inspecteren bij hover (optioneel)
Zet inspectie aan in de voorbeeldwerkbalk en beweeg je aanwijzer over de code om het bijbehorende element in het voorbeeld te omkaderen, en over het voorbeeld om naar de bron in de code te springen.
Opslaan, exporteren of afdrukken
Documenten worden lokaal automatisch opgeslagen in je browser. Download een zelfstandig .html-bestand, kopieer de HTML of druk af — zonder iets te uploaden.