Public
HTTP
nbbaier-sqliteexplorerapp.web.val.run
v86
June 19, 2024
Readme
View and interact with your Val Town SQLite data. It's based off Steve's excellent SQLite Admin val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by LibSQL Studio by invisal. This is now more an SPA, with tables, queries and results showing up on the same page.
Install the latest stable version (v86) by forking this val:
Login to your SQLite Explorer with password authentication with your Val Town API Token as the password.
- improve error handling
- improve table formatting
- sticky table headers
- add codemirror
- add loading indication to the run button (initial version shipped)
- add ability to favorite queries
- add saving of last query run for a table (started)
- add visible output for non-query statements
- add schema viewing
- add refresh to table list sidebar after
CREATE/DROP/ALTERstatements - add automatic execution of initial select query on double click
- add views to the sidebar
- add triggers to sidebar
- add upload from SQL, CSV and JSON
- add ability to connect to a non-val town Turso database
- fix wonky sidebar separator height problem (thanks to @stevekrouse)
- make result tables scrollable
- add export to CSV, and JSON (CSV and JSON helper functions written in this val. Thanks to @pomdtr for merging the initial version!)
- add listener for cmd+enter to submit query
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
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
import { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=50";
import { iframeHandler } from "https://esm.town/v/nbbaier/iframeHandler";
import { resetStyle } from "https://esm.town/v/nbbaier/resetStyle";
import { sqlToCSV, sqlToJSON } from "https://esm.town/v/nbbaier/sqliteExportHelpers";
import {
EditorSection,
MockTable,
Separator,
Table,
TablesList,
} from "https://esm.town/v/nbbaier/sqliteStudioComponents";
import { sqliteStyle } from "https://esm.town/v/nbbaier/sqliteStyle";
import { passwordAuth } from "https://esm.town/v/pomdtr/password_auth";
import { verifyToken } from "https://esm.town/v/pomdtr/verifyToken";
import { ResultSet, sqlite } from "https://esm.town/v/std/sqlite";
import { reloadOnSaveFetchMiddleware } from "https://esm.town/v/stevekrouse/reloadOnSave";
import { Hono } from "npm:hono";
import type { FC } from "npm:hono/jsx";
import { jsxRenderer } from "npm:hono/jsx-renderer";
import papa from "npm:papaparse";
const HTML: FC = ({ children }) => {
return (
<html>
<head>
<title>SQLite Explorer</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
rel="stylesheet"
/>
<style
dangerouslySetInnerHTML={{ __html: resetStyle }}
/>
<style
dangerouslySetInnerHTML={{ __html: sqliteStyle }}
/>
<script src="https://unpkg.com/htmx.org@1.9.9/dist/htmx.min.js"></script>
<script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
<script type="module" src="https://esm.town/v/nbbaier/resizeScript" />
<script type="module" src="https://esm.town/v/nbbaier/tableSelectScript" />
<script
type="module"
src="https://raw.esm.sh/code-mirror-web-component@0.0.20/dist/code-mirror.js"
>
</script>
</head>
<body _="
on keydown[event.metaKey and key is 'Enter'] log 'command + enter' then send submitForm to #sql-editor
">
<div class="root-container">
<header>
<h1>SQLite Explorer</h1>
</header>
{children}
</div>
<script type="module" src="https://esm.town/v/nbbaier/downloadScript" />
<script type="module" src="https://esm.town/v/nbbaier/enableButtonsScript" />
<script type="module" src="https://esm.town/v/nbbaier/getCodeScript" />
</body>
</html>
);
};
const app = new Hono();
app.use(
"*",
jsxRenderer(
({ children }) => {
return <HTML children={children} />;
},
{ docType: false },
),
);
app.get("/", async (c) => {
let data = await sqlite.batch(
[
`SELECT name FROM sqlite_schema WHERE type ='table' AND name NOT LIKE 'sqlite_%';`,
`SELECT name FROM sqlite_schema WHERE type ='view' AND name NOT LIKE 'sqlite_%';`,
],
);
let views = data[1].rows.map(view => {
return { type: "view", name: view[0] };
});
let tables = data[0].rows.map(view => {
return { type: "table", name: view[0] };
});
return c.render(
<main class="sidebar-layout">
<div class="sidebar">
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
v86
June 19, 2024
Was doing some querying with this a few minutes ago and it started glitching, I believe due to active development. I wonder if version pinning + a beta top-level val could be used to allow for development while not breaking the main version
Thanks for the heads up! I didn't think of this. I just added some language to the readme to indicate what the current stable version is (v37). Let me know if that works!
Yes works like a charm! That's a smart way to handle it!
Nice! Now we just need a more official way to indicate that ...
Yea it would be cool to specify a default stable version that gets set when people import. In any case I've pinned my forked val to 37 so feel free to keep hacking
What a lovely convo! Maybe the first such productive back and forth I've seen on a val that I haven't been a part of ❤️
Export to CSV button would be so awesome. Ditto for import from CSV into new table.
Hey! Could I get a password for this app?
Hey @vawogbemi! The easiest way for you to use this is by forking this val: https://www.val.town/v/nbbaier/sqlite_explorer
ty!