https://github.com/grayoj/treeflow
A real-time DOM tree visualizer that allows users to inspect, manipulate, and explore the structure of a webpage.
https://github.com/grayoj/treeflow
Last synced: about 1 year ago
JSON representation
A real-time DOM tree visualizer that allows users to inspect, manipulate, and explore the structure of a webpage.
- Host: GitHub
- URL: https://github.com/grayoj/treeflow
- Owner: grayoj
- License: mit
- Created: 2025-03-20T13:19:36.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-09T20:12:47.000Z (about 1 year ago)
- Last Synced: 2025-04-09T22:59:51.214Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://treeflow-psi.vercel.app
- Size: 66.4 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Treeflow
Treeflow is a tool that visualizes the structure of a webpage’s DOM (Document Object Model) in real time. It converts the hierarchical relationships between elements into an interactive tree, allowing users to inspect, modify, and explore the webpage’s structure dynamically.
## How It Works
Treeflow captures the current state of the DOM and represents it as a graph. Each HTML element becomes a node, and parent-child relationships are shown as connecting edges. The visualization updates when elements are added, removed, or modified.
### Accuracy Considerations
- The structure displayed is based on the DOM at the time of capture.
- Some dynamically generated elements may not appear immediately if they are loaded asynchronously.
- Treeflow does not display non-DOM elements like JavaScript variables or event listeners.
## Features
- **Real-Time DOM Inspection** - See the structure of the webpage’s DOM as it currently exists.
- **Command Execution** - Run JavaScript commands to modify the DOM and see the changes reflected in the visualization.
- **Interactive Graph** - Click on nodes to highlight elements and understand their relationships.
- **JSON Representation** - View the DOM as structured JSON data.
- **Light and Dark Mode** - Adjust the interface for better readability.
## Installation
### 1. Clone the Repository
```sh
git clone https://github.com/grayoj/treeflow.git
cd treeflow
```
### 2. Install Dependencies
Using Bun (preferred):
```sh
bun install
```
or using npm:
```sh
npm install
```
### 3. Run the Application
Using Bun:
```sh
bun run dev
```
or using npm:
```sh
npm run dev
```
## Usage
- Run JavaScript commands in the input box to inspect or modify the DOM.
- Click on elements in the visualizer to see their relationships.
- Use the JSON view to get a structured representation of the DOM tree.
- Refresh the page to reset the visualization if needed.
## License
This project is open-source under the MIT License.