Home › Developer Tools › HTML Editor (Live Preview)

HTML Editor (Live Preview)

Write HTML, CSS and JavaScript in separate panes and watch the page update as you type. Your code runs in a sandboxed frame, console messages appear below it, and your work is saved in this browser automatically.

Auto-run

Template Open file

HTML

CSS

Preview

Console output from your code appears here.

Tip: Ctrl+Enter runs the code. In the editor, Tab indents; press Esc then Tab to move focus out. Your code is saved in this browser automatically.

How to use the HTML Editor (Live Preview)

Type your HTML in the HTML pane. Add styles in the CSS pane and scripts in the JS pane: they are combined into one page.
Watch the preview update as you type. Turn off Auto-run if your script is heavy and click Run instead (or press Ctrl+Enter).
Check the console under the preview for console.log output and error messages with line numbers.
Change the layout to side-by-side or stacked, and switch the preview width to test phone and tablet sizes.
Download the page as a single .html file. Your code is also saved automatically in this browser.

How the live preview is built

When you type, the three panes are combined into one HTML document. If the HTML pane holds only a fragment (for example a few <div> elements), it is placed inside a standard page with <!DOCTYPE html>, a UTF-8 charset and a mobile viewport tag. Your CSS goes into a <style> element in the head, and your JavaScript into a <script> element at the end of the body, so the DOM is ready when the script runs. If you paste a complete document, the CSS and JS are inserted before </head> and </body>.

The result is shown in an iframe with the sandbox attribute and without allow-same-origin. That gives the preview a unique, opaque origin: scripts run, but they cannot read this page, its cookies or its local storage. A side effect is that localStorage and document.cookie throw errors inside the preview.

Keyboard shortcuts

Keys	Action
`Ctrl` + `Enter` (`⌘` + `Enter` on Mac)	Run the code now
`Tab` / `Shift` + `Tab`	Indent / outdent the line or selected lines
`Esc`, then `Tab`	Move keyboard focus out of the editor
`Enter`	New line that keeps the current indentation (and adds one level after `{` or an opening tag)
`>` at the end of an opening tag	Adds the matching closing tag in the HTML pane

Tips for testing HTML, CSS and JavaScript

Use the Phone and Tablet widths to check media queries at 375 px and 768 px without resizing your window.
Load libraries from a CDN with a full URL, for example a script tag whose src starts with https://cdn.jsdelivr.net/ in the HTML pane. Relative file paths do not work because there is no project folder.
Turn off Auto-run when writing loops or timers, so a half-typed while loop cannot freeze the preview. Click Run when you are ready.
Read errors in the console: the line number refers to your JS pane, so you can jump straight to the problem.

Frequently asked questions

Is this HTML editor free?

Yes. It is completely free with no sign-up. Everything runs in your browser.

Is my code uploaded anywhere?

No. The preview is built locally from your code and shown in a sandboxed iframe. Auto-save uses your browser's local storage, so the code stays on this device.

Is it safe to run JavaScript here?

The preview runs in a sandboxed iframe without access to this page, its storage or cookies. Scripts can still make network requests or open pop-ups like any web page, so only run code you trust.

Why does my external script or font not load?

Links to CDNs and Google Fonts work when you are online. Relative paths such as images/logo.png do not, because the page has no folder of files: use full https:// URLs or data URIs instead.

How do I see errors in my JavaScript?

Open the Console panel under the preview. It shows console.log, console.warn and console.error messages and uncaught errors with their line numbers in the JS pane.

Can I edit a full HTML document?

Yes. If the HTML pane contains a complete document with <html> or <body>, your CSS is inserted before </head> and your JavaScript before </body>. Otherwise the HTML is placed inside a standard page.

Will my work be lost if I close the tab?

No. Your code is auto-saved in this browser and restored when you come back. Clearing your browsing data removes it, so download important work as an .html file.

Related tools

