Skip to content

Commit 624a621

Browse files
coderavivermacoderaviverma
authored
Add files via upload
1 parent f9a3682 commit 624a621

3 files changed

Lines changed: 457 additions & 0 deletions

File tree

‎docker/index.html‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>JSON Viewer & Formatter (Client-Side Demo) | JSONViewerTool</title>
6+
7+
<meta name="description"
8+
content="Free JSON Viewer demo: format, prettify, validate and view JSON in a clean tree-style preview. Runs 100% client-side (no upload). Try the full tool on JSONViewerTool." />
9+
10+
<meta name="keywords"
11+
content="json viewer, json formatter, prettify json, json validator, json tree view, client side json tool, no upload json" />
12+
13+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
14+
15+
<!-- Open Graph (nice previews when shared) -->
16+
<meta property="og:title" content="JSON Viewer & Formatter (Client-Side Demo) | JSONViewerTool" />
17+
<meta property="og:description" content="Format + validate JSON instantly in your browser (no upload). Open the full JSON Viewer tool on JSONViewerTool." />
18+
<meta property="og:type" content="website" />
19+
20+
<link rel="stylesheet" href="style.css" />
21+
</head>
22+
<body>
23+
<header class="hero">
24+
<div class="hero-inner">
25+
<div class="badge">100% client-side • No upload • Privacy-safe</div>
26+
27+
<h1>JSON Viewer & Formatter</h1>
28+
<p class="sub">
29+
Paste JSON → prettify + validate → copy formatted output.
30+
This is a lightweight demo built to funnel you to the full tool.
31+
</p>
32+
33+
<div class="cta-row">
34+
<a class="btn primary" href="https://jsonviewertool.com/json-viewer" target="_blank" rel="noopener">
35+
Open Full JSON Viewer Tool →
36+
</a>
37+
<a class="btn ghost" href="https://jsonviewertool.com" target="_blank" rel="noopener">
38+
Explore All Tools
39+
</a>
40+
</div>
41+
42+
<p class="meta">
43+
Tip: Try invalid JSON to see error highlighting.
44+
</p>
45+
</div>
46+
</header>
47+
48+
<main class="container">
49+
<section class="panel">
50+
<div class="panel-head">
51+
<h2>Input JSON</h2>
52+
<div class="actions">
53+
<button class="btn small" id="btnSample">Load Sample</button>
54+
<button class="btn small" id="btnMinify">Minify</button>
55+
<button class="btn small" id="btnFormat">Format</button>
56+
<button class="btn small" id="btnCopy">Copy Output</button>
57+
<button class="btn small danger" id="btnClear">Clear</button>
58+
</div>
59+
</div>
60+
61+
<textarea id="input" spellcheck="false" placeholder='Paste JSON here...'></textarea>
62+
63+
<div class="status-row">
64+
<div id="status" class="status">Ready.</div>
65+
<div class="hint">
66+
Full tool: <a href="https://jsonviewertool.com/json-viewer" target="_blank" rel="noopener">jsonviewertool.com/json-viewer</a>
67+
</div>
68+
</div>
69+
</section>
70+
71+
<section class="panel">
72+
<div class="panel-head">
73+
<h2>Output (Formatted JSON)</h2>
74+
</div>
75+
76+
<pre id="output" class="output" aria-live="polite"></pre>
77+
</section>
78+
79+
<!-- SEO content -->
80+
<section class="seo">
81+
<h2>About this JSON Viewer Demo</h2>
82+
<p>
83+
This page is a small <strong>JSON Viewer + Formatter</strong> demo that runs entirely in your browser.
84+
Your JSON data never leaves your device. Use it to quickly prettify JSON,
85+
validate syntax, and copy clean formatted output.
86+
</p>
87+
88+
<h3>What you can do here</h3>
89+
<ul>
90+
<li>Format (prettify) JSON with indentation</li>
91+
<li>Minify JSON for compact output</li>
92+
<li>Validate JSON and show clear error messages</li>
93+
<li>Copy formatted JSON in one click</li>
94+
</ul>
95+
96+
<h3>Try the full version</h3>
97+
<p>
98+
For a richer experience (tree view, conversions, bigger input, and more utilities),
99+
use the full JSON Viewer tool:
100+
<a href="https://jsonviewertool.com/json-viewer" target="_blank" rel="noopener">
101+
JSONViewerTool – JSON Viewer
102+
</a>.
103+
</p>
104+
105+
<p class="seo-keywords">
106+
Keywords: JSON Viewer, JSON Formatter, JSON Prettifier, JSON Validator, tree view JSON, client-side JSON tool, no upload JSON.
107+
</p>
108+
</section>
109+
</main>
110+
111+
<footer class="footer">
112+
<div class="footer-inner">
113+
<div class="foot-left">
114+
Built by <a href="https://jsonviewertool.com" target="_blank" rel="noopener">JSONViewerTool</a> • 100% client-side
115+
</div>
116+
<div class="foot-right">
117+
<a href="https://jsonviewertool.com/json-to-csv" target="_blank" rel="noopener">JSON → CSV</a>
118+
<span class="sep">•</span>
119+
<a href="https://jsonviewertool.com/yaml-to-json" target="_blank" rel="noopener">YAML → JSON</a>
120+
<span class="sep">•</span>
121+
<a href="https://jsonviewertool.com/json-to-xml" target="_blank" rel="noopener">JSON → XML</a>
122+
</div>
123+
</div>
124+
</footer>
125+
126+
<script src="script.js"></script>
127+
</body>
128+
</html>

