Methodologie

1. Editorarchitectuur

De werkruimte gebruikt drie teksteditors voor HTML, CSS en JavaScript met regelnummermarges, tab-inspringing, lettergrootte-instellingen en optionele woordomloop.

2. HTML-verwerking

HTML uit het HTML-paneel wordt in de body van een gegenereerd document geplaatst. De tool voert HTML niet uit als UI van de bovenliggende pagina.

3. CSS-injectie

CSS wordt in een style-element in de head van het gegenereerde document ingevoegd zodat regels alleen op het voorvertoningsdocument van toepassing zijn.

4. JavaScript-uitvoering

JavaScript wordt in een script-element binnen het voorvertoningsdocument geplaatst. Het draait in de iframe-browsingcontext na Run.

5. iframe-rendering

Het gecombineerde document wordt toegewezen aan iframe.srcdoc, waardoor een nieuw voorvertoningsdocument ontstaat zonder de bovenliggende pagina te navigeren.

6. Sandbox-isolatie

De iframe gebruikt een sandbox-attribuut (scripts toegestaan voor voorvertoning). Bovenliggende DOM-API's worden niet blootgesteld voor uitvoering van gebruikerscode.

7. Console-afhandeling

Een kleine brug in de voorvertoning stuurt console.log/info/warn/error en runtimefouten via postMessage door naar de ouder voor weergave.

8. Browser-API's

Wat scripts kunnen doen hangt af van browserbeleid en sandbox-machtigingen. Sommige API's gedragen zich anders in iframes dan op top-level pagina's.

9. Lokale opslag

Editorstatus kan worden weggeschreven naar localStorage-sleutels beperkt tot deze oorsprong zodat verversen lopend werk niet wist.

10. Beperkingen

Er is geen server-side compilatie voor standaard HTML/CSS/JS. Complexe build-pipelines, private pakketten en bevoorrechte apparaat-API's vallen buiten scope.

11. Privacyoverwegingen

Voorvertoningssamenstelling gebeurt client-side. Lokale persistentie blijft in de browser tenzij u inhoud exporteert of elders kopieert.