HTML FormatterBeautify and indent HTML code with a live preview.HTML MinifierMinify HTML: strip comments and whitespace safely and see how many bytes you save.CSS FormatterBeautify CSS with indent controls and optional property sorting.Markdown EditorWrite Markdown with a toolbar, live split preview, autosave and .md or HTML export.Strip HTML TagsRemove HTML tags and get clean plain text with line breaks and decoded entities.JSON FormatterBeautify, minify and validate JSON, with a collapsible tree view.QR Code GeneratorMake QR codes for links, Wi-Fi, email and more.Barcode GeneratorCreate Code 128, EAN-13, UPC-A, EAN-8, Code 39 and ITF-14 barcodes as PNG or SVG.Password GeneratorCreate strong passwords and passphrases.UUID GeneratorGenerate UUID v4 and v7 / GUIDs in bulk and copy or download them.Hash GeneratorGenerate MD5, SHA-1, SHA-256 and SHA-512 hashes of text or files.MD5 Hash GeneratorGenerate MD5 hashes of text, lines or files and verify checksums.SHA-256 Hash GeneratorSHA-256 and HMAC-SHA256 hashes of text, lines or files, in hex or Base64.SQL Formatter & BeautifierFormat, beautify or minify SQL queries for MySQL, PostgreSQL and more.JavaScript BeautifierFormat and beautify messy or minified JavaScript, or minify it.Base64 Encoder DecoderEncode or decode Base64 text and files, and make data URIs.URL Encoder DecoderPercent-encode or decode URLs, query strings and form data.HTML Entity Encoder / DecoderEscape and unescape HTML entities, named or numeric.XML FormatterBeautify, validate and minify XML with a collapsible tree view.JSON to CSVConvert JSON data to CSV for spreadsheets.CSV to JSONConvert CSV data to JSON with live preview.Excel to CSVConvert XLSX spreadsheets to CSV.Unzip FilesOpen and extract ZIP files online.RAR & 7z ExtractorOpen RAR, 7z and other archives online and extract files.ZIP File CreatorCompress files and folders into a ZIP.Regex TesterTest and debug regular expressions live.CSV ViewerOpen a CSV or TSV file as a sortable, filterable table.Excel Viewer (XLSX / XLS)Open XLSX, XLS and ODS spreadsheets in your browser without Excel.YAML Validator & FormatterValidate, format and minify YAML, and convert YAML to JSON or back.Bcrypt Hash Generator & CheckerCreate bcrypt password hashes and check a password against a hash.UTM Campaign URL BuilderAdd UTM tracking parameters to links and make a QR code.Schema Markup Generator (JSON-LD)Create JSON-LD structured data for FAQ, Product, Article and more.Htaccess & Nginx Redirect GeneratorBuild 301 redirects for .htaccess, Nginx and Netlify or Cloudflare _redirects.Line Ending ConverterConvert text and files between CRLF, LF and CR line endings.Meta Tag GeneratorCreate SEO, Open Graph and X meta tags with live previews.Robots.txt GeneratorBuild a robots.txt file with rules, sitemap lines and AI-bot blocking presets.Sitemap GeneratorTurn a list of URLs into a valid XML sitemap file.Open Graph PreviewPaste OG tags and preview how links look on Facebook, X and LinkedIn.Markdown to HTMLConvert Markdown to clean HTML with a live editor.XML to JSONConvert XML to JSON with validation.Binary TranslatorConvert text to binary, hex, octal and back.Email ValidatorCheck email lists and spot disposable addresses.Website Down CheckerCheck if a website is down for everyone.Fake Data GeneratorGenerate mock data as JSON, CSV or SQL.File Info ViewerCheck file size, type, date and MD5/SHA hashes.Text Encoding ConverterDetect and convert text file encodings like UTF-8, UTF-16 and Latin-1.Deep Link GeneratorCreate links that open directly in apps.JSON ViewerExplore JSON as a collapsible tree, search keys and values and copy any node's path.HMAC GeneratorGenerate and verify HMAC signatures with SHA-256, SHA-512, SHA-1 or MD5.URL ParserBreak a URL into its parts and edit query string parameters with a live rebuild.SQLite ViewerOpen .db and .sqlite files in your browser, browse tables and run SQL queries.CSS MinifierMinify CSS with csso or a built-in engine and see the size saved instantly.CRC32 Checksum CalculatorCalculate CRC-32, CRC-32C, CRC-16 and Adler-32 checksums of text or large files.User Agent ParserSee your user agent and parse any UA string into browser, OS, engine and device.YouTube Embed Code GeneratorCreate responsive YouTube embed code with start time, autoplay, loop and privacy mode.DOCX ViewerOpen and read Word .docx files in your browser, then print or save them as HTML.JavaScript MinifierMinify JavaScript with Terser: compress, mangle and see how many bytes you save.JWT DecoderDecode JSON Web Tokens, read the claims and expiry, and verify HS256 signatures.EPUB ReaderOpen and read EPUB e-books in your browser with pages, a table of contents and font controls.JSON MinifierMinify and validate JSON, sort keys and see exactly how many bytes you save.JWT GeneratorCreate and sign HS256, HS384 or HS512 JSON Web Tokens in your browser and verify them.What Is My BrowserSee your browser, version, OS, engine, screen and which web features it supports.Font ViewerPreview TTF, OTF, WOFF and WOFF2 fonts with sample text, waterfall, glyphs and metadata.Random String GeneratorGenerate secure random strings and tokens in bulk with any length and character set.HTTP Status CodesSearch every HTTP status code with plain-English meanings, causes, fixes and RFC references.TTF to WOFF2 ConverterConvert TTF and OTF fonts to WOFF2 or WOFF and get a ready @font-face CSS snippet.Code Diff CheckerCompare two code files side by side or unified, with syntax colors and changes highlighted.API Key GeneratorCreate secure API keys and secrets with prefixes, checksums and SHA-256 hashes for storage.MIME Type LookupFind the MIME type for any file extension, or the extensions for a MIME type, in 400+ entries.Cron Expression GeneratorBuild crontab schedules visually, read them in plain English and see the next run times.Password Strength CheckerSee how strong a password really is, how long it takes to crack and how to improve it.Subnet CalculatorCalculate IPv4 network, broadcast, host range, masks and host count, and split subnets.SERP Snippet PreviewPreview your title tag and meta description with pixel-accurate truncation on desktop and mobile.Regex Cheat Sheet75+ ready-to-use regex patterns for emails, URLs, IPs and dates, each with a live test box.Caesar CipherEncode and decode Caesar shift ciphers and crack unknown shifts with a ranked brute force.IPv6 Expander & CompressorExpand IPv6 addresses to full form or compress them per RFC 5952, one or many at once.GraphQL FormatterPretty-print and indent GraphQL queries, mutations and schemas, or minify them, instantly.Vigenère CipherEncrypt and decrypt Vigenère and Autokey ciphers, and crack unknown keys with frequency analysis.Chmod CalculatorConvert Linux file permissions between checkboxes, octal (755) and symbolic (rwxr-xr-x) notation.JSON to TypeScriptGenerate TypeScript interfaces or types from JSON, with nested types and optional fields.Morse Code TranslatorTranslate text to Morse code and back, then play it as sound or a blinking light, or save a WAV.HTML Table GeneratorBuild HTML tables in an editable grid with styles, header rows, CSV import and live preview.Atbash CipherEncode and decode Atbash ciphers (A↔Z, B↔Y) in Latin or Hebrew, with a live letter mapping table.CSS Box Shadow GeneratorDesign layered CSS box shadows with a live preview, presets and one-click Copy CSS.Bulk URL OpenerOpen a list of URLs in new tabs at once or in batches, with cleanup, dedupe and delay.Hex to Text ConverterConvert hex to text and text to hex with UTF-8 support and space, 0x, \x or comma formats.CSS Border Radius GeneratorRound each corner, draw elliptical 8-value radii or random blob shapes and copy the CSS.Hreflang Tag GeneratorCreate hreflang tags, sitemap entries and Link headers for every language and region, validated.ASCII TableFull ASCII code chart 0–255 in decimal, hex, octal, binary and HTML, with search and copy.CSS Button GeneratorDesign CSS buttons with gradients, borders, shadows and hover and active states, then copy the code.Canonical Tag GeneratorNormalize URLs and create rel=canonical tags and HTTP headers, for one page or a whole list.Unicode Character LookupFind Unicode characters by name or code point and copy them with UTF-8, HTML and code escapes.CSS Flexbox GeneratorBuild flexbox layouts visually: set container and item properties, then copy the CSS and HTML.Twitter Card GeneratorCreate X / Twitter Card meta tags with Open Graph fallbacks, character counters and a live preview.Punycode ConverterConvert international domain names, emails and URLs between Unicode and xn-- Punycode, in bulk.CSS Grid GeneratorDraw CSS grid layouts: set tracks and gaps, drag to name areas, then copy the CSS and HTML.PX to REM ConverterConvert px to rem or em and back, with a 1-100px table and a whole-CSS converter.JSON to XML ConverterConvert JSON to well-formed XML with attributes, arrays and pretty print.JSON to YAML ConverterConvert JSON to clean YAML as you type, with indent, quoting and sort options.YAML to JSON ConverterConvert YAML to pretty or minified JSON, with errors pinned to the exact line.HTML to Markdown ConverterTurn HTML or pasted rich text into clean Markdown with tables and live preview.Markdown Table GeneratorBuild Markdown tables in a grid or paste from Excel/CSV, with alignment and preview.JSON ValidatorCheck JSON with the exact line and column of each error, fix tips and one-click auto-fix.JSON Escape / UnescapeEscape text for a JSON string, unescape \n and \" back to text, or stringify a whole object.URL Slug GeneratorTurn titles into clean, SEO-friendly URL slugs: accents, stop words, separators and bulk lines.JavaScript Keycode FinderPress any key to see its JavaScript key, code, keyCode, which, location and modifiers.Glassmorphism CSS GeneratorDesign frosted-glass UI cards with blur, transparency and border sliders, then copy the CSS.CSS Text Shadow GeneratorLayer CSS text shadows with a live preview and neon, 3D, outline and retro presets.Image to Base64Convert images to Base64 data URIs, CSS backgrounds and HTML img tags in your browser.Base64 to ImagePaste a Base64 string or data URI to preview, identify and download the image.DNS LookupLook up A, AAAA, MX, TXT, NS, CNAME, SOA and CAA records with TTLs over secure DNS.QR Code ScannerScan QR codes with your camera or from an image and safely read the link or text.JSON CompareCompare two JSON documents and see every added, removed and changed path.Hex to DecimalConvert hex to decimal instantly with steps and signed mode.Decimal to HexConvert decimal to hex instantly with steps and signed mode.Binary to DecimalConvert binary to decimal instantly with steps and signed mode.Decimal to BinaryConvert decimal to binary instantly with steps and signed mode.Binary to HexConvert binary to hex instantly with steps and signed mode.Hex to BinaryConvert hex to binary instantly with steps and signed mode.