Kysely Playground

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

Guide

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 "https://esm.run/is-number@7.0.0/index.js"

Playground Link

API

You can embed the playground in your site. See kysely.dev

URL Fragment

Set initial State via url fragment.

const state = {
  dialect: "postgres",
  editors: {
    type: "// type editor contents",
    query: "// query editor contents",
  },
}
const fragment = "r" + encodedURIComponent(JSON.stringify(state))
const url = "https://kyse.link" + fragment

SearchParams

There are some extra flags mostly for iframe. Note that when user opens a new tab by 'open-in-new-tab' button, all SearchParams are removed.

Example: https://kyse.link?theme=dark&open=1&theme=dark