‎docker/script.js‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
const input = document.getElementById("input");
2+
const output = document.getElementById("output");
3+
const statusEl = document.getElementById("status");
4+
5+
const btnSample = document.getElementById("btnSample");
6+
const btnMinify = document.getElementById("btnMinify");
7+
const btnFormat = document.getElementById("btnFormat");
8+
const btnCopy = document.getElementById("btnCopy");
9+
const btnClear = document.getElementById("btnClear");
10+
11+
const sampleJson = {
12+
tool: "JSON Viewer Tool",
13+
features: ["Viewer", "Formatter", "Validator", "Client-side"],
14+
privacy: "No upload • No tracking",
15+
user: { name: "Avinash", city: "Bengaluru" },
16+
nested: { a: { b: { c: [1, 2, 3] } } }
17+
};
18+
19+
function setStatus(msg, ok = true) {
20+
statusEl.textContent = msg;
21+
statusEl.style.borderColor = ok ? "rgba(34,197,94,.35)" : "rgba(239,68,68,.35)";
22+
statusEl.style.background = ok ? "rgba(34,197,94,.08)" : "rgba(239,68,68,.08)";
23+
}
24+
25+
function tryParse(text) {
26+
return JSON.parse(text);
27+
}
28+
29+
function formatJson() {
30+
const text = input.value.trim();
31+
if (!text) {
32+
output.textContent = "";
33+
setStatus("Paste JSON to format.", true);
34+
return;
35+
}
36+
37+
try {
38+
const obj = tryParse(text);
39+
output.textContent = JSON.stringify(obj, null, 2);
40+
setStatus("Valid JSON ✅ Formatted output ready.", true);
41+
} catch (e) {
42+
output.textContent = "";
43+
setStatus(`Invalid JSON ❌ ${e.message}`, false);
44+
}
45+
}
46+
47+
function minifyJson() {
48+
const text = input.value.trim();
49+
if (!text) {
50+
setStatus("Paste JSON to minify.", true);
51+
return;
52+
}
53+
54+
try {
55+
const obj = tryParse(text);
56+
const min = JSON.stringify(obj);
57+
input.value = min;
58+
output.textContent = min;
59+
setStatus("Valid JSON ✅ Minified.", true);
60+
} catch (e) {
61+
output.textContent = "";
62+
setStatus(`Invalid JSON ❌ ${e.message}`, false);
63+
}
64+
}
65+
66+
async function copyOutput() {
67+
const text = output.textContent.trim();
68+
if (!text) {
69+
setStatus("Nothing to copy yet. Format JSON first.", false);
70+
return;
71+
}
72+
73+
try {
74+
await navigator.clipboard.writeText(text);
75+
setStatus("Copied formatted JSON ✅", true);
76+
} catch {
77+
setStatus("Copy failed. Your browser blocked clipboard access.", false);
78+
}
79+
}
80+
81+
function clearAll() {
82+
input.value = "";
83+
output.textContent = "";
84+
setStatus("Cleared.", true);
85+
}
86+
87+
btnSample.addEventListener("click", () => {
88+
input.value = JSON.stringify(sampleJson, null, 2);
89+
formatJson();
90+
});
91+
92+
btnMinify.addEventListener("click", minifyJson);
93+
btnFormat.addEventListener("click", formatJson);
94+
btnCopy.addEventListener("click", copyOutput);
95+
btnClear.addEventListener("click", clearAll);
96+
97+
// Auto-format on paste pause (small UX boost)
98+
let t = null;
99+
input.addEventListener("input", () => {
100+
clearTimeout(t);
101+
t = setTimeout(() => formatJson(), 350);
102+
});
103+
104+
// initial
105+
input.value = JSON.stringify(sampleJson, null, 2);
106+
formatJson();

0 commit comments

Comments
 (0)