Repository navigation
Expand file tree
/
Copy pathgetting-started.html
More file actions
205 lines (203 loc) · 87.3 KB
/
Copy pathgetting-started.html
File metadata and controls
205 lines (203 loc) · 87.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Getting Started with SQLRooms | SQLRooms</title>
<meta name="description" content="An open source React toolkit for human + agent collaborative analytics apps">
<meta name="generator" content="VitePress v2.0.0-alpha.19">
<link rel="preload stylesheet" href="/assets/style.GttFTkQB.css" as="style">
<link rel="preload stylesheet" href="/vp-icons.css" as="style">
<script type="module" src="/assets/chunks/metadata.fe281f1a.js"></script>
<script type="module" src="/assets/app.BQlhqzmk.js"></script>
<link rel="preload" href="/assets/inter-roman-latin.BOE8-mWI.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/assets/chunks/theme.Dgecjb1A.js">
<link rel="modulepreload" href="/assets/chunks/framework.DPaNRfRs.js">
<link rel="modulepreload" href="/assets/getting-started.md.WWim_SW6.lean.js">
<link rel="icon" href="/logo.svg" type="image/svg+xml">
<meta name="google-site-verification" content="x-FE_DDWM1BS8Eu4JOG0el7pL1gWJgIM-fwFl2EG4OU">
<script id="check-dark-mode">(()=>{let e=localStorage.getItem(`vitepress-theme-appearance`)||`auto`,t=window.matchMedia(`(prefers-color-scheme: dark)`).matches;(!e||e===`auto`?t:e===`dark`)&&document.documentElement.classList.add(`dark`)})();</script>
<script id="check-mac-os">document.documentElement.classList.toggle(`mac`,/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
<link rel="canonical" href="https://sqlrooms.org/getting-started.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Getting Started with SQLRooms">
<meta property="og:description" content="An open source React toolkit for human + agent collaborative analytics apps">
<meta property="og:image" content="https://sqlrooms.org/sqlrooms-og.webp">
<meta property="og:url" content="https://sqlrooms.org/getting-started.html">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Getting Started with SQLRooms">
<meta name="twitter:description" content="An open source React toolkit for human + agent collaborative analytics apps">
<meta name="twitter:image" content="https://sqlrooms.org/sqlrooms-og.webp">
</head>
<body>
<div id="app"><div class="" data-v-2fad8a9b><!----><div class="Layout" data-v-2fad8a9b data-v-53f480f5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-e2663537></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-e2663537>Skip to content</a><!--]--><!----><header class="VPNav" data-v-53f480f5 data-v-14cf5896><div class="VPNavBar has-sidebar top" data-v-14cf5896 data-v-9f3e8058><div class="wrapper" data-v-9f3e8058><div class="container" data-v-9f3e8058><div class="title" data-v-9f3e8058><div class="VPNavBarTitle has-sidebar" data-v-9f3e8058 data-v-eaa76576><a class="title" href="/" data-v-eaa76576><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.svg" alt data-v-0fb946b3><!--]--><span data-v-eaa76576>SQLRooms</span><!--[--><!--]--></a></div></div><div class="content" data-v-9f3e8058><div class="content-body" data-v-9f3e8058><!--[--><!--]--><div class="VPNavBarSearch search" data-v-9f3e8058 data-v-df279f03><!--[--><button type="button" class="VPNavBarSearchButton" aria-label="Search" aria-keyshortcuts="/ control+k meta+k" data-v-df279f03 data-v-1f7fc8f9><span class="vpi-search" aria-hidden="true" data-v-1f7fc8f9></span><span class="text" data-v-1f7fc8f9>Search</span><span class="keys" aria-hidden="true" data-v-1f7fc8f9><kbd class="key-cmd" data-v-1f7fc8f9>⌘</kbd><kbd class="key-ctrl" data-v-1f7fc8f9>Ctrl</kbd><kbd data-v-1f7fc8f9>K</kbd></span></button><!----><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-9f3e8058 data-v-43773075><span id="main-nav-aria-label" class="visually-hidden" data-v-43773075> Main Navigation </span><ul class="list" data-v-43773075><!--[--><li data-v-43773075><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-43773075 data-v-9b2756db><!--[--><span data-v-9b2756db>Home</span><!--]--></a></li><li data-v-43773075><a class="VPLink link VPNavBarMenuLink" href="/overview.html" tabindex="0" data-v-43773075 data-v-9b2756db><!--[--><span data-v-9b2756db>Overview</span><!--]--></a></li><li data-v-43773075><a class="VPLink link VPNavBarMenuLink" href="/examples.html" tabindex="0" data-v-43773075 data-v-9b2756db><!--[--><span data-v-9b2756db>Examples</span><!--]--></a></li><li data-v-43773075><a class="VPLink link VPNavBarMenuLink" href="/case-studies.html" tabindex="0" data-v-43773075 data-v-9b2756db><!--[--><span data-v-9b2756db>Case Studies</span><!--]--></a></li><li data-v-43773075><a class="VPLink link VPNavBarMenuLink active" href="/getting-started.html" tabindex="0" data-v-43773075 data-v-9b2756db><!--[--><span data-v-9b2756db>Get started</span><!--]--></a></li><li data-v-43773075><a class="VPLink link VPNavBarMenuLink" href="/packages.html" tabindex="0" data-v-43773075 data-v-9b2756db><!--[--><span data-v-9b2756db>API v0.29.0</span><!--]--></a></li><!--]--></ul></nav><!----><div class="VPNavBarAppearance appearance" data-v-9f3e8058 data-v-e48ead08><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-e48ead08 data-v-3c5fcb97 data-v-ebc28de1><span class="check" data-v-ebc28de1><span class="icon" data-v-ebc28de1><!--[--><span class="vpi-sun sun" data-v-3c5fcb97></span><span class="vpi-moon moon" data-v-3c5fcb97></span><!--]--></span></span></button></div><ul class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-9f3e8058 data-v-e6cbc484 data-v-f70cf198><!--[--><li class="item" data-v-f70cf198><a class="VPSocialLink no-icon" href="/join-slack" aria-label="slack" rel="me noopener" data-v-f70cf198 data-v-3615a943><span class="vpi-social-slack"></span></a></li><li class="item" data-v-f70cf198><a class="VPSocialLink no-icon" href="https://github.com/sqlrooms/sqlrooms" aria-label="github" target="_blank" rel="me noopener" data-v-f70cf198 data-v-3615a943><span class="vpi-social-github"></span></a></li><!--]--></ul><div class="VPFlyout VPNavBarExtra extra" data-v-9f3e8058 data-v-95a6d757 data-v-7363103e><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-7363103e><span class="vpi-more-horizontal icon" data-v-7363103e></span></button><div class="menu" data-v-7363103e><div class="VPMenu" data-v-7363103e data-v-35a39913><!----><!--[--><!--[--><!----><div class="group" data-v-95a6d757><div class="item appearance" data-v-95a6d757><p class="label" data-v-95a6d757>Appearance</p><div class="appearance-action" data-v-95a6d757><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-95a6d757 data-v-3c5fcb97 data-v-ebc28de1><span class="check" data-v-ebc28de1><span class="icon" data-v-ebc28de1><!--[--><span class="vpi-sun sun" data-v-3c5fcb97></span><span class="vpi-moon moon" data-v-3c5fcb97></span><!--]--></span></span></button></div></div></div><div class="group" data-v-95a6d757><div class="item social-links" data-v-95a6d757><ul class="VPSocialLinks social-links-list" data-v-95a6d757 data-v-f70cf198><!--[--><li class="item" data-v-f70cf198><a class="VPSocialLink no-icon" href="/join-slack" aria-label="slack" rel="me noopener" data-v-f70cf198 data-v-3615a943><span class="vpi-social-slack"></span></a></li><li class="item" data-v-f70cf198><a class="VPSocialLink no-icon" href="https://github.com/sqlrooms/sqlrooms" aria-label="github" target="_blank" rel="me noopener" data-v-f70cf198 data-v-3615a943><span class="vpi-social-github"></span></a></li><!--]--></ul></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-9f3e8058 data-v-2a5ed0cd><span class="container" data-v-2a5ed0cd><span class="top" data-v-2a5ed0cd></span><span class="middle" data-v-2a5ed0cd></span><span class="bottom" data-v-2a5ed0cd></span></span></button></div></div></div></div><div class="divider" data-v-9f3e8058><div class="divider-line" data-v-9f3e8058></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-53f480f5 data-v-02d225e3><div class="container" data-v-02d225e3><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-02d225e3><span class="vpi-align-left menu-icon" data-v-02d225e3></span><span class="menu-text" data-v-02d225e3>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-allow-mismatch="style" data-v-02d225e3 data-v-f6433228><button data-v-f6433228>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-53f480f5 data-v-95f45de3><div class="curtain" data-v-95f45de3></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-95f45de3><span class="visually-hidden" id="sidebar-aria-label" data-v-95f45de3> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-f2c1a4d1><section class="VPSidebarItem level-0" data-v-f2c1a4d1 data-v-8a83fa84><div class="item" role="button" tabindex="0" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><h2 class="text" data-v-8a83fa84>Introduction</h2><!----></div><ul class="items" data-v-8a83fa84><li data-v-8a83fa84><!--[--><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/overview.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Overview</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/key-concepts.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Key Concepts</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/modular-architecture.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Modular Architecture</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/deployment-scenarios.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Deployment Scenarios</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/whats-new.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>What's New</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/upgrade-guide.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Upgrade Guide</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><div class="no-transition group" data-v-f2c1a4d1><section class="VPSidebarItem level-0" data-v-f2c1a4d1 data-v-8a83fa84><div class="item" role="button" tabindex="0" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><h2 class="text" data-v-8a83fa84>Developer Guide</h2><!----></div><ul class="items" data-v-8a83fa84><li data-v-8a83fa84><!--[--><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/getting-started.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Getting Started</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/state-management.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>State Management</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/layout.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Layout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/persistence.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Persistence</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/artifacts.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Artifacts</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/blocks-and-documents.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Blocks and Block Documents</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/commands.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Commands</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/query-cancellation.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Query Cancellation</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/theming.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Theming</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/offline-use.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Offline Use</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><div class="no-transition group" data-v-f2c1a4d1><section class="VPSidebarItem level-0" data-v-f2c1a4d1 data-v-8a83fa84><div class="item" role="button" tabindex="0" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><h2 class="text" data-v-8a83fa84>Examples</h2><!----></div><ul class="items" data-v-8a83fa84><li data-v-8a83fa84><!--[--><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/examples.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Example Apps</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/case-studies.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Case Studies</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><div class="no-transition group" data-v-f2c1a4d1><section class="VPSidebarItem level-0" data-v-f2c1a4d1 data-v-8a83fa84><div class="item" role="button" tabindex="0" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><h2 class="text" data-v-8a83fa84>Reference</h2><!----></div><ul class="items" data-v-8a83fa84><li data-v-8a83fa84><!--[--><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/packages.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Package Reference</p><!--]--></a><!----></div><!----></div><section class="VPSidebarItem level-1" data-v-8a83fa84><div class="item" role="button" tabindex="0" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><h3 class="text" data-v-8a83fa84>Core Packages</h3><!----></div><ul class="items" data-v-8a83fa84><li data-v-8a83fa84><!--[--><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/artifacts/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>artifacts</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/blocks/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>blocks</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/db/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>db</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/duckdb/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>duckdb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/duckdb-core/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>duckdb-core</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/layout/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>layout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/room-shell/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>room-shell</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/room-store/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>room-store</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/ui/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>ui</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section><section class="VPSidebarItem level-1" data-v-8a83fa84><div class="item" role="button" tabindex="0" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><h3 class="text" data-v-8a83fa84>AI Packages</h3><!----></div><ul class="items" data-v-8a83fa84><li data-v-8a83fa84><!--[--><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/ai/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>ai</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/ai-core/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>ai-core</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/ai-settings/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>ai-settings</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section><section class="VPSidebarItem level-1" data-v-8a83fa84><div class="item" role="button" tabindex="0" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><h3 class="text" data-v-8a83fa84>Feature Packages</h3><!----></div><ul class="items" data-v-8a83fa84><li data-v-8a83fa84><!--[--><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/codemirror/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>codemirror</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/color-scales/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>color-scales</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/cosmos/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>cosmos</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/data-table/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>data-table</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/deck/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>deck</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/documents/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>documents</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/dropzone/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>dropzone</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/kepler/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>kepler</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/monaco-editor/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>monaco-editor</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/mosaic/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>mosaic</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/motherduck/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>motherduck</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/recharts/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>recharts</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/schema-tree/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>schema-tree</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/sql-editor/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>sql-editor</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/vega/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>vega</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section><section class="VPSidebarItem level-1" data-v-8a83fa84><div class="item" role="button" tabindex="0" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><h3 class="text" data-v-8a83fa84>Experimental Packages</h3><!----></div><ul class="items" data-v-8a83fa84><li data-v-8a83fa84><!--[--><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/ai-rag/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>ai-rag</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/app-runtime/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>app-runtime</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/canvas/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>canvas</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/cells/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>cells</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/crdt/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>crdt</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/db-settings/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>db-settings</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/discuss/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>discuss</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/duckdb-node/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>duckdb-node</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/notebook/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>notebook</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/pivot/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/python/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>python</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/s3-browser/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>s3-browser</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/webcontainer/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>webcontainer</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section><section class="VPSidebarItem level-1" data-v-8a83fa84><div class="item" role="button" tabindex="0" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><h3 class="text" data-v-8a83fa84>Utility Packages</h3><!----></div><ul class="items" data-v-8a83fa84><li data-v-8a83fa84><!--[--><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/utils/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>utils</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/llms.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Docs for LLMs</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-53f480f5 data-v-cb9c851e><div class="VPDoc has-sidebar has-aside" data-v-cb9c851e data-v-58e6fef3><!--[--><!--]--><div class="container" data-v-58e6fef3><div class="aside" data-v-58e6fef3><div class="aside-curtain" data-v-58e6fef3></div><div class="aside-container" data-v-58e6fef3><div class="aside-content" data-v-58e6fef3><div class="VPDocAside" data-v-58e6fef3 data-v-c18230bb><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-c18230bb data-v-2c76e3c3><div class="content" data-v-2c76e3c3><div class="outline-marker" data-v-2c76e3c3></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-2c76e3c3>On this page</div><ul class="VPDocOutlineItem root" data-v-2c76e3c3 data-v-b23a9181><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-c18230bb></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-58e6fef3><div class="content-container" data-v-58e6fef3><!--[--><!--]--><main class="main" data-v-58e6fef3><div style="position:relative;" class="vp-doc _getting-started" data-v-58e6fef3><div><div style="display:none;" hidden="true" aria-hidden="true" data-nosnippet>Are you an LLM? You can read better optimized documentation at /getting-started.md for this page in Markdown format</div><h1 id="getting-started-with-sqlrooms" tabindex="-1">Getting Started with SQLRooms <a class="header-anchor" href="#getting-started-with-sqlrooms" aria-label="Permalink to “Getting Started with SQLRooms”"></a></h1><p>SQLRooms is a powerful framework and a set of building blocks for creating DuckDB-backed analytics applications in React. This guide will help you integrate SQLRooms into your application. For a detailed overview of the framework's architecture and core ideas, check out the <a href="/key-concepts.html">Key Concepts</a> and <a href="/modular-architecture.html">Modular Architecture</a> pages.</p><h2 id="try-the-minimal-example" tabindex="-1">Try the Minimal Example <a class="header-anchor" href="#try-the-minimal-example" aria-label="Permalink to “Try the Minimal Example”"></a></h2><p>The <a href="https://github.com/sqlrooms/examples/tree/main/minimal" target="_blank" rel="noreferrer">Minimal Example</a> is the quickest way to see SQLRooms in action with the smallest possible setup. It demonstrates loading a CSV data source and running SQL queries with <code>useSql()</code> in a barebones Vite + React app.</p><p>To create a new project from the minimal example, run:</p><div class="language-bash"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> giget</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> gh:sqlrooms/examples/minimal</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> my-minimal-app/</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">cd</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> my-minimal-app</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span></span></code></pre></div><hr><h2 id="try-the-get-started-example" tabindex="-1">Try the Get Started Example <a class="header-anchor" href="#try-the-get-started-example" aria-label="Permalink to “Try the Get Started Example”"></a></h2><p>The <a href="https://github.com/sqlrooms/examples/tree/main/get-started" target="_blank" rel="noreferrer">Get Started Example</a> is a more feature-rich starter template that demonstrates a typical SQLRooms application structure, including panels, layout, and configuration.</p><p>To create a new project from the get-started example, run:</p><div class="language-bash"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> giget</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> gh:sqlrooms/examples/get-started</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> myapp/</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">cd</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> myapp</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span></span></code></pre></div><p>This Vite application demonstrates loading a CSV data source and running SQL queries with <code>useSql()</code>, along with a more complete app shell and layout.</p><h2 id="manual-setup" tabindex="-1">Manual Setup <a class="header-anchor" href="#manual-setup" aria-label="Permalink to “Manual Setup”"></a></h2><h3 id="prerequisites" tabindex="-1">Prerequisites <a class="header-anchor" href="#prerequisites" aria-label="Permalink to “Prerequisites”"></a></h3><p>Your application should have the following dependencies:</p><ul><li><a href="https://react.dev/" target="_blank" rel="noreferrer">React 18+</a> (React 19 is supported)</li><li><a href="https://tailwindcss.com/" target="_blank" rel="noreferrer">Tailwind CSS</a></li><li><a href="https://nodejs.org/" target="_blank" rel="noreferrer">Node.js</a> >= 22</li></ul><p>SQLRooms uses <a href="https://zustand.docs.pmnd.rs" target="_blank" rel="noreferrer">Zustand</a> for state management and <a href="https://zod.dev" target="_blank" rel="noreferrer">Zod</a> for schema validation internally, but you don't need to install them separately</p><h3 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to “Installation”"></a></h3><p>Install the required SQLRooms packages:</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-66" id="tab-67" checked><label data-title="npm" for="tab-67">npm</label><input type="radio" name="group-66" id="tab-68"><label data-title="pnpm" for="tab-68">pnpm</label><input type="radio" name="group-66" id="tab-69"><label data-title="yarn" for="tab-69">yarn</label></div><div class="blocks"><div class="language-bash active"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @sqlrooms/room-shell</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @sqlrooms/duckdb</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @sqlrooms/ui</span></span></code></pre></div><div class="language-bash"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @sqlrooms/room-shell</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @sqlrooms/duckdb</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @sqlrooms/ui</span></span></code></pre></div><div class="language-bash"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @sqlrooms/room-shell</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @sqlrooms/duckdb</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @sqlrooms/ui</span></span></code></pre></div></div></div><h3 id="configure-tailwind-css" tabindex="-1">Configure Tailwind CSS <a class="header-anchor" href="#configure-tailwind-css" aria-label="Permalink to “Configure Tailwind CSS”"></a></h3><p>You can follow <a href="https://tailwindcss.com/docs/installation/using-vite" target="_blank" rel="noreferrer">this guide</a> to install and configure Tailwind 4.</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-77" id="tab-78" checked><label data-title="npm" for="tab-78">npm</label><input type="radio" name="group-77" id="tab-79"><label data-title="pnpm" for="tab-79">pnpm</label><input type="radio" name="group-77" id="tab-80"><label data-title="yarn" for="tab-80">yarn</label></div><div class="blocks"><div class="language-bash active"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> tailwindcss@4</span></span></code></pre></div><div class="language-bash"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> tailwindcss@4</span></span></code></pre></div><div class="language-bash"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> tailwindcss@4</span></span></code></pre></div></div></div><p>SQLRooms provides a Tailwind preset that includes all the necessary styles. Make sure to import the preset Tailwind styles in your main CSS file:</p><div class="language-css"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">@import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@sqlrooms/ui/tailwind-preset.css'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h3 id="setting-up-the-room-store" tabindex="-1">Setting Up the Room Store <a class="header-anchor" href="#setting-up-the-room-store" aria-label="Permalink to “Setting Up the Room Store”"></a></h3><ol><li>Define your application state type:</li></ol><div class="language-typescript"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> createRoomShellSlice,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> createRoomStore,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> RoomShellSliceState,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@sqlrooms/room-shell'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">/**</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> * The whole app state.</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> */</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> RoomState</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> RoomShellSliceState</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> &</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> // Add your custom app state types here</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> // If using additional slices:</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> // & SqlEditorSliceState</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span></code></pre></div><ol start="2"><li>Create your room store:</li></ol><div class="language-typescript"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {DatabaseIcon} </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'lucide-react'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {MainView} </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './components/MainView'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {DataSourcesPanel} </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './components/DataSourcesPanel'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">/**</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> * Create the room store. You can combine your custom state and logic</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> * with the slices from the SQLRooms modules.</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> */</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">roomStore</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">useRoomStore</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createRoomStore</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">RoomState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>(</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">set</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">store</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ({</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> ...</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createRoomShellSlice</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> config: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'My SQLRooms App'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dataSources: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> tableName: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'earthquakes'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'url'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'https://huggingface.co/datasets/sqlrooms/earthquakes/resolve/main/earthquakes.parquet'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> layout: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> config: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'split'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> direction: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'row'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> children: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'panel'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'data-sources'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, defaultSize: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'30%'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">},</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'main'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> panels: {</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'data-sources'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Data Sources'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> icon: DatabaseIcon,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> component: DataSourcesPanel,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Main view'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> component: MainView,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })(set, get, store),</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> // Add additional slices if needed</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> // ...createSqlEditorSlice()(set, get, store),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><ol start="3"><li>Optionally add persistence using the <code>persistSliceConfigs</code> helper:</li></ol><div class="language-typescript"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> BaseRoomConfig,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> LayoutConfig,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> persistSliceConfigs,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@sqlrooms/room-shell'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">roomStore</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">useRoomStore</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createRoomStore</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">RoomState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>(</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> persistSliceConfigs</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'app-state-storage'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> sliceConfigSchemas: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> room: BaseRoomConfig,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> layout: LayoutConfig,</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> // Add other slice configs as needed</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> // sqlEditor: SqlEditorSliceConfig,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">set</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">store</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ({</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> // Store configuration as shown above</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> ...</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createRoomShellSlice</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> config: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'My SQLRooms App'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dataSources: [],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> layout: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> config: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'split'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> direction: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'row'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> children: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'panel'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'data-sources'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, defaultSize: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'30%'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">},</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'main'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> panels: {</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> // Panel definitions</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })(set, get, store),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="using-the-room-store" tabindex="-1">Using the Room Store <a class="header-anchor" href="#using-the-room-store" aria-label="Permalink to “Using the Room Store”"></a></h3><p>Wrap your application with a <code>RoomShell</code> which provides the room store context:</p><div class="language-typescript"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {RoomShell} </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@sqlrooms/room-shell'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {ThemeProvider} </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@sqlrooms/ui'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {roomStore} </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './store'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Room</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> <</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">ThemeProvider defaultTheme</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"light"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> storageKey</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"sqlrooms-ui-theme"</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">></span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> <</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">RoomShell className</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"h-screen"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> roomStore</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{roomStore}</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">></span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> <</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">RoomShell.Sidebar </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">/></span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> <</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">RoomShell.LayoutComposer </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">/></span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> <</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">RoomShell.LoadingProgress </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">/></span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> <</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">RoomShell.CommandPalette </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">/></span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> </</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">RoomShell</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">></span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> </</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">ThemeProvider</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><p>Access the store in your components:</p><div class="language-typescript"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {useRoomStore} </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './store'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> YourComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> // Access config from room</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> roomConfig</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useRoomStore</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">state</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> state.room.config);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> // Access database state</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> tables</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useRoomStore</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">state</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> state.db.tables);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> // Check if a table is ready</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> tableReady</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useRoomStore</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">state</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> state.db.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">findTableByName</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'earthquakes'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> );</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> // Your component JSX</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> );</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="querying-data" tabindex="-1">Querying Data <a class="header-anchor" href="#querying-data" aria-label="Permalink to “Querying Data”"></a></h3><p>Use the <code>useSql</code> hook from <code>@sqlrooms/duckdb</code> to run SQL queries:</p><div class="language-typescript"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {useSql} </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@sqlrooms/duckdb'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {useRoomStore} </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './store'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MainView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> tableReady</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useRoomStore</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">state</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> state.db.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">findTableByName</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'earthquakes'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> );</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">isLoading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useSql</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><{</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> count</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> maxMag</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }>({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> query: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> SELECT</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> COUNT(*)::int AS count,</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> max(Magnitude) AS maxMag</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> FROM earthquakes</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> `</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> enabled: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(tableReady),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (isLoading) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Loading</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">...</</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">div</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (error) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Error: {error.message}</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"></</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">div</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> row</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> data?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">toArray</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Total </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">records</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">row</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">?.</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Max </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">magnitude</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">row</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">?.</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">maxMag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> </</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">div</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> );</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>The <code>useSql</code> hook automatically re-runs queries when the database state changes and provides loading/error states out of the box.</p><h2 id="need-help" tabindex="-1">Need Help? <a class="header-anchor" href="#need-help" aria-label="Permalink to “Need Help?”"></a></h2><ul><li>Start or join a discussion on <a href="https://github.com/sqlrooms/sqlrooms/discussions" target="_blank" rel="noreferrer">GitHub Discussions</a></li><li>File an issue on <a href="https://github.com/sqlrooms/sqlrooms/issues" target="_blank" rel="noreferrer">GitHub</a></li></ul></div></div></main><footer class="VPDocFooter" data-v-58e6fef3 data-v-d2daf589><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-d2daf589><span class="visually-hidden" id="doc-footer-aria-label" data-v-d2daf589>Pager</span><div class="pager" data-v-d2daf589><a class="VPLink link pager-link prev" href="/upgrade-guide.html" data-v-d2daf589><!--[--><span class="desc" data-v-d2daf589>Previous page</span><span class="title" data-v-d2daf589>Upgrade Guide</span><!--]--></a></div><div class="pager" data-v-d2daf589><a class="VPLink link pager-link next" href="/state-management.html" data-v-d2daf589><!--[--><span class="desc" data-v-d2daf589>Next page</span><span class="title" data-v-d2daf589>State Management</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!----><div class="site-footer" data-v-2fad8a9b><div class="sponsors-footer" data-v-2fad8a9b><div class="sponsor-item" data-v-2fad8a9b><a href="https://www.openvisualization.org/" target="_blank" rel="noopener noreferrer" data-v-2fad8a9b><img width="132" height="40" src="/openvis.svg" alt="Open Visualization Logo" decoding="async" class="openvis-logo openvis-light" data-v-2fad8a9b><img width="132" height="40" src="/openvis-white.svg" alt="Open Visualization Logo" decoding="async" class="openvis-logo openvis-dark" data-v-2fad8a9b></a></div><div class="sponsor-item" data-v-2fad8a9b><a href="https://openjsf.org" target="_blank" rel="noopener noreferrer" data-v-2fad8a9b><img width="126" height="40" src="/openjsf-logo.svg" alt="OpenJS Foundation Logo" decoding="async" class="openjsf-logo openjsf-light" data-v-2fad8a9b><img width="127" height="40" src="/openjs-foundation-logo-horizontal-white.svg" alt="OpenJS Foundation Logo" decoding="async" class="openjsf-logo openjsf-dark" data-v-2fad8a9b></a></div><div class="sponsor-item" data-v-2fad8a9b><a href="https://vis.gl/" target="_blank" rel="noopener noreferrer" class="visgl-link" data-v-2fad8a9b><img width="117" height="30" src="/visgl-logo-color.svg" alt="VIS.GL Logo" decoding="async" class="visgl-logo visgl-light" data-v-2fad8a9b><img width="117" height="30" src="/visgl-logo-color-dark_background.svg" alt="VIS.GL Logo" decoding="async" class="visgl-logo visgl-dark" data-v-2fad8a9b></a></div><div class="sponsor-item" data-v-2fad8a9b> Supported by <a href="https://location.foursquare.com" target="_blank" rel="noopener noreferrer" data-v-2fad8a9b><img width="100" height="32" src="/foursquare-logo.svg" alt="Foursquare Logo" decoding="async" class="foursquare-logo" data-v-2fad8a9b></a></div><div class="sponsor-item horizontal" data-v-2fad8a9b> Deploys by <a href="https://www.netlify.com" target="_blank" rel="noopener noreferrer" data-v-2fad8a9b><img src="https://www.netlify.com/assets/badges/netlify-badge-light.svg" alt="Deploys by Netlify" class="netlify-logo netlify-light" data-v-2fad8a9b><img src="https://www.netlify.com/assets/badges/netlify-badge-dark.svg" alt="Deploys by Netlify" class="netlify-logo netlify-dark" data-v-2fad8a9b></a></div></div><div class="footer__copyright" data-v-2fad8a9b><div class="footer-copy" data-v-2fad8a9b> Copyright <a href="https://openjsf.org" data-v-2fad8a9b>OpenJS Foundation</a> and vis.gl contributors. All rights reserved. The <a href="https://openjsf.org" data-v-2fad8a9b>OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org" data-v-2fad8a9b>OpenJS Foundation</a>, please see our <a href="https://trademark-policy.openjsf.org" data-v-2fad8a9b>Trademark Policy</a> and <a href="https://trademark-list.openjsf.org" data-v-2fad8a9b>Trademark List</a>. Trademarks and logos not indicated on the <a href="https://trademark-list.openjsf.org" data-v-2fad8a9b>list of OpenJS Foundation trademarks</a> are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.<br data-v-2fad8a9b><br data-v-2fad8a9b><a href="https://openjsf.org" data-v-2fad8a9b>The OpenJS Foundation</a> | <a href="https://terms-of-use.openjsf.org" data-v-2fad8a9b>Terms of Use</a> | <a href="https://privacy-policy.openjsf.org" data-v-2fad8a9b>Privacy Policy</a> | <a href="https://bylaws.openjsf.org" data-v-2fad8a9b>Bylaws</a> | <a href="https://code-of-conduct.openjsf.org" data-v-2fad8a9b>Code of Conduct</a> | <a href="https://trademark-policy.openjsf.org" data-v-2fad8a9b>Trademark Policy</a> | <a href="https://trademark-list.openjsf.org" data-v-2fad8a9b>Trademark List</a> | <a href="https://www.linuxfoundation.org/cookies" data-v-2fad8a9b>Cookie Policy</a></div></div></div><!--]--></div></div></div>
</body>
</html>