web/index.html at main · payload-lens/web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Payload Lens: REST & GraphQL Inspector</title>
    <meta name="description" content="Payload Lens is a REST and GraphQL inspector for Chrome DevTools. Group endpoints, inspect payloads, replay calls, diff responses, and copy redacted fetch/cURL.">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/icon-32.png">
    <link rel="shortcut icon" href="assets/icon-32.png">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap"></noscript>
    <link rel="canonical" href="https://payload-lens.github.io/web/">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Payload Lens">
    <meta property="og:title" content="Payload Lens: REST & GraphQL Inspector">
    <meta property="og:description" content="Payload Lens is a REST and GraphQL inspector for Chrome DevTools. Group endpoints, inspect payloads, replay calls, diff responses, and copy redacted fetch/cURL.">
    <meta property="og:url" content="https://payload-lens.github.io/web/">
    <meta property="og:image" content="https://payload-lens.github.io/web/screenshots/video-thumbnail.png">
    <meta property="og:image:width" content="1280">
    <meta property="og:image:height" content="720">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Payload Lens: REST & GraphQL Inspector">
    <meta name="twitter:description" content="Payload Lens is a REST and GraphQL inspector for Chrome DevTools. Group endpoints, inspect payloads, replay calls, diff responses, and copy redacted fetch/cURL.">
    <meta name="twitter:image" content="https://payload-lens.github.io/web/screenshots/video-thumbnail.png">
    <meta name="google-site-verification" content="0EDxT5eNLNmw28a5iYwFCcDC5vXYrzTETt2naqO_13w">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="site">
      <nav class="nav" aria-label="Primary navigation">
        <a class="brand" href="index.html">
          <img src="assets/brand-mark-light.png" alt="" aria-hidden="true" width="34" height="34">
          <span>Payload Lens</span>
        </a>
        <div class="nav-links">
          <a href="#demo">Demo</a>
          <a href="https://chromewebstore.google.com/detail/knkidgfhigdmbppemldoeigcefdfmbhf">Chrome Web Store</a>
        </div>
      </nav>

      <main>
        <section class="hero">
          <div>
            <p class="eyebrow">REST & GraphQL inspection inside DevTools</p>
            <h1>Inspect APIs by endpoint, not by timeline noise.</h1>
            <p class="lead">
              Payload Lens groups real browser API traffic into a focused DevTools workspace for inspecting payloads, replaying requests, comparing responses, and copying redacted fetch/cURL snippets.
            </p>
            <div class="actions">
              <a class="button primary" href="https://chromewebstore.google.com/detail/knkidgfhigdmbppemldoeigcefdfmbhf">
                <img src="assets/icon-chrome-store.webp" alt="" aria-hidden="true" width="20" height="20">
                <span>Add to Chrome</span>
              </a>
              <a class="button" href="#features">See features</a>
            </div>
          </div>

          <div class="hero-card" aria-label="Payload Lens interface preview">
            <div class="chrome-bar">
              <span class="dot"></span>
              <span class="dot"></span>
              <span class="dot"></span>
            </div>
            <div class="mock">
              <div class="mock-list" aria-label="Sample captured requests">
                <button class="mock-row active" type="button" data-sample="profile" aria-pressed="true">
                  <span class="mock-title"><span class="method get">GET</span> /api/users/:id/profile</span>
                  <span class="mock-meta">REST - 4 calls - 200</span>
                </button>
                <button class="mock-row" type="button" data-sample="redaction" aria-pressed="false">
                  <span class="mock-title"><span class="method post">POST</span> /api/redaction</span>
                  <span class="mock-meta">REST - redacted</span>
                </button>
                <button class="mock-row" type="button" data-sample="dashboard" aria-pressed="false">
                  <span class="mock-title"><span class="method post">POST</span> query GetDashboard</span>
                  <span class="mock-meta">GraphQL - 2 calls</span>
                </button>
                <button class="mock-row" type="button" data-sample="updateProfile" aria-pressed="false">
                  <span class="mock-title"><span class="method post">POST</span> mutation UpdateProfile</span>
                  <span class="mock-meta">GraphQL - changed</span>
                </button>
              </div>
              <div class="mock-panel">
                <div class="mock-tabs" role="tablist" aria-label="Sample detail panes">
                  <button class="active" type="button" role="tab" data-tab="response" aria-selected="true">Response</button>
                  <button type="button" role="tab" data-tab="request" aria-selected="false">Request</button>
                </div>
                <pre class="code" id="sample-code" aria-live="polite">{
  "id": "usr_123",
  "plan": "pro",
  "quota": {
    "remaining": 966
  },
  "accessToken": "[redacted]"
}</pre>
              </div>
            </div>
          </div>
        </section>

        <section id="demo" class="section demo-section">
          <div class="section-header">
            <div>
              <p class="eyebrow">Video demo</p>
              <h2>See Payload Lens in action.</h2>
            </div>
            <a class="text-link" href="https://youtu.be/GEgpAAUaZUQ">Watch on YouTube</a>
          </div>
          <div class="video-frame" id="video-facade">
            <button class="video-facade-btn" type="button" aria-label="Play Payload Lens demo video" data-video-id="GEgpAAUaZUQ">
              <img src="screenshots/video-thumbnail.png" alt="Payload Lens demo video thumbnail" width="1280" height="720">
              <span class="play-icon" aria-hidden="true">
                <svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="36" cy="36" r="36" fill="rgba(0,0,0,0.62)"/>
                  <polygon points="28,22 28,50 54,36" fill="white"/>
                </svg>
              </span>
            </button>
          </div>
        </section>

        <section id="features" class="section">
          <h2>A focused API layer on top of Network.</h2>
          <p class="section-intro">
            Chrome Network shows every request as a timeline. Payload Lens groups API calls by endpoint and GraphQL operation, so repeated calls, payload changes, replay attempts, and noisy endpoints are easier to reason about.
          </p>

          <div class="grid">
            <article class="feature">
              <h3>Group REST and GraphQL</h3>
              <p>See normalized REST endpoints and GraphQL operations instead of a long list of repeated raw URLs.</p>
            </article>
            <article class="feature">
              <h3>Replay real requests</h3>
              <p>Retry captured requests from the inspected page context and diagnose browser replay issues.</p>
            </article>
            <article class="feature">
              <h3>Diff payload changes</h3>
              <p>Compare repeated JSON responses to spot changed, added, and removed fields quickly.</p>
            </article>
            <article class="feature">
              <h3>Copy safely</h3>
              <p>Copy redacted fetch snippets, cURL commands, headers, payloads, and diff values.</p>
            </article>
            <article class="feature">
              <h3>Ignore noisy endpoints</h3>
              <p>Hide chatty endpoints from your workspace and restore them when you need them again.</p>
            </article>
            <article class="feature">
              <h3>Preserve your log</h3>
              <p>Keep redacted API logs across reloads while staying local to your browser.</p>
            </article>
          </div>
        </section>
      </main>

      <footer class="footer">
        <nav class="footer-links" aria-label="Footer navigation">
          <a href="privacy-policy.html">Privacy Policy</a>
          <a href="https://github.com/payload-lens/web">GitHub</a>
          <a href="https://tally.so/r/9qoOoG">Feedback</a>
        </nav>
        <span>&copy; 2026 Payload Lens. All rights reserved.</span>
      </footer>
    </div>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "SoftwareApplication",
      "name": "Payload Lens",
      "description": "A REST and GraphQL inspector for Chrome DevTools. Group endpoints, inspect payloads, replay calls, diff responses, and copy redacted fetch/cURL.",
      "applicationCategory": "DeveloperApplication",
      "operatingSystem": "Chrome",
      "url": "https://payload-lens.github.io/web/",
      "downloadUrl": "https://chromewebstore.google.com/detail/knkidgfhigdmbppemldoeigcefdfmbhf",
      "screenshot": "https://payload-lens.github.io/web/screenshots/screenshot-0.png",
      "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "USD"
      }
    }
    </script>
    <script>
      const samples = {
        profile: {
          response: {
            id: "usr_123",
            plan: "pro",
            quota: {
              remaining: 966
            },
            accessToken: "[redacted]"
          },
          request: {
            method: "GET",
            url: "/api/users/usr_123/profile",
            query: {
              include: "quota"
            }
          }
        },
        redaction: {
          response: {
            status: "ok",
            redactedFields: ["authorization", "cookie", "accessToken"]
          },
          request: {
            method: "POST",
            url: "/api/redaction",
            body: {
              accessToken: "[redacted]",
              email: "dev@example.com"
            }
          }
        },
        dashboard: {
          response: {
            data: {
              dashboard: {
                activeUsers: 1284,
                conversionRate: 0.143
              }
            }
          },
          request: {
            method: "POST",
            url: "/graphql",
            operationName: "GetDashboard",
            query: "query GetDashboard { dashboard { activeUsers conversionRate } }"
          }
        },
        updateProfile: {
          response: {
            data: {
              updateProfile: {
                id: "usr_123",
                displayName: "Ada Lovelace"
              }
            }
          },
          request: {
            method: "POST",
            url: "/graphql",
            operationName: "UpdateProfile",
            query: "mutation UpdateProfile($name: String!) { updateProfile(name: $name) { id displayName } }",
            variables: {
              name: "Ada Lovelace"
            }
          }
        }
      };

      const sampleButtons = document.querySelectorAll("[data-sample]");
      const tabButtons = document.querySelectorAll("[data-tab]");
      const sampleCode = document.querySelector("#sample-code");
      let activeSample = "profile";
      let activeTab = "response";

      const renderSample = () => {
        sampleCode.textContent = JSON.stringify(samples[activeSample][activeTab], null, 2);
      };

      sampleButtons.forEach((button) => {
        button.addEventListener("click", () => {
          activeSample = button.dataset.sample;
          sampleButtons.forEach((row) => {
            const isActive = row === button;
            row.classList.toggle("active", isActive);
            row.setAttribute("aria-pressed", String(isActive));
          });
          renderSample();
        });
      });

      tabButtons.forEach((button) => {
        button.addEventListener("click", () => {
          activeTab = button.dataset.tab;
          tabButtons.forEach((tab) => {
            const isActive = tab === button;
            tab.classList.toggle("active", isActive);
            tab.setAttribute("aria-selected", String(isActive));
          });
          renderSample();
        });
      });

      const facadeBtn = document.querySelector(".video-facade-btn");
      if (facadeBtn) {
        facadeBtn.addEventListener("click", () => {
          const videoId = facadeBtn.dataset.videoId;
          const iframe = document.createElement("iframe");
          iframe.src = `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1`;
          iframe.title = "Payload Lens video demo";
          iframe.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share";
          iframe.allowFullscreen = true;
          iframe.style.cssText = "position:absolute;inset:0;width:100%;height:100%;border:0";
          facadeBtn.closest("#video-facade").replaceChildren(iframe);
        });
      }
    </script>
  </body>
</html>