Outline HTML Elements

HTML to Framer

Bring your own website into Framer with a few clicks. Simply copy and paste web elements and edit them directly in Framer. Once you have installed the extension, simply hover over any element such as text, images, buttons, or entire layouts. Click to copy, then go to Framer and press ⌘V (or Ctrl V on Windows) to paste. Your elements will be pasted with a clean layer hierarchy, ready to be further edited or published immediately within Framer. Pro tip: Hold Shift to copy multiple items for even greater speed. To select a parent element of a site item, press Esc while hovering over it. Framer is where teams design and publish stunning sites. Try it for free today at framer.com

CSS Debugger

Instantly debug CSS layouts by adding colorful outlines to HTML elements. Easily identify and inspect elements with a simple click. This extension, is designed to simplify CSS debugging and layout inspection. It instantly adds colorful outlines to HTML elements, making it easy to visualize and identify different elements on a webpage. The extension solves the common problem of struggling to understand the structure and layout of a website. Instead of manually inspecting elements in the browser's developer tools, this extension provides a quick visual overview of the page's underlying structure. When the extension's icon is clicked, it injects a script into the current tab that toggles the CSS outlines. The script uses predefined color mappings for different HTML elements, and it dynamically generates and injects CSS rules to apply the outlines. It functions similarly to the old Pesticide extension but is compatible with Manifest V3. The source code contains no third-party dependencies. 🌐 Open source repository: https://github.com/aydgn/css-debugger-extension

HTML Visual Validation

HTML Visual Validation gives you information about the html elements, live, on page. It makes easy to inspect the structure of a page with no need to open the browser console. Just select the type of html tag to outline, on page, and to display a label with basic info. - List the most common html tags - Get info about the tittle and description tags - Display tags id and class attributes - extra info: “alt” attribute value - extra info: tells you if it’s an internal or external link, or a javascript call, and if the “target” attribute is set - Mouse over a tag label to bring it to front *** NEW FEATURES *** - Tag selector is now sensitive to tags available on the page - New "DOM Tree" panel, wich can be used with the tag selector - Click on the tag in the DOM Tree to scroll to the element on the page

HTML Viewer

Use HTML Viewer to view HTML with an online page-code preview and CSS inspector for website markup analysis 🧩 HTML Viewer is a powerful and intuitive tool designed to make html view tasks simple, fast, and accessible. Whether you're exploring page structure, learning how to view html code in chrome, or searching for an easy html viewer online, this extension gives you a seamless way to view html and understand any webpage’s markup instantly. One of its core strengths is reliability: the extension works on all websites, provides stable state persistence, and includes an instant toggle to enable or disable functionality. This makes it perfect for users who need a flexible online html viewer and a practical Web markup viewer for daily work. Our html viewer also answers the common question how to view html code of a website by offering a detailed element information panel. This panel shows tag names, attributes, and computed styles, acting as both a html css viewer and a style-and-markup viewer with clean syntax formatting. It’s ideal for anyone looking for a code viewer html, html and css viewer, or online view html solution. 📌 The information panel is designed with: Developers and learners benefit from precise style inspection through a built-in CSS display. Default and empty values are filtered out, helping you view html source more clearly. This structured approach transforms the tool into a convenient html source viewer, Website structure viewer, and Online document-code analyzer. 🔍 DOM navigation is another highlight: ➤ Parent element navigation ➤ Full children list with previews ➤ Hover-based child highlighting ➤ Click-to-navigate DOM nodes ➤ Auto-scroll to selected elements For those who want more control, html viewer includes a live CSS editing system. It allows inline style modifications, double-click editing, and real-time updates. This makes the extension a practical Site code inspection tool and a lightweight alternative to complex devtools. 🛠️ CSS editing capabilities include: ▸ Add new properties ▸ Remove existing properties ▸ Apply live changes instantly ▸ Use Enter/Escape shortcuts ▸ Update styling with no reload The extension also serves as an online html view utility for users who need to quickly inspect markup without hidden formatting. Combined with custom scrollbars, smooth animations, and intuitive visual feedback, it becomes a polished Browser-based layout inspector suitable for beginners and advanced users alike. 🌐 The clean gradient theme and UI refinements make this webpage preview utility not only functional but pleasant to use. Whether you need a markup code display tool, a quick Web source preview service, or are simply learning How to inspect a site’s code, this tool makes the process straightforward. With stable on/off switching, persistent preferences, and compatibility with all websites, html Viewer becomes a dependable companion for everyday development. The extension simplifies viewing a webpage’s source code while staying lightweight, fast, and user-friendly. 📝 From students exploring online html viewer options to professionals who need consistent view html capabilities for design audits, html viewer provides a complete workflow. Its balanced feature set helps you understand structure, refine styling, and navigate the DOM with ease. Upgrade your workflow today with an extension that brings clarity, precision, and efficiency to every page you inspect 🚀