HTML Code Editor
Write HTML, CSS and JavaScript and see a live preview update as you type.
HTML Code Editor
This online code editor lets you write HTML, CSS and JavaScript in your browser and see the result in a live preview as you type. There is nothing to install and no account to create: open the page and start coding. It uses the Ace editor, the same editor used by many cloud IDEs, with syntax highlighting, line numbers and auto-closing tags.
How to use the online code editor
- Type or paste your code into the editor. A small example is loaded to start with.
- Write HTML as usual; put CSS inside a
<style>tag and JavaScript inside a<script>tag. - Watch the preview update beside the editor as you type.
- Use Clean to clear the editor and start again.
Editor features
- Syntax highlighting for HTML with embedded CSS and JavaScript.
- Automatic closing of tags, brackets and quotes, plus line numbers, indent guides and word wrap.
- Live preview in a sandboxed frame: your scripts run, but they cannot reach the rest of the page or your SEOpeck session.
Using libraries from a CDN
Add a library the same way you would in any HTML file, for example <script src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js" defer></script> or a Bootstrap or Tailwind stylesheet link in the head. It loads in the preview, so you can try frameworks without setting up a project.
When it comes in handy
- Testing a quick HTML or CSS idea without creating files.
- Learning or teaching HTML, CSS and JavaScript, with instant feedback.
- Reproducing a layout bug in isolation before asking for help.
- Checking what an email signature, embed code or widget snippet looks like before using it.
Tips
- Clean up pasted markup first with the HTML Formatter, or shrink finished code with the HTML Minifier.
- Use your browser's developer tools (F12) on the preview to inspect elements and read console messages.
Frequently asked questions
Is my code saved?
No. The editor keeps your code only while the page is open. Copy anything you want to keep into a file before you close or reload the page.
Is my code uploaded anywhere?
No. The editor and the preview both run in your browser.
Can I use external libraries?
Yes. Reference any library from a CDN in your markup, as you would in an HTML file, and it loads in the preview.
Why does my JavaScript not run?
Check that it is inside a
<script> tag and look for errors in the browser console. Pop-ups and some browser features are blocked inside the sandboxed preview for safety.Does it work on a phone or tablet?
Yes, although a keyboard makes longer editing much easier.
Related guides
-
Should You Block AI Crawlers? A Plain Guide to robots.txt and AI Bots
Which AI crawlers visit websites, what the difference between training and search bots is, and how to allow or block each one with robots.txt.
-
On-Page SEO Checklist: 15 Things to Check Before You Hit Publish
A practical, no-jargon checklist for getting a single page right: titles, descriptions, headings, images, links, indexing and structured data.
-
Schema Markup for Beginners: What JSON-LD Does and Which Types to Use
A beginner-friendly explanation of structured data and JSON-LD, the schema types most sites need, and how to add and test them.
