JSON Viewer

\n \n \n

Input

View

\n \n \n

\n \n

Input JSON

\n \n

\n \n \n

Sample Data:

\n \n \n \n \n

\n \n \n

Preview

\n \n

Paste your JSON to visualize and explore its structure with syntax highlighting and collapsible nodes.

\n \n \n

JSON Viewer

\n \n \n \n

\n \n

\n\n \n\n`;\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n}","label",[64],"b62dc812-3682-11f0-bf10-9e149126039e",["D",1747859547849],"# JSON Viewer with Tabbed Interface\n\nA clean, interactive JSON viewer with syntax highlighting, collapsible tree view, and a tabbed interface for focused viewing.\n\n## Features\n\n- **Tabbed Interface**: Separate tabs for input and viewing for a distraction-free experience\n- **Interactive JSON Tree View**: Collapsible nodes for easy navigation of complex JSON structures\n- **Syntax Highlighting**: Color-coded JSON elements for better readability\n- **Multiple View Modes**: Tree, code, text, and form views\n- **JSON Validation**: Automatic validation and error reporting for invalid JSON\n- **Sample Data**: Pre-loaded examples to demonstrate functionality\n- **Copy to Clipboard**: One-click copying of formatted JSON\n- **Responsive Design**: Works well on both desktop and mobile devices\n- **Expand/Collapse Controls**: Quickly expand or collapse all nodes in the viewer\n- **Fullscreen Viewing**: Dedicated view mode for focused JSON exploration\n\n## How to Use\n\n### Input Tab\n1. Enter or paste your JSON in the input textarea\n2. Click \"Format & Validate\" to process and display the JSON\n3. Preview the JSON structure in the preview panel\n4. Click \"Full View Mode\" to switch to the dedicated viewing tab\n\n### View Tab\n1. Explore the JSON structure in the fullscreen viewer\n2. Use the mode selector to switch between different view types (tree, code, text, form)\n3. Use \"Expand All\" or \"Collapse All\" buttons to control the tree view\n4. Click the \"Copy JSON\" button to copy the formatted JSON to clipboard\n5. Click \"Back to Input\" to return to the input tab for editing\n\n## Sample Data\n\nThe application includes several sample JSON structures to demonstrate different complexity levels:\n\n- Simple Object: Basic key-value pairs\n- Nested Object: Multi-level nested objects\n- Array Example: JSON with arrays of objects\n- Complex Example: A comprehensive example with various data types and structures\n\n## Technologies Used\n\n- JSONEditor library for the interactive viewer\n- Tailwind CSS for styling\n- Vanilla JavaScript for interactivity",[87],"pulls","branches","forks","envVars",{"_206":20,"_208":20},"connections",{"_206":20,"_207":20},"count","unfilledCount","emptyCount",{"_33":195,"_13":87,"_62":86,"_43":-5,"_35":36,"_188":97,"_189":127,"_37":215,"_39":40,"_65":53,"_191":197,"_67":24,"_193":-5,"_212":216,"_163":217},{"_33":187,"_13":64,"_62":63,"_43":-5,"_35":36,"_188":111,"_189":127,"_37":211,"_39":90,"_65":78,"_191":192,"_67":24,"_193":-5,"_212":213,"_163":214},["D",1748995753065],"children",[],[64],["D",1747859547849],[],[87],["D",1747859362248],{"_11":12,"_162":70},{"_11":12,"_158":-5,"_69":70,"_25":68,"_159":160,"_161":24},{"_39":111,"_13":16,"_33":36,"_150":116,"_151":-5,"_152":-5,"_153":-5,"_154":-5,"_155":-5,"_156":14,"_157":12},"ctx",{"_51":-5,"_182":255,"_256":257,"_258":259,"_260":24,"_261":24,"_262":24,"_263":127,"_264":-5,"_265":-7,"_266":-7,"_267":20,"_268":24,"_269":24,"_270":-5,"_271":24,"_272":24,"_273":24,"_274":-5},"ENV",{"_226":227,"_228":229,"_230":16,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History