Render Modes & Layout Benchmarks

RapiDoc offers three distinct rendering modes via the render-style attribute. Each mode addresses a specific documentation experience and scale profile.

<rapi-doc render-style="focused"></rapi-doc>

1. The Three Rendering Styles

`render-style="read"` (Linear Document)

Mental Model: Continuous, book-like scrolling documentation similar to classic Stripe or Redoc layouts.
Best Suited For: Small to medium APIs (< 50 endpoints), onboarding tutorials, and public reference documents where developers prefer reading through all endpoints sequentially.
Trade-off: High DOM node count because all paths and schemas are rendered at once.

`render-style="view"` (Collapsible Sections)

Mental Model: Categorized documentation organized by tags, with expandable operation cards.
Best Suited For: General-purpose developer portals (50 to 300 endpoints).
Trade-off: Balanced DOM footprint. Clicking an endpoint expands it while keeping others collapsed.

`render-style="focused"` (Single Endpoint Card)

Mental Model: High-performance dashboard where the left sidebar displays the navigation tree, and the main canvas displays only the currently selected endpoint.
Best Suited For: Large enterprise APIs (300 to 2,000+ endpoints), multi-service microservice portals, and low-powered mobile devices.
Trade-off: Only one endpoint is visible at a time, resulting in an ultra-lean DOM and maximum snappiness.

2. Benchmark Comparison

The following performance benchmarks were captured on a large specification (~6MB OpenAPI 3.0 file containing 240 paths and 180 schema definitions) running in Chrome on an Apple M-series processor:

Render Mode	Initial Parse + Render	Active DOM Node Count	Memory Allocation	Frame Rate During Scroll
`read`	~820ms	14,200 nodes	~85 MB	42 - 55 FPS
`view`	~410ms	4,600 nodes	~45 MB	60 FPS
`focused`	~140ms	850 nodes	~18 MB	60 FPS (Rock Solid)

3. Switching Render Modes Dynamically

You can allow users to toggle their preferred reading layout dynamically:

const doc = document.getElementById('the-doc');

// Let the user toggle between Focused and Read mode
function setMode(mode) {
  doc.setAttribute('render-style', mode);
}