/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { Light as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter"; import json from "https://esm.sh/react-syntax-highlighter/dist/esm/languages/hljs/json"; import { docco } from "https://esm.sh/react-syntax-highlighter/dist/esm/styles/hljs"; SyntaxHighlighter.registerLanguage('json', json); function App() { const [jsonInput, setJsonInput] = useState(''); const [parsedJson, setParsedJson] = useState(''); const [error, setError] = useState(''); const handleInputChange = (e) => { setJsonInput(e.target.value); }; const handleSubmit = () => { try { const parsed = JSON.parse(jsonInput); setParsedJson(JSON.stringify(parsed, null, 2)); setError(''); } catch (err) { setParsedJson(''); setError('Invalid JSON: ' + err.message); } }; return (

JSON Visualizer

<button onClick={handleSubmit} className="submit-button">Visualize JSON</button>
      </div>
      {error && <div className="error">{error}</div>}
      {parsedJson && (
        <div className="json-output">
          <h2>Prettified JSON:</h2>
          <SyntaxHighlighter language="json" style={docco}>
            {parsedJson}
          </SyntaxHighlighter>
        </div>
      )}
      <div className="footer">
        <a href={import.meta.url.replace("esm.town", "val.town")} target="_blank" rel="noopener noreferrer">View Source</a>
      </div>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {
  return new Response(`
    <html>
      <head>
        <title>JSON Visualizer</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `,
  {
    headers: {
      "content-type": "text/html",
    },
  });
}

const css = `:root {
  --primary-color: #3498db;
  --secondary-color: #2c3e50;
  --light-color: #f4f4f4;
  --dark-color: #333;
  --danger-color: #e74c3c;
  --border-radius: 4px;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: var(--dark-color);
  margin: 0;
  padding: 0;
  background-color: var(--light-color);
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  color: var(--secondary-color);
}

.input-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.json-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: var(--border-radius);
  font-family: monospace;
}

.submit-button {
  padding: 10px 20px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.submit-button:hover {
  background-color: #2980b9;
}

.json-output {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: var(--border-radius);
  padding: 20px;
  overflow-x: auto;
}

.error {
  color: var(--danger-color);
  margin-bottom: 20px;
}

pre {
  margin: 0;
}

.footer {
  margin-top: 20px;
  text-align: center;
}

.footer a {
  color: var(--primary-color);
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}
`;</article></body></html>

jsonVisualizerApp