Ojoo - Developer Tools

Input Payload Configuration

Paste Raw Payload or Full HTTP Response:

Ctrl + Enter to analyze

Click any preset sample to load and analyze instantly:

JSON Formatting Indent

Automatic Format Detection

Auto-detects JSON, XML, HTML, CSV, and Plain text responses automatically.

Response Workspace

Status200 OK

Payload Size0 B

ValidationValid Syntax

Type SummaryJSON Object

Hover over node to see JSON Path

Output CodeFormatted (2 spaces)

Security Isolation: Sandboxed HTML preview without JavaScript execution privileges.

0 Rows x 0 Columns

Header Name	Header Value
No HTTP headers detected in payload.

Structural Payload Statistics

Root Type

-

Object Count

0

Array Count

0

Total Keys

0

Strings

0

Numbers

0

Booleans

0

Max Depth

1

Multi-Format Beautifier

Formats dense minified API responses into clean indented structures across JSON, XML, HTML, and CSV.

Interactive JSON Tree

Collapsible node navigation, search filtering, 1-click JSONPath ($.user.id) and JSON Pointer copying.

Sandboxed & Loss-Free

Preserves 64-bit BigInt values without truncation and isolates HTML previews in sandboxed execution environments.

', csv: 'id,first_name,last_name,email,role,status\n101,John,Doe,john.doe@example.com,Administrator,Active\n102,Jane,Smith,"smith, jane@example.com",Editor,Pending\n103,Bob,Johnson,bob.j@example.com,Viewer,Inactive' }; // Attach Preset Handlers presetJsonMin.addEventListener('click', () => { rawResponseInput.value = PRESETS.minJson; formatResponse(); }); presetJsonNested.addEventListener('click', () => { rawResponseInput.value = PRESETS.nestedJson; formatResponse(); }); presetRawHttp.addEventListener('click', () => { rawResponseInput.value = PRESETS.rawHttp; formatResponse(); }); presetHttpError.addEventListener('click', () => { rawResponseInput.value = PRESETS.httpError; formatResponse(); }); presetXml.addEventListener('click', () => { rawResponseInput.value = PRESETS.xml; formatResponse(); }); presetHtml.addEventListener('click', () => { rawResponseInput.value = PRESETS.html; formatResponse(); }); presetCsv.addEventListener('click', () => { rawResponseInput.value = PRESETS.csv; formatResponse(); }); btnSampleResponse.addEventListener('click', function () { rawResponseInput.value = PRESETS.minJson; formatResponse(); }); btnClearInput.addEventListener('click', function () { rawResponseInput.value = ''; responseResult.classList.add('d-none'); showToast('Input cleared.', 'info'); }); // Minify JSON Click btnMinifyResponse.addEventListener('click', function () { const raw = rawResponseInput.value.trim(); if (!raw) { showToast('Please enter response payload first.', 'warning'); return; } try { const parsed = JSON.parse(raw); rawResponseInput.value = JSON.stringify(parsed); showToast('JSON Payload minified successfully!', 'success'); } catch (e) { showToast('Cannot minify: Input is not valid JSON.', 'warning'); } }); // Keyboard Shortcut: Ctrl + Enter to format document.addEventListener('keydown', function(e) { if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); formatResponse(); } else if (e.key === 'Escape' && document.getElementById('viewerCardContainer').classList.contains('fullscreen-mode')) { toggleFullscreen(); } }); btnFormatResponse.addEventListener('click', formatResponse); function formatResponse() { const raw = rawResponseInput.value.trim(); if (!raw) { showToast('Please enter JSON/XML response content.', 'warning'); return; } const formData = new FormData(); formData.append('raw', raw); fetch('https://ojoo.xyz/api/view-response', { method: 'POST', body: formData }) .then(r => r.json()) .then(data => { if (!data.success) { showToast(data.message || 'Error processing response.', 'danger'); return; } responseResult.classList.remove('d-none'); currentRawData = raw; currentFormattedData = data.formatted; currentDetectedType = data.detected_type || 'json'; // Populate Formatted Code View formattedRespOutput.value = data.formatted; // Render Badges & Metadata updateMetadataBadges(data); // Render Specific Viewer Tabs renderViewerTabs(data); }) .catch(err => { showToast('Network error while processing response.', 'danger'); }); } // Render Metadata Header Bar Badges function updateMetadataBadges(data) { // Status Code const code = data.status_code || 200; const text = data.status_text || 'OK'; let bgClass = 'text-success'; if (code >= 300 && code < 400) bgClass = 'text-warning'; else if (code >= 400) bgClass = 'text-danger'; statusCodeVal.className = `font13px fw-bold ${bgClass}`; statusCodeVal.innerText = `${code} ${text}`; // Payload Size sizeVal.innerText = formatBytes(data.byte_size || 0); // Validation if (data.is_valid) { validationVal.className = 'font13px text-success'; validationVal.innerText = 'Valid Syntax'; errorAlertBox.classList.add('d-none'); } else { validationVal.className = 'font13px text-danger'; validationVal.innerText = 'Syntax Error'; errorAlertBox.classList.remove('d-none'); const errDet = data.error_details || {}; errorTitle.innerText = `Syntax Error in ${data.detected_type.toUpperCase()} Payload`; errorMessage.innerText = `${errDet.message || 'Invalid syntax structure'} (Line ${errDet.line || 1}, Column ${errDet.column || 1})`; } // Type Summary typeSummaryVal.innerText = `${data.detected_type.toUpperCase()} Payload`; } // Render Tabs Based on Detected Content Type function renderViewerTabs(data) { const type = data.detected_type; // Reset Tab Visibility tabHtmlItem.classList.add('d-none'); tabCsvItem.classList.add('d-none'); // Render JSON Tree if JSON if (type === 'json') { try { currentParsedJson = JSON.parse(data.formatted); renderJsonTree(currentParsedJson, jsonTreeContainer); renderJsonStats(data.stats || calculateJsonStats(currentParsedJson)); } catch (e) { jsonTreeContainer.innerHTML = `

