Skip to content

feat(visualizer): add snippet result visualizer page - #85

Merged
nucliweb merged 3 commits into
mainfrom
feat/snippet-visualizer
May 21, 2026
Merged

feat(visualizer): add snippet result visualizer page#85
nucliweb merged 3 commits into
mainfrom
feat/snippet-visualizer

Conversation

@nucliweb

Copy link
Copy Markdown
Owner

Summary

  • Adds a /visualizer page to the site (visible in the sidebar nav)
  • Accepts the JSON return value of any snippet pasted from the browser console
  • Auto-detects the snippet type from the script field and routes to the appropriate renderer:
    • CWV — rating badge, value, and LCP sub-parts breakdown
    • Fonts — summary counters, loaded fonts table, used-above-fold table, issues
    • Audit — issues list (severity-colored) + full items table
  • "Copy as Markdown" button exports a formatted report for Notion/PRs
  • Reset button clears the textarea and result
  • No new npm dependencies

Motivation

Sites protected by Akamai (e.g. FedEx) block extended DevTools console output, but the IIFE return value remains accessible as the last evaluated expression. This page turns that object into a readable report without requiring any local setup.

Test plan

  • Paste a Fonts snippet result → three sections render (Loaded, Used above fold, Issues)
  • Paste an LCP result → rating + value + sub-parts table
  • Paste any audit result → issues + full items table (no limit)
  • Paste invalid JSON → inline error message, no crash
  • "Copy as Markdown" → valid Markdown in clipboard
  • Reset → clears textarea and report
  • Page appears as "Visualizer" in the sidebar nav

Client-side page that accepts the JSON return value of any snippet,
auto-detects the type (CWV, Fonts, Audit) from the `script` field,
and renders a formatted report. Includes "Copy as Markdown" and Reset.

Useful for sites that block extended DevTools output (e.g. Akamai).
@vercel

vercel Bot commented May 20, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
webperf-snippets Ready Ready Preview, Comment May 21, 2026 7:40am
webperf-snippets-u6am Ready Ready Preview, Comment May 21, 2026 7:40am

nucliweb added 2 commits May 21, 2026 09:36
- Mark visualizer.mdx as type: tool so the consistency check skips it
- Introduce NON_SNIPPET_PAGE_TYPES set to avoid duplicating the guide/tool condition
- Simplify verifySourceToPageMapping with Array.some() instead of found flag + break
- Add .githooks/pre-commit and npm prepare script to share the hook with the team
@nucliweb
nucliweb merged commit a12789a into main May 21, 2026
4 checks passed
@nucliweb
nucliweb deleted the feat/snippet-visualizer branch May 21, 2026 08:49
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