{"_id":"@ashishkumarpathak/openapi-renderer","_rev":"3-37b9bf3bc04ad229f538e7715f2badcc","name":"@ashishkumarpathak/openapi-renderer","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@ashishkumarpathak/openapi-renderer","version":"1.0.0","keywords":["openapi","swagger","api","documentation","renderer","react","typescript"],"license":"MIT","_id":"@ashishkumarpathak/openapi-renderer@1.0.0","maintainers":[{"name":"ashishkumarpathak","email":"pathakashu4289@gmail.com"}],"dist":{"shasum":"e8b491d14b2010bbe801de6562b063129c3bc9e5","tarball":"https://registry.npmjs.org/@ashishkumarpathak/openapi-renderer/-/openapi-renderer-1.0.0.tgz","fileCount":7,"integrity":"sha512-SmqOqEbQHf54KPHjkVpD3SjMSS8989mK4moMyNy76DbAM76Oo8lwz0WtyOAIydnWvw51tVj6DJzY+lHana8NYw==","signatures":[{"sig":"MEUCIEu7lC2U69pfaZ9hgimT5b8unpD1vCet8ursqKmgD15MAiEA60/XJATzN+g7pUrIT6TvsJGAKPD8VVy4a4ZOud5gGoE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2522483},"main":"./dist/lib/index.js","type":"module","types":"./src/lib.ts","module":"./dist/lib/index.js","exports":{".":{"types":"./src/lib.ts","import":"./dist/lib/index.js"},"./cdn":"./dist/cdn/openapi-renderer.iife.js","./cdn/es":"./dist/cdn/openapi-renderer.es.js"},"gitHead":"8b823c634cabcb6f4b05c2dbcbe13b2b988c95a4","scripts":{"dev":"vite","test":"vitest --run","build":"tsc -b && vite build","preview":"vite preview","test:e2e":"playwright test","build:cdn":"vite build -c vite.standalone.config.ts","build:lib":"vite build -c vite.lib.config.ts","test:watch":"vitest"},"_npmUser":{"name":"ashishkumarpathak","email":"pathakashu4289@gmail.com"},"_npmVersion":"10.8.2","description":"A next-generation OpenAPI documentation renderer with immersive design, 21 code languages, and universal framework support.","directories":{},"_nodeVersion":"18.20.8","dependencies":{"yaml":"^2.6.0","react":"^18.3.1","marked":"^15.0.12","fuse.js":"^7.4.1","prismjs":"^1.30.0","zustand":"^5.0.0","dompurify":"^3.4.7","react-dom":"^18.3.1","lucide-react":"^0.460.0","framer-motion":"^11.15.0","@types/dompurify":"^3.0.5","react-error-boundary":"^6.1.2"},"_hasShrinkwrap":false,"packageManager":"pnpm@10.33.2+sha512.a90faf6feeab71ad6c6e57f94e0fe1a12f5dcc22cd754db40ae9593eb6a3e0b6b12e3540218bb37ae083404b1f2ce6db2a4121e979829b4aff94b99f49da1cf8","devDependencies":{"vite":"^6.0.0","jsdom":"^26.1.0","vitest":"^3.2.6","postcss":"^8.4.49","typescript":"^5.6.3","tailwindcss":"^3.4.15","@types/react":"^18.3.12","autoprefixer":"^10.4.20","@types/prismjs":"^1.26.6","@playwright/test":"^1.60.0","@types/react-dom":"^18.3.1","@vitejs/plugin-react":"^4.3.4","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^6.9.1","vite-plugin-css-injected-by-js":"^3.5.2"},"peerDependencies":{"react":">=18","react-dom":">=18"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/openapi-renderer_1.0.0_1780556203043_0.6409823452813788","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@ashishkumarpathak/openapi-renderer","version":"1.0.1","keywords":["openapi","swagger","api","documentation","renderer","react","typescript"],"license":"MIT","_id":"@ashishkumarpathak/openapi-renderer@1.0.1","maintainers":[{"name":"ashishkumarpathak","email":"pathakashu4289@gmail.com"}],"dist":{"shasum":"46e5a3a84145efccc00070d33e61ffdcec83e3bd","tarball":"https://registry.npmjs.org/@ashishkumarpathak/openapi-renderer/-/openapi-renderer-1.0.1.tgz","fileCount":7,"integrity":"sha512-U/TU/9/qHLGBwM7TZ6U2Rv18/1yIsP7ADI56KX9L/3ggbpubtzGFgUujkzlDzmaavuqBFQel1ZWWagn+HdFIOA==","signatures":[{"sig":"MEUCIBUPLHkBwrDrZjjrxSCi0X6mZbGmCirbuBhbhMav1OuOAiEA5rvdO7iXFmOBtbTEKUgYEW9jCmqDI3vIpG2uNQl7ldw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2553148},"main":"./dist/lib/index.js","type":"module","types":"./src/lib.ts","module":"./dist/lib/index.js","exports":{".":{"types":"./src/lib.ts","import":"./dist/lib/index.js"},"./cdn":"./dist/cdn/openapi-renderer.iife.js","./cdn/es":"./dist/cdn/openapi-renderer.es.js"},"gitHead":"8b823c634cabcb6f4b05c2dbcbe13b2b988c95a4","scripts":{"dev":"vite","test":"vitest --run","build":"tsc -b && vite build","preview":"vite preview","test:e2e":"playwright test","build:cdn":"vite build -c vite.standalone.config.ts","build:lib":"vite build -c vite.lib.config.ts","test:watch":"vitest"},"_npmUser":{"name":"ashishkumarpathak","email":"pathakashu4289@gmail.com"},"_npmVersion":"10.8.2","description":"A next-generation OpenAPI documentation renderer with immersive design, 21 code languages, and universal framework support.","directories":{},"_nodeVersion":"18.20.8","dependencies":{"yaml":"^2.6.0","react":"^18.3.1","marked":"^15.0.12","fuse.js":"^7.4.1","prismjs":"^1.30.0","zustand":"^5.0.0","dompurify":"^3.4.7","react-dom":"^18.3.1","lucide-react":"^0.460.0","framer-motion":"^11.15.0","@types/dompurify":"^3.0.5","react-error-boundary":"^6.1.2"},"_hasShrinkwrap":false,"packageManager":"pnpm@10.33.2+sha512.a90faf6feeab71ad6c6e57f94e0fe1a12f5dcc22cd754db40ae9593eb6a3e0b6b12e3540218bb37ae083404b1f2ce6db2a4121e979829b4aff94b99f49da1cf8","devDependencies":{"vite":"^6.0.0","jsdom":"^26.1.0","vitest":"^3.2.6","postcss":"^8.4.49","typescript":"^5.6.3","tailwindcss":"^3.4.15","@types/react":"^18.3.12","autoprefixer":"^10.4.20","@types/prismjs":"^1.26.6","@playwright/test":"^1.60.0","@types/react-dom":"^18.3.1","@vitejs/plugin-react":"^4.3.4","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^6.9.1","vite-plugin-css-injected-by-js":"^3.5.2"},"peerDependencies":{"react":">=18","react-dom":">=18"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/openapi-renderer_1.0.1_1780561092310_0.028157662965552","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@ashishkumarpathak/openapi-renderer","version":"1.1.0","type":"module","description":"A next-generation OpenAPI documentation renderer with immersive design, 21 code languages, and universal framework support.","main":"./dist/lib/index.js","module":"./dist/lib/index.js","types":"./src/lib.ts","exports":{".":{"import":"./dist/lib/index.js","types":"./src/lib.ts"},"./sdk":{"import":"./dist/lib/sdk/index.js","types":"./src/sdk/index.ts"},"./integrations":{"import":"./dist/lib/integrations/index.js","types":"./src/integrations/index.ts"},"./cdn":"./dist/cdn/openapi-renderer.iife.js","./cdn/es":"./dist/cdn/openapi-renderer.es.js"},"keywords":["openapi","swagger","api","documentation","renderer","react","typescript"],"license":"MIT","peerDependencies":{"react":">=18","react-dom":">=18"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"scripts":{"dev":"vite","build":"tsc -b && vite build","build:lib":"vite build -c vite.lib.config.ts","build:cdn":"vite build -c vite.standalone.config.ts","preview":"vite preview","test":"vitest --run","test:watch":"vitest","test:e2e":"playwright test"},"dependencies":{"@types/dompurify":"^3.0.5","dompurify":"^3.4.7","framer-motion":"^11.15.0","fuse.js":"^7.4.1","lucide-react":"^0.460.0","marked":"^15.0.12","prismjs":"^1.30.0","react":"^18.3.1","react-dom":"^18.3.1","react-error-boundary":"^6.1.2","yaml":"^2.6.0","zustand":"^5.0.0"},"devDependencies":{"@playwright/test":"^1.60.0","@testing-library/jest-dom":"^6.9.1","@testing-library/react":"^16.3.2","@types/prismjs":"^1.26.6","@types/react":"^18.3.12","@types/react-dom":"^18.3.1","@vitejs/plugin-react":"^4.3.4","autoprefixer":"^10.4.20","jsdom":"^26.1.0","postcss":"^8.4.49","tailwindcss":"^3.4.15","typescript":"^5.6.3","vite":"^6.0.0","vite-plugin-css-injected-by-js":"^3.5.2","vitest":"^3.2.6"},"packageManager":"pnpm@10.33.2+sha512.a90faf6feeab71ad6c6e57f94e0fe1a12f5dcc22cd754db40ae9593eb6a3e0b6b12e3540218bb37ae083404b1f2ce6db2a4121e979829b4aff94b99f49da1cf8","_id":"@ashishkumarpathak/openapi-renderer@1.1.0","gitHead":"9008c880c3d1f6a4706481b5d2b9144931f74eae","_nodeVersion":"18.20.8","_npmVersion":"10.8.2","dist":{"integrity":"sha512-yHQ5uWTCFSgBsoxIdqffv2Od3bFWrOQ2CIstGB11JNelJyGjaDE/mVM7wGYKJWzZjptaBpMglqtrl3l5LWmW5A==","shasum":"db66aa94e677588b7ff214929cf1da2b70eb8041","tarball":"https://registry.npmjs.org/@ashishkumarpathak/openapi-renderer/-/openapi-renderer-1.1.0.tgz","fileCount":5,"unpackedSize":35626,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCMNn2k/hRdha0V5mHQPszIUVFw2fNf93ZP/nLyBrioZgIgfkyqIITivmc/lOaGz2vr62DX3u9wjMSBmE/oxFrRWMM="}]},"_npmUser":{"name":"ashishkumarpathak","email":"pathakashu4289@gmail.com"},"directories":{},"maintainers":[{"name":"ashishkumarpathak","email":"pathakashu4289@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/openapi-renderer_1.1.0_1780908505817_0.7354109228461669"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-04T06:56:42.867Z","modified":"2026-06-08T08:48:26.051Z","1.0.0":"2026-06-04T06:56:43.270Z","1.0.1":"2026-06-04T08:18:12.639Z","1.1.0":"2026-06-08T08:48:25.944Z"},"license":"MIT","keywords":["openapi","swagger","api","documentation","renderer","react","typescript"],"description":"A next-generation OpenAPI documentation renderer with immersive design, 21 code languages, and universal framework support.","maintainers":[{"name":"ashishkumarpathak","email":"pathakashu4289@gmail.com"}],"readme":"# OpenAPI Renderer — \"Constellation\"\n\nA next-generation OpenAPI documentation renderer with an immersive, spatial design. Not a Swagger reskin — a completely different experience.\n\n## Run\n\n```bash\nnpm install --registry https://registry.npmjs.org\nnpm run dev\n```\n\n## Features — Scalar Parity & Beyond\n\n### ✅ Full Documentation (not just Try It)\n\nEvery endpoint opens as a **two-column detail view**:\n\n| Left Column (Docs) | Right Column (Interactive) |\n|---|---|\n| Summary + description | Code samples (cURL, JS, Python) |\n| Authentication requirements | Try It panel with full controls |\n| Path parameters | Response examples (generated from schema) |\n| Query parameters | |\n| Header parameters | |\n| Cookie parameters | |\n| Request body (multi media-type) | |\n| Schema tree (expandable, recursive) | |\n| Responses (all status codes, headers, body schema) | |\n\n### ✅ Feature Comparison with Scalar\n\n| Feature | Scalar | This Renderer |\n|---------|--------|---------------|\n| API info/hero | ✅ | ✅ Cinematic hero with animated orbs |\n| Server selector | ✅ | ✅ In hero + Try It panel |\n| Parameters by type (path/query/header/cookie) | ✅ | ✅ Grouped with types + defaults + enums |\n| Request body with schema | ✅ | ✅ Media type selector + recursive schema tree |\n| Response documentation | ✅ | ✅ All status codes + headers + body schema |\n| Response examples | ✅ | ✅ Auto-generated from schema |\n| Code samples | ✅ (multi-language) | ✅ 21 languages (cURL, JS, Python, Go, Ruby, PHP, Java, C#, Rust, Swift, Kotlin, Dart, etc.) |\n| Try It / Test Request | ✅ | ✅ Full: server select, params, headers, body, response timing |\n| Authentication display | ✅ | ✅ OAuth2 (all flows + PKCE), API Key, Basic, Bearer, prefill config |\n| Models/Schemas section | ✅ | ✅ Grid layout, expandable properties |\n| Search | ✅ | ✅ Command palette (⌘K) |\n| Dark/Light theme | ✅ | ✅ Live toggle |\n| Sidebar navigation | ✅ (fixed sidebar) | ✅ Fixed sidebar + Floating dock (unique) |\n| Markdown descriptions | ✅ | ✅ Rendered text |\n| Operation ID display | ✅ | ✅ Badge in detail header |\n| Deprecated indicator | ✅ | ✅ Badge on card + detail |\n| Multiple servers | ✅ | ✅ Hero display + dropdown in Try It |\n| Customization (runtime) | ❌ (config only) | ✅ **Live GUI panel**: accent color, radius, toggles, CSS injection |\n| Animations | Minimal | ✅ **Framer Motion**: spring physics, 3D tilt, staggered reveals |\n| Layout | Sidebar + list | ✅ **Spatial**: full-page hero → scrollable cards → cinematic modals |\n| Custom CSS injection | ✅ | ✅ |\n| Export/Download spec | ✅ | ✅ JSON/YAML/both/none |\n| Webhooks | ✅ | ✅ |\n| Multiple documents | ✅ | ✅ Per-doc config, slug routing, default selection |\n| Plugin system | ✅ | ✅ Lifecycle hooks, view slots, extensions, response handlers |\n| Framework integrations | ✅ (30+) | ✅ 20+ (Express, Fastify, Hono, Koa, Next.js, Nuxt, SvelteKit, Astro, FastAPI, Django, Flask, NestJS, Spring Boot, ASP.NET, Go, Rails, Rust, Elysia, Lambda, Workers, Deno) |\n| Configuration depth | ✅ (50+ options) | ✅ 50+ options (auth, sorting, routing, events, display, meta, etc.) |\n| Events/Callbacks | ✅ | ✅ onBeforeRequest, onLoaded, onServerChange, onDocumentSelect, etc. |\n| Authentication prefill | ✅ | ✅ preferredSecurityScheme, per-scheme config |\n| Path-based routing | ✅ | ✅ hash + path routing with basePath |\n| Hidden clients control | ✅ | ✅ Per-language or global |\n| Tag/Operation sorting | ✅ | ✅ alpha, method, custom comparator |\n\n### ✅ Unique Features Not in Scalar\n\n- **Floating Dock navigation** — macOS-style bottom dock instead of sidebar\n- **3D tilt effect** on endpoint cards (perspective mouse tracking)\n- **Cinematic endpoint modals** — full-screen two-column detail\n- **Ambient mesh background** with animated gradient orbs\n- **Particle field** in hero section\n- **Live customizer** — color picker, border radius, section toggles, CSS in real-time\n- **Command palette** (⌘K) with spring-animated results\n- **Response timing** in Try It panel\n- **Code sample copy** with visual feedback\n- **Full plugin system** — lifecycle hooks, view injection (8 slots), spec extensions, response handlers\n- **20+ framework integrations** — Express, Fastify, Hono, Koa, Next.js, Nuxt, SvelteKit, Astro, FastAPI, Django, Flask, NestJS, Spring Boot, ASP.NET, Go, Rails, Rust, Elysia, Lambda, Workers, Deno\n- **Multi-document sources** — per-doc config, slug routing, default selection\n- **50+ configuration options** — auth prefill, sorting, routing, events, display toggles, metadata\n\n## Architecture\n\n```\nsrc/\n├── components/\n│   ├── OpenAPIRenderer.tsx   # Root — composes all sections\n│   ├── Hero.tsx              # Full-viewport animated intro\n│   ├── Dock.tsx              # Floating bottom navigation\n│   ├── EndpointGroups.tsx    # Tag sections with endpoint list\n│   ├── EndpointCard.tsx      # Card + full detail modal (docs + code + try it)\n│   ├── ModelsSection.tsx     # Schema models grid\n│   ├── CommandPalette.tsx    # ⌘K search spotlight\n│   └── Customizer.tsx        # Live appearance controls\n├── hooks/                    # Intersection observer, keyboard, theme\n├── store/                    # Zustand global state\n├── types/                    # Full OpenAPI 3.x TypeScript types\n├── utils/                    # Spec parser, helpers, $ref resolver\n└── styles/                   # CSS variables, mesh bg, frost glass\n```\n\n## Usage\n\n### Basic\n\n```tsx\nimport { OpenAPIRenderer } from '@ashishkumarpathak/openapi-renderer'\n\n<OpenAPIRenderer\n  spec=\"https://api.example.com/openapi.json\"\n  config={{\n    theme: 'dark',\n    showModels: true,\n    showSearch: true,\n    showTryIt: true,\n    animationsEnabled: true,\n    expandAllTags: true,\n    accentColor: '#7c5cfc',\n    borderRadius: 16,\n  }}\n/>\n```\n\n### Multiple Documents (Scalar-Compatible)\n\n```tsx\n<OpenAPIRenderer\n  sources={[\n    {\n      title: 'Users API',\n      slug: 'users',\n      url: 'https://api.example.com/users/openapi.json',\n    },\n    {\n      title: 'Payments API',\n      slug: 'payments',\n      url: 'https://api.example.com/payments/openapi.json',\n      default: true, // This one loads first\n      config: { accentColor: '#10b981' }, // Per-document config\n    },\n  ]}\n  config={{ theme: 'dark' }}\n/>\n```\n\n### With Authentication Prefill\n\n```tsx\n<OpenAPIRenderer\n  spec={mySpec}\n  config={{\n    authentication: {\n      preferredSecurityScheme: 'bearerAuth',\n      securitySchemes: {\n        bearerAuth: { token: 'your-dev-token' },\n        oauth2: {\n          flows: {\n            authorizationCode: {\n              clientId: 'your-client-id',\n              usePkce: 'SHA-256',\n            },\n          },\n        },\n      },\n      persistAuth: true,\n    },\n    events: {\n      onLoaded: (slug) => console.log('Loaded:', slug),\n      onServerChange: (server) => console.log('Server:', server),\n    },\n  }}\n/>\n```\n\n### With Plugins\n\n```tsx\nimport { OpenAPIRenderer, registerPlugin } from '@ashishkumarpathak/openapi-renderer'\n\n// Register before rendering\nregisterPlugin(() => ({\n  name: 'my-analytics',\n  hooks: {\n    onSpecLoaded: ({ spec }) => analytics.track('docs_viewed', { api: spec.info.title }),\n    onBeforeRequest: (req) => {\n      req.headers['X-Tracking-Id'] = generateId()\n      return req\n    },\n  },\n  views: {\n    'content.end': [{\n      component: () => <footer>Need help? <a href=\"/support\">Contact us</a></footer>,\n    }],\n  },\n}))\n\n<OpenAPIRenderer spec={mySpec} />\n```\n\n### Framework Integration (Express)\n\n```ts\nimport { expressMiddleware } from '@ashishkumarpathak/openapi-renderer/integrations'\n\napp.use('/docs', expressMiddleware({\n  spec: '/api/openapi.json',\n  title: 'My API',\n  theme: 'dark',\n}))\n```\n\n## CSS Variables\n\n```css\n:root {\n  --oar-bg: #050508;\n  --oar-surface: #0c0c12;\n  --oar-surface-elevated: #13131d;\n  --oar-accent: #7c5cfc;\n  --oar-accent-2: #5ce1e6;\n  --oar-text: #e8e8f0;\n  --oar-text-dim: #8888a0;\n  --oar-text-muted: #55556a;\n  --oar-border: rgba(255, 255, 255, 0.06);\n  --oar-get: #5ce1e6;\n  --oar-post: #7c5cfc;\n  --oar-put: #ffb347;\n  --oar-delete: #ff6b6b;\n  --oar-patch: #c77dff;\n  --oar-font: 'Inter', system-ui;\n  --oar-font-mono: 'JetBrains Mono', monospace;\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}