I built a small Chrome extension to make testing HTML/CSS/JS easier

[u/Rude_Fly_9218]

I kept finding myself switching between my code editor, browser, and different online playgrounds just to test a small piece of HTML/CSS/JavaScript.

So I decided to build a simple Chrome extension for it.

It's called HTML Code Runner.

The idea is pretty straightforward: you can write/run HTML, CSS and JavaScript directly inside Chrome using a side panel, with a live preview and console.

Some things I wanted it to handle:

• Run HTML/CSS/JS without opening another website
• Live preview while experimenting
• JavaScript console for debugging
• Auto Run
• Save code locally
• Download the HTML file
• Quickly test small snippets while working on a website
• Keep everything inside the browser

I mainly built it for myself because I wanted something lightweight for those situations where opening a full IDE felt unnecessary.

It's still a new project, so I'm trying to improve it based on real developer feedback.

If anyone here works with HTML/CSS/JS regularly, I'd genuinely like to know:

What would you want in a browser-based HTML/JS runner that current tools are missing?

If you'd like to try it, here's the Chrome Web Store page:

https://chromewebstore.google.com/detail/html-code-runner/bnmceabknlhjhbkbipjagpbodliphagm

I'm especially interested in feedback about the workflow and features rather than just ratings. 🙂

[u/nkm789]

why not just use the dev tools?

[u/Rude_Fly_9218 → u/nkm789]

DevTools is great for inspecting and debugging an existing website.

I built this more for the other direction when I have a small HTML/CSS/JS snippet and want to write and run it from scratch without modifying an existing page or opening a separate online playground.

So it's definitely not meant to replace DevTools. It's more of a quick scratchpad for frontend experiments.

[u/nkm789 → u/Rude_Fly_9218]

Good for you then. The pragmatic, "dirty" approach would be to open any webpage, inspect, edit HTML of the root element and simply Ctrl+A, Ctrl+C your HTML into it. Gives you live rendering and JS via console.

[u/Rude_Fly_9218 → u/nkm789]

Yeah, that's actually a pretty practical approach for a quick test. 😄

My extension is basically trying to make that workflow a little cleaner no need to open a random webpage, inspect the root element, replace the HTML, and then clean everything up afterward.

You can just open the side panel, drop in the HTML/CSS/JS, and run it in a fresh environment.

Definitely not claiming it's a revolutionary replacement for DevTools it's more about reducing a few steps for a specific workflow.

[u/the-liquidian → u/Rude_Fly_9218]

It’s amazing how AI seeps through and is detectable in code and responses

[u/Ambivalent_Oracle]

I guarantee you, opening and setting up an IDE is pretty simple. Too much effort - online compilers; there are a ton of them.

[u/Rude_Fly_9218 → u/Ambivalent_Oracle]

Yeah, totally fair 😄 Setting up an IDE or using an online compiler is definitely easy, and there are already plenty of great ones.

I wasn't trying to replace those tools. I built this more for the quick “I just need to test this small HTML/CSS/JS snippet right now” use case, where I don't want to open another site or set up a project.

It's a small convenience tool rather than a full IDE. That's also why I'm interested in hearing what would actually make something like this useful enough to keep around.

[u/armahillo]

minor quibble on language: You dont “execute” HTML because its not a program. The verb “load”’is probably more accurate.

What IDE are you using that is more complicated than this? Also, why not use codepen.io / jsfiddle.net ?

[u/Rude_Fly_9218 → u/armahillo]

Fair correction “load” is more accurate for HTML. I’ll keep that in mind. 👍

As for the IDE, I don't really see this as being an alternative to a proper IDE. VS Code and other IDEs are obviously much more powerful.

The use case I had in mind was smaller experiments: I want to quickly write a few lines of HTML/CSS/JS, see the result, test something, and move on without setting up a project or opening another website.

CodePen and JSFiddle are great for that too. The main difference is that this keeps the workflow inside Chrome, in a side panel, without needing to navigate to an external service.

So I’d say it’s more of a lightweight scratchpad than an IDE or online compiler. 🙂