Skip to content

Commit 957ced6

Browse files
acrazingacrazing
committed
Add RawLens promotion pages and review prompt
1 parent 6377f17 commit 957ced6

16 files changed

Lines changed: 824 additions & 25 deletions

‎README.md‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@
22

33
# RawLens
44

5-
Inspect raw JSON, ANSI logs, YAML, HTML, JavaScript, CSS, and other source-like text directly in Chrome.
5+
Advanced formatting for messy JSON from anywhere in Chrome.
66

77
RawLens is a privacy-friendly Chrome extension for developers who often open unreadable raw content in the browser:
8-
API responses, CI output, copied production logs, config files, DOM text, page source, and page HTML. It turns those
9-
sources into highlighted, readable views and keeps a local history so you can reopen recent inspections without sending
10-
content anywhere.
8+
API responses, copied production logs, selected DOM text, clipboard snippets, page source, page HTML, and raw pages. It
9+
pretty-prints nested JSON string fields like `{"foo":"{\"bar\":1}"}`, turns raw sources into highlighted readable views,
10+
and keeps a local history so you can reopen recent inspections without sending content anywhere.
1111

1212
## Why Use It
1313

1414
- Read raw JSON error logs with stack traces, nested JSON strings, and escaped newlines.
15+
- Pretty-print JSON from selected text, hovered page elements, clipboard content, raw pages, page source, or page HTML.
1516
- Render ANSI terminal colors from CI logs, build logs, and copied command output.
1617
- Auto-format source-like pages such as YAML, JSON, JavaScript, CSS, Markdown, SQL, diffs, and XML.
17-
- Inspect selected text, hovered DOM nodes, clipboard content, the current page source, or the current page HTML.
1818
- Reopen recent views from the local History panel without uploading logs.
1919
- Use quick shortcuts instead of copying raw content into a separate online formatter.
2020

@@ -24,6 +24,12 @@ content anywhere.
2424

2525
Website: <https://rawlens.github.io/rawlens/>
2626

27+
Focused guides:
28+
29+
- <https://rawlens.github.io/rawlens/nested-json-string-formatter.html>
30+
- <https://rawlens.github.io/rawlens/pretty-print-json-from-clipboard-chrome.html>
31+
- <https://rawlens.github.io/rawlens/format-selected-json-on-page.html>
32+
2733
## Showcase
2834

2935
<details open>

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"name": "rawlens",
3-
"version": "1.4.1",
3+
"version": "1.4.2",
44
"product": "RawLens",
5-
"description": "Inspect raw JSON, ANSI logs, YAML, HTML, JS, CSS, and source-like text directly in Chrome.",
5+
"description": "Pretty-print messy JSON from selections, page elements, clipboard content, and raw pages in Chrome.",
66
"private": true,
77
"license": "MIT",
88
"homepage": "https://rawlens.github.io/rawlens/",

