HTML Tools
Inar HTML Editor
Inar HTML Editor is a free online HTML editor for writing, editing, testing, and previewing HTML code instantly. Create and improve web pages with an easy-to-use editor.
Inar HTML Editor
Write HTML, CSS & JavaScript — with a Live Preview
A free online HTML editor with three synchronized code panes and a live preview iframe. Edit HTML, CSS and JavaScript side by side, watch the result update instantly, capture console output, and export everything as a single runnable HTML file. Everything runs locally in your browser: nothing is uploaded, and no sign-up is required.
Code editor
What is a Live HTML Editor?
A browser-based playground that runs HTML, CSS and JavaScript with instant visual feedback.
An HTML editor — also called an HTML playground or a front-end sandbox — lets you write HTML, CSS and JavaScript in three separate panes and see the result render immediately in a live preview. It removes every barrier between writing code and seeing the result: no build step, no server, no editor configuration, no browser tab switching.
This editor isolates your code inside a sandboxed iframe so that any JavaScript you write runs in its own context and cannot affect this page. Console output — log, info, warn and error — is captured back to a console panel below the preview so you can debug your scripts without opening DevTools.
Inar HTML Editor runs entirely inside your browser. Your code never leaves your device — there is no upload, no server call and no third-party processing.
Three Panes, One Preview
HTML for structure, CSS for style, JavaScript for behaviour.
HTML
Write the document structure — headings, paragraphs, sections, images, forms, buttons, SVG, anything. If you include a full document, it is used as-is; otherwise your HTML is wrapped in a standard page.
CSS
Style the page with modern CSS — flexbox, grid, custom properties, animations, media queries. Your styles are injected into the document head automatically.
JavaScript
Add interactivity — DOM manipulation, event listeners, canvas, fetch, anything. Your code runs in a sandboxed context and its console output appears in the console panel.
Features
Everything you need to write and run front-end code without leaving the browser.
Live preview
Every keystroke re-renders the preview with a 300 ms debounce so typing stays smooth.
Console capture
log, info, warn and error appear below the preview — no DevTools required.
Sandboxed execution
Your code runs inside an isolated iframe so it cannot affect this page or your session.
Syntax highlighting
HTML tags, CSS properties and JavaScript keywords each get their own colour tokens.
Viewport presets
Switch between Full, Desktop (1280), Tablet (768) and Mobile (375) to test responsiveness.
Open in new tab
Pop the preview into a real browser tab for full-page testing with DevTools access.
Export as HTML
Download everything as a single self-contained .html file you can open anywhere.
36 pro presets
From SaaS landing pages to admin dashboards, kanban boards, command palettes and more.
Live statistics
Character, line and byte counts for each pane, plus estimated DOM complexity.
Session persistence
Your HTML, CSS, JS and options are saved to local storage between visits.
Keyboard-first
Ctrl+Enter to run, Ctrl+1/2/3 to switch panes.
Privacy first
100% client-side. Your code never leaves your browser.
How to Use the Editor
Five steps from blank canvas to running web page.
Write your HTML
Start in the HTML pane. A single
<h1>is enough to see something render. Or open a starter from the Samples tab.Add styles
Switch to the CSS pane with the tab above the editor or
Ctrl+2. Everything you write here is automatically injected into the preview's<head>.Add behaviour
Switch to JavaScript with
Ctrl+3. Useconsole.log()to see output in the console panel below the preview.Test across viewports
Click Mobile, Tablet or Desktop above the preview to constrain its width and test your responsive layout.
Export
Click Copy HTML to grab the full self-contained document, or Download to save it as
index.html.
Editor Tips
Small things that make the editor feel faster.
Use full documents
If you need control over <head>, meta tags or fonts, paste a full document with <!DOCTYPE html>. The editor uses it as-is instead of wrapping it.
Prefer console.log
Use console.log() rather than alert(). The console panel keeps a running history; alerts block your code and require a click to dismiss.
Wait for DOM ready
Scripts run before the DOM is fully parsed. Wrap your code in window.addEventListener('load', …) if you need to query elements that appear later in the markup.
Frequently Asked Questions
Answers to the most common questions about the editor.
Is my code uploaded anywhere?
No. Inar HTML Editor runs entirely in your browser. Your code is processed locally and never leaves your device.
Can I use external libraries like React or Vue?
Yes, if you load them from a public CDN by adding a <script src="…"> tag in your HTML pane. Note that the sandbox does not allow scripts to reach outside the preview iframe, so fetched resources must be publicly accessible.
Why does my JavaScript sometimes run before the page is ready?
The preview injects your JS just before </body>, which means it runs as the parser reaches the end of the document. For most cases this is fine, but if you query elements above, wrap your code in a load or DOMContentLoaded listener.
Can I use localStorage in the preview?
No. The preview iframe is sandboxed without same-origin access, so localStorage, sessionStorage, cookies and IndexedDB are all unavailable. Use in-memory state instead.
Can I use fetch() in the preview?
Yes, but only to CORS-enabled public endpoints. Because the iframe has a null origin, any request will be treated as cross-origin — the server must send the appropriate Access-Control-Allow-Origin header.
How do I make a full-page preview?
Click Open in new tab in the top toolbar. The preview is written to a real browser tab where you can use DevTools, inspect elements, and see the page at full size.
Does the editor support auto-completion or IntelliSense?
No. This is a lightweight code editor focused on speed and simplicity. For IntelliSense and full language servers, use your regular IDE — the editor is best for prototyping and quick experiments.
What happens to my code when I close the tab?
Your HTML, CSS, JS, and options are persisted to localStorage in this browser. When you come back, everything is restored exactly where you left off. Nothing is sent anywhere.
Can I embed images and fonts?
Yes. Use standard HTML — <img src="https://…"> for remote images, or embed base64 data URIs. Web fonts can be loaded via @import in CSS or <link> tags in HTML.
Is the HTML Editor free?
Yes. Inar HTML Editor is completely free to use, with no account, no sign-up and no usage limits.
More Inar Developer Tools
More free, privacy-friendly tools from Inar Learn — built for developers and learners.
Inar Learn