Skip to content


Repository files navigation

Playground for Kysely, with vscode-like experiences including type checking and auto suggestions. Supports built-in dialects, various versions and unrealeased branches.


There are three panels in playground. From left to right, type-editor, query-editor and result.

In type-editor you can declare any kind of typescript types. For Kysely's type-safety and autocompletion to work, Database type must be declared with export. If you don't familiar with Kysely, checkout the official guide for more information about database types.

In query-editor you can write the query. db is pre-defined Kysely instance with Database type from type-editor. You can import any other types from type-editor: import {..} from "type-editor".

For advanced usage, you can set the result of db.*.execute() by setting $playground.result:

$playground.result = { rows: [{id:3},{id:4}] };
$playground.log(await db.selectFrom('person').select("id").execute())
// [{id:3},{id:4}]

Playground Link

For more advanced usage, you can import esm module directly from url:

// @ts-ignore
import isNumber from ""

Playground Link


Set states


<encoded> = encodeURIComponent(JSON.strinify(<state>))

<state> = Type Definition



key value description
theme 'light' | 'dark' override theme
open any show floating 'open-in-new-tab' button
nomore any hide 'More' button
notheme any hide 'switch-theme' button
nohotkey any disable all hotkeys

When user opens a new tab with 'open-in-new-tab' button, all SearchParams are removed.