‎site/format-selected-json-on-page.html‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Format Selected JSON on Any Page in Chrome | RawLens</title>
7+
<meta
8+
name="description"
9+
content="Select messy JSON on any web page, or hover an element, and pretty-print it locally in Chrome with RawLens."
10+
/>
11+
<link
12+
rel="canonical"
13+
href="https://rawlens.github.io/rawlens/format-selected-json-on-page.html"
14+
/>
15+
<meta property="og:title" content="Format Selected JSON on Any Page in Chrome" />
16+
<meta
17+
property="og:description"
18+
content="RawLens pretty-prints selected text, hovered DOM elements, clipboard content, and raw pages."
19+
/>
20+
<meta property="og:type" content="website" />
21+
<meta property="og:image" content="assets/img/screen-json-1280.png" />
22+
<link rel="icon" href="assets/img/icon.svg" type="image/svg+xml" />
23+
<link rel="stylesheet" href="styles.css" />
24+
</head>
25+
<body>
26+
<header class="site-header">
27+
<a class="brand" href="index.html" aria-label="RawLens home">
28+
<img src="assets/img/icon.svg" alt="" />
29+
<span>RawLens</span>
30+
</a>
31+
<nav aria-label="Primary navigation">
32+
<a href="index.html#formats">Formats</a>
33+
<a href="index.html#workflow">Workflow</a>
34+
<a href="index.html#use-cases">Use cases</a>
35+
<a
36+
class="nav-action"
37+
href="https://chromewebstore.google.com/detail/rawlens/lbnkfmnolbefifdccejjijdgdipnfaib"
38+
>Install</a
39+
>
40+
</nav>
41+
</header>
42+
43+
<main>
44+
<section class="page-hero">
45+
<div class="section-inner page-hero-layout">
46+
<div>
47+
<p class="section-kicker">Selection and element JSON formatter</p>
48+
<h1>Format the JSON fragment you found on the page.</h1>
49+
<p class="hero-lede">
50+
Select a messy payload, or hover the DOM element that contains it, then press
51+
<kbd>vv</kbd>. RawLens opens a readable local view without changing page order or
52+
uploading content.
53+
</p>
54+
<div class="hero-actions">
55+
<a
56+
class="button primary"
57+
href="https://chromewebstore.google.com/detail/rawlens/lbnkfmnolbefifdccejjijdgdipnfaib"
58+
>Add to Chrome</a
59+
>
60+
<a class="button secondary" href="pretty-print-json-from-clipboard-chrome.html"
61+
>Clipboard workflow</a
62+
>
63+
</div>
64+
</div>
65+
<figure class="page-media">
66+
<img src="assets/img/screen-json-1280.png" alt="RawLens selection formatting result" />
67+
<figcaption>
68+
Selection and hovered-element formatting are one shortcut away.
69+
</figcaption>
70+
</figure>
71+
</div>
72+
</section>
73+
74+
<section class="band">
75+
<div class="section-inner page-copy">
76+
<h2>Useful when only one blob matters.</h2>
77+
<p>
78+
Debug payloads often sit inside docs, admin pages, dashboards, incident notes, or copied
79+
issue comments. RawLens reads the selected text first; if there is no selection, it uses
80+
the hovered page element. That keeps the formatting target precise.
81+
</p>
82+
<div class="use-case-grid">
83+
<article>
84+
<h3>Selected text</h3>
85+
<p>Highlight the exact payload and press <kbd>vv</kbd>.</p>
86+
</article>
87+
<article>
88+
<h3>Hovered element</h3>
89+
<p>Move your pointer over the element and press <kbd>vv</kbd>.</p>
90+
</article>
91+
<article>
92+
<h3>Local history</h3>
93+
<p>Recent views stay in the History panel for quick reopening.</p>
94+
</article>
95+
</div>
96+
</div>
97+
</section>
98+
</main>
99+
100+
<footer>
101+
<span>RawLens</span>
102+
<a href="index.html">Home</a>
103+
<a href="https://github.com/RawLens/rawlens">GitHub</a>
104+
<a href="https://chromewebstore.google.com/detail/rawlens/lbnkfmnolbefifdccejjijdgdipnfaib"
105+
>Chrome Web Store</a
106+
>
107+
</footer>
108+
</body>
109+
</html>

‎site/index.html‎

