{"id":5466,"date":"2026-06-15T15:09:46","date_gmt":"2026-06-15T13:09:46","guid":{"rendered":"https:\/\/wwwschutz.de\/blog\/?p=5466"},"modified":"2026-06-11T15:29:09","modified_gmt":"2026-06-11T13:29:09","slug":"html-viewer","status":"publish","type":"post","link":"https:\/\/wwwschutz.de\/blog\/html-viewer\/","title":{"rendered":"HTML Live Viewer: Browserbasiertes Werkzeug f\u00fcr HTML, CSS und JavaScript"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Wer regelm\u00e4\u00dfig mit HTML, CSS oder JavaScript arbeitet, kennt den typischen Ablauf: Code schreiben, Datei speichern, Browser-Tab wechseln, neu laden, Ergebnis pr\u00fcfen, zur\u00fcck zum Editor. Bei kleinen Anpassungen wiederholt sich dieser Zyklus schnell dutzende Male pro Stunde.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Der HTML Live Viewer ist ein browserbasiertes Entwicklungswerkzeug, das diesen Zyklus verk\u00fcrzt. Es ist kostenlos, erfordert keine Registrierung und l\u00e4uft vollst\u00e4ndig im Browser.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/meffert42.com\/htmlviewer\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"808\" height=\"478\" src=\"https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/grafik-86.png\" alt=\"\" class=\"wp-image-5476\" srcset=\"https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/grafik-86.png 808w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/grafik-86-300x177.png 300w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/grafik-86-768x454.png 768w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/grafik-86-640x379.png 640w\" sizes=\"auto, (max-width: 808px) 100vw, 808px\" \/><\/a><figcaption class=\"wp-element-caption\">HTML Viewer einfach ausprobieren. Er ist kostenfrei.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Was das Tool leistet<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Der HTML Live Viewer kombiniert einen Code-Editor mit einer Live-Vorschau in einer einzigen Oberfl\u00e4che. \u00c4nderungen im Editor werden unmittelbar in der Vorschau angezeigt, ohne dass die Seite neu geladen werden muss. Die Vorschau l\u00e4uft in einem abgesicherten IFrame, der auch HTML-Dokumente mit eigenem JavaScript zuverl\u00e4ssig darstellt.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Die einzelnen Funktionen<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Live Preview<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Die Vorschau aktualisiert sich bei jeder Eingabe in Echtzeit. Das ist besonders dann hilfreich, wenn man an Layouts, Typografie, Farben oder CSS-Animationen arbeitet und das visuelle Ergebnis direkt beurteilen m\u00f6chte, ohne zwischen Anwendungen zu wechseln.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Beautify und Minify<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Zwei gegenl\u00e4ufige Funktionen f\u00fcr unterschiedliche Situationen:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Beautify<\/strong> formatiert unstrukturierten oder minimierten Code mit einem Klick in lesbaren, einger\u00fcckten Quelltext. Das betrifft nicht nur HTML, sondern auch eingebettetes JavaScript und SVG-Markup. N\u00fctzlich beim Analysieren fremden Codes oder maschinell erzeugter Ausgaben.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Minify<\/strong> entfernt Leerzeichen, Kommentare und Zeilenumbr\u00fcche und reduziert den Code auf das funktionale Minimum. Das Ergebnis l\u00e4sst sich direkt f\u00fcr Produktionsumgebungen verwenden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Beide Funktionen arbeiten direkt im Editor, ohne dass Code in externe Tools kopiert werden muss.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"572\" src=\"https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/grafik-84-1024x572.png\" alt=\"\" class=\"wp-image-5469\" srcset=\"https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/grafik-84-1024x572.png 1024w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/grafik-84-300x168.png 300w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/grafik-84-768x429.png 768w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/grafik-84-1536x858.png 1536w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/grafik-84-640x358.png 640w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/grafik-84.png 1854w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Der HTML Viewer: Links die Eingabe des HTML Codes (auch Copy &amp; Paste sind m\u00f6glich), rechts das Preview.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Vollbildmodus<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Klick \u00f6ffnet die aktuelle Vorschau in einem separaten Browser-Tab als eigenst\u00e4ndige, gerenderte Seite. So l\u00e4sst sich das Ergebnis so betrachten, wie es ein Nutzer sehen w\u00fcrde \u2013 ohne Editor-Umgebung und Werkzeugleiste.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Zoom-Schieberegler<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Die Vorschaufl\u00e4che l\u00e4sst sich zwischen 25 % und 200 % skalieren. Das erm\u00f6glicht einen gezielten Blick auf Details oder eine grobe Einsch\u00e4tzung des Layouts bei kleineren Darstellungsgr\u00f6\u00dfen. Anders als der Browser-Zoom betrifft diese Funktion ausschlie\u00dflich die Vorschaufl\u00e4che, nicht die gesamte Oberfl\u00e4che.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Hintergrundfarbe<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Wer mit HTML-Fragmenten oder transparenten SVGs arbeitet, kann die Hintergrundfarbe der Vorschau anpassen. Zur Auswahl stehen vordefinierte Farben sowie ein freier Farbw\u00e4hler. So l\u00e4sst sich pr\u00fcfen, wie sich ein Element in verschiedenen Kontexten verh\u00e4lt.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Screenshot-Export<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Die Vorschau kann als PNG-Datei exportiert werden. Der Screenshot wird serverseitig mit Chromium gerendert, unabh\u00e4ngig vom aktuellen Zoom-Level im Editor. Breite und H\u00f6he des Ausgabebilds sind frei w\u00e4hlbar. Das Ergebnis entspricht dem, was ein Chrome-Browser tats\u00e4chlich darstellen w\u00fcrde.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">M\u00f6gliche Verwendungszwecke: Dokumentation, Vorschaubilder f\u00fcr Pr\u00e4sentationen, visuelle Qualit\u00e4tssicherung bei generiertem HTML.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Kopieren und Download<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Der aktuelle Code l\u00e4sst sich mit einem Klick in die Zwischenablage kopieren oder als <code>.html<\/code>-Datei herunterladen.<\/p>\n\n\n\n<style>#bodyy {\n  background: #f0f2f5;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 2rem;\n  padding: 2rem 1rem;\n  font-family: sans-serif;\n}\n.variant-label {\n  color: #666;\n  font-size: 11px;\n  letter-spacing: 2px;\n  text-transform: uppercase;\n  align-self: flex-start;\n  max-width: 800px;\n  width: 100%;\n  margin-bottom: -1rem;\n}\n.badge {\n  width: 100%;\n  max-width: 800px;\n  aspect-ratio: 16 \/ 10;\n  border-radius: clamp(10px,2vw,16px);\n  overflow: hidden;\n  position: relative;\n}\n.v1 { background: #0C447C; border: 1px solid #185FA5; }\n.v1 .orb {\n  position: absolute; border-radius: 50%; pointer-events: none;\n}\n.v1 .o1 { width:45%;aspect-ratio:1;top:-15%;right:-5%;background:#185FA5;opacity:.5; }\n.v1 .o2 { width:35%;aspect-ratio:1;bottom:-10%;right:5%;background:#042C53;opacity:.6; }\n.v1 .o3 { width:25%;aspect-ratio:1;bottom:-8%;left:2%;background:#042C53;opacity:.4; }\n.v1 .o4 { width:30%;aspect-ratio:1;top:-10%;left:-5%;background:#185FA5;opacity:.25; }\n\n.inner {\n  position: relative; z-index: 1;\n  height: 100%; display: flex; flex-direction: column;\n  padding: clamp(8px,2%,20px); gap: clamp(5px,1%,10px);\n}\n\n\/* HEADER *\/\n.hdr { display: flex; align-items: center; gap: clamp(6px,1.2%,12px); flex-shrink:0; }\n.logo {\n  background: rgba(0,0,0,.25); border-radius: 6px;\n  padding: clamp(3px,.8%,8px) clamp(5px,1%,11px);\n  display: flex; flex-direction: column; align-items: center; flex-shrink:0;\n}\n.logo .t1 { font-family:monospace; font-weight:700; font-size:clamp(8px,1.4vw,15px); }\n.logo .t2 { font-family:monospace; font-size:clamp(5px,.9vw,9px); line-height:1.3; }\n.ttl h1 { font-weight:700; font-size:clamp(11px,2.5vw,24px); letter-spacing:-.3px; line-height:1.1; }\n.ttl p  { font-size:clamp(6px,1vw,11px); letter-spacing:.2px; margin-top:2px; }\n\n.divider { height:1px; flex-shrink:0; }\n\n\/* PANELS *\/\n.panels { display:grid; grid-template-columns:1fr 1px 1fr; flex:1; min-height:0; gap:0 clamp(5px,1.2%,12px); }\n.sep { opacity:.4; }\n\n.ep { border-radius:7px; overflow:hidden; display:flex; flex-direction:column; }\n.tabbar {\n  display:flex; align-items:center; gap:5px; flex-shrink:0;\n  padding: clamp(2px,.6%,6px) clamp(5px,1%,10px);\n}\n.dot { width:clamp(4px,.75vw,7px); aspect-ratio:1; border-radius:50%; }\n.dr{background:#E24B4A;opacity:.85;} .dy{background:#EF9F27;opacity:.85;} .dg{background:#639922;opacity:.85;}\n.tlbl { font-family:monospace; font-size:clamp(5px,.85vw,9px); margin-left:3px; }\n.code { flex:1; padding:clamp(3px,.6%,8px) clamp(5px,1%,12px); display:flex; flex-direction:column; justify-content:center; gap:clamp(2px,.4%,4px); overflow:hidden; }\n.cl { font-family:monospace; font-size:clamp(5.5px,.9vw,9.5px); white-space:nowrap; line-height:1.5; }\n.stbar { padding:clamp(2px,.4%,4px) clamp(5px,1%,12px); font-family:monospace; font-size:clamp(4.5px,.7vw,7.5px); flex-shrink:0; }\n\n.pp { border-radius:7px; overflow:hidden; display:flex; flex-direction:column; }\n.bbar { display:flex; align-items:center; gap:4px; flex-shrink:0; padding:clamp(2px,.6%,6px) clamp(5px,1%,10px); }\n.blbl { font-size:clamp(5px,.8vw,9px); flex:1; }\n.bopen { font-size:clamp(5px,.8vw,9px); }\n.bframe { flex:1; margin:0 clamp(3px,.6%,8px) clamp(3px,.6%,8px); background:#F1EFE8; border-radius:5px; overflow:hidden; display:flex; flex-direction:column; }\n.fchrome { background:#D3D1C7; display:flex; align-items:center; gap:3px; padding:clamp(2px,.4%,4px) clamp(4px,.8%,9px); flex-shrink:0; }\n.ftitle { font-size:clamp(4px,.65vw,7px); color:#5F5E5A; margin-left:3px; }\n.fcontent { flex:1; padding:clamp(4px,.8%,10px); display:flex; flex-direction:column; gap:clamp(3px,.5%,6px); }\n.fh1 { color:#2C2C2A; font-weight:700; font-size:clamp(8px,1.4vw,14px); line-height:1.2; }\n.fhr { height:2px; background:#B4B2A9; border-radius:1px; width:55%; }\n.fline { height:clamp(3px,.55vw,6px); background:#D3D1C7; border-radius:2px; }\n.fbtn { align-self:flex-start; color:#E6F1FB; font-size:clamp(5px,.75vw,7.5px); font-weight:600; padding:clamp(2px,.4%,5px) clamp(5px,1%,11px); border-radius:4px; margin-top:auto; }\n\n\/* PILLS *\/\n.pills { display:flex; gap:clamp(3px,.6%,8px); flex-wrap:wrap; flex-shrink:0; align-items:center; }\n.pill { border-radius:5px; padding:clamp(2px,.4%,4px) clamp(6px,1.1%,12px); font-size:clamp(5.5px,.85vw,8.5px); font-weight:600; white-space:nowrap; }\n.aibadge { margin-left:auto; border-radius:6px; padding:clamp(2px,.5%,5px) clamp(7px,1.3%,13px); display:flex; flex-direction:column; align-items:center; gap:1px; }\n.ail { font-size:clamp(5.5px,.85vw,8.5px); font-weight:600; letter-spacing:1px; }\n.ais { font-size:clamp(4.5px,.7vw,7.5px); }\n\n\/* ===== V1 colors ===== *\/\n.v1 .logo { background:rgba(4,44,83,.55); }\n.v1 .logo .t1 { color:#85B7EB; }\n.v1 .logo .t2 { color:#378ADD; }\n.v1 .ttl h1 { color:#E6F1FB; }\n.v1 .ttl p  { color:#85B7EB; }\n.v1 .divider { background:#185FA5; }\n.v1 .sep { background:#185FA5; }\n.v1 .ep { background:rgba(4,44,83,.7); }\n.v1 .tabbar { background:rgba(12,68,124,.6); }\n.v1 .tlbl { color:#85B7EB; }\n.v1 .stbar { background:rgba(4,44,83,.5); color:#378ADD; }\n.v1 .pp { background:rgba(230,241,251,.06); }\n.v1 .bbar { background:rgba(230,241,251,.04); }\n.v1 .blbl { color:#85B7EB; }\n.v1 .bopen { color:#378ADD; }\n.v1 .fbtn { background:#185FA5; }\n.v1 .pill { background:rgba(4,44,83,.6); color:#85B7EB; }\n.v1 .aibadge { background:rgba(24,95,165,.35); }\n.v1 .ail { color:#B5D4F4; }\n.v1 .ais { color:#85B7EB; }\n.v1 .c-dim { color:#5DCAA5; }\n.v1 .c-tag { color:#85B7EB; }\n.v1 .c-atr { color:#FAC775; }\n.v1 .c-val { color:#97C459; }\n.v1 .c-txt { color:#E6F1FB; }\n<\/style>\n<a href=\"https:\/\/meffert42.com\/htmlviewer\/\" target=\"_blank\" rel=\"noopener\">\n<div id=\"bodyy\">\n\n<div class=\"badge v1\">\n  <div class=\"orb o1\"><\/div><div class=\"orb o2\"><\/div><div class=\"orb o3\"><\/div><div class=\"orb o4\"><\/div>\n  <div class=\"inner\">\n    <div class=\"hdr\">\n      <div class=\"logo\"><span class=\"t1\">&lt;\/&gt;<\/span><span class=\"t2\">HTML<\/span><span class=\"t2\">LIVE<\/span><\/div>\n      <div class=\"ttl\"><h1>HTML Live Viewer<\/h1><p>Real-time preview &nbsp;\u00b7&nbsp; Beautifier &nbsp;\u00b7&nbsp; Minifier &nbsp;\u00b7&nbsp; AI Toolchain ready<\/p><\/div>\n    <\/div>\n    <div class=\"divider\"><\/div>\n    <div class=\"panels\">\n      <div class=\"ep\">\n        <div class=\"tabbar\"><div class=\"dot dr\"><\/div><div class=\"dot dy\"><\/div><div class=\"dot dg\"><\/div><span class=\"tlbl\">index.html<\/span><\/div>\n        <div class=\"code\">\n          <div class=\"cl c-dim\">&lt;!DOCTYPE html&gt;<\/div>\n          <div class=\"cl\"><span class=\"c-dim\">&lt;<\/span><span class=\"c-tag\">html<\/span> <span class=\"c-atr\">lang<\/span><span class=\"c-dim\">=<\/span><span class=\"c-val\">&#8222;de&#8220;<\/span><span class=\"c-dim\">&gt;<\/span><\/div>\n          <div class=\"cl\"><span class=\"c-dim\">  &lt;<\/span><span class=\"c-tag\">head<\/span><span class=\"c-dim\">&gt;<\/span><\/div>\n          <div class=\"cl\"><span class=\"c-dim\">    &lt;<\/span><span class=\"c-tag\">title<\/span><span class=\"c-dim\">&gt;<\/span><span class=\"c-txt\">My App<\/span><span class=\"c-dim\">&lt;\/<\/span><span class=\"c-tag\">title<\/span><span class=\"c-dim\">&gt;<\/span><\/div>\n          <div class=\"cl\"><span class=\"c-dim\">  &lt;\/<\/span><span class=\"c-tag\">head<\/span><span class=\"c-dim\">&gt;<\/span><\/div>\n          <div class=\"cl\"><span class=\"c-dim\">  &lt;<\/span><span class=\"c-tag\">body<\/span><span class=\"c-dim\">&gt;<\/span><\/div>\n          <div class=\"cl\"><span class=\"c-dim\">    &lt;<\/span><span class=\"c-tag\">h1<\/span><span class=\"c-dim\">&gt;<\/span><span class=\"c-txt\">Hello World<\/span><span class=\"c-dim\">&lt;\/<\/span><span class=\"c-tag\">h1<\/span><span class=\"c-dim\">&gt;<\/span><\/div>\n          <div class=\"cl\"><span class=\"c-dim\">  &lt;\/<\/span><span class=\"c-tag\">body<\/span><span class=\"c-dim\">&gt;<\/span><\/div>\n          <div class=\"cl\"><span class=\"c-dim\">&lt;\/<\/span><span class=\"c-tag\">html<\/span><span class=\"c-dim\">&gt;<\/span><\/div>\n        <\/div>\n        <div class=\"stbar\">\u2713 valid \u00b7 9 lines \u00b7 148 bytes<\/div>\n      <\/div>\n      <div class=\"sep\"><\/div>\n      <div class=\"pp\">\n        <div class=\"bbar\"><div class=\"dot dr\"><\/div><div class=\"dot dy\"><\/div><div class=\"dot dg\"><\/div><span class=\"blbl\">Preview<\/span><span class=\"bopen\">\u2197 open<\/span><\/div>\n        <div class=\"bframe\">\n          <div class=\"fchrome\"><div class=\"dot dr\"><\/div><div class=\"dot dy\"><\/div><div class=\"dot dg\"><\/div><span class=\"ftitle\">My App<\/span><\/div>\n          <div class=\"fcontent\"><div class=\"fh1\">Hello World<\/div><div class=\"fhr\"><\/div><div class=\"fline\" style=\"width:75%\"><\/div><div class=\"fline\" style=\"width:60%\"><\/div><div class=\"fline\" style=\"width:45%\"><\/div><div class=\"fbtn\">Get started<\/div><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n    <div class=\"pills\">\n      <div class=\"pill\">\u2726 Beautify<\/div><div class=\"pill\">\u229f Minify<\/div><div class=\"pill\">\u2b21 AI Chain<\/div><div class=\"pill\">\u27f3 Live Sync<\/div>\n      <div class=\"aibadge\"><span class=\"ail\">AI TOOLCHAIN<\/span><span class=\"ais\">Claude \u00b7 GPT \u00b7 Gemini<\/span><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<\/div><\/a>\n\n\n\n<h2 class=\"wp-block-heading\">Einsatz in KI-gest\u00fctzten Workflows<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ein praktisches Anwendungsszenario ergibt sich im Zusammenspiel mit KI-Modellen. Systeme wie Claude, GPT oder Gemini erzeugen auf Anfrage vollst\u00e4ndiges HTML \u2013 Landingpages, Formulare, Visualisierungen oder interaktive Widgets. Um das Ergebnis schnell zu \u00fcberpr\u00fcfen, eignet sich der HTML Live Viewer als Zwischenschritt:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>KI-Modell erzeugt HTML-Code<\/li>\n\n\n\n<li>Code in den HTML Live Viewer einf\u00fcgen<\/li>\n\n\n\n<li>Ergebnis in der Live-Vorschau pr\u00fcfen<\/li>\n\n\n\n<li>Bei Bedarf Beautify zur besseren Lesbarkeit nutzen<\/li>\n\n\n\n<li>Anpassungen direkt im Editor vornehmen<\/li>\n\n\n\n<li>Screenshot f\u00fcr Dokumentation oder Download f\u00fcr den n\u00e4chsten Schritt<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Das vermeidet den Umweg \u00fcber lokale Dateien oder eine eigens eingerichtete Entwicklungsumgebung. Dasselbe gilt f\u00fcr KI-generierte SVG-Grafiken, die mit der Hintergrundfarb-Steuerung direkt auf ihre Darstellung gepr\u00fcft werden k\u00f6nnen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Betrieb und Datenschutz<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Das Tool wird betrieben von der IT Logic GmbH, einem Unternehmen mit Fokus auf sichere Web- und Softwarel\u00f6sungen. Es ist ohne Registrierung und ohne Angabe pers\u00f6nlicher Daten nutzbar.<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"de\">\n<head>\n<meta charset=\"UTF-8\">\n<style>\n  .itl-tools-box {\n    background: #f4f7fb;\n    border-left: 4px solid #1a73e8;\n    border-radius: 6px;\n    padding: 24px 28px;\n    margin: 32px 0;\n    font-family: inherit;\n    box-sizing: border-box;\n  }\n  .itl-tools-box h3 {\n    margin: 0 0 16px 0;\n    font-size: 1.15em;\n    color: #1a1a1a;\n    font-weight: 700;\n  }\n  .itl-tools-list {\n    list-style: none;\n    margin: 0 0 16px 0;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n  .itl-tools-list li {\n    background: #fff;\n    border: 1px solid #dde4ef;\n    border-radius: 5px;\n    padding: 12px 16px;\n  }\n  .itl-tools-list li a {\n    font-weight: 600;\n    color: #1a73e8;\n    text-decoration: none;\n  }\n  .itl-tools-list li a:hover {\n    text-decoration: underline;\n  }\n  .itl-tools-list li p {\n    margin: 4px 0 0 0;\n    font-size: 0.9em;\n    color: #444;\n    line-height: 1.5;\n  }\n  .itl-tools-note {\n    margin: 0;\n    font-size: 0.88em;\n    color: #555;\n    font-style: italic;\n  }\n<\/style>\n<\/head>\n<body>\n<div class=\"itl-tools-box\">\n  <h3>Weitere kostenlose Tools<\/h3>\n  <p style=\"margin:0 0 14px;font-size:0.95em;color:#333;\">Wer regelm\u00e4\u00dfig mit Websites, Domains oder Datenschutzfragen arbeitet, findet im Portfolio der IT Logic GmbH weitere browserbasierte Werkzeuge:<\/p>\n  <ul class=\"itl-tools-list\">\n    <li>\n      <a href=\"https:\/\/dr-dsgvo.de\/webseiten-check\/\" target=\"_blank\" rel=\"noopener\">Online Website Check<\/a>\n      <p>Analysiert eine Website auf datenschutzrechtlich relevante Aspekte und technische Punkte.<\/p>\n    <\/li>\n    <li>\n      <a href=\"https:\/\/dr-dsgvo.de\/subdomain-scanner\/\" target=\"_blank\" rel=\"noopener\">Subdomain Scanner<\/a>\n      <p>Listet erreichbare Subdomains einer Domain auf. N\u00fctzlich f\u00fcr Sicherheitsanalysen und Bestandsaufnahmen.<\/p>\n    <\/li>\n    <li>\n      <a href=\"https:\/\/dr-dsgvo.de\/domain-hosting-analyse\/\" target=\"_blank\" rel=\"noopener\">Domain &amp; Web Hosting Analyse<\/a>\n      <p>Gibt Auskunft zu DNS-Eintr\u00e4gen, Hosting-Infrastruktur, SSL-Zertifikaten und weiteren technischen Details.<\/p>\n    <\/li>\n  <\/ul>\n  <p class=\"itl-tools-note\">Alle Tools sind kostenlos und ohne Registrierung nutzbar.<\/p>\n<\/div>\n<\/body>\n<\/html>\n\n\n\n<h2 class=\"wp-block-heading\">Fazit<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Der HTML Live Viewer deckt die g\u00e4ngigen Aufgaben ab, die beim Arbeiten mit HTML, CSS, JavaScript und SVG anfallen: Live-Vorschau, Code-Formatierung, Skalierung, Hintergrundanpassung und Export. Er eignet sich sowohl f\u00fcr den schnellen Test einzelner Code-Schnipsel als auch f\u00fcr strukturiertere Arbeitsabl\u00e4ufe.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/meffert42.com\/htmlviewer\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"991\" height=\"115\" src=\"https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/grafik-85.png\" alt=\"\" class=\"wp-image-5472\" srcset=\"https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/grafik-85.png 991w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/grafik-85-300x35.png 300w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/grafik-85-768x89.png 768w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/grafik-85-640x74.png 640w\" sizes=\"auto, (max-width: 991px) 100vw, 991px\" \/><\/a><\/figure>\n\n\n\n<style data-wp-block-html=\"css\">\n.featured-image > img, .featured-image > a > img {\nobject-fit:fill;\n}\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>Der HTML Live Viewer ist ein kostenloses Browser-Tool, das Code-Editor und Live-Vorschau kombiniert. \u00c4nderungen im Code werden sofort in der Vorschau angezeigt, wodurch die Entwicklungszeit verk\u00fcrzt wird. Das Tool bietet zudem Funktionen wie Code-Formatting, Minifizierung, Vollbildmodus und Screenshot-Export.<\/p>\n","protected":false},"author":4,"featured_media":5471,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[74],"tags":[],"class_list":["post-5466","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kuenstliche-intelligenz","entry"],"blocks":"<!-- wp:paragraph -->\n<p>Wer regelm\u00e4\u00dfig mit HTML, CSS oder JavaScript arbeitet, kennt den typischen Ablauf: Code schreiben, Datei speichern, Browser-Tab wechseln, neu laden, Ergebnis pr\u00fcfen, zur\u00fcck zum Editor. Bei kleinen Anpassungen wiederholt sich dieser Zyklus schnell dutzende Male pro Stunde.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Der HTML Live Viewer ist ein browserbasiertes Entwicklungswerkzeug, das diesen Zyklus verk\u00fcrzt. Es ist kostenlos, erfordert keine Registrierung und l\u00e4uft vollst\u00e4ndig im Browser.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"lightbox\":{\"enabled\":false},\"id\":5476,\"sizeSlug\":\"full\",\"linkDestination\":\"custom\"} -->\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/meffert42.com\/htmlviewer\/\"><img src=\"https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/grafik-86.png\" alt=\"\" class=\"wp-image-5476\"\/><\/a><figcaption class=\"wp-element-caption\">HTML Viewer einfach ausprobieren. Er ist kostenfrei.<\/figcaption><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">Was das Tool leistet<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Der HTML Live Viewer kombiniert einen Code-Editor mit einer Live-Vorschau in einer einzigen Oberfl\u00e4che. \u00c4nderungen im Editor werden unmittelbar in der Vorschau angezeigt, ohne dass die Seite neu geladen werden muss. Die Vorschau l\u00e4uft in einem abgesicherten IFrame, der auch HTML-Dokumente mit eigenem JavaScript zuverl\u00e4ssig darstellt.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">Die einzelnen Funktionen<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">Live Preview<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Die Vorschau aktualisiert sich bei jeder Eingabe in Echtzeit. Das ist besonders dann hilfreich, wenn man an Layouts, Typografie, Farben oder CSS-Animationen arbeitet und das visuelle Ergebnis direkt beurteilen m\u00f6chte, ohne zwischen Anwendungen zu wechseln.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">Beautify und Minify<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Zwei gegenl\u00e4ufige Funktionen f\u00fcr unterschiedliche Situationen:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Beautify<\/strong> formatiert unstrukturierten oder minimierten Code mit einem Klick in lesbaren, einger\u00fcckten Quelltext. Das betrifft nicht nur HTML, sondern auch eingebettetes JavaScript und SVG-Markup. N\u00fctzlich beim Analysieren fremden Codes oder maschinell erzeugter Ausgaben.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Minify<\/strong> entfernt Leerzeichen, Kommentare und Zeilenumbr\u00fcche und reduziert den Code auf das funktionale Minimum. Das Ergebnis l\u00e4sst sich direkt f\u00fcr Produktionsumgebungen verwenden.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Beide Funktionen arbeiten direkt im Editor, ohne dass Code in externe Tools kopiert werden muss.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":5469,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/grafik-84-1024x572.png\" alt=\"\" class=\"wp-image-5469\"\/><figcaption class=\"wp-element-caption\">Der HTML Viewer: Links die Eingabe des HTML Codes (auch Copy &amp; Paste sind m\u00f6glich), rechts das Preview.<\/figcaption><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">Vollbildmodus<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Ein Klick \u00f6ffnet die aktuelle Vorschau in einem separaten Browser-Tab als eigenst\u00e4ndige, gerenderte Seite. So l\u00e4sst sich das Ergebnis so betrachten, wie es ein Nutzer sehen w\u00fcrde \u2013 ohne Editor-Umgebung und Werkzeugleiste.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">Zoom-Schieberegler<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Die Vorschaufl\u00e4che l\u00e4sst sich zwischen 25 % und 200 % skalieren. Das erm\u00f6glicht einen gezielten Blick auf Details oder eine grobe Einsch\u00e4tzung des Layouts bei kleineren Darstellungsgr\u00f6\u00dfen. Anders als der Browser-Zoom betrifft diese Funktion ausschlie\u00dflich die Vorschaufl\u00e4che, nicht die gesamte Oberfl\u00e4che.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">Hintergrundfarbe<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Wer mit HTML-Fragmenten oder transparenten SVGs arbeitet, kann die Hintergrundfarbe der Vorschau anpassen. Zur Auswahl stehen vordefinierte Farben sowie ein freier Farbw\u00e4hler. So l\u00e4sst sich pr\u00fcfen, wie sich ein Element in verschiedenen Kontexten verh\u00e4lt.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">Screenshot-Export<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Die Vorschau kann als PNG-Datei exportiert werden. Der Screenshot wird serverseitig mit Chromium gerendert, unabh\u00e4ngig vom aktuellen Zoom-Level im Editor. Breite und H\u00f6he des Ausgabebilds sind frei w\u00e4hlbar. Das Ergebnis entspricht dem, was ein Chrome-Browser tats\u00e4chlich darstellen w\u00fcrde.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>M\u00f6gliche Verwendungszwecke: Dokumentation, Vorschaubilder f\u00fcr Pr\u00e4sentationen, visuelle Qualit\u00e4tssicherung bei generiertem HTML.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">Kopieren und Download<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Der aktuelle Code l\u00e4sst sich mit einem Klick in die Zwischenablage kopieren oder als <code>.html<\/code>-Datei herunterladen.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:html -->\n<style>#bodyy {\n  background: #f0f2f5;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 2rem;\n  padding: 2rem 1rem;\n  font-family: sans-serif;\n}\n.variant-label {\n  color: #666;\n  font-size: 11px;\n  letter-spacing: 2px;\n  text-transform: uppercase;\n  align-self: flex-start;\n  max-width: 800px;\n  width: 100%;\n  margin-bottom: -1rem;\n}\n.badge {\n  width: 100%;\n  max-width: 800px;\n  aspect-ratio: 16 \/ 10;\n  border-radius: clamp(10px,2vw,16px);\n  overflow: hidden;\n  position: relative;\n}\n.v1 { background: #0C447C; border: 1px solid #185FA5; }\n.v1 .orb {\n  position: absolute; border-radius: 50%; pointer-events: none;\n}\n.v1 .o1 { width:45%;aspect-ratio:1;top:-15%;right:-5%;background:#185FA5;opacity:.5; }\n.v1 .o2 { width:35%;aspect-ratio:1;bottom:-10%;right:5%;background:#042C53;opacity:.6; }\n.v1 .o3 { width:25%;aspect-ratio:1;bottom:-8%;left:2%;background:#042C53;opacity:.4; }\n.v1 .o4 { width:30%;aspect-ratio:1;top:-10%;left:-5%;background:#185FA5;opacity:.25; }\n\n.inner {\n  position: relative; z-index: 1;\n  height: 100%; display: flex; flex-direction: column;\n  padding: clamp(8px,2%,20px); gap: clamp(5px,1%,10px);\n}\n\n\/* HEADER *\/\n.hdr { display: flex; align-items: center; gap: clamp(6px,1.2%,12px); flex-shrink:0; }\n.logo {\n  background: rgba(0,0,0,.25); border-radius: 6px;\n  padding: clamp(3px,.8%,8px) clamp(5px,1%,11px);\n  display: flex; flex-direction: column; align-items: center; flex-shrink:0;\n}\n.logo .t1 { font-family:monospace; font-weight:700; font-size:clamp(8px,1.4vw,15px); }\n.logo .t2 { font-family:monospace; font-size:clamp(5px,.9vw,9px); line-height:1.3; }\n.ttl h1 { font-weight:700; font-size:clamp(11px,2.5vw,24px); letter-spacing:-.3px; line-height:1.1; }\n.ttl p  { font-size:clamp(6px,1vw,11px); letter-spacing:.2px; margin-top:2px; }\n\n.divider { height:1px; flex-shrink:0; }\n\n\/* PANELS *\/\n.panels { display:grid; grid-template-columns:1fr 1px 1fr; flex:1; min-height:0; gap:0 clamp(5px,1.2%,12px); }\n.sep { opacity:.4; }\n\n.ep { border-radius:7px; overflow:hidden; display:flex; flex-direction:column; }\n.tabbar {\n  display:flex; align-items:center; gap:5px; flex-shrink:0;\n  padding: clamp(2px,.6%,6px) clamp(5px,1%,10px);\n}\n.dot { width:clamp(4px,.75vw,7px); aspect-ratio:1; border-radius:50%; }\n.dr{background:#E24B4A;opacity:.85;} .dy{background:#EF9F27;opacity:.85;} .dg{background:#639922;opacity:.85;}\n.tlbl { font-family:monospace; font-size:clamp(5px,.85vw,9px); margin-left:3px; }\n.code { flex:1; padding:clamp(3px,.6%,8px) clamp(5px,1%,12px); display:flex; flex-direction:column; justify-content:center; gap:clamp(2px,.4%,4px); overflow:hidden; }\n.cl { font-family:monospace; font-size:clamp(5.5px,.9vw,9.5px); white-space:nowrap; line-height:1.5; }\n.stbar { padding:clamp(2px,.4%,4px) clamp(5px,1%,12px); font-family:monospace; font-size:clamp(4.5px,.7vw,7.5px); flex-shrink:0; }\n\n.pp { border-radius:7px; overflow:hidden; display:flex; flex-direction:column; }\n.bbar { display:flex; align-items:center; gap:4px; flex-shrink:0; padding:clamp(2px,.6%,6px) clamp(5px,1%,10px); }\n.blbl { font-size:clamp(5px,.8vw,9px); flex:1; }\n.bopen { font-size:clamp(5px,.8vw,9px); }\n.bframe { flex:1; margin:0 clamp(3px,.6%,8px) clamp(3px,.6%,8px); background:#F1EFE8; border-radius:5px; overflow:hidden; display:flex; flex-direction:column; }\n.fchrome { background:#D3D1C7; display:flex; align-items:center; gap:3px; padding:clamp(2px,.4%,4px) clamp(4px,.8%,9px); flex-shrink:0; }\n.ftitle { font-size:clamp(4px,.65vw,7px); color:#5F5E5A; margin-left:3px; }\n.fcontent { flex:1; padding:clamp(4px,.8%,10px); display:flex; flex-direction:column; gap:clamp(3px,.5%,6px); }\n.fh1 { color:#2C2C2A; font-weight:700; font-size:clamp(8px,1.4vw,14px); line-height:1.2; }\n.fhr { height:2px; background:#B4B2A9; border-radius:1px; width:55%; }\n.fline { height:clamp(3px,.55vw,6px); background:#D3D1C7; border-radius:2px; }\n.fbtn { align-self:flex-start; color:#E6F1FB; font-size:clamp(5px,.75vw,7.5px); font-weight:600; padding:clamp(2px,.4%,5px) clamp(5px,1%,11px); border-radius:4px; margin-top:auto; }\n\n\/* PILLS *\/\n.pills { display:flex; gap:clamp(3px,.6%,8px); flex-wrap:wrap; flex-shrink:0; align-items:center; }\n.pill { border-radius:5px; padding:clamp(2px,.4%,4px) clamp(6px,1.1%,12px); font-size:clamp(5.5px,.85vw,8.5px); font-weight:600; white-space:nowrap; }\n.aibadge { margin-left:auto; border-radius:6px; padding:clamp(2px,.5%,5px) clamp(7px,1.3%,13px); display:flex; flex-direction:column; align-items:center; gap:1px; }\n.ail { font-size:clamp(5.5px,.85vw,8.5px); font-weight:600; letter-spacing:1px; }\n.ais { font-size:clamp(4.5px,.7vw,7.5px); }\n\n\/* ===== V1 colors ===== *\/\n.v1 .logo { background:rgba(4,44,83,.55); }\n.v1 .logo .t1 { color:#85B7EB; }\n.v1 .logo .t2 { color:#378ADD; }\n.v1 .ttl h1 { color:#E6F1FB; }\n.v1 .ttl p  { color:#85B7EB; }\n.v1 .divider { background:#185FA5; }\n.v1 .sep { background:#185FA5; }\n.v1 .ep { background:rgba(4,44,83,.7); }\n.v1 .tabbar { background:rgba(12,68,124,.6); }\n.v1 .tlbl { color:#85B7EB; }\n.v1 .stbar { background:rgba(4,44,83,.5); color:#378ADD; }\n.v1 .pp { background:rgba(230,241,251,.06); }\n.v1 .bbar { background:rgba(230,241,251,.04); }\n.v1 .blbl { color:#85B7EB; }\n.v1 .bopen { color:#378ADD; }\n.v1 .fbtn { background:#185FA5; }\n.v1 .pill { background:rgba(4,44,83,.6); color:#85B7EB; }\n.v1 .aibadge { background:rgba(24,95,165,.35); }\n.v1 .ail { color:#B5D4F4; }\n.v1 .ais { color:#85B7EB; }\n.v1 .c-dim { color:#5DCAA5; }\n.v1 .c-tag { color:#85B7EB; }\n.v1 .c-atr { color:#FAC775; }\n.v1 .c-val { color:#97C459; }\n.v1 .c-txt { color:#E6F1FB; }\n<\/style>\n<a href=\"https:\/\/meffert42.com\/htmlviewer\/\" target=\"_blank\">\n<div id=\"bodyy\">\n\n<div class=\"badge v1\">\n  <div class=\"orb o1\"><\/div><div class=\"orb o2\"><\/div><div class=\"orb o3\"><\/div><div class=\"orb o4\"><\/div>\n  <div class=\"inner\">\n    <div class=\"hdr\">\n      <div class=\"logo\"><span class=\"t1\">&lt;\/&gt;<\/span><span class=\"t2\">HTML<\/span><span class=\"t2\">LIVE<\/span><\/div>\n      <div class=\"ttl\"><h1>HTML Live Viewer<\/h1><p>Real-time preview &nbsp;\u00b7&nbsp; Beautifier &nbsp;\u00b7&nbsp; Minifier &nbsp;\u00b7&nbsp; AI Toolchain ready<\/p><\/div>\n    <\/div>\n    <div class=\"divider\"><\/div>\n    <div class=\"panels\">\n      <div class=\"ep\">\n        <div class=\"tabbar\"><div class=\"dot dr\"><\/div><div class=\"dot dy\"><\/div><div class=\"dot dg\"><\/div><span class=\"tlbl\">index.html<\/span><\/div>\n        <div class=\"code\">\n          <div class=\"cl c-dim\">&lt;!DOCTYPE html&gt;<\/div>\n          <div class=\"cl\"><span class=\"c-dim\">&lt;<\/span><span class=\"c-tag\">html<\/span> <span class=\"c-atr\">lang<\/span><span class=\"c-dim\">=<\/span><span class=\"c-val\">\"de\"<\/span><span class=\"c-dim\">&gt;<\/span><\/div>\n          <div class=\"cl\"><span class=\"c-dim\">  &lt;<\/span><span class=\"c-tag\">head<\/span><span class=\"c-dim\">&gt;<\/span><\/div>\n          <div class=\"cl\"><span class=\"c-dim\">    &lt;<\/span><span class=\"c-tag\">title<\/span><span class=\"c-dim\">&gt;<\/span><span class=\"c-txt\">My App<\/span><span class=\"c-dim\">&lt;\/<\/span><span class=\"c-tag\">title<\/span><span class=\"c-dim\">&gt;<\/span><\/div>\n          <div class=\"cl\"><span class=\"c-dim\">  &lt;\/<\/span><span class=\"c-tag\">head<\/span><span class=\"c-dim\">&gt;<\/span><\/div>\n          <div class=\"cl\"><span class=\"c-dim\">  &lt;<\/span><span class=\"c-tag\">body<\/span><span class=\"c-dim\">&gt;<\/span><\/div>\n          <div class=\"cl\"><span class=\"c-dim\">    &lt;<\/span><span class=\"c-tag\">h1<\/span><span class=\"c-dim\">&gt;<\/span><span class=\"c-txt\">Hello World<\/span><span class=\"c-dim\">&lt;\/<\/span><span class=\"c-tag\">h1<\/span><span class=\"c-dim\">&gt;<\/span><\/div>\n          <div class=\"cl\"><span class=\"c-dim\">  &lt;\/<\/span><span class=\"c-tag\">body<\/span><span class=\"c-dim\">&gt;<\/span><\/div>\n          <div class=\"cl\"><span class=\"c-dim\">&lt;\/<\/span><span class=\"c-tag\">html<\/span><span class=\"c-dim\">&gt;<\/span><\/div>\n        <\/div>\n        <div class=\"stbar\">\u2713 valid \u00b7 9 lines \u00b7 148 bytes<\/div>\n      <\/div>\n      <div class=\"sep\"><\/div>\n      <div class=\"pp\">\n        <div class=\"bbar\"><div class=\"dot dr\"><\/div><div class=\"dot dy\"><\/div><div class=\"dot dg\"><\/div><span class=\"blbl\">Preview<\/span><span class=\"bopen\">\u2197 open<\/span><\/div>\n        <div class=\"bframe\">\n          <div class=\"fchrome\"><div class=\"dot dr\"><\/div><div class=\"dot dy\"><\/div><div class=\"dot dg\"><\/div><span class=\"ftitle\">My App<\/span><\/div>\n          <div class=\"fcontent\"><div class=\"fh1\">Hello World<\/div><div class=\"fhr\"><\/div><div class=\"fline\" style=\"width:75%\"><\/div><div class=\"fline\" style=\"width:60%\"><\/div><div class=\"fline\" style=\"width:45%\"><\/div><div class=\"fbtn\">Get started<\/div><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n    <div class=\"pills\">\n      <div class=\"pill\">\u2726 Beautify<\/div><div class=\"pill\">\u229f Minify<\/div><div class=\"pill\">\u2b21 AI Chain<\/div><div class=\"pill\">\u27f3 Live Sync<\/div>\n      <div class=\"aibadge\"><span class=\"ail\">AI TOOLCHAIN<\/span><span class=\"ais\">Claude \u00b7 GPT \u00b7 Gemini<\/span><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<\/div><\/a>\n<!-- \/wp:html -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">Einsatz in KI-gest\u00fctzten Workflows<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Ein praktisches Anwendungsszenario ergibt sich im Zusammenspiel mit KI-Modellen. Systeme wie Claude, GPT oder Gemini erzeugen auf Anfrage vollst\u00e4ndiges HTML \u2013 Landingpages, Formulare, Visualisierungen oder interaktive Widgets. Um das Ergebnis schnell zu \u00fcberpr\u00fcfen, eignet sich der HTML Live Viewer als Zwischenschritt:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol class=\"wp-block-list\"><!-- wp:list-item -->\n<li>KI-Modell erzeugt HTML-Code<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Code in den HTML Live Viewer einf\u00fcgen<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Ergebnis in der Live-Vorschau pr\u00fcfen<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Bei Bedarf Beautify zur besseren Lesbarkeit nutzen<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Anpassungen direkt im Editor vornehmen<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Screenshot f\u00fcr Dokumentation oder Download f\u00fcr den n\u00e4chsten Schritt<\/li>\n<!-- \/wp:list-item --><\/ol>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>Das vermeidet den Umweg \u00fcber lokale Dateien oder eine eigens eingerichtete Entwicklungsumgebung. Dasselbe gilt f\u00fcr KI-generierte SVG-Grafiken, die mit der Hintergrundfarb-Steuerung direkt auf ihre Darstellung gepr\u00fcft werden k\u00f6nnen.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">Betrieb und Datenschutz<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Das Tool wird betrieben von der IT Logic GmbH, einem Unternehmen mit Fokus auf sichere Web- und Softwarel\u00f6sungen. Es ist ohne Registrierung und ohne Angabe pers\u00f6nlicher Daten nutzbar.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:html -->\n<!DOCTYPE html>\n<html lang=\"de\">\n<head>\n<meta charset=\"UTF-8\">\n<style>\n  .itl-tools-box {\n    background: #f4f7fb;\n    border-left: 4px solid #1a73e8;\n    border-radius: 6px;\n    padding: 24px 28px;\n    margin: 32px 0;\n    font-family: inherit;\n    box-sizing: border-box;\n  }\n  .itl-tools-box h3 {\n    margin: 0 0 16px 0;\n    font-size: 1.15em;\n    color: #1a1a1a;\n    font-weight: 700;\n  }\n  .itl-tools-list {\n    list-style: none;\n    margin: 0 0 16px 0;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n  .itl-tools-list li {\n    background: #fff;\n    border: 1px solid #dde4ef;\n    border-radius: 5px;\n    padding: 12px 16px;\n  }\n  .itl-tools-list li a {\n    font-weight: 600;\n    color: #1a73e8;\n    text-decoration: none;\n  }\n  .itl-tools-list li a:hover {\n    text-decoration: underline;\n  }\n  .itl-tools-list li p {\n    margin: 4px 0 0 0;\n    font-size: 0.9em;\n    color: #444;\n    line-height: 1.5;\n  }\n  .itl-tools-note {\n    margin: 0;\n    font-size: 0.88em;\n    color: #555;\n    font-style: italic;\n  }\n<\/style>\n<\/head>\n<body>\n<div class=\"itl-tools-box\">\n  <h3>Weitere kostenlose Tools<\/h3>\n  <p style=\"margin:0 0 14px;font-size:0.95em;color:#333;\">Wer regelm\u00e4\u00dfig mit Websites, Domains oder Datenschutzfragen arbeitet, findet im Portfolio der IT Logic GmbH weitere browserbasierte Werkzeuge:<\/p>\n  <ul class=\"itl-tools-list\">\n    <li>\n      <a href=\"https:\/\/dr-dsgvo.de\/webseiten-check\/\" target=\"_blank\" rel=\"noopener\">Online Website Check<\/a>\n      <p>Analysiert eine Website auf datenschutzrechtlich relevante Aspekte und technische Punkte.<\/p>\n    <\/li>\n    <li>\n      <a href=\"https:\/\/dr-dsgvo.de\/subdomain-scanner\/\" target=\"_blank\" rel=\"noopener\">Subdomain Scanner<\/a>\n      <p>Listet erreichbare Subdomains einer Domain auf. N\u00fctzlich f\u00fcr Sicherheitsanalysen und Bestandsaufnahmen.<\/p>\n    <\/li>\n    <li>\n      <a href=\"https:\/\/dr-dsgvo.de\/domain-hosting-analyse\/\" target=\"_blank\" rel=\"noopener\">Domain &amp; Web Hosting Analyse<\/a>\n      <p>Gibt Auskunft zu DNS-Eintr\u00e4gen, Hosting-Infrastruktur, SSL-Zertifikaten und weiteren technischen Details.<\/p>\n    <\/li>\n  <\/ul>\n  <p class=\"itl-tools-note\">Alle Tools sind kostenlos und ohne Registrierung nutzbar.<\/p>\n<\/div>\n<\/body>\n<\/html>\n<!-- \/wp:html -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">Fazit<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Der HTML Live Viewer deckt die g\u00e4ngigen Aufgaben ab, die beim Arbeiten mit HTML, CSS, JavaScript und SVG anfallen: Live-Vorschau, Code-Formatierung, Skalierung, Hintergrundanpassung und Export. Er eignet sich sowohl f\u00fcr den schnellen Test einzelner Code-Schnipsel als auch f\u00fcr strukturiertere Arbeitsabl\u00e4ufe.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"lightbox\":{\"enabled\":false},\"id\":5472,\"sizeSlug\":\"full\",\"linkDestination\":\"custom\"} -->\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/meffert42.com\/htmlviewer\/\"><img src=\"https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/grafik-85.png\" alt=\"\" class=\"wp-image-5472\"\/><\/a><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:html -->\n<style data-wp-block-html=\"css\">\n.featured-image > img, .featured-image > a > img {\nobject-fit:fill;\n}\n<\/style>\n<!-- \/wp:html -->","_links":{"self":[{"href":"https:\/\/wwwschutz.de\/blog\/wp-json\/wp\/v2\/posts\/5466","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wwwschutz.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wwwschutz.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wwwschutz.de\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/wwwschutz.de\/blog\/wp-json\/wp\/v2\/comments?post=5466"}],"version-history":[{"count":7,"href":"https:\/\/wwwschutz.de\/blog\/wp-json\/wp\/v2\/posts\/5466\/revisions"}],"predecessor-version":[{"id":5481,"href":"https:\/\/wwwschutz.de\/blog\/wp-json\/wp\/v2\/posts\/5466\/revisions\/5481"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wwwschutz.de\/blog\/wp-json\/wp\/v2\/media\/5471"}],"wp:attachment":[{"href":"https:\/\/wwwschutz.de\/blog\/wp-json\/wp\/v2\/media?parent=5466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wwwschutz.de\/blog\/wp-json\/wp\/v2\/categories?post=5466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wwwschutz.de\/blog\/wp-json\/wp\/v2\/tags?post=5466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}