HTML editor
Edit the HTML for your own site or a client's page and preview every change as you go.
PrivateNo uploadsRuns in your browserHTML
Paste, type, drop a file, open a URL or press Sample
Preview
The page renders here as you type
For your first web page
See your page as you build it.
First page. Teja builds his first web page tonight.
BeforeSave, refresh, guess, repeat
With sdevType and watch it change
Show and tell
He shows it to his dad right away.
It works
A small win that feels big.
How to use the editor
Pick how you write
Visual gives you a toolbar like a word processor. HTML shows the code with colours, checks and one-click tidying. Markdown is for notes and documents. All three edit the same document, so switch whenever you like.
Bring your content
Type, paste, drop a file on the editor, press Open for an .html or .md file, or URL to fetch a page from the web. Sample fills in an example page with styles, a table and a script.
Preview and export
The preview renders the page as you type, at desktop, tablet or phone width. Download gives you HTML, Markdown, plain text or PDF; Ctrl+S saves the HTML. Open in tab shows the page full size.
Good to know
- Visual toolbar: headings, bold, italic, underline, strike, sub and superscript, code, text colour, highlight, alignment, bullet, numbered and task lists, quotes, code blocks, links, images, tables, undo and redo. Ctrl+B, Ctrl+I, Ctrl+U, Ctrl+Z work as expected.
- Code editors: Shift+Alt+F formats HTML, Ctrl+F finds and replaces, Ctrl+D selects the next match, Alt+Up or Down moves a line, Ctrl+/ toggles a comment, Tab indents the selection.
- A full page keeps its head, styles and scripts while you write in Visual or Markdown; only the body is edited there. Fragments are wrapped in a simple styled page for the preview and the HTML and PDF downloads.
- Untick Run scripts to render the page with JavaScript disabled. The preview frame has no access to this site, your cookies or other tabs.
- Load from URL: pages that allow it load directly; others go through a public relay. Add ?url=https://… to this page's address to share a link that opens a page in the editor.
- Your draft is saved in this browser and restored the next time you open any of the three tabs. Press Clear to forget it. Nothing is sent to a server.
Where people use it
Try out a code snippet
Paste HTML from a lesson or a forum and see the result right away.
Fix an email template
Edit the template and check how it looks at phone width before you send.
Students learning web pages
Write tags and watch the page change as you type, with tags closed for you.
Find mistakes in the code
Check for unclosed tags, wrong nesting and missing alt text with a plain fix for each.
HTML validatorMake the file smaller
Squeeze HTML, CSS and JavaScript before you put the page live.
HTML, CSS and JavaScript minifierAdd a table
Build a table in a grid and paste the HTML into your page.
HTML table generator with live preview
Why this one
It is a code editor and a live preview together, and you can switch to a visual toolbar for the same page.
- Live preview at desktop, tablet or phone width.
- Formats messy code in one key press.
- Shows simple accessibility problems as you write.
- Download as HTML, text or PDF.
What you can change
- Preview width
- Run scripts on or off
- Indent with 2 spaces, 4 spaces or tab
- Wrap lines
People find this page by searching
- html editor online
- html viewer
- html live preview
- html formatter
- html beautifier
- run html code online
- html editor with preview on mobile
- edit html file online
- html minifier
Cite this tool
- APA
sdev.in. (n.d.). HTML editor, formatter and live preview [Web tool]. https://www.sdev.in/tools/html-editor
- MLA
"HTML editor, formatter and live preview." sdev.in, https://www.sdev.in/tools/html-editor.
- Chicago
sdev.in. "HTML editor, formatter and live preview." https://www.sdev.in/tools/html-editor.
- BibTeX
@misc{sdev-html-editor, title = {HTML editor, formatter and live preview}, author = {{sdev.in}}, howpublished = {\url{https://www.sdev.in/tools/html-editor}}, note = {Web tool} }
Questions people ask
What is the difference between the three tabs?
Visual is a word-processor style editor with a toolbar. HTML shows the same document as source code with formatting, minifying and checks. Markdown lets you write in Markdown syntax. Switching tabs converts the document, so you can start in one and finish in another.
Will switching to Markdown lose anything?
The head of a full page, its styles and scripts, are kept aside and put back when you return to HTML or Visual. Only the body is turned into Markdown, and Markdown cannot express everything HTML can, so custom attributes, colours and inline styles in the body are dropped.
Which download formats are there?
HTML (.html), Markdown (.md), plain text (.txt) and PDF. PDF opens the page in a new tab with the print dialog, where you choose Save as PDF. Fragments without html and body tags are wrapped in a simple styled page for the HTML and PDF downloads.
How does Load from URL work?
The page is fetched by your browser. Sites that allow it load directly. Others are fetched through a public relay, which sees the URL but not your document. You can also open the editor with ?url= in the address bar.
Is the preview safe with pasted HTML?
Yes. The preview is a sandboxed frame on a separate origin: its scripts cannot read this page, your cookies or other tabs. Untick Run scripts to render without JavaScript.
What does Format change, and is Minify safe?
Format fixes indentation, line breaks and attribute quoting, including CSS and JavaScript inside style and script tags. Minify removes comments and whitespace between tags, keeps pre and textarea byte for byte and leaves JavaScript untouched apart from surrounding whitespace.
Is my document uploaded anywhere?
No. Editing, converting, checking and the preview run in your browser. The draft is kept in this browser's local storage so it is still here when you come back on the same device.