Unable to parse JSON tree structure due to syntax error.

`; } } else { jsonTreeContainer.innerHTML = `

Tree view is optimized for JSON responses. Active response type: ${type.toUpperCase()}

`; } // Render HTML Preview if HTML if (type === 'html') { tabHtmlItem.classList.remove('d-none'); htmlSandboxFrame.srcdoc = data.formatted; } // Render CSV Table if CSV if (type === 'csv') { tabCsvItem.classList.remove('d-none'); renderCsvTable(data.formatted); } // Render Headers Table renderHeadersTable(data.headers || {}); } // Interactive JSON Tree Builder function renderJsonTree(data, container) { container.innerHTML = ''; const rootEl = createJsonTreeNode(data, '$', true); container.appendChild(rootEl); } function createJsonTreeNode(value, path, isLast = true, keyName = null) { const row = document.createElement('div'); row.className = 'json-tree-node json-node-row'; const type = getDataType(value); if (type === 'object' || type === 'array') { const isArray = type === 'array'; const keys = isArray ? value : Object.keys(value); const count = isArray ? value.length : keys.length; const openBracket = isArray ? '[' : '{'; const closeBracket = isArray ? ']' : '}'; const header = document.createElement('div'); header.className = 'd-inline-flex align-items-center font12px'; const toggler = document.createElement('span'); toggler.className = 'json-toggler me-1'; toggler.innerHTML = ''; const labelSpan = document.createElement('span'); let keyHtml = keyName !== null ? `"${escapeHtml(keyName)}": ` : ''; labelSpan.innerHTML = `${keyHtml}${openBracket} ${count} ${isArray ? 'items' : 'keys'}`; header.appendChild(toggler); header.appendChild(labelSpan); // Copy JSON Path button const copyPathBtn = document.createElement('button'); copyPathBtn.className = 'btn btn-link btn-sm p-0 ms-2 json-path-copy-btn text-muted font10px'; copyPathBtn.innerHTML = ''; copyPathBtn.addEventListener('click', (e) => { e.stopPropagation(); navigator.clipboard.writeText(path); showToast(`Copied Path: ${path}`, 'info'); }); header.appendChild(copyPathBtn); row.appendChild(header); // Children Container const childrenContainer = document.createElement('div'); childrenContainer.className = 'json-tree-children'; if (isArray) { value.forEach((item, idx) => { const itemPath = `${path}[${idx}]`; const childNode = createJsonTreeNode(item, itemPath, idx === value.length - 1); childrenContainer.appendChild(childNode); }); } else { const entries = Object.entries(value); entries.forEach(([k, v], idx) => { const itemPath = `${path}.${k}`; const childNode = createJsonTreeNode(v, itemPath, idx === entries.length - 1, k); childrenContainer.appendChild(childNode); }); } const closingRow = document.createElement('div'); closingRow.className = 'font12px text-dark fw-bold ms-3'; closingRow.innerText = `${closeBracket}${isLast ? '' : ','}`; row.appendChild(childrenContainer); row.appendChild(closingRow); // Toggle Expand / Collapse toggler.addEventListener('click', () => { const isHidden = childrenContainer.style.display === 'none'; childrenContainer.style.display = isHidden ? 'block' : 'none'; closingRow.style.display = isHidden ? 'block' : 'none'; toggler.innerHTML = isHidden ? '' : ''; }); header.addEventListener('mouseenter', () => jsonPathHover.innerText = `Path: ${path}`); } else { // Primitive Value const valSpan = document.createElement('span'); valSpan.className = 'font12px'; let keyHtml = keyName !== null ? `"${escapeHtml(keyName)}": ` : ''; let valHtml = ''; if (type === 'string') valHtml = `"${escapeHtml(value)}"`; else if (type === 'number') valHtml = `${value}`; else if (type === 'boolean') valHtml = `${value}`; else if (type === 'null') valHtml = `null`; valSpan.innerHTML = `${keyHtml}${valHtml}${isLast ? '' : ','}`; const copyPathBtn = document.createElement('button'); copyPathBtn.className = 'btn btn-link btn-sm p-0 ms-2 json-path-copy-btn text-muted font10px'; copyPathBtn.innerHTML = ''; copyPathBtn.addEventListener('click', (e) => { e.stopPropagation(); navigator.clipboard.writeText(`${path} = ${JSON.stringify(value)}`); showToast(`Copied: ${path}`, 'info'); }); row.appendChild(valSpan); row.appendChild(copyPathBtn); row.addEventListener('mouseenter', () => jsonPathHover.innerText = `Path: ${path}`); } return row; } function getDataType(val) { if (val === null) return 'null'; if (Array.isArray(val)) return 'array'; return typeof val; } function escapeHtml(str) { if (typeof str !== 'string') return str; return str.replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"'); } // Expand All / Collapse All Tree Handlers btnTreeExpandAll.addEventListener('click', () => { jsonTreeContainer.querySelectorAll('.json-tree-children').forEach(el => el.style.display = 'block'); jsonTreeContainer.querySelectorAll('.json-toggler').forEach(el => el.innerHTML = ''); }); btnTreeCollapseAll.addEventListener('click', () => { jsonTreeContainer.querySelectorAll('.json-tree-children').forEach(el => el.style.display = 'none'); jsonTreeContainer.querySelectorAll('.json-toggler').forEach(el => el.innerHTML = ''); }); // Render Statistics Tab function renderJsonStats(stats) { if (!stats) return; document.getElementById('statRootType').innerText = (stats.root_type || 'object').toUpperCase(); document.getElementById('statObjectCount').innerText = stats.object_count || 0; document.getElementById('statArrayCount').innerText = stats.array_count || 0; document.getElementById('statKeyCount').innerText = stats.key_count || 0; document.getElementById('statStringCount').innerText = stats.string_count || 0; document.getElementById('statNumberCount').innerText = stats.number_count || 0; document.getElementById('statBooleanCount').innerText = stats.boolean_count || 0; document.getElementById('statMaxDepth').innerText = stats.max_depth || 1; } function calculateJsonStats(obj) { const stats = { root_type: Array.isArray(obj) ? 'array' : typeof obj, object_count: 0, array_count: 0, key_count: 0, string_count: 0, number_count: 0, boolean_count: 0, max_depth: 1 }; function walk(node, depth) { if (depth > stats.max_depth) stats.max_depth = depth; if (node !== null && typeof node === 'object') { if (Array.isArray(node)) { stats.array_count++; node.forEach(i => walk(i, depth + 1)); } else { stats.object_count++; const keys = Object.keys(node); stats.key_count += keys.length; keys.forEach(k => walk(node[k], depth + 1)); } } else if (typeof node === 'string') stats.string_count++; else if (typeof node === 'number') stats.number_count++; else if (typeof node === 'boolean') stats.boolean_count++; } walk(obj, 1); return stats; } // Render CSV Table View function renderCsvTable(csvText) { csvTableHead.innerHTML = ''; csvTableBody.innerHTML = ''; const lines = csvText.split('\n').map(l => l.trim()).filter(l => l.length > 0); if (lines.length === 0) return; const parseCsvLine = (line) => { const res = []; let current = ''; let inQuotes = false; for (let i = 0; i < line.length; i++) { const c = line[i]; if (c === '"') { if (inQuotes && line[i+1] === '"') { current += '"'; i++; } else { inQuotes = !inQuotes; } } else if (c === ',' && !inQuotes) { res.push(current); current = ''; } else { current += c; } } res.push(current); return res; }; const headers = parseCsvLine(lines[0]); csvSummaryText.innerText = `${lines.length - 1} Rows x ${headers.length} Columns`; // Render Head const headTr = document.createElement('tr'); headers.forEach(h => { const th = document.createElement('th'); th.innerText = h; headTr.appendChild(th); }); csvTableHead.appendChild(headTr); // Render Body const rowsToRender = lines.slice(1, 151); rowsToRender.forEach(line => { const rowData = parseCsvLine(line); const tr = document.createElement('tr'); rowData.forEach(val => { const td = document.createElement('td'); td.innerText = val; tr.appendChild(td); }); csvTableBody.appendChild(tr); }); } // Export CSV Handler btnExportCsv.addEventListener('click', () => { if (!currentFormattedData) return; const blob = new Blob([currentFormattedData], { type: 'text/csv;charset=utf-8;' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'api_response.csv'; a.click(); URL.revokeObjectURL(url); showToast('CSV downloaded successfully!', 'success'); }); // Render Headers Table View function renderHeadersTable(headers) { headersTableBody.innerHTML = ''; const entries = Object.entries(headers); headerCountBadge.innerText = entries.length; if (entries.length === 0) { headersTableBody.innerHTML = `No HTTP headers detected in payload.`; return; } entries.forEach(([key, val]) => { const tr = document.createElement('tr'); tr.innerHTML = ` ${escapeHtml(key)} ${escapeHtml(val)} `; headersTableBody.appendChild(tr); }); headersTableBody.querySelectorAll('.btn-copy-header').forEach(btn => { btn.addEventListener('click', function () { navigator.clipboard.writeText(this.getAttribute('data-val')); showToast('Header copied to clipboard!', 'info'); }); }); } // Indent Change Option selectIndentSpaces.addEventListener('change', function () { if (!currentParsedJson) return; const spaces = parseInt(this.value) || 2; formattedRespOutput.value = JSON.stringify(currentParsedJson, null, spaces); document.getElementById('codeFormatModeBadge').innerText = `Formatted (${spaces} spaces)`; }); btnToggleIndent.addEventListener('click', () => { if (!currentParsedJson) { showToast('Indent toggle available for JSON responses.', 'warning'); return; } const currentVal = parseInt(selectIndentSpaces.value) || 2; const newSpaces = currentVal === 2 ? 4 : 2; selectIndentSpaces.value = newSpaces; formattedRespOutput.value = JSON.stringify(currentParsedJson, null, newSpaces); document.getElementById('codeFormatModeBadge').innerText = `Formatted (${newSpaces} spaces)`; showToast(`Indentation switched to ${newSpaces} spaces`, 'info'); }); // Copy Handlers btnCopyFormattedResp.addEventListener('click', function () { navigator.clipboard.writeText(formattedRespOutput.value); showToast('Formatted API response copied to clipboard!', 'success'); }); btnCopyRawResp.addEventListener('click', function () { navigator.clipboard.writeText(currentRawData || rawResponseInput.value); showToast('Raw API response copied to clipboard!', 'success'); }); // Download Handler btnDownloadResponse.addEventListener('click', function () { if (!formattedRespOutput.value) return; const extMap = { json: 'json', xml: 'xml', html: 'html', csv: 'csv', text: 'txt' }; const ext = extMap[currentDetectedType] || 'txt'; const blob = new Blob([formattedRespOutput.value], { type: 'text/plain;charset=utf-8;' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `api_response_${Date.now()}.${ext}`; a.click(); URL.revokeObjectURL(url); showToast(`Downloaded as api_response.${ext}`, 'success'); }); // Fullscreen Mode Toggle btnFullscreenToggle.addEventListener('click', toggleFullscreen); function toggleFullscreen() { const container = document.getElementById('viewerCardContainer'); const isFS = container.classList.toggle('fullscreen-mode'); btnFullscreenToggle.innerHTML = isFS ? ' Exit Fullscreen' : ' Fullscreen'; } });

Ojoo is a low-code/no-code platform to build apps, automate workflows, and manage business operations — all in one place.

Follow Us

Need assistance or custom enterprise solutions?

Contact Support