DevBox
Fast utilities for developers
Local-first
EN
DevBox
>
Formatters & Validators
>
HTML Preview
HTML Preview
Edit markup and inspect a rendered preview.
Render
Copy
Clear
Input HTML
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Preview</title> <style> body { margin: 0; min-height: 100vh; display: grid; place-items: center; font-family: Inter, system-ui, sans-serif; color: #172b4d; background: #f4f5f7; } main { width: min(560px, calc(100% - 32px)); padding: 32px; border: 1px solid #dfe1e6; border-radius: 8px; background: white; box-shadow: 0 10px 32px rgba(9, 30, 66, 0.12); } h1 { margin: 0 0 12px; font-size: 28px; } p { margin: 0; line-height: 1.6; color: #6b778c; } </style> </head> <body> <main> <h1>Hello, DevBox</h1> <p>Edit this HTML, then render it in the preview pane.</p> </main> </body> </html>
Preview
Ready