Browser 106

no file limit

Inspector developer/html-editor

HTML-editor & Live Voorbeeld

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.

Paginasecties prototypen en bijschavenOntwikkelaars 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 makenSchrijf opgemaakte inhoud — koppen, tabellen, afbeeldingen en links — visueel en kopieer schone HTML naar een nieuwsbrief, CMS of kennisbank.
HTML leren en onderwijzenStudenten 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 testenBekijk 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 bewerkenIedereen die met gevoelige opmaak werkt, houdt alles op het apparaat, met automatisch opslaan en lokaal documentbeheer en nul uploads.

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

Set

Ontwikkelaarstools 06

Neighbours

01 CSS Grid Generator 02 Favicon Generator 03 Flexbox Generator 04 Regex Tester & Live Preview 05 Webfont Converter 06 Audio Transcriber

Specification

Command: developer.html_editor
Set: Developer
Input: text
Output: —
Max. bestand: no limit
Batch: single file

Runtime

Engine: CodeMirror 6 · native
Threads: single
Isolated: —
WebGPU: —
Memory: —

Transport 0 B

The file is opened, worked on and written back inside this tab. No upload step exists in this tool — there is nowhere for the bytes to go.

Keys

Zoeken: ⌘K
Panels: ⌘1 · ⌘2
Full width: F
All keys: ⌘/

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.

Frequently asked

Is mijn HTML privé?

Volledig. De editor, het voorbeeld en de documentopslag draaien allemaal in je browser. Je code wordt nooit naar een server gestuurd — er zijn geen uploads en geen tracking.

Wat is het verschil tussen de code- en de visuele editor?

De code-editor geeft je volledige controle over het hele HTML-document — head, stijlen, scripts en body. De visuele editor bewerkt de zichtbare body-inhoud en produceert schone, semantische HTML; sommige geavanceerde opmaak wordt daar vereenvoudigd, dus gebruik de code-editor als je exacte controle nodig hebt.

Kan ik verschillende schermformaten bekijken?

Ja. Kies presets voor mobiel, tablet of desktop, of sleep de greep naar elke gewenste breedte. Een kolomraster en Figma-achtige linialen helpen je de uitlijning te controleren.

Worden scripts in het voorbeeld uitgevoerd?

De scripts van je eigen document draaien in een sandboxed iframe zodat je interactieve pagina's kunt bekijken. Je kunt scriptuitvoering uitzetten met de schakelaar in de voorbeeldwerkbalk.

Waar worden mijn documenten opgeslagen?

In de lokale IndexedDB-opslag van je browser op dit apparaat. Ze blijven bewaard tussen bezoeken, maar staan alleen op je computer. Gebruik 'Alle documenten wissen' om ze op elk moment te verwijderen.

Kan ik mijn werk exporteren?

Ja. Download je document als een zelfstandig .html-bestand, kopieer de HTML naar je klembord of druk het direct af vanuit je browser.

Werkt het offline?

Ja. Zodra de pagina is geladen, werkt alles zonder verbinding, en je documenten blijven lokaal beschikbaar wanneer je de tool de volgende keer opent.

Keys

Zoeken: ⌘K
Panels: ⌘1 · ⌘2
Full width: F
All keys: ⌘/

Gerelateerd · Ontwikkelaarstools