Hey everyone,
While I was learning front-end fundamentals and struggling a lot with mapping markup code to rendered page elements, I put together a lightweight local debugging tool I’ve been using daily, and figured it could help other beginners & devs here too.
Anyone who’s debugged small HTML/CSS/JS snippets knows how tedious it is to toggle back and forth between source code and live preview just to locate which line controls a specific DOM element or styling rule. I built this viewer to fix exactly that pain point with two-way linking between code and preview:
Click any HTML/CSS/JS line inside the editor — the matching element on the live preview will highlight automatically and scroll into view.
Click any visual element on the preview panel, and the editor jumps directly to the source line responsible for its creation or styling.
The whole tool works fully client-side within your browser, zero backend calls, no registration or login required, all your code stays local to avoid privacy concerns. I’ve relied on it for three core daily workflows:
Debugging isolated code snippets without spinning up local dev servers
Learning how individual CSS properties visually impact layout components
Tracing through simple vanilla JS interactions step by step
It also includes a no-code visual edit mode for quick adjustments, which I find super handy when working with messy AI-generated markup. Instead of digging through raw code manually, you can directly select page elements to tweak font colours, rework unordered layouts, insert media assets, and more.
I’m aware self-shared tools can come off as spam, so I kept this concise — this is just a side project built entirely for personal learning, no paid features or commercial services attached. If you’ve ever wasted time hunting for the source of a rogue element or broken style while building/testing pages, this utility can cut down that repetitive debugging work.
If you test it out, I’d really appreciate your feedback or feature suggestions, I’m still iterating on improvements based on real dev use cases!
Cheers,
https://html-viewer.org
Modifié par aalyfedd (09 Jun 2026 - 08:15)
While I was learning front-end fundamentals and struggling a lot with mapping markup code to rendered page elements, I put together a lightweight local debugging tool I’ve been using daily, and figured it could help other beginners & devs here too.
Anyone who’s debugged small HTML/CSS/JS snippets knows how tedious it is to toggle back and forth between source code and live preview just to locate which line controls a specific DOM element or styling rule. I built this viewer to fix exactly that pain point with two-way linking between code and preview:
Click any HTML/CSS/JS line inside the editor — the matching element on the live preview will highlight automatically and scroll into view.
Click any visual element on the preview panel, and the editor jumps directly to the source line responsible for its creation or styling.
The whole tool works fully client-side within your browser, zero backend calls, no registration or login required, all your code stays local to avoid privacy concerns. I’ve relied on it for three core daily workflows:
Debugging isolated code snippets without spinning up local dev servers
Learning how individual CSS properties visually impact layout components
Tracing through simple vanilla JS interactions step by step
It also includes a no-code visual edit mode for quick adjustments, which I find super handy when working with messy AI-generated markup. Instead of digging through raw code manually, you can directly select page elements to tweak font colours, rework unordered layouts, insert media assets, and more.
I’m aware self-shared tools can come off as spam, so I kept this concise — this is just a side project built entirely for personal learning, no paid features or commercial services attached. If you’ve ever wasted time hunting for the source of a rogue element or broken style while building/testing pages, this utility can cut down that repetitive debugging work.
If you test it out, I’d really appreciate your feedback or feature suggestions, I’m still iterating on improvements based on real dev use cases!
Cheers,
https://html-viewer.org
Modifié par aalyfedd (09 Jun 2026 - 08:15)