Technical

Code

Inline code, keyboard Ctrl + K, and sample output Query OK, 3 rows.

-- top duckies by flock sizeSELECT name, count(*) AS n
FROM read_parquet('s3://pond/ducks.parquet')
WHERE age > 2GROUP BY name ORDER BY n DESC LIMIT 10;

<figure>
  <figcaption data-lang="SQL">query.sql</figcaption>
  <pre tabindex="0"><code data-lines><span data-line><span data-t="com">-- top duckies by flock size</span></span><span data-line><span data-t="kw">SELECT</span> name, <span data-t="fn">count</span>(*) <span data-t="kw">AS</span> n</span>
<span data-line><span data-t="kw">FROM</span> <span data-t="fn">read_parquet</span>(<span data-t="str">'s3://pond/ducks.parquet'</span>)</span>
<span data-line><span data-t="kw">WHERE</span> age &gt; <span data-t="num">2</span></span><span data-line><span data-t="kw">GROUP BY</span> name <span data-t="kw">ORDER BY</span> n <span data-t="kw">DESC LIMIT</span> <span data-t="num">10</span>;</span></code></pre>
</figure>

curl -fsSL https://example.com/a/very/long/install/url/that/would/normally/overflow/the/block.sh | sh # wraps instead of scrolling

<figure>
  <figcaption data-lang="Shell">install.sh (wrapped)</figcaption>
  <pre tabindex="0" data-wrap><code><span data-t="fn">curl</span> -fsSL <span data-t="str">https://example.com/a/very/long/install/url/that/would/normally/overflow/the/block.sh</span> | <span data-t="fn">sh</span> <span data-t="com"># wraps instead of scrolling</span></code></pre>
</figure>

Plain block, no header, scrolls horizontally:

duckdb -c "select 42 as answer, 'a deliberately long line to force horizontal scrolling at narrow widths' as note"

Data table

<div role="region" aria-labelledby="t1c" tabindex="0">
  <table>
    <caption id="t1c">Flocks by region (zebra, hover)</caption>
    <thead><tr><th scope="col">Region</th><th scope="col">Species</th><th scope="col" data-num>Ducks</th><th scope="col" data-num>Share</th></tr></thead>
    <tbody>
      <tr><th scope="row">Amsterdam</th><td>Mallard</td><td data-num>1,204</td><td data-num>31.2%</td></tr>
      <tr><th scope="row">Seattle</th><td>Wood duck</td><td data-num>982</td><td data-num>25.4%</td></tr>
      <tr><th scope="row">Nairobi</th><td>Pintail</td><td data-num>640</td><td data-num>16.6%</td></tr>
      <tr><th scope="row">Lima</th><td>Teal</td><td data-num>1,033</td><td data-num>26.8%</td></tr>
    </tbody>
    <tfoot><tr><th scope="row" colspan="2">Total</th><td data-num>3,859</td><td data-num>100%</td></tr></tfoot>
  </table>
</div>

<figure data-scroll>
  <table data-compact>
    <caption>Sticky header, compact, scrolls (figure[data-scroll])</caption>
    <thead><tr><th scope="col">ID</th><th scope="col">Event</th><th scope="col">Source</th><th scope="col" data-num>Latency ms</th></tr></thead>
    <tbody>
      <tr><td>1</td><td>query.start</td><td>cli</td><td data-num>12</td></tr>
      <tr><td>2</td><td>query.finish</td><td>cli</td><td data-num>148</td></tr>
      <tr><td>3</td><td>sync.start</td><td>api</td><td data-num>31</td></tr>
      <tr><td>4</td><td>sync.finish</td><td>api</td><td data-num>2,310</td></tr>
      <tr><td>5</td><td>auth.refresh</td><td>web</td><td data-num>9</td></tr>
      <tr><td>6</td><td>query.start</td><td>web</td><td data-num>14</td></tr>
      <tr><td>7</td><td>query.finish</td><td>web</td><td data-num>201</td></tr>
      <tr><td>8</td><td>export.csv</td><td>api</td><td data-num>780</td></tr>
      <tr><td>9</td><td>share.create</td><td>web</td><td data-num>45</td></tr>
      <tr><td>10</td><td>share.open</td><td>web</td><td data-num>22</td></tr>
    </tbody>
  </table>
</figure>

Terminal / query result

duckdb pond.dbselect region, ducks from flocks limit 3;

<figure data-window>
  <figcaption>duckdb &mdash; pond.db</figcaption>
  <pre tabindex="0"><code><span data-prompt>duckdb pond.db</span><span data-prompt><span data-t="kw">select</span> region, ducks <span data-t="kw">from</span> flocks <span data-t="kw">limit</span> <span data-t="num">3</span>;</span></code></pre>
  <div role="region" aria-label="Query result" tabindex="0">
    <table data-compact>
      <thead><tr><th scope="col">region</th><th scope="col">species</th><th scope="col" data-num>ducks</th></tr></thead>
      <tbody>
        <tr><td>Amsterdam</td><td>Mallard</td><td data-num>1204</td></tr>
        <tr><td>Seattle</td><td>Wood duck</td><td data-num>982</td></tr>
        <tr><td>Nairobi</td><td>Pintail</td><td data-num>640</td></tr>
      </tbody>
      <tfoot><tr><td colspan="3">3 rows &middot; 12 ms</td></tr></tfoot>
    </table>
  </div>
