Single-File-HTML-Artefakte aus LLMs teilen: Sieben Stolperfallen und ihre Loesungen
Wer mit Claude, ChatGPT oder Cursor interne Tools wie Rechner oder Checklisten baut, stoesst beim Teilen der HTML-Datei oft auf Probleme. Sieben typische Fallstricke lassen sich mit einfachen Massnahmen vermeiden.
Du hast Claude, ChatGPT oder Cursor um ein schnelles internes Tool gebeten: einen Preiskalkulator, ein Diagramm ueber die Zahlen des letzten Quartals, eine klickbare Onboarding-Checkliste. Auf deinem Rechner funktioniert es. Nun soll eine Produktmanagerin, ein Kunde oder deine Finanzleitung es oeffnen, und die werden kein Repository klonen oder npx serve ausfuehren.
Dieser Beitrag ist die Checkliste, die ich durchgehe, bevor ich eine dieser Dateien an jemanden verschicke. Der grossteil dreht sich darum, das HTML wirklich unabhaengig lauffaehig zu machen. Der letzte Teil behandelt, wie man die Datei als URL statt als Anhang an die Leute bringt.
LLMs schreiben gerne <img src="chart.png"> oder <link rel="stylesheet" href="styles.css">, weil das so aussieht, wie ein "richtiges" Projekt aussieht. Sobald die Datei deinen Ordner verlaesst, zeigen diese Verweise ins Leere.
grep -nE '(src|href)="(\./|\.\./|[a-zA-Z0-9_-]+\.(png|jpg|svg|css|js))' report.html Enter fullscreen mode Exit fullscreen mode Alles, was der Befehl findet, muss entweder inline eingebettet oder durch eine absolute HTTPS-URL ersetzt werden, die du kontrollierst. Bei kleinen Bildern ist ein Data URI völlig in Ordnung:
printf 'data:image/png;base64,%s' " $( base64 -w0 logo.png ) " Enter fullscreen mode Exit fullscreen mode Bei SVG-Icons fuegst du das <svg>-Markup stattdessen direkt inline ein. Das ist kleiner als base64 und bleibt auf Retina-Displays scharf.
Generierte Dashboards laden oft Chart.js, Tailwinds Play CDN oder D3 von einem CDN. Das ist in der Regel unproblematisch, aber pruefe drei Dinge:
Wo auch immer du die Datei hostest, sie laeuft unter den Regeln von jemandem. Unternehmens-Wikis und einige Datei-Viewer liefern nutzergeneriertes HTML in einem sandboxed iframe oder mit einer strengen CSP aus. Dann hoeren inline onclick=""-Handler, eval, entfernte Fonts oder fetch()-Aufrufe an deine interne API still auf zu funktionieren.
Die meisten Menschen oeffnen deinen Link zuerst auf dem Handy, in der Regel aus Slack oder WhatsApp. Generierte Layouts vergessen oft die Grundlagen:
<meta name= "viewport" content= "width=device-width, initial-scale=1" > Enter fullscreen mode Exit fullscreen mode Pruefe danach breite Tabellen ( umschliesse sie mit overflow-x: auto ), feste Pixelbreiten bei Diagramm-Containern und Hover-Tooltips, die auf Touch-Geraeten nichts bewirken. Oeffne den Geraetemodus der Chrome DevTools bei 375px Breite, bevor du irgendetwas verschickst.
Das ist der Schritt, bei dem die bisherige Arbeit meist verloren geht. E-Mail-Gateways entfernen oder quarantaenisen.html-Anhaenge, und Handys laden sie herunter, statt sie anzuzeigen. Deshalb ist "ich kann diese Datei nicht oeffnen" die haeufigste Antwort. Der dochost-Leitfaden zum Teilen einer HTML-Datei als Link vergleicht die ueblichen Optionen direkt nebeneinander: Single-File-Hoster, Netlify Drop, GitHub Pages und einige E-Mail-Workarounds.
Meine Faustregel: Wenn das Artefakt eine langlebige Anwendung mit Backend ist, dann richtig deployen. Wenn es eine einzelne, in sich geschlossene Datei fuer eine Handvoll Leser in dieser Woche ist, ist eine Deploy-Pipeline uebertrieben. Fuer den zweiten Fall fuege ich sie bei dochost ein, das rohes HTML oder Markdown akzeptiert und ohne Konto einen Link zurueckliefert. Ihr Artikel dazu, wo man eine vibe-coded App hosten kann, fuehrt dasselbe Argument ausfuehrlicher an.
Wer das Kopieren und Einfuegen ganz ueberspringen moechte, kann zudem einen dochost MCP Server zu Claude Code, Cursor oder Codex hinzufuegen. Dann bittet man den Assistenten, "das als Link zu veroeffentlichen", und erhaelt die URL direkt im Chat.
Zwei praktische Dinge, die du vor dem Senden pruefen solltest.
Groesse. Eingebettete base64-Bilder summieren sich schnell auf. Ein Dashboard mit vier Screenshots kann leicht ueber 1 MB kommen. Die kostenlosen Tarife von Single-File-Hostern begrenzen meist die Seitengroesse, lies also die Limits des Gratisplans fuer den Dienst deiner Wahl. Komprimiere PNGs, nutze bevorzugt SVG fuer Icons und Diagramme und entferne ungenutzte Fonts.
Updates. Stakeholder finden zehn Minuten nach dem Versand des Links einen Tippfehler. Das erneute Veroeffentlichen erzeugt eine zweite URL, und schon kursieren zwei Versionen in Slack. Waehle einen Hoster, der Updates an Ort und Stelle erlaubt. Bei dochost erhaelt eine ohne Anmeldung veroeffentlichte Seite einen privaten Edit-Link, der dieselbe Share-URL behaelt. Speichere ihn beim Veroeffentlichen an einem sicheren Ort.
LLMs sind inzwischen sehr gut darin, das Artefakt zu erzeugen. Es in die Haende der Leute zu bekommen, die danach gefragt haben, und zwar in einem Zustand, in dem sie es tatsaechlich nutzen koennen, liegt noch an uns. Zehn Minuten mit dieser Liste ersparen viele Antworten der Art "auf meinem Handy geht es nicht auf".
Wie ist dein Setup zum Teilen von generiertem HTML? Mich wuerde interessieren, ob die Leute meistens Gists, interne Wikis oder Wegwerf-Hoster nutzen.
Automatisch übersetzt. Das Original auf Englisch ist unten aufklappbar.
Original (Englisch) anzeigen
You asked Claude, ChatGPT or Cursor for a quick internal tool: a pricing calculator, a chart over last quarter's numbers, a clickable onboarding checklist. It works on your machine. Now a product manager, a client or your finance lead needs to open it, and they are not going to clone a repo or run npx serve.
This post is the checklist I run before I send one of these files to anyone. Most of it is about making the HTML genuinely self-contained. The last part is about getting it to people as a URL instead of an attachment.
LLMs love to write <img src="chart.png"> or <link rel="stylesheet" href="styles.css"> because that is what a "real" project looks like. Once the file leaves your folder, those references point at nothing.
grep -nE '(src|href)="(\./|\.\./|[a-zA-Z0-9_-]+\.(png|jpg|svg|css|js))' report.html Enter fullscreen mode Exit fullscreen mode Anything it finds either needs to be inlined or replaced with an absolute HTTPS URL you control. For small images, a data URI is fine:
printf 'data:image/png;base64,%s' " $( base64 -w0 logo.png ) " Enter fullscreen mode Exit fullscreen mode For SVG icons, paste the <svg> markup inline instead. It is smaller than base64 and stays sharp on retina screens.
Generated dashboards often pull Chart.js, Tailwind's Play CDN or D3 from a CDN. That is usually fine, but check three things:
Wherever you host the file, it will run under somebody's rules. Corporate wikis and some file viewers serve user HTML inside a sandboxed iframe or with a strict CSP. Then inline onclick="" handlers, eval, remote fonts or fetch() calls to your internal API quietly stop working.
Most people will open your link on their phone first, usually from Slack or WhatsApp. Generated layouts often skip the basics:
<meta name= "viewport" content= "width=device-width, initial-scale=1" > Enter fullscreen mode Exit fullscreen mode Then check wide tables (wrap them in overflow-x: auto ), fixed pixel widths on chart containers, and hover-only tooltips that do nothing on touch. Open Chrome DevTools' device mode at 375px wide before you send anything.
This is the step where most of the previous work gets wasted. Email gateways strip or quarantine.html attachments, and phones download them instead of rendering them. That's why "it says I can't open this file" is the most common reply. The dochost guide on sharing an HTML file as a link compares the usual options side by side: single-file hosts, Netlify Drop, GitHub Pages and a few email workarounds.
My rule of thumb: if the artifact is a long-lived app with a backend, deploy it properly. If it is one self-contained file meant for a handful of readers this week, a deploy pipeline is overkill. For the second case I paste it into dochost, which takes raw HTML or Markdown and returns a link without an account. Their write-up on where to host a vibe-coded app makes the same argument in more detail.
If you'd rather skip copy-paste entirely, there's also a dochost MCP server you can add to Claude Code, Cursor or Codex. You then ask the assistant to "publish this as a link" and it returns the URL in the chat.
Two practical things to check before you hit send.
Size. Inlined base64 images add up fast. A dashboard with four screenshots can easily pass 1 MB. Free tiers on single-file hosts usually cap page size, so read the free plan limits for whatever you use. Compress PNGs, prefer SVG for icons and charts, and drop unused fonts.
Updates. Stakeholders will find a typo ten minutes after you send the link. Re-publishing creates a second URL, and now two versions are floating around Slack. Pick a host that lets you update in place. On dochost, a page published without signing in comes with a private edit link that keeps the same share URL. Save it somewhere when you publish.
LLMs are now very good at producing the artifact. Getting it in front of the people who asked for it, in a state they can actually use, is still on us. Ten minutes on this list saves a lot of "it doesn't open on my phone" replies.
What's your setup for sharing generated HTML? I'm curious whether people mostly use gists, internal wikis or throwaway hosts.