HTML-editor & Live Voorbeeld

Overview

Schrijf HTML in een code-editor, of maak het visueel op, en zie het resultaat live ernaast. Schaal het voorbeeld naar mobiel, tablet, desktop of elke breedte, en beweeg met de muis om code en scherm aan elkaar te koppelen. Documenten worden automatisch in je browser bewaard en verlaten je computer nooit.

Paginasecties prototypenSchets kaarten, secties en lay-outs en bekijk ze op meerdere schermformaten voordat ze in een project gaan.
E-mail- en CMS-inhoud schrijvenMaak koppen, tabellen, afbeeldingen en links visueel op en kopieer nette HTML naar een nieuwsbrief of CMS.
HTML leren en onderwijzenProbeer dingen uit en zie meteen het resultaat, met inspectie die opmaak aan de pagina koppelt.
Responsieve lay-outs testenControleer hoe een pagina zich houdt op mobiel, tablet, desktop of een eigen breedte.
Gevoelige opmaak bewerkenHoud vertrouwelijke HTML op je eigen apparaat, met automatisch opslaan en zonder uploads.

Key features

Live voorbeeld dat meeloopt terwijl je typt
Code-editor met syntaxiskleuring, invouwen en aanvulling
Visuele editor voor koppen, tabellen, afbeeldingen en links
Wissel tussen code en visueel in één document
Mobiel, tablet en desktop, of sleep naar elke breedte
Kolomraster en linialen voor uitlijning
Beweeg over een element om het in code en voorbeeld te vinden
Slaat automatisch op in je browser, wissen met één tik
Exporteer als .html, kopieer de HTML of druk af
Werkt offline, in lichte en donkere modus

Set

Ontwikkelaarstools 07

Neighbours

01 CSS Grid Generator 02 SQLite Database Viewer & Editor 03 Favicon Generator 04 Flexbox Generator 05 Regex Tester & Live Preview 06 Webfont Converter

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

Your file is opened, worked on and saved inside this tab. This tool has no upload step, so your file has nowhere else to go.

Keys

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

How it works

Schrijf in code of visueel

Typ HTML in de code-editor, of schakel naar de visuele editor om tekst, tabellen, afbeeldingen en links op te maken.

Bekijk op elk formaat

Kies mobiel, tablet of desktop, of sleep de greep; zet een kolomraster of linialen aan als je ze nodig hebt.

Inspecteren met de muis

Zet inspectie aan en beweeg over de code om het element in het voorbeeld te omlijnen, of over het voorbeeld om de bron te vinden.

Opslaan, exporteren of afdrukken

Documenten worden automatisch in je browser bewaard. Download een zelfstandig .html-bestand, kopieer de HTML of druk af.

Frequently asked

Is mijn HTML privé?

Ja. De editor, het voorbeeld en je opgeslagen documenten staan allemaal in je browser. Er gaat niets naar een server.

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

De code-editor geeft je het hele document: head, stijlen, scripts en body. De visuele editor werkt op de zichtbare body en schrijft nette HTML, maar vereenvoudigt sommige geavanceerde opmaak. Gebruik dus de code-editor als je precieze controle wilt.

Kan ik verschillende schermformaten bekijken?

Ja. Kies mobiel, tablet of desktop, of sleep de greep naar elke breedte. Het kolomraster en de linialen helpen bij het uitlijnen.

Worden scripts in het voorbeeld uitgevoerd?

Ja, in een afgeschermd iframe, zodat interactieve pagina's werken. Je zet ze uit met de scriptschakelaar in de voorbeeldwerkbalk.

Waar worden mijn documenten opgeslagen?

In de IndexedDB van je browser op dit apparaat. Ze staan er bij je volgende bezoek nog. Met 'Alle documenten wissen' haal je ze weg.

Kan ik mijn werk exporteren?

Ja. Download een zelfstandig .html-bestand, kopieer de HTML naar je klembord of druk het af.

Werkt het offline?

Ja. Zodra de pagina geladen is, heb je geen verbinding meer nodig, en je documenten staan er de volgende keer nog.

Keys

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