HTML / CSS / JS editor

Write in three panes, preview live, read the console, and keep projects on this device. Nothing is uploaded for normal editing.

HTML

CSS

JavaScript

External resources

Optional CSS/JS loaded in the preview only (e.g. a framework from a CDN). These run in the sandboxed iframe — not on this page.

Preview

Updated

Console

Preview logs show up here.

Size 0 B Draft idle HTML Ln 1, Col 1 Lines 1 / 1 / 1

Local projects

Saved only in this browser. Open, rename, or delete anytime.

About this HTML / CSS / JS playground

TechWeirdo Tools Code Editor is a free online HTML, CSS, and JavaScript playground (browser IDE) with live preview, console output, and a local project library. Try frontend snippets without a build step, npm install, or signup — editing and autosave stay on your device.

The preview runs in a sandboxed iframe so snippet code is isolated from the parent page. Use it as a lightweight alternative to opening a full desktop IDE for quick UI experiments, bug reproductions, or teaching demos.

Shortcuts

Run previewCtrl/⌘ + Enter

Save draftCtrl/⌘ + S

Format paneCtrl/⌘ + Shift + F

Focus HTML / CSS / JSAlt + 1 2 3

IndentTab (2 spaces)

Notes

Leave HTML as body content, or paste a full document — both work.
CDN links are optional helpers for libraries in the preview only.
Use Save to keep a named copy in the library below; the draft autosaves as you type.
Drag .html, .css, .js, or a project .json onto the window to load.

Code editor FAQ

Is code uploaded to a server?

No. Drafts and projects stay in your browser storage. Preview executes locally in a sandboxed iframe.

Can I use libraries like React?

You can load CDN scripts in the preview for many libraries. There is no bundler — prefer UMD/ESM builds that work in the browser.

Will my work sync across devices?

Not automatically. Export or copy your files if you need them elsewhere — there is no cloud account.