sqlite-hub 0.1.3 → 0.3.1

package/.github/funding.yml

@@ -0,0 +1,2 @@
+github: oliverjessner
+buy_me_a_coffee: oliverjessner

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 oliverjessner
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,46 +1,74 @@
-# sqlite-hub
-
-A cyberpunk inspired management app for sqlite
+# sqlite-hub ⚡️
 
 ![](/assets/mockups/home.png)
 
-## Install
+A focused local-first app for browsing, editing, and querying SQLite databases.
 
-### Homebrew
+SQLite Hub is built for developers and technical users who want a clean SQLite workflow without heavy database clients, cloud layers, or dashboard noise.
 
-```bash
-brew install oliverjessner/tap/sqlite-hub
-```
+## Why SQLite Hub?
 
-Or tap first and then install:
+Many database tools are powerful, but feel oversized when all you want is to inspect a local SQLite file, edit a few rows, and run a query fast.
 
-```bash
-brew tap oliverjessner/tap
-brew install sqlite-hub
-```
+SQLite Hub keeps that workflow sharp:
 
-### NPM
+- browse tables and rows
+- inspect schema and structure
+- edit records in place
+- export tables and query results as CSV
+- create simple local backups of the active database
+- run SQL in a syntax-highlighted editor
+- stay local and move fast
 
-```bash
-npm install sqlite-hub
-```
+## Features
 
-## Run
+### Structure view
 
-Start the app and open it automatically in the default browser:
+![](/assets/mockups/graph_visualize.png)
 
-```bash
-npm start
-```
+Inspect tables, columns, types, and schema details without losing pace. Visualized in a graph.
+
+### Data browser
+
+![](/assets/mockups/data.png)
+
+Scan rows, sort fast, move through local data quickly, and export full tables as CSV.
+
+### Row editing
 
-Use a custom port via CLI. If omitted, `4173` is used:
+![](/assets/mockups/data_edit.png)
+
+Open one record, edit it in place, commit, continue.
+
+### SQL editor
+
+![](/assets/mockups/sql_editor.png)
+
+Write queries in a syntax-highlighted editor, inspect results in the same workflow, and export result sets as CSV.
+
+### Simple backups
+
+Create timestamped local backups of the active SQLite database in one click. Backups are stored as plain file copies in a local `backups` folder next to the database.
+
+### Local-first
+
+Built around local SQLite files, not hosted dashboards or team complexity.
+
+## Install
+
+### Homebrew
 
 ```bash
-npm start -- --port:1203
+brew tap oliverjessner/tap
+brew install sqlite-hub
 ```
 
-After linking or installing globally, the binary can also be called directly:
+### NPM
 
 ```bash
-sqlite-hub --port:1203
+npm install -g sqlit-hub
 ```
+
+## Changelog
+
+[Changelog](changelog.md)

package/bin/sqlite-hub.js

@@ -1,116 +1,123 @@
 #!/usr/bin/env node
 
