✏️ Editor

👁️ Preview

📡 API Information

API Title

Description

Base URL

Version

🔗 Endpoints 0

⚡ PRO

Unlock Advanced Features

Import OpenAPI / Swagger specs
Auto-generate docs from cURL commands
Custom themes & branding
Authentication flow documentation
Priority support & early access

☕ Unlock Pro on Ko-fi

☕ Support

\n`; const blob = new Blob([html], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = (title || 'api-docs').replace(/[^a-z0-9]/gi, '-').toLowerCase() + '.html'; a.click(); URL.revokeObjectURL(url); showToast('HTML exported!'); } /* ═══ IMPORT JSON ═══ */ function importJSON() { document.getElementById('importFile').click(); } function handleImport(event) { const file = event.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = function(e) { try { const data = JSON.parse(e.target.result); if (data.title) document.getElementById('apiTitle').value = data.title; if (data.description) document.getElementById('apiDesc').value = data.description; if (data.baseUrl) document.getElementById('apiBase').value = data.baseUrl; if (data.version) document.getElementById('apiVersion').value = data.version; endpoints = []; expandedEndpoints.clear(); nextId = 1; if (data.endpoints && Array.isArray(data.endpoints)) { data.endpoints.forEach(ep => addEndpoint(ep)); } showToast('API imported successfully!'); } catch (err) { showToast('Invalid JSON file', true); } }; reader.readAsText(file); event.target.value = ''; } /* ═══ EXPORT MARKDOWN ═══ */ function exportMarkdown() { const title = document.getElementById('apiTitle').value; const desc = document.getElementById('apiDesc').value; const base = document.getElementById('apiBase').value; const version = document.getElementById('apiVersion').value; let md = `# ${title}\n\n`; if (desc) md += `${desc}\n\n`; if (base) md += `**Base URL:** \`${base}\`\n\n`; if (version) md += `**Version:** ${version}\n\n`; md += `---\n\n`; endpoints.forEach(ep => { md += `## ${ep.method} ${ep.path}\n\n`; if (ep.description) md += `${ep.description}\n\n`; if (ep.statusCode) md += `**Status:** ${ep.statusCode}\n\n`; if (ep.parameters.length > 0) { md += `### Parameters\n\n`; md += `| Name | Type | Required | Description |\n`; md += `|------|------|----------|-------------|\n`; ep.parameters.forEach(p => { md += `| \`${p.name}\` | ${p.type} | ${p.required ? 'Yes' : 'No'} | ${p.description} |\n`; }); md += `\n`; } if (ep.requestBody && ep.requestBody.trim()) { md += `### Request Body\n\n\`\`\`json\n${ep.requestBody}\n\`\`\`\n\n`; } if (ep.responseExample && ep.responseExample.trim()) { md += `### Response\n\n\`\`\`json\n${ep.responseExample}\n\`\`\`\n\n`; } md += `---\n\n`; }); const blob = new Blob([md], { type: 'text/markdown' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = (title || 'api-docs').replace(/[^a-z0-9]/gi, '-').toLowerCase() + '.md'; a.click(); URL.revokeObjectURL(url); showToast('Markdown exported!'); } /* ═══ LOAD SAMPLE ═══ */ function loadSample() { document.getElementById('apiTitle').value = 'Pet Store API'; document.getElementById('apiDesc').value = 'A sample API for managing pets in a store. Demonstrates CRUD operations with authentication.'; document.getElementById('apiBase').value = 'https://api.petstore.io/v1'; document.getElementById('apiVersion').value = '1.0.0'; endpoints = []; expandedEndpoints.clear(); nextId = 1; addEndpoint({ method: 'GET', path: '/pets', description: 'List all pets in the store with optional filtering', parameters: [ { name: 'limit', type: 'integer', required: false, description: 'Maximum number of pets to return (default: 20, max: 100)' }, { name: 'status', type: 'string', required: false, description: 'Filter by status: available, pending, sold' }, { name: 'species', type: 'string', required: false, description: 'Filter by species: dog, cat, bird, fish' } ], requestBody: '', responseExample: '[\n {\n "id": 1,\n "name": "Buddy",\n "species": "dog",\n "breed": "Golden Retriever",\n "age": 3,\n "status": "available"\n },\n {\n "id": 2,\n "name": "Whiskers",\n "species": "cat",\n "breed": "Persian",\n "age": 2,\n "status": "available"\n }\n]', statusCode: '200' }); addEndpoint({ method: 'POST', path: '/pets', description: 'Add a new pet to the store', parameters: [], requestBody: '{\n "name": "Buddy",\n "species": "dog",\n "breed": "Golden Retriever",\n "age": 3,\n "status": "available"\n}', responseExample: '{\n "id": 1,\n "name": "Buddy",\n "species": "dog",\n "breed": "Golden Retriever",\n "age": 3,\n "status": "available",\n "createdAt": "2025-01-15T10:30:00Z"\n}', statusCode: '201' }); addEndpoint({ method: 'GET', path: '/pets/{petId}', description: 'Get detailed information about a specific pet', parameters: [ { name: 'petId', type: 'integer', required: true, description: 'The unique ID of the pet' } ], requestBody: '', responseExample: '{\n "id": 1,\n "name": "Buddy",\n "species": "dog",\n "breed": "Golden Retriever",\n "age": 3,\n "status": "available"\n}', statusCode: '200' }); addEndpoint({ method: 'PUT', path: '/pets/{petId}', description: 'Update an existing pet\'s information', parameters: [ { name: 'petId', type: 'integer', required: true, description: 'The unique ID of the pet to update' } ], requestBody: '{\n "name": "Buddy",\n "status": "sold"\n}', responseExample: '{\n "id": 1,\n "name": "Buddy",\n "species": "dog",\n "status": "sold",\n "updatedAt": "2025-01-15T12:00:00Z"\n}', statusCode: '200' }); addEndpoint({ method: 'DELETE', path: '/pets/{petId}', description: 'Remove a pet from the store', parameters: [ { name: 'petId', type: 'integer', required: true, description: 'The unique ID of the pet to delete' } ], requestBody: '', responseExample: '', statusCode: '204' }); showToast('Sample API loaded!'); } /* ═══ TOAST ═══ */ function showToast(msg, isError) { const t = document.getElementById('toast'); t.textContent = msg; t.style.background = isError ? 'linear-gradient(135deg, var(--danger), #e04050)' : 'linear-gradient(135deg, var(--success), #3cb878)'; t.classList.add('show'); clearTimeout(t._timer); t._timer = setTimeout(() => t.classList.remove('show'), 2800); } /* ═══ INIT ═══ */ renderPreview();