Lines changed: 61 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
6-
<title>RawLens - Inspect raw JSON, ANSI logs, and source text in Chrome</title>
6+
<title>RawLens - Advanced formatting for messy JSON from anywhere in Chrome</title>
77
<meta
88
name="description"
9-
content="RawLens is a Chrome extension for inspecting raw JSON, ANSI logs, YAML, HTML, JavaScript, CSS, SQL, Markdown, diffs, and other source-like text."
9+
content="RawLens pretty-prints messy JSON from selected text, hovered page elements, clipboard content, page source, and raw pages in Chrome."
1010
/>
1111
<meta property="og:title" content="RawLens" />
1212
<meta
1313
property="og:description"
14-
content="Inspect raw JSON, ANSI logs, YAML, HTML, JavaScript, CSS, and other source-like text directly in Chrome."
14+
content="Advanced formatting for messy JSON from selections, page elements, clipboard content, and raw pages in Chrome."
1515
/>
1616
<meta property="og:type" content="website" />
1717
<meta property="og:image" content="assets/img/screen-json-1280.png" />
@@ -27,6 +27,7 @@
2727
<nav aria-label="Primary navigation">
2828
<a href="#formats">Formats</a>
2929
<a href="#workflow">Workflow</a>
30+
<a href="#use-cases">Use cases</a>
3031
<a href="#privacy">Privacy</a>
3132
<a
3233
class="nav-action"
@@ -39,11 +40,11 @@
3940
<main id="top">
4041
<section class="hero" aria-labelledby="hero-title">
4142
<div class="hero-copy">
42-
<p class="eyebrow">Chrome extension for raw developer data</p>
43+
<p class="eyebrow">Chrome extension for messy JSON and raw developer data</p>
4344
<h1 id="hero-title">RawLens</h1>
4445
<p class="hero-lede">
45-
Inspect raw JSON, ANSI logs, YAML, HTML, JavaScript, CSS, and other source-like text
46-
directly in Chrome.
46+
Pretty-print messy JSON from selected text, hovered page elements, clipboard content,
47+
page source, and raw pages without leaving Chrome.
4748
</p>
4849
<div class="hero-actions" aria-label="Primary actions">
4950
<a
@@ -64,17 +65,17 @@ <h1 id="hero-title">RawLens</h1>
6465
<h2 id="problem-title">Stop pasting sensitive output into random online formatters.</h2>
6566
<div class="problem-grid">
6667
<article>
67-
<h3>API responses</h3>
68+
<h3>Nested JSON strings</h3>
6869
<p>
69-
Turn raw JSON and nested error payloads into highlighted, foldable output without
70-
leaving the page.
70+
Expand JSON-looking string fields such as <code>{"foo":"{\"bar\":1}"}</code> into
71+
readable structured data.
7172
</p>
7273
</article>
7374
<article>
74-
<h3>CI output</h3>
75+
<h3>JSON from anywhere</h3>
7576
<p>
76-
Render ANSI terminal colors from build logs, test output, and copied command-line
77-
traces.
77+
Inspect selected text, hovered DOM nodes, clipboard content, raw pages, page source,
78+
or page HTML.
7879
</p>
7980
</article>
8081
<article>
@@ -88,6 +89,31 @@ <h3>Source files</h3>
8889
</div>
8990
</section>
9091

92+
<section class="demo" aria-labelledby="demo-title">
93+
<div class="section-inner demo-layout">
94+
<div>
95+
<p class="section-kicker">Short demo</p>
96+
<h2 id="demo-title">A fast path from messy payload to readable output.</h2>
97+
<p>
98+
Use the demo clip on launch posts, README, Product Hunt, and the Chrome Web Store
99+
gallery. It keeps the story focused on the main workflow: JSON from anywhere, nested
100+
string fields expanded locally.
101+
</p>
102+
</div>
103+
<video
104+
class="demo-video"
105+
autoplay
106+
loop
107+
muted
108+
playsinline
109+
poster="assets/img/screen-json-1280.png"
110+
aria-label="RawLens demo video"
111+
>
112+
<source src="assets/img/rawlens-demo.mp4" type="video/mp4" />
113+
</video>
114+
</div>
115+
</section>
116+
91117
<section id="formats" class="showcase" aria-labelledby="formats-title">
92118
<div class="section-inner">
93119
<div class="section-heading">
@@ -131,6 +157,29 @@ <h2 id="workflow-title">Inspect the source you already have.</h2>
131157
</div>
132158
</section>
133159

160+
<section id="use-cases" class="use-cases" aria-labelledby="use-cases-title">
161+
<div class="section-inner">
162+
<div class="section-heading">
163+
<p class="section-kicker">Searchable use cases</p>
164+
<h2 id="use-cases-title">Focused guides for the workflows people search for.</h2>
165+
</div>
166+
<div class="use-case-grid">
167+
<a href="nested-json-string-formatter.html">
168+
<h3>Nested JSON string formatter</h3>
169+
<p>Pretty-print JSON fields that contain escaped JSON payloads.</p>
170+
</a>
171+
<a href="pretty-print-json-from-clipboard-chrome.html">
172+
<h3>Pretty print JSON from clipboard</h3>
173+
<p>Use <kbd>pp</kbd> to inspect copied debug output locally in Chrome.</p>
174+
</a>
175+
<a href="format-selected-json-on-page.html">
176+
<h3>Format selected JSON on a page</h3>
177+
<p>Use <kbd>vv</kbd> for selected text or the hovered DOM element.</p>
178+
</a>
179+
</div>
180+
</div>
181+
</section>
182+
134183
<section id="privacy" class="privacy" aria-labelledby="privacy-title">
135184
<div class="section-inner privacy-layout">
136185
<div>

0 commit comments

Comments
 (0)