Home / Free tools / Developer tools / Code Editor & Live Preview

Code editor and live preview.

Write HTML, CSS and JavaScript in three tabs and watch the page update beside you. Test it at phone, tablet and full width, then copy it or download it as one file.

Use the tool ↓Free website audit
Developer tools

About this tool.

This is a small sandbox for trying out a page, a button, a form or a layout without setting up a project. Type in the HTML, CSS and JavaScript tabs and the preview refreshes half a second after you stop typing. Messages from console.log and any JavaScript errors appear in the console under the preview, with the line number. Everything runs in your browser. The preview is a sealed frame that cannot reach this website or your other tabs.

How to use it
  1. Start from the example or clear it. Write your structure in the HTML tab, your styles in CSS and your behaviour in JavaScript.
  2. Watch the preview update. Switch between Phone, Tablet and Full width to check how the page behaves on smaller screens.
  3. Read the console for errors, then use Copy as one file or Download .html to take your page with you.

Tab adds two spaces. To leave the box with the keyboard, press Esc, then Tab. Your work is saved in this browser only.

Live preview

Showing the full width of this box. The preview is a blank page with only your code, so it will not use your website's own styles.

Console

Messages from console.log() and errors in your JavaScript appear here.

Good to know: Your code is saved in this browser so a refresh does not lose it, but clearing your browser data will. Download anything you want to keep. The preview is a blank page with only your code, so it will not use your website's own styles. It is meant for quick experiments and learning, not as a place to store a live site.

Questions

Good to know.

Is my code uploaded or stored on your server?+
No. It stays in your browser. We keep a copy only in your own browser storage so a refresh does not wipe your work, and you can remove it with the Clear button or by clearing your browser data.
Is it safe to run any JavaScript here?+
The preview runs in a sandboxed frame. It cannot read this website, your cookies or other tabs, and it cannot navigate away from the preview. Code you paste from someone else still runs, so avoid pasting scripts you do not trust, as you would anywhere.
Can I use a library such as Bootstrap or jQuery?+
You can add a link or script tag in the HTML tab. Whether it loads depends on your internet connection and the host of the library. For reliable testing of your own layout, plain HTML, CSS and JavaScript work with no outside files.
Why does my page look different on my real website?+
The preview starts from a blank page, so your website's own fonts, colours and layout are not there. Paste your site's CSS into the CSS tab if you want to test a component with the same styles.
Does the phone width show how it looks on a real phone?+
It shows how your layout responds at 375 pixels wide, which is a good check for responsive CSS. Real phones differ in browser, fonts and touch behaviour, so test on a real device before you publish.
Can I edit on a phone?+
Yes. The editor and the preview stack one under the other, and the code box uses a larger font so the browser does not zoom in when you tap. A real keyboard is easier for longer code.
More free tools

Try these next.

Technical SEO

Robots.txt Generator

Generate a valid robots.txt in seconds, with the critical "block everything" warning built in.

Open tool
On-page SEO

Meta Tag Generator

Title, description, Open Graph and Twitter tags in one copy-paste block.

Open tool
Technical SEO

XML Sitemap Generator

Turn a list of URLs into a valid sitemap.xml, ready for Search Console.

Open tool

See all free tools →

Got a website in mind? Let's build it.

Send your idea or your current site. We reply within one working day with next steps and a fixed quote.

Start a project →Book a free callChat on WhatsApp
WhatsApp us
Get a fixed quote