OpenAPI Overlays

OpenAPI 오버레이

Apply a separate set of actions to enrich an API description without editing the source.

···
html
<div class="viz"><h3>SOURCE + OVERLAY</h3><div class="row"><div class="box">GET /orders</div><span class="arrow">+</span><div class="box" id="overlay">audience: partner</div><span class="arrow">→</span><div class="box" id="result">GET /orders<br>partner</div></div><div class="muted">source document stays the same</div></div>
css
.viz{width:94%;height:88%;max-width:960px;padding:clamp(10px,2vmin,18px);border:1px solid var(--line);border-radius:14px;background:var(--surface);font:600 clamp(12px,1.35vw,16px)/1.35 var(--font-sans,system-ui,sans-serif);display:flex;flex-direction:column;gap:clamp(7px,1.8vmin,13px);overflow:hidden}.viz h3{margin:0;color:var(--accent);font:700 clamp(12px,1.35vw,16px)/1.2 var(--font-sans,system-ui,sans-serif);letter-spacing:.04em}.viz .row{display:flex;align-items:center;justify-content:center;gap:clamp(5px,1.4vmin,12px);flex:1;min-height:0}.viz .box{padding:clamp(5px,1.5vmin,12px);border:1px solid var(--line);border-radius:9px;background:var(--bg);text-align:center}.viz .muted{color:var(--muted)}.viz .accent{color:var(--accent)}.viz .code{font-family:ui-monospace,monospace}.viz .pill{padding:3px 7px;border:1px solid var(--line);border-radius:99px;white-space:nowrap}.viz .active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}.viz .arrow{color:var(--accent);font:700 18px ui-monospace,monospace}#overlay{color:var(--accent-2)}#result{min-width:29%;border-color:var(--accent)}#overlay.off{opacity:.2}#result.off{border-color:var(--line)}
js
let enabled=true;function draw(){enabled=!enabled;document.getElementById('overlay').classList.toggle('off',!enabled);document.getElementById('result').classList.toggle('off',!enabled);document.getElementById('result').innerHTML=enabled?'GET /orders<br>partner':'GET /orders'}draw();setInterval(draw,1700)

An OpenAPI Overlay is a separate document whose ordered actions select and update, remove, or copy nodes of a target description. It can enrich team documentation, tags, or environment details while leaving the source unchanged. Each action applies after the preceding action.

The demo toggles an overlay that adds an audience tag and description to GET /orders. Validate the transformed result and keep ownership of source and overlay clear.

When to use

Use it when a shared or externally supplied specification needs local documentation additions.

Open as page ↗