-const { spawn } = require("node:child_process");
+const { spawn } = require('node:child_process');
 
 const DEFAULT_PORT = 4173;
 
 function printHelp() {
-  console.log(`SQLite Hub CLI
+    console.log(`SQLite Hub CLI
 
 Usage:
   sqlite-hub [--port:4173]
 
 Options:
-  --port:PORT   Start the server on a custom port.
   --help        Show this help text.
+  --port:PORT   Start the server on a custom port.
+  --version     Show the version number.
 `);
 }
 
 function parsePort(rawValue) {
-  const port = Number(rawValue);
+    const port = Number(rawValue);
 
-  if (!Number.isInteger(port) || port < 1 || port > 65535) {
-    throw new Error(`Invalid port: ${rawValue}`);
-  }
+    if (!Number.isInteger(port) || port < 1 || port > 65535) {
+        throw new Error(`Invalid port: ${rawValue}`);
+    }
 
-  return port;
+    return port;
 }
 
 function parseCliArguments(argv) {
-  let port;
-
-  for (let index = 0; index < argv.length; index += 1) {
-    const argument = argv[index];
-
-    if (argument === "--help" || argument === "-h") {
-      return { help: true };
-    }
-
-    if (argument.startsWith("--port:")) {
-      port = parsePort(argument.slice("--port:".length));
-      continue;
+    let port;
+
+    for (let index = 0; index < argv.length; index += 1) {
+        const argument = argv[index];
+
+        if (argument === '--help' || argument === '-h') {
+            return { help: true };
+        }
+
+        if (argument.startsWith('--port:')) {
+            port = parsePort(argument.slice('--port:'.length));
+            continue;
+        }
+
+        if (argument.startsWith('--port=')) {
+            port = parsePort(argument.slice('--port='.length));
+            continue;
+        }
+
+        if (argument === '--port') {
+            port = parsePort(argv[index + 1]);
+            index += 1;
+            continue;
+        }
+
+        if (argument === '--version' || argument === '-v') {
+            const { version } = require('../package.json');
+            console.log(`SQLite Hub CLI version ${version}`);
+            process.exit(0);
+        }
+
+        throw new Error(`Unknown argument: ${argument}`);
     }
 
-    if (argument.startsWith("--port=")) {
-      port = parsePort(argument.slice("--port=".length));
-      continue;
-    }
-
-    if (argument === "--port") {
-      port = parsePort(argv[index + 1]);
-      index += 1;
-      continue;
-    }
-
-    throw new Error(`Unknown argument: ${argument}`);
-  }
-
-  return { help: false, port };
+    return { help: false, port };
 }
 
 function openInDefaultBrowser(url) {
-  const openers = {
-    darwin: {
-      command: "open",
-      args: [url],
-    },
-    win32: {
-      command: "cmd",
-      args: ["/c", "start", "", url],
-      options: { windowsHide: true },
-    },
-    default: {
-      command: "xdg-open",
-      args: [url],
-    },
-  };
-
-  const opener = openers[process.platform] || openers.default;
-  const child = spawn(opener.command, opener.args, {
-    detached: true,
-    stdio: "ignore",
-    ...opener.options,
-  });
-
-  child.on("error", (error) => {
-    console.warn(`Could not open the browser automatically: ${error.message}`);
-  });
-
-  child.unref();
+    const openers = {
+        darwin: {
+            command: 'open',
+            args: [url],
+        },
+        win32: {
+            command: 'cmd',
+            args: ['/c', 'start', '', url],
+            options: { windowsHide: true },
+        },
+        default: {
+            command: 'xdg-open',
+            args: [url],
+        },
+    };
+
+    const opener = openers[process.platform] || openers.default;
+    const child = spawn(opener.command, opener.args, {
+        detached: true,
+        stdio: 'ignore',
+        ...opener.options,
+    });
+
+    child.on('error', error => {
+        console.warn(`Could not open the browser automatically: ${error.message}`);
+    });
+
+    child.unref();
 }
 
 async function main() {
-  const { help, port = DEFAULT_PORT } = parseCliArguments(process.argv.slice(2));
+    const { help, port = DEFAULT_PORT } = parseCliArguments(process.argv.slice(2));
 
-  if (help) {
-    printHelp();
-    return;
-  }
+    if (help) {
+        printHelp();
+        return;
+    }
 
-  const { startServer } = require("../server/server");
-  const { url } = await startServer({ port });
-  openInDefaultBrowser(url);
+    const { startServer } = require('../server/server');
+    const { url } = await startServer({ port });
+    openInDefaultBrowser(url);
 }
 
 if (require.main === module) {
-  main().catch((error) => {
-    console.error(error.message);
-    process.exit(1);
-  });
+    main().catch(error => {
+        console.error(error.message);
+        process.exit(1);
+    });
 }
 
 module.exports = {
-  main,
-  openInDefaultBrowser,
-  parseCliArguments,
+    main,
+    openInDefaultBrowser,
+    parseCliArguments,
 };

package/changelog.md

@@ -1,3 +1,13 @@
+# v0.3.1
+
+- visualize tables
+- export csv from data and sql_editor
+- Backup mode
+
+# v0.2.0
+
+- db fix
+
 # v0.1.3
 
-- edit in sql editro
+- edit in sql editor

package/index.html

@@ -90,11 +90,14 @@
     <link href="styles/layout.css" rel="stylesheet" />
     <link href="styles/components.css" rel="stylesheet" />
     <link href="styles/views.css" rel="stylesheet" />
+    <link href="styles/structure-graph.css" rel="stylesheet" />
   </head>
   <body
     class="bg-background text-on-surface font-body selection:bg-primary-container selection:text-on-primary overflow-hidden"
   >
     <div id="app"></div>
+    <script src="/vendor/elkjs/lib/elk.bundled.js"></script>
+    <script src="/vendor/cytoscape-elk/dist/cytoscape-elk.js"></script>
     <script src="js/app.js" type="module"></script>
   </body>
 </html>

package/js/api.js

@@ -113,6 +113,12 @@ export function updateRecentConnection(id, payload) {
   });
 }
 
+export function createActiveConnectionBackup() {
+  return request("/api/connections/backup-active", {
+    method: "POST",
+  });
+}
+
 export function getOverview() {
   return request("/api/db/overview");
 }
@@ -191,3 +197,11 @@ export function downloadQueryCsv(sql) {
     fallbackFilename: "query-results.csv",
   });
 }
+
+export function downloadTableCsv(tableName) {
+  return download("/api/export/table.csv", {
+    method: "POST",
+    body: { tableName },
+    fallbackFilename: `${tableName || "table"}.csv`,
+  });
+}

package/js/app.js

@@ -2,10 +2,16 @@ import { renderAppShell } from "./components/appShell.js";
 import { renderModal } from "./components/modal.js";
 import { renderSidebar } from "./components/sidebar.js";
 import { renderStatusBar } from "./components/statusBar.js";
+import {
+  mountStructureGraph,
+  resetPersistedStructureGraphState,
+  teardownStructureGraph,
+} from "./components/structureGraph.js";
 import { renderToasts } from "./components/toast.js";
 import { renderTopNav } from "./components/topNav.js";
 import { createRouter } from "./router.js";
 import {
+  createActiveConnectionBackup,
   clearCurrentQuery,
   clearDataRowSelection,
   clearEditorRowSelection,
@@ -14,6 +20,7 @@ import {
   closeModal,
   dismissToast,
   executeCurrentQuery,
+  exportCurrentDataTableCsv,
   exportCurrentQueryCsv,
   getState,
   initializeApp,
@@ -63,6 +70,10 @@ const shellRefs = {
   toast: document.querySelector("#toast-root"),
 };
 
+function resetStructureGraphForDatabaseChange() {
+  resetPersistedStructureGraphState();
+}
+
 function renderQueryHighlightMarkup(query) {
   if (query) {
     return highlightSql(query);
@@ -212,6 +223,7 @@ function renderApp(state) {
   const { main, panel } = resolveView(state);
   const isLockedRoute = ["editor", "editorResults", "data"].includes(state.route.name);
 
+  teardownStructureGraph();
   shellRefs.topNav.innerHTML = renderTopNav(state);
   shellRefs.sidebar.innerHTML = renderSidebar(state);
   shellRefs.statusBar.innerHTML = renderStatusBar(state);
@@ -222,6 +234,12 @@ function renderApp(state) {
   shellRefs.toast.innerHTML = renderToasts(state.toasts);
   shellRefs.shell.classList.toggle("panel-open", Boolean(panel));
   restoreFocusedInputState(focusedInput);
+
+  if (state.route.name === "structure") {
+    mountStructureGraph(state).catch((error) => {
+      console.error("Failed to mount structure graph.", error);
+    });
+  }
 }
 
 const router = createRouter((route) => {
@@ -251,6 +269,7 @@ async function handleAction(actionNode) {
       dismissToast(actionNode.dataset.toastId);
       return;
     case "select-connection": {
+      resetStructureGraphForDatabaseChange();
       const next = await selectConnection(actionNode.dataset.connectionId);
       if (next) {
         router.navigate("/overview");
@@ -258,6 +277,12 @@ async function handleAction(actionNode) {
       return;
     }
     case "remove-connection": {
+      const isActiveConnection = getState().connections.active?.id === actionNode.dataset.connectionId;
+
+      if (isActiveConnection) {
+        resetStructureGraphForDatabaseChange();
+      }
+
       const removed = await removeConnection(actionNode.dataset.connectionId);
       if (removed) {
         const nextState = getState();
@@ -269,6 +294,9 @@ async function handleAction(actionNode) {
       }
       return;
     }
+    case "create-backup":
+      await createActiveConnectionBackup();
+      return;
     case "execute-query": {
       const success = await executeCurrentQuery();
       router.navigate(success ? "/editor/results" : "/editor");
@@ -296,6 +324,9 @@ async function handleAction(actionNode) {
     case "export-query-csv":
       await exportCurrentQueryCsv();
       return;
+    case "export-data-csv":
+      await exportCurrentDataTableCsv();
+      return;
     case "select-structure-entry":
       if (actionNode.dataset.entryName) {
         await selectStructureEntry(actionNode.dataset.entryName);
@@ -422,6 +453,7 @@ document.addEventListener("submit", async (event) => {
 
   switch (form.dataset.form) {
     case "open-connection": {
+      resetStructureGraphForDatabaseChange();
       const connection = await submitOpenConnection({
         path: String(formData.get("path") ?? ""),
         label: String(formData.get("label") ?? ""),
@@ -434,6 +466,7 @@ document.addEventListener("submit", async (event) => {
       return;
     }
     case "create-connection": {
+      resetStructureGraphForDatabaseChange();
       const connection = await submitCreateConnection({
         path: String(formData.get("path") ?? ""),
         label: String(formData.get("label") ?? ""),
@@ -445,6 +478,7 @@ document.addEventListener("submit", async (event) => {
       return;
     }
     case "import-sql": {
+      resetStructureGraphForDatabaseChange();
       const targetMode = String(formData.get("targetMode") ?? "active");
       const payload = {
         sqlFilePath: String(formData.get("sqlFilePath") ?? ""),
@@ -467,7 +501,14 @@ document.addEventListener("submit", async (event) => {
       return;
     }
     case "edit-connection": {
-      await submitEditConnection(String(formData.get("connectionId") ?? ""), {
+      const connectionId = String(formData.get("connectionId") ?? "");
+      const isActiveConnection = getState().connections.active?.id === connectionId;
+
+      if (isActiveConnection) {
+        resetStructureGraphForDatabaseChange();
+      }
+
+      await submitEditConnection(connectionId, {
         path: String(formData.get("path") ?? ""),
         label: String(formData.get("label") ?? ""),
         readOnly: formData.get("readOnly") === "on",

package/js/components/queryEditor.js

@@ -38,6 +38,7 @@ export function renderQueryEditor({
   query,
   title,
   executing = false,
+  exporting = false,
   history = [],
   historyLoading = false,
 }) {
@@ -75,6 +76,13 @@ export function renderQueryEditor({
     >
       Clear
     </button>
+    <button
+      class="px-4 py-1.5 text-[10px] font-bold uppercase tracking-widest text-on-surface hover:bg-surface-container-highest transition-colors"
+      data-action="export-query-csv"
+      type="button"
+    >
+      ${exporting ? "Exporting..." : "Export CSV"}
+    </button>
     <button
       class="bg-primary-container px-6 py-1.5 text-xs font-black uppercase tracking-tighter text-on-primary shadow-[0_0_15px_-5px_rgba(252,227,0,0.4)] transition-all hover:brightness-110"
       data-action="execute-query"