Loading page
About this tool
HTML Live Preview with Tailwind CSS and interactive code editing.
Prompt Painter is a split-screen HTML playground: you type markup in a Monaco code editor on the left and a sandboxed iframe on the right re-renders it instantly with the Tailwind CSS CDN already loaded, so utility classes like bg-blue-500 and hover:scale-105 work without any build step. It is built for developers and designers checking a snippet of AI-generated or hand-written HTML, and it includes device presets, zoom, and a js-beautify formatter. Nothing is compiled or uploaded — the preview runs from a srcdoc iframe in your own tab.
Open Prompt Painter on AltFTool — it loads instantly in your browser.
Type or paste your markup into the Monaco editor on the left — the preview wrapper already injects the Tailwind CDN, so utility classes work on a bare snippet.
Switch the preview between Desktop View (Full Width), Tablet View (768px) and Mobile View (375px), and use Zoom In / Zoom Out between 50% and 200%.
Press Format (or Cmd/Ctrl+S) to reindent with js-beautify at 2 spaces, then Copy to take the code away; Clear empties the buffer.
The preview document injects the Tailwind CDN and a config block, so utility classes render without you setting up a project.
Mobile (375x667), tablet (768x1024) and full-width desktop modes with a portrait/landscape flip, plus 50%-200% zoom.
Cmd/Ctrl+S formats with js-beautify, Cmd/Ctrl+K clears the buffer, and Cmd/Ctrl+Shift+C copies the current code.
No — the preview wrapper already injects the Tailwind CDN and a small tailwind.config block before your markup, so utility classes work on a bare snippet. You can still include your own <style> or <script> tags and they will run alongside it.
Three: mobile at 375x667, tablet at 768x1024, and desktop at the full width of the panel. Mobile and tablet also have a rotate control that swaps the dimensions to 667x375 and 1024x768 for landscape.
Yes. The preview iframe is loaded with the allow-scripts sandbox permission, so inline handlers such as onclick and <script> blocks execute, which is how the sample document's toggle button works.
It runs js-beautify's HTML formatter with 2-space indentation, preserved newlines capped at 2 consecutive blank lines, and a trailing newline at the end of the file. It only reindents markup — it does not rewrite tags or classes.