1"use strict";(globalThis.webpackChunkkysely_site=globalThis.webpackChunkkysely_site||[]).push([[7603],{6333(e,n,r){r.r(n),r.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"runtimes/browser","title":"Browser","description":"Use Kysely in the browser to build type-safe queries and compile SQLite SQL with DummyDriver, without a database connection.","source":"@site/docs/runtimes/browser.md","sourceDirName":"runtimes","slug":"/runtimes/browser","permalink":"/docs/runtimes/browser","draft":false,"unlisted":false,"editUrl":"https://github.com/kysely-org/kysely/tree/master/site/docs/runtimes/browser.md","tags":[],"version":"current","frontMatter":{"description":"Use Kysely in the browser to build type-safe queries and compile SQLite SQL with DummyDriver, without a database connection."},"sidebar":"tutorialSidebar","previous":{"title":"Running on Deno","permalink":"/docs/runtimes/deno"},"next":{"title":"Dialects","permalink":"/docs/dialects"}}');var s=r(1058),i=r(4801);const o={description:"Use Kysely in the browser to build type-safe queries and compile SQLite SQL with DummyDriver, without a database connection."},a="Browser",l={},c=[];function d(e){const n={code:"code",h1:"h1",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"browser",children:"Browser"})}),"\n",(0,s.jsx)(n.p,{children:"Kysely also runs in the browser. Here's a minimal example:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"import {\n Kysely,\n Generated,\n DummyDriver,\n SqliteAdapter,\n SqliteIntrospector,\n SqliteQueryCompiler,\n} from 'kysely'\n\ninterface Person {\n id: Generated<number>\n first_name: string\n last_name: string | null\n}\n\ninterface Database {\n person: Person\n}\n\nconst db = new Kysely<Database>({\n dialect: {\n createAdapter() {\n return new SqliteAdapter()\n },\n createDriver() {\n return new DummyDriver()\n },\n createIntrospector(db: Kysely<unknown>) {\n return new SqliteIntrospector(db)\n },\n createQueryCompiler() {\n return new SqliteQueryCompiler()\n },\n },\n})\n\nwindow.addEventListener('load', () => {\n const sql = db.selectFrom('person').select('id').compile()\n\n const result = document.createElement('span')\n result.id = 'result'\n result.innerHTML = sql.sql\n\n document.body.appendChild(result)\n})\n"})})]})}function u(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.