🔍 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`;","label",[67],"3f8ab998-2798-11f0-9d52-569c3dd06744",["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",[78],"pulls","branches","forks","envVars",{"_74":20,"_212":20},"connections",{"_74":20,"_211":20},"unfilledCount","emptyCount",{"_31":200,"_13":78,"_65":77,"_41":-5,"_33":34,"_193":38,"_194":117,"_35":219,"_37":20,"_68":51,"_196":202,"_70":24,"_198":-5,"_216":220,"_156":221},{"_31":192,"_13":67,"_65":66,"_41":-5,"_33":34,"_193":101,"_194":117,"_35":215,"_37":94,"_68":69,"_196":197,"_70":24,"_198":-5,"_216":217,"_156":218},["D",1731973210852],"children",[],[67],["D",1731971386107],[],[78],["D",1746219530286],{"_11":12,"_155":73},{"_11":12,"_151":-5,"_72":73,"_25":71,"_152":153,"_154":24},{"_37":101,"_13":16,"_31":34,"_140":106,"_141":142,"_143":20,"_144":111,"_145":146,"_147":148,"_149":14,"_150":12},"ctx",{"_49":-5,"_177":259,"_260":261,"_262":263,"_264":24,"_265":24,"_266":24,"_267":117,"_268":-5,"_269":-7,"_270":-7,"_271":20,"_272":24,"_273":24,"_274":-5,"_275":24,"_276":24,"_277":24,"_278":-5},"ENV",{"_230":231,"_232":233,"_234":16,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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"]

History