SQL Query Editor
A query workspace pairing a schema sidebar of tables and row counts with a syntax tinted SQL editor and a results table with timing.
A query workspace pairing a schema sidebar of tables and row counts with a syntax tinted SQL editor and a results table with timing.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
SQL Query Editor is the analytics query workspace for the acme_prod database, split into a schema sidebar and an editor with a results table. The sidebar lists six tables with row counts: subscriptions at 128,441 and plans at 12 are the active pair, with customers, invoices, events, and coupons below. The editor pane carries line numbers and token tinted SQL, a monthly recurring revenue query that joins subscriptions to plans and groups by plan name. A Run query button sits in the header beside a read replica badge, and the results table returns 3 rows in 48 ms with an Export CSV action, showing Scale, Growth, and Starter with their customer counts and mrr.
Editor lines are a typed array of tone tagged segments, and a toneClasses Record maps each tone to a class so keywords, strings, and comments render without inline colour. The schema tables and result rows are separate const arrays.
Reach for this block on a developer tools or analytics page, wired to a read replica that runs the query and streams the rows back. Keep the connection read only and enforce the timeout server-side so a heavy query cannot stall the primary.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the read replica query console. Other editor shapes:
Tip: show a real result set, not an empty grid; the returned rows are the proof that the editor runs.