🔍 Val Town SQLite Explorer

\n \n setQuery(e.target.value)}\n placeholder={`SQL query for ${table} (e.g., SELECT * FROM ${table} LIMIT 10)`}\n style={{ width: '100%', padding: '10px', marginBottom: '10px' }}\n />\n \n \n {error && (\n

\n Error: {error}\n

\n )}\n {results && (\n

Query Results

\n \n \n \n {results.columns.map((col, idx) => (\n \n ))}\n \n \n \n {results.rows.map((row, rowIdx) => (\n \n {Object.values(row).map((cell, cellIdx) => (\n \n ))}\n \n ))}\n \n

\n {col}\n
\n {typeof cell === 'object' \n ? JSON.stringify(cell) \n : String(cell)}\n

\n )}\n

\n );\n}\n\nwindow.initClient = function() {\n const rootElement = document.getElementById(\"root\");\n if (rootElement) {\n const root = createRoot(rootElement);\n root.render();\n }\n};\n\nif (typeof document !== \"undefined\") {\n window.initClient();\n}\n\nexport default async function server(request: Request): Promise {\n // Handle GET requests by serving the HTML\n if (request.method === 'GET') {\n return new Response(`\n \n \n \n \n \n Val Town SQLite Explorer\n \n \n \n

\n \n \n \n \n \n `, {\n headers: {\n 'Content-Type': 'text/html',\n 'Access-Control-Allow-Origin': '*'\n }\n });\n }\n\n // CORS handling\n if (request.method === 'OPTIONS') {\n return new Response(null, {\n headers: {\n 'Access-Control-Allow-Origin': '*',\n 'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',\n 'Access-Control-Allow-Headers': 'Content-Type, Accept',\n 'Access-Control-Max-Age': '86400'\n }\n });\n }\n\n // Ensure POST request\n if (request.method !== 'POST') {\n return new Response('Method Not Allowed', { \n status: 405,\n headers: {\n 'Access-Control-Allow-Origin': '*',\n 'Content-Type': 'text/plain'\n }\n });\n }\n\n try {\n // Dynamic import for SQLite\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n\n // Parse request body\n const { query, table } = await request.json();\n\n if (!query || !table) {\n throw new Error('Query and table are required');\n }\n\n // Validate table name to prevent SQL injection\n const allowedTables = [\n 'val_town_agent_specifications', \n 'val_town_agent_tasks'\n ];\n\n if (!allowedTables.includes(table)) {\n throw new Error('Invalid table name');\n }\n\n // Execute the query\n const result = await sqlite.execute(query);\n\n return new Response(JSON.stringify(result), {\n headers: {\n 'Content-Type': 'application/json',\n 'Access-Control-Allow-Origin': '*'\n }\n });\n } catch (error) {\n console.error(\"SQLite Query Error:\", error);\n\n return new Response(\n JSON.stringify({\n error: \"SQLite Query Failed\",\n details: error.toString(),\n stack: error.stack\n }),\n {\n status: 500,\n headers: {\n 'Content-Type': 'application/json',\n 'Access-Control-Allow-Origin': '*'\n }\n }\n );\n }\n}\n\nconst css = `\nbody {\n font-family: system-ui, sans-serif;\n line-height: 1.6;\n background-color: #f4f4f4;\n margin: 0;\n padding: 0;\n}\n#root {\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n}\ninput, select {\n width: 100%;\n padding: 10px;\n margin-bottom: 10px;\n border: 1px solid #ddd;\n border-radius: 4px;\n}\nbutton {\n background-color: #4CAF50;\n color: white;\n padding: 10px 15px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.3s;\n}\nbutton:hover {\n background-color: #45a049;\n}\nbutton:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\ntable {\n width: 100%;\n border-collapse: collapse;\n}\nth, td {\n border: 1px solid #ddd;\n padding: 8px;\n text-align: left;\n}\nth {\n background-color: #f2f2f2;\n}\n`;","deleted","label",[128],"3f8ab998-2798-11f0-9d52-569c3dd06744","README.md","3f8aba1a-2798-11f0-9d52-569c3dd06744",1,["D",1731971386107],"# SQLite Explorer\n\nView and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) 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](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page. \n\n![image.webp](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c8e102fd-39ca-4bfb-372a-8d36daf43900/public)\n\n## Install \n\nInstall the latest stable version (v86) by forking this val:\n\n[![Install Stable Release (v86)](https://stevekrouse-button.web.val.run/Install%20Stable%20Release%20(v81))](https://www.val.town/v/nbbaier/sqlite_explorer/fork)\n\n## Authentication\n\nLogin to your SQLite Explorer with [password authentication](https://www.val.town/v/pomdtr/password_auth) with your [Val Town API Token](https://www.val.town/settings/api) as the password.\n\n## Todos / Plans\n- [ ] improve error handling \n- [ ] improve table formatting\n- [ ] sticky table headers\n- [x] add codemirror \n- [ ] add loading indication to the run button (initial version shipped)\n- [ ] add ability to favorite queries \n- [ ] add saving of last query run for a table (started)\n- [ ] add visible output for non-query statements\n- [ ] add schema viewing \n- [ ] add refresh to table list sidebar after `CREATE/DROP/ALTER` statements\n- [ ] add automatic execution of initial select query on double click \n- [x] add views to the sidebar \n- [ ] add triggers to sidebar\n- [ ] add upload from SQL, CSV and JSON\n- [ ] add ability to connect to a non-val town Turso database \n- [x] fix wonky sidebar separator height problem (thanks to @stevekrouse)\n- [x] make result tables scrollable\n- [x] add export to CSV, and JSON (CSV and JSON helper functions written in [this val](https://www.val.town/v/nbbaier/sqliteExportHelpers). Thanks to @pomdtr for merging the initial version!)\n- [x] add listener for cmd+enter to submit query",[144],"pulls","forks","envVars",{"_156":34,"_158":34},"connections",{"_156":34,"_157":34},"count","unfilledCount","emptyCount",{"_20":143,"_13":144,"_129":145,"_130":-5,"_131":21,"_132":146,"_133":51,"_22":165,"_29":34,"_136":104,"_138":148,"_140":40,"_141":-5,"_162":166,"_92":167},{"_20":127,"_13":128,"_129":49,"_130":-5,"_131":21,"_132":30,"_133":51,"_22":161,"_29":135,"_136":137,"_138":139,"_140":40,"_141":-5,"_162":163,"_92":164},["D",1731973210852],"children",[],[128],["D",1731971386107],[],[144],["D",1746219530286],{"_11":12,"_90":86},{"_11":12,"_84":-5,"_85":86,"_46":47,"_87":88,"_89":40},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":32,"_33":34,"_77":42,"_78":79,"_80":81,"_82":14,"_83":12},"ctx",{"_70":-5,"_114":205,"_206":207,"_208":209,"_210":40,"_211":40,"_212":40,"_213":51,"_214":-5,"_215":-7,"_216":-7,"_217":34,"_218":40,"_219":40,"_220":-5,"_221":40,"_222":40,"_223":40,"_224":-5},"ENV",{"_176":177,"_178":179,"_180":26,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Branches1

Branches
1