Write HTML, CSS and JavaScript and see the page render as you type. Test it on desktop, tablet and mobile sizes, read the console, format the code, and download or share it. Free, with no sign-up.
HTML code editor and live preview
Opened from a share link. Its scripts have not run yet. Review the code, then press Run.
index.html
14px
Ln 1, Col 1Saved
Preview
No output yet. console.log() messages and errors from your page appear here.
In short: what this HTML editor does
The SeeB4Coding Online HTML Editor is a free, browser-based code editor that renders HTML, CSS and JavaScript in a live preview as you type. Nothing is installed, no account is needed, and your code is never sent to a server.
Live preview: the page re-renders a moment after you stop typing, or on demand with Ctrl+Enter.
Responsive testing: responsive, desktop (1440×900), tablet (768×1024) and mobile (375×667) sizes, with rotation.
Console: shows console.log output, warnings and uncaught errors with clickable line numbers.
Productive editing: syntax highlighting, autocomplete, snippets, one-click formatting, word wrap and adjustable font size.
Keep your work: autosave in the browser, open and download .html files, and share links.
Safe by design: the preview runs in a sandboxed iframe that cannot access the editor page or your stored data.
How to run HTML code online
Three steps, about a minute.
1
Write or paste your code
Type in the editor, paste an existing page, open or drop an .html file, or start from a template. Put CSS in a <style> tag and JavaScript in a <script> tag in the same file.
2
Watch the live preview
The preview re-renders as you type. Switch between responsive, desktop, tablet and mobile sizes, and open the console to see logs and errors.
3
Save, download or share
Your work autosaves in this browser. Download it as an .html file, copy the code, or create a share link that carries the code inside the URL.
Features
Everything you need to prototype, learn and debug a web page without setting up a project.
Instant live preview
Changes appear as you type. Turn Live off for heavy pages and run manually with Ctrl+Enter.
Device preview
Check layouts at desktop, tablet and mobile widths, rotate to landscape, or go fullscreen and open the result in a new tab.
Built-in console
See console.log, warnings, uncaught errors and rejected promises. Click an error's line number to jump straight to it.
A real code editor
Syntax highlighting, autocomplete, snippets, HTML error hints, multi-cursor, find and replace, code folding and a formatter for HTML, CSS and JS.
Templates & files
Start from a landing page, contact form, Flexbox and Grid layout, Bootstrap 5 page or to-do app. Open and download .html files.
Private & sandboxed
Code stays on your device. Share links keep code after the #, which is never sent to a server, and shared code never runs until you press Run.
Keyboard shortcuts
On macOS use ⌘ in place of Ctrl and ⌥ in place of Alt.
Shortcuts available in the HTML editor.
Action
Shortcut
Run the preview
Ctrl+Enter
Format code
Shift+Alt+F
Save draft now
Ctrl+S
Autocomplete
Ctrl+Space
Find / replace
Ctrl+F / Ctrl+H
Toggle comment
Ctrl+/
Move line up / down
Alt+↑ / Alt+↓
Duplicate line
Ctrl+Shift+D
Delete line
Ctrl+D
Add cursor above / below
Ctrl+Alt+↑ / ↓
Undo / redo
Ctrl+Z / Ctrl+Y
Exit focus mode
Esc
What works in the preview
The preview behaves like a single .html file opened in a browser, inside a security sandbox.
Browser features available to code running in the live preview.
Feature
Works
Notes
Inline <style> and <script>
Yes
Write CSS and JavaScript in the same file.
CDN libraries
Yes
Bootstrap, Tailwind CSS, jQuery, Font Awesome, Google Fonts and others via full https URLs.
fetch() to public APIs
Yes
The API must allow cross-origin requests (CORS).
alert(), confirm(), prompt()
Yes
—
Forms and links
Yes
Handle submit events with preventDefault(). In-page #anchor links scroll; external links open in a new tab when they use target="_blank".
localStorage, sessionStorage, cookies
No
Blocked by the sandbox. Keep state in variables while testing.
Relative file paths
No
images/logo.png cannot be found. Use a full URL or a Base64 data URI.
Access to the editor page
No
Preview code is isolated from the editor, your saved drafts and this site's cookies.
Frequently asked questions
Common questions about writing and testing HTML online.
Is my code uploaded to a server?
No. The editor and the preview run entirely in your browser. Autosave uses your browser's localStorage, and share links keep the code in the part of the URL after the # sign, which browsers never send to the server.
Is it safe to open a share link from someone else?
Yes. Shared code is never run automatically; you review it first and press Run. The preview runs in a sandboxed iframe with its own isolated origin, so scripts in it cannot read your cookies or saved data, or change the editor page.
Can I use CSS and JavaScript in the HTML editor?
Yes. Put CSS in a <style> element or style attributes and JavaScript in a <script> element, all in the same file. The preview renders them together, exactly like a single .html file opened in a browser.
Can I use Bootstrap, Tailwind CSS or jQuery?
Yes. Add the library with a <link> or <script> tag that points to a CDN such as cdn.jsdelivr.net or cdnjs.cloudflare.com. The Bootstrap 5 template shows a working example.
How do I see console.log output and JavaScript errors?
Open the Console panel under the preview. It shows console.log, info, warn and error messages plus uncaught errors and rejected promises. Click the line number on an error to jump to that line in the editor.
How do I test my page on mobile and tablet sizes?
Use the device buttons above the preview to switch between responsive, desktop (1440×900), tablet (768×1024) and mobile (375×667) sizes, and the rotate button for landscape. Include <meta name="viewport" content="width=device-width, initial-scale=1"> so media queries behave as they do on a real phone.
Why do localStorage and cookies not work in the preview?
The preview is sandboxed without same-origin access so that code cannot touch the editor or your data. As a result, localStorage, sessionStorage and cookies throw a security error inside the preview. Keep state in JavaScript variables while testing.
Why are my images or CSS files not loading?
Relative paths such as images/logo.png point to files on your computer, which the editor cannot see. Use full https URLs, or embed small images as Base64 data URIs with the Image to Base64 tool.
How do I share my HTML code?
Click Share. The code is compressed into a link and copied to your clipboard; anyone who opens it sees the same code. Very large pages make very long links, so download the .html file for those instead.
Does the HTML editor work on mobile phones?
Yes. On phones and small tablets the editor and preview become two tabs, Code and Preview, and every toolbar action stays available.
Is the online HTML editor free?
Yes. It is completely free, needs no account, and has no limit on how much you use it.
