Skip to content

adding domvisualizer project#2074

Open
adeshsinghbits wants to merge 1 commit into
TusharKesarwani:mainfrom
adeshsinghbits:domvisualizer
Open

adding domvisualizer project#2074
adeshsinghbits wants to merge 1 commit into
TusharKesarwani:mainfrom
adeshsinghbits:domvisualizer

Conversation

@adeshsinghbits

Copy link
Copy Markdown

Issue (Number)

Closes #101


Description

This PR introduces a DOM Visualizer tool that allows users to:

  • View a live preview of HTML structure
  • Inspect DOM elements interactively
  • Explore a structured DOM tree
  • Search elements by tag or class
  • Highlight selected and hovered nodes

Motivation

Understanding DOM structure is often difficult for beginners. This tool provides a visual and interactive approach to learning and debugging HTML structures.

Dependencies

No external dependencies required. Built using:

  • HTML
  • CSS
  • JavaScript

Type of Change

  • Bug fix
  • New feature
  • Breaking change
  • Documentation update

Checklist

  • I have made this from my own
  • I have taken help from some online resources
  • My code follows the style guidelines of this project
  • I have performed a self-review
  • I have commented my code where necessary
  • I have made corresponding documentation changes
  • My changes generate no new warnings
  • PR title is clear and descriptive

Screenshots

Screenshot 2026-05-05 104213

Example:

  • Preview panel working
  • DOM tree rendering
  • Element inspector view

💡 Additional Notes

  • Responsive layout using CSS Grid
  • Custom dark theme UI
  • Scrollbar customization included
  • Modular structure for future enhancements

@netlify

netlify Bot commented May 5, 2026

Copy link
Copy Markdown

Deploy Preview for frontendprojects ready!

Name Link
🔨 Latest commit 46c04ac
🔍 Latest deploy log https://app.netlify.com/projects/frontendprojects/deploys/69f97cd40c27f00008673283
😎 Deploy Preview https://deploy-preview-2074--frontendprojects.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant