Playground¶

Edit the Python source or the schema below: sqlty checks, types and highlights the queries as you type. It runs in your browser. The engine is compiled to WebAssembly, and no code leaves the page.

The file tabs above the editor switch between the files sqlty check reads:

The console below the editor shows what sqlty makes of them:

Examples¶

The Example select loads a project of the examples/ directory: its queries.py, schema.sql, and the dialect, import-style, param-types and rules of its pyproject.toml. Each one is what sqlty check reads on your machine, so the page shows the same problems. Tour is the sample the page opens with, and Tour in steps walks through the same ideas one at a time.

Drag the bar between the editor and the console to share the height between them, or focus it and press the arrow keys. The page remembers the height and the font size.

Change the source¶

A single fix is a quick fix on its diagnostic: click the light bulb, or press Ctrl+. with the cursor on it. Ctrl+Z undoes any of them.

Offline¶

The docs work offline once they are open: a service worker keeps every page, and the playground once you have opened it. In Chrome or Edge, Install in the address bar adds SQLTy as an app; in Safari, Share then Add to Home Screen (iOS) or File then Add to Dock (macOS). The app opens the docs, with the playground among its shortcuts, and keeps it ready offline from its first start. Steps from ?steps=<url> need that URL to be reachable; a file opened or dropped on the page does not.

Open a docs example¶

Each Python example of these docs has a Playground link under it. It opens the example here with the schema and the [tool.sqlty] settings of its page, so you can edit it and see what changes. An example that needs a helper module, or a setting that reads files, has no link.

Share a session¶

The page keeps the Python source, the schema, the dialect and sqlty.toml in its URL, compressed, as you type. Copy link puts that URL on the clipboard: paste it in a bug report and whoever opens it sees what you see. Nothing is sent to a server, as the session lives in the part of the URL after #.

A session that compresses to more than 8000 characters gets no link: many browsers and chat apps cut longer URLs.

Embed¶

Add ?embed to a link to show only the editor, the console and Fix all, with Open in playground for the other controls. It fills the window, so it fits an <iframe> in a blog post or slides:

<iframe src="https://sqlty.kuncar.dev/playground/?embed#..." width="800" height="500"></iframe>

Link previews in social apps show the SQLTy card, not the session: their crawlers never see the part of the URL after #.

Walk through steps¶

Steps are sessions in order, each one built on the one before: a talk, a lesson or a code review, played in the page. The bar above the files moves between them, and Reset brings the current step back to how it started, so a step can be edited live without losing it.

Load steps from Open a file... in the Example select, by dropping a .json file on the playground, or with a link: playground/?steps=<url> loads the file at that URL, which must allow cross-origin requests, as raw.githubusercontent.com and gist.githubusercontent.com do. Once loaded, the steps are part of the session, so Copy link shares them while they fit in a link.

{
  "title": "Nullable joins",
  "steps": [
    {
      "title": "A LEFT JOIN",
      "schema": "CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT NOT NULL);",
      "source": "q = \"--sql\\nSELECT name FROM users\"\n",
      "panel": "types",
      "notes": "Each column is typed from the schema."
    },
    { "title": "A typo", "source": "q = \"--sql\\nSELECT nme FROM users\"\n", "panel": "problems" }
  ]
}

Present¶

Present fills the screen with the playground, and A− and A+ change the font size of the editor and the console, for a projector or a screen share.

On macOS, Command works as Ctrl.