Measures how a webpage actually renders and prints it as compact text for AI coding agents.
Quick Install
Automated & IDE SetupCopy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.
One-click editor setup isn’t available for this listing yet — we don’t have a confirmed install command, and we’d rather show nothing than point your editor at the wrong package or host. Follow the project’s own setup instructions, linked above.
Manual Client & Custom JSON ConfigExpand JSON â–¾
No confirmed setup config for this listing yet. We only publish a config block when the install details come from the project itself — its README, its docs, or a verified owner. We haven’t found those for pxtree, and we’d rather show nothing than a guess you’d paste into your client. Follow the project’s own setup instructions for the current steps.
Documentation Overview
pxtree
Loads a webpage in headless Chromium and prints what actually rendered as a compact text tree, so an AI coding agent can check a layout without a screenshot.
A dev server page with a row of three cards, a row of three plans, a list of steps, a row of stats, an article, a form, a column of prices and a row of tiles:
The first line is the facts line: viewport, color scheme, device pixel ratio, direction, scroll position out of the maximum, document size, and painted to, the lowest painted pixel. since last run compares with the previous run of the same URL and settings, or of the same --diff-key name. That history lives in ~/.cache/pxtree, never in your project, and --no-diff skips it.
The ul.cards line says the "Choose" buttons in the three cards have tops from 64 px to 136 px below the top of their card. The li.plan.featured "Lifetime" line says that plan is 212x56 at x 432 in its row, 12 px wider than the width its siblings share. Findings are measurements with a threshold, never verdicts. The agent decides from the code whether they are intended.
Why not a screenshot
- It gives numbers in CSS px, not pixels the model has to estimate.
- The agent reads it in one pass, as text, with the findings listed on top.
- One call covers several viewports and color schemes.
Install
pxtree drives Playwright's Chromium. Install it once, about 150 MB:
pxtree itself downloads nothing and never edits your project. --channel chrome uses an installed Chrome instead. Needs Node 20 or newer.
MCP server
| Client | Install | Scope |
|---|---|---|
| Codex | codex mcp add pxtree -- npx -y pxtree@latest mcp | user, ~/.codex/config.toml |
| Claude Code | claude mcp add --scope user pxtree -- npx -y pxtree@latest mcp | user. --scope project writes .mcp.json |
| Cursor |  or ~/.cursor/mcp.json / .cursor/mcp.json | user / project |
| VS Code Copilot |  or code --add-mcp '{"name":"pxtree","command":"npx","args":["-y","pxtree@latest","mcp"]}' | user. .vscode/mcp.json for project, see below |
| OpenCode | ~/.config/opencode/opencode.json or opencode.json, see below | user / project |
OpenCode, opencode.json:
Other clients and config files
Any MCP client that reads mcpServers:
Related MCP Servers
Reviews
No reviews yet — be the first to share how this listing worked for you.
Frequently Asked Questions about Pxtree
AllMCPs Directory Badge
Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.
Badge Style:
Live Dynamic SVG Preview
Markdown (GitHub README)
[](https://allmcps.com/mcp/pxtree)HTML Embed
<a href="https://allmcps.com/mcp/pxtree"><img src="https://allmcps.com/api/badge/pxtree?style=directory" alt="Pxtree on AllMCPs" /></a>