</figure>

Accordion / FAQ

Exclusive group (details[name])

<div>
  <details name="faq" open><summary>What is a duck?</summary><p>A small waterfowl with a very large data appetite.</p></details>
  <details name="faq"><summary>Is it serverless?</summary><p>Yes, with dedicated compute for every human and agent.</p></details>
  <details name="faq"><summary>Can I query Parquet?</summary><p>Directly, from object storage or local disk.</p></details>
</div>

Independent

<details><summary>Closed by default</summary><p>Open me without closing others.</p></details>

Modal

Open dialog (dialog[open], static demo)

<dialog open data-static aria-labelledby="dm1">
  <header><h4 id="dm1">Delete database?</h4></header>
  <p>This cannot be undone. All tables in <code>pond</code> will be removed.</p>
  <footer><button data-variant="ghost">Cancel</button><button>Delete</button></footer>
</dialog>

Popover modal (zero JS)

Open modal

<dialog popover data-modal id="pm1" aria-labelledby="pm1t">
  <header><h4 id="pm1t">Share this query</h4><button popovertarget="pm1" popovertargetaction="hide" aria-label="Close">&times;</button></header>
  <p>Anyone with the link can view results. Press <kbd>Esc</kbd> to dismiss.</p>
  <footer><button popovertarget="pm1" popovertargetaction="hide" data-variant="ghost">Close</button></footer>
</dialog>

Tooltip / popover

<div class="cluster" style="padding-block: 2.5rem 1rem">
  <button data-tooltip="Copied to clipboard">Hover or focus (top)</button>
  <button data-tooltip="Appears below" data-side="bottom">Bottom</button>
  <abbr data-tooltip="Online analytical processing" tabindex="0">OLAP</abbr>
  <button popovertarget="po1">Toggle popover</button>
</div>

<div popover id="po1">
  <h4>Popover</h4>
  <p>Light dismiss by clicking outside or pressing Esc.</p>
</div>

Toast & cookie banner

<div class="stack">
  <p role="status" data-toast>Query saved.</p>
  <p role="status" data-toast data-tone="success">Sync complete.</p>
  <p role="status" data-toast data-tone="warning">Quota at 90%.</p>
  <p role="status" data-toast data-tone="danger">Connection lost.</p>
  <aside data-cookie data-static aria-label="Cookie consent">
    <div><p>We use cookies to give you the best experience</p><p>By accepting this banner, you agree to our <a href="#">Privacy Policy</a>.</p></div>
    <menu><li><button>Accept</button></li><li><a href="#">Opt out</a></li></menu>
  </aside>
</div>

Feedback

<label>Progress 60% <progress max="100" value="60">60%</progress></label>
<label>Complete <progress max="100" value="100" data-tone="success">100%</progress></label>
<label>Indeterminate <progress>Loading</progress></label>
<label>Meter, good <meter min="0" max="100" low="30" high="70" optimum="90" value="85">85</meter></label>
<label>Meter, warning <meter min="0" max="100" low="30" high="70" optimum="90" value="50">50</meter></label>
<label>Meter, bad <meter min="0" max="100" low="30" high="70" optimum="90" value="15">15</meter></label>

<div class="cluster">
  <output data-spinner data-size="sm">Loading</output>
  <output data-spinner>Loading</output>
  <output data-spinner data-size="lg" data-tone="sky">Loading</output>
  <span role="progressbar" aria-busy="true" aria-label="Loading"></span>
</div>

Skeleton

<article aria-busy="true" aria-label="Loading content" class="stack" style="--gap:.5rem">
  <div data-skeleton aria-busy="true" data-shape="avatar"></div>
  <div data-skeleton aria-busy="true" data-shape="title"></div>
  <div data-skeleton aria-busy="true" data-shape="line"></div>
  <div data-skeleton aria-busy="true" data-shape="line" style="width:80%"></div>
  <div data-skeleton aria-busy="true" data-shape="block"></div>
</article>

Description list & shortcuts

Engine

DuckDB 1.4

Region

us-east-1

Storage

12.4 GB

<dl>
  <div><dt>Engine</dt><dd>DuckDB 1.4</dd></div>
  <div><dt>Region</dt><dd>us-east-1</dd></div>
  <div><dt>Storage</dt><dd>12.4 GB</dd></div>
</dl>

Keyboard shortcuts

Run query

Ctrl + Enter

Command palette

Ctrl K

Close

Esc

<dl data-shortcuts>
  <div><dt>Run query</dt><dd><kbd><kbd>Ctrl</kbd> + <kbd>Enter</kbd></kbd></dd></div>
  <div><dt>Command palette</dt><dd><kbd>Ctrl</kbd> <kbd>K</kbd></dd></div>
  <div><dt>Close</dt><dd><kbd>Esc</kbd></dd></div>
</dl>