Codex — Documentation Page
A dark three-column documentation layout with sticky sidebar navigation, an on-this-page TOC, styled terminal code blocks with copy bars, info and warning callouts, and prev/next pagers.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"><nav class="cx-top px-3 py-2 d-flex align-items-center gap-3 sticky-top">
<span class="fw-bold"><i class="bi bi-box me-1" style="color:var(--cx-cyan)"></i>ConvertAtlas <span class="cx-mono small" style="color:#5b6b92">docs ~/api</span></span>
<input class="form-control form-control-sm cx-search ms-auto" placeholder="Search docs… ( / )">
<a class="text-decoration-none small d-none d-md-inline" style="color:var(--cx-dim)" href="#"><i class="bi bi-github"></i> GitHub</a>
</nav>
<div class="container-xl py-4"><div class="row g-4">
<aside class="col-lg-2 d-none d-lg-block"><div class="cx-side">
<h6>Getting started</h6>
<a class="active" href="#install">Installation</a><a href="#quickstart">Quick start</a><a href="#config">Configuration</a>
<h6>Core concepts</h6>
<a href="#">Routing</a><a href="#">Middleware</a><a href="#">Caching</a>
<h6>API</h6>
<a href="#">REST reference</a><a href="#">Webhooks</a><a href="#">Errors</a>
</div></aside>
<main class="col-lg-8 cx-body">
<span class="cx-mono small" style="color:var(--cx-cyan)">// getting-started</span>
<h1 class="mt-1" id="install">Installation</h1>
<p>The ConvertAtlas API lets you run any converter or formatter programmatically. Install the CLI with npm, or call the REST endpoints directly — no key needed for the free tier.</p>
<div class="cx-pre my-3"><div class="cx-pre-bar"><span class="cx-mono">terminal</span><span><i class="bi bi-clipboard"></i> copy</span></div><pre class="cx-mono"><span class="c">$</span> npm install -g convertatlas
<span class="c">$</span> convertatlas --version
<span class="g">convertatlas v1.4.0</span> <span class="o">(linux-x64)</span></pre></div>
<div class="cx-note d-flex gap-2"><i class="bi bi-info-circle" style="color:var(--cx-cyan)"></i><div class="small">The CLI requires Node 18+. Everything also works straight from convertatlas.org with no install.</div></div>
<h2 id="quickstart">Quick start</h2>
<p>Convert a file from the terminal, or pipe data straight through. The CLI mirrors every tool you find on convertatlas.org.</p>
<div class="cx-pre my-3"><div class="cx-pre-bar"><span class="cx-mono">terminal</span><span><i class="bi bi-clipboard"></i> copy</span></div><pre class="cx-mono"><span class="c">$</span> echo '{"a":1}' | convertatlas json --pretty
<span class="g">✓</span> formatted <span class="c">2 lines</span> <span class="o">(3ms)</span></pre></div>
<h2 id="config">Configuration</h2>
<p>All options live in a single <code>atlas.config.js</code>. Every key is optional — defaults match the website behavior exactly.</p>
<div class="cx-pre my-3"><div class="cx-pre-bar"><span class="cx-mono">atlas.config.js</span><span><i class="bi bi-clipboard"></i> copy</span></div><pre class="cx-mono">export default {
<span class="c">target</span>: <span class="g">'es2022'</span>,
<span class="c">minify</span>: <span class="o">true</span>,
<span class="c">regions</span>: [<span class="g">'fra'</span>, <span class="g">'iad'</span>, <span class="g">'sin'</span>]
}</pre></div>
<div class="cx-warn d-flex gap-2"><i class="bi bi-exclamation-triangle" style="color:#fbbf24"></i><div class="small">Changing <code>target</code> invalidates the build cache — the first rebuild after will be slower.</div></div>
<div class="row g-3 mt-4 cx-pager">
<div class="col-6"><a href="#"><small>← Previous</small><div class="fw-semibold">Introduction</div></a></div>
<div class="col-6"><a href="#" class="text-end"><small>Next →</small><div class="fw-semibold">Routing</div></a></div>
</div>
</main>
<aside class="col-lg-2 d-none d-lg-block"><div class="cx-toc">
<div class="cx-mono small px-3 pb-1" style="color:var(--cx-dim)">On this page</div>
<a href="#install">Installation</a><a href="#quickstart">Quick start</a><a href="#config">Configuration</a>
</div></aside>
</div></div>
<footer class="py-4 text-center small border-top" style="border-color:var(--cx-line)!important;color:#5b6b92">
ConvertAtlas Docs © 2026 · <span class="cx-mono">Built with <a href="https://convertatlas.org" style="color:var(--cx-cyan);text-decoration:none">ConvertAtlas</a> ~/dev-tools</span>
</footer>:root{--cx-bg:#0a1020;--cx-card:#101a30;--cx-line:#1c2742;--cx-cyan:#5dd6ff;--cx-dim:#8da2c8}
body{background:var(--cx-bg);color:#dbe6f7;font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.cx-mono{font-family:ui-monospace,'JetBrains Mono',monospace}
.cx-top{background:rgba(10,16,32,.9);border-bottom:1px solid var(--cx-line);backdrop-filter:blur(8px)}
.cx-search{background:var(--cx-card);border:1px solid var(--cx-line);border-radius:10px;color:#dbe6f7;max-width:260px}
.cx-search::placeholder{color:#5b6b92}
.cx-search:focus{background:var(--cx-card);color:#fff;border-color:var(--cx-cyan);box-shadow:0 0 0 .2rem rgba(93,214,255,.12)}
.cx-side{position:sticky;top:70px;max-height:calc(100vh - 90px);overflow:auto}
.cx-side h6{font-size:.7rem;letter-spacing:.12em;color:#5b6b92;text-transform:uppercase;margin:18px 0 6px}
.cx-side a{display:block;color:var(--cx-dim);text-decoration:none;font-size:.88rem;padding:5px 10px;border-radius:8px;border-left:2px solid transparent}
.cx-side a:hover{color:#fff;background:var(--cx-card)}
.cx-side a.active{color:var(--cx-cyan);border-left-color:var(--cx-cyan);background:rgba(93,214,255,.07)}
.cx-body h1{font-weight:800;letter-spacing:-.02em}
.cx-body h2{font-weight:700;font-size:1.3rem;margin-top:2.2rem;padding-top:1rem;border-top:1px solid var(--cx-line)}
.cx-body p,.cx-body li{color:var(--cx-dim);line-height:1.75}
.cx-body code:not(pre code){background:rgba(93,214,255,.1);color:var(--cx-cyan);padding:2px 7px;border-radius:6px;font-size:.84em}
.cx-pre{background:#0b1322;border:1px solid var(--cx-line);border-radius:12px;overflow:hidden}
.cx-pre-bar{display:flex;justify-content:space-between;align-items:center;background:var(--cx-card);padding:8px 14px;font-size:.74rem;color:#5b6b92}
.cx-pre pre{margin:0;padding:16px;color:#bcd2f5;font-size:.85rem;line-height:1.7}
.cx-pre .c{color:var(--cx-cyan)}.cx-pre .g{color:#34d399}.cx-pre .o{color:#fbbf24}
.cx-note{border:1px solid rgba(93,214,255,.3);background:rgba(93,214,255,.06);border-radius:12px;padding:14px 16px}
.cx-warn{border:1px solid rgba(251,191,36,.35);background:rgba(251,191,36,.07);border-radius:12px;padding:14px 16px}
.cx-toc{position:sticky;top:70px;border-left:1px solid var(--cx-line);font-size:.84rem}
.cx-toc a{display:block;color:#5b6b92;text-decoration:none;padding:4px 14px}
.cx-toc a:hover{color:var(--cx-cyan)}
.cx-pager a{border:1px solid var(--cx-line);border-radius:12px;padding:12px 16px;text-decoration:none;color:#dbe6f7;display:block;transition:.15s}
.cx-pager a:hover{border-color:var(--cx-cyan)}
.cx-pager small{color:#5b6b92}.html file with all CDN links included, or copy the HTML and drop it into your project.What's included in this template
The Codex — Documentation Page is a complete inner pages design with realistic demo content — ready to preview, copy or download as a single responsive HTML file. Key features:
- Three-column docs layout
- Sticky section sidebar
- On-this-page TOC rail
- Terminal-style code blocks
- Info & warning callouts
- Prev/next page navigation
How to use it
Open the live preview above to see the full design at desktop, tablet and mobile widths. When you are happy with it, use Download to save a single codex-docs-page.html file, or Copy to grab the source. All required libraries load from public CDNs, so the file works the moment you open it — just replace the demo content with your own and publish.