Database Query With Code Editor

Query studio

Run queries right alongside the schema

Hit the database without leaving your IDE. Results stream into a structured grid you can sort, filter, and export — typed end to end.

orders.tsdb.config.tstokens.css

orders

production · postgres
idcustomeramountstatus
ord_3PqAlisa@beste.dev$42.00paid
ord_3PqBalex@beste.dev$128.50paid
ord_3PqCmaria@beste.dev$8.99pending
ord_3PqDdavid@beste.dev$214.00refunded
ord_3PqErobin@beste.dev$56.20paid
5 of 1,247 rows·38ms
// Type-safe database client
import { db } from "@beste/db";
// Read replicas for hot paths
const orders = await db.from("orders");
// Filter to recent activity
orders.where({ status: "paid" });
orders.limit(50);
// Stream typed rows out
orders.stream("json");
export default orders;
About this block

Database Query With Code EditorPRO

Browser-chrome card pairing a typed query result table on the left with a syntax-highlighted code editor on the right — sortable columns, status-toned cells, row count footer. Every label is editable; no media props required.

More Showcase blocks

View all Showcase
PRO

showcase17

Code Editor With Test Results

Browser-chrome card pairing a syntax-highlighted code editor with a live test-results panel — pass/fail rows, expandable failures, and a coverage footer. Every label is editable; no media props required.

PRO

showcase19

Code Editor With PR Review

Browser-chrome card pairing a syntax-highlighted code editor with a pull-request review panel — branch arrow, check rows with statuses, reviewer initials, and a merge footer. Every label is editable; no media props required.

PRO

showcase18

Code Editor With Live Logs

Browser-chrome card pairing a syntax-highlighted code editor with a live log stream — filter pills, color-coded levels, and a tail-mode footer. Every label is editable; no media props required.

PRO

showcase24

Files Changed With Code Editor

Browser-chrome card pairing a changed-files list on the left with a syntax-highlighted code editor on the right — status icons, +/- stats, and an active row highlight. Every label is editable; no media props required.

PRO

showcase32

GraphQL Query Plus Response

Browser-chrome card pairing two minimal code panes — GraphQL query on the left, mirrored JSON response on the right. Monochrome syntax with muted comments and a timing footer. Every label is editable; no media props required.

PRO

showcase23

Component Preview With Code Editor

Browser-chrome card pairing a live button-variant preview on the left with a syntax-highlighted code editor on the right — dotted canvas background, size pill toggle. Every label is editable; no media props required.