sqlite-hub 0.2.0 → 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,48 +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.
 
-Use a custom port via CLI. If omitted, `4173` is used:
+### Row editing
+
+![](/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
 ```
 
-App state such as recent connections, SQL history, and local settings is stored in the user profile instead of the install directory. On macOS this lives under `~/Library/Application Support/sqlite-hub/`, so Homebrew upgrades keep the internal state across versions.
+## Changelog
+
+[Changelog](changelog.md)

package/changelog.md

@@ -1,7 +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"