Siirry sisältöön
🌐

HTML-esikatselu

Muokkaa HTML:ää, CSS:ää ja JavaScriptiä live-esikatselulla. Kolmen ruudun editori, sandboxed iframe, ei rekisteröitymistä. Ilmainen, selaimessa.

Kuinka HTML-esikatselu toimii?

Tämä työkalu ajaa HTML:si, CSS:si ja JavaScriptisi sandboxed iframessa srcdoc:n kautta. Iframella on sandbox-attribuutti asetettu sallimaan skriptit mutta estämään ylätason navigointi, lomakkeen lähetys ja pääsy origin-cookieihisi — joten mikä tahansa liittämäsi koodi suoritetaan eristettynä muusta sivusta. Auto-ajo rakentaa iframen uudelleen (debounced) jokaisella näppäimenpainalluksella.

Yleisiä käyttötapoja

  • Nopea prototyypitys — kokeile HTML/CSS-ideoita käynnistämättä projektia.
  • Opettaminen — jaa interaktiivisia esimerkkejä opiskelijoille.
  • Koodiesimerkit — renderöi Stack Overflow -snippeteja eristettynä.
  • Debuggaus — toista bugi minimaalisessa kontekstissa.

Tietosuoja

Kaikki koodi suoritetaan 100% selaimessasi sandboxed iframessa. Mitään tietoja ei lähetetä palvelimelle.