SqlEditor

A self-contained SQL scratchpad. Type a query, hit Run, see the per-statement results below. It runs against the same in-browser DuckDB every other component reads from.

SQL

<SqlEditor initialSql="SELECT species, count(*) FROM db.iris GROUP BY species;" />

Seeding the editor

initialSql is the starting text only; the editor owns its buffer after mount, so edits stay local to the component. Multiple statements separated by ; each render their own result block.

Props

Prop	Type	Notes
`initialSql`	`string`	Seed text; the editor owns its own buffer after mount.
`onRun`	`(output, sql) => void \| Promise<void>`	Called after each Run with the results and the SQL executed.

Queries run against the DuckDB connection from context, so any table you can name elsewhere on the page, like db.iris, is queryable here.

Installation

SqlEditor ships in @n6k.io/ui/components. Nothing to install. Register the namespace once in src/app/mdx-components.tsx and the tag resolves in both .mdx and page.py pages:

import * as n6k from "@n6k.io/ui/components";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...n6k, // SqlEditor, and every other n6k component
    ...components,
  } as unknown as MDXComponents;
}