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}]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"You can embed the playground in your site. See kysely.dev
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" + fragmentThere 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.
| key | value | description |
|---|---|---|
| open | any | show floating 'open-in-new-tab' button |
| theme | 'light' | 'dark' | override theme |
| nomore | any | hide 'More' button |
| notheme | any | hide 'switch-theme' button |
| nohotkey | any | disable all hotkeys |
Example: https://kyse.link?theme=dark&open=1&theme=dark