sqlite-hub 0.2.0 → 0.3.2

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,80 @@
-# 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
+
+### Structure view
+
+![](/assets/mockups/graph_visualize.png)
+
+Inspect tables, columns, types, and schema details without losing pace. Visualized in a graph.
+
+### Data browser
+
+![](/assets/mockups/data.png)
 
-## Run
+Scan rows, sort fast, move through local data quickly, and export full tables as CSV.
 
-Start the app and open it automatically in the default browser:
+### 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
+brew tap oliverjessner/tap
+brew install sqlite-hub
 ```
 
-Use a custom port via CLI. If omitted, `4173` is used:
+### NPM
 
 ```bash
-npm start -- --port:1203
+npm install -g sqlit-hub
 ```
 
-After linking or installing globally, the binary can also be called directly:
+## alternative port
 
 ```bash
-sqlite-hub --port:1203
+sqlit-hub --port:4174
 ```
 
-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,18 @@
+# v0.3.2
+
+- delete rows
+- modal windows for rows
+
+# 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");
 }
@@ -173,6 +179,13 @@ export function updateDataTableRow(tableName, payload) {
   });
 }
 
+export function deleteDataTableRow(tableName, payload) {
+  return request(`/api/data/${encodeURIComponent(tableName)}/rows`, {
+    method: "DELETE",
+    body: payload,
+  });
+}
+
 export function getSettings() {
   return request("/api/settings");
 }
@@ -191,3 +204,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,11 +20,14 @@ import {
   closeModal,
   dismissToast,
   executeCurrentQuery,
+  exportCurrentDataTableCsv,
   exportCurrentQueryCsv,
   getState,
   initializeApp,
   loadQueryFromHistory,
   openModal,
+  openDeleteDataRowModal,
+  openDeleteEditorRowModal,
   openEditConnectionModal,
   refreshCurrentRoute,
   removeConnection,
@@ -32,6 +41,7 @@ import {
   setEditorTab,
   setRoute,
   submitCreateConnection,
+  submitDeleteRowConfirmation,
   submitDataRowUpdate,
   submitEditorRowUpdate,
   submitEditConnection,
@@ -63,6 +73,10 @@ const shellRefs = {
   toast: document.querySelector("#toast-root"),
 };
 
+function resetStructureGraphForDatabaseChange() {
+  resetPersistedStructureGraphState();
+}
+
 function renderQueryHighlightMarkup(query) {
   if (query) {
     return highlightSql(query);
@@ -212,6 +226,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 +237,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 +272,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 +280,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,11 +297,20 @@ async function handleAction(actionNode) {
       }
       return;
     }
+    case "create-backup":
+      await createActiveConnectionBackup();
+      return;
     case "execute-query": {
       const success = await executeCurrentQuery();
       router.navigate(success ? "/editor/results" : "/editor");
       return;
     }
+    case "delete-data-row":
+      openDeleteDataRowModal(actionNode.dataset.rowIndex);
+      return;
+    case "delete-editor-row":
+      openDeleteEditorRowModal(actionNode.dataset.rowIndex);
+      return;
     case "clear-query":
       clearCurrentQuery();
       return;
@@ -296,6 +333,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 +462,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 +475,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 +487,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 +510,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",
@@ -475,6 +525,9 @@ document.addEventListener("submit", async (event) => {
 
       return;
     }
+    case "delete-row-confirm":
+      await submitDeleteRowConfirmation();
+      return;
     case "save-data-row": {
       const values = {};
 

package/js/components/modal.js

@@ -254,6 +254,75 @@ function renderImportSqlForm(modal, state) {
   `;
 }
 
+function renderDeleteRowConfirmForm(modal) {
+  const rowPreview = modal.rowPreview ?? [];
+
+  return `
+    <form class="space-y-5" data-form="delete-row-confirm">
+      <div class="space-y-3">
+        <p class="text-sm leading-7 text-on-surface">
+          Delete this row from <span class="font-bold text-primary-container">${escapeHtml(
+            modal.tableName ?? "the current table"
+          )}</span>?
+        </p>
+        <p class="text-sm leading-7 text-on-surface-variant/65">
+          This action cannot be undone.
+        </p>
+        ${
+          modal.rowLabel
+            ? `
+                <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
+                  ${escapeHtml(modal.rowLabel)}
+                </div>
+              `
+            : ""
+        }
+        ${
+          rowPreview.length
+            ? `
+                <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+                  ${rowPreview
+                    .map(
+                      (field) => `
+                        <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3">
+                          <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
+                            ${escapeHtml(field.label)}
+                          </div>
+                          <div
+                            class="mt-2 text-sm text-on-surface"
+                            title="${escapeHtml(field.fullValue ?? field.value ?? "")}"
+                          >
+                            ${escapeHtml(field.value ?? "")}
+                          </div>
+                        </div>
+                      `
+                    )
+                    .join("")}
+                </div>
+              `
+            : ""
+        }
+      </div>
+      ${renderError(modal.error)}
+      <div class="flex items-center justify-end gap-3 pt-2">
+        <button
+          class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface-variant hover:bg-surface-container-highest"
+          data-action="close-modal"
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          class="border border-error/25 bg-error-container/10 px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-error"
+          type="submit"
+        >
+          ${modal.submitting ? "Deleting..." : "Delete Row"}
+        </button>
+      </div>
+    </form>
+  `;
+}
+
 export function renderModal(state) {
   const modal = state.modal;
 
@@ -282,6 +351,11 @@ export function renderModal(state) {
       title: "Edit Connection",
       body: renderEditConnectionForm(modal),
     },
+    "delete-row": {
+      eyebrow: "Mutation // Confirm row deletion",
+      title: "Delete Row",
+      body: renderDeleteRowConfirmForm(modal),
+    },
   };
 
   const config = contentByKind[modal.kind];

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"

package/js/components/rowEditorPanel.js

@@ -23,16 +23,23 @@ export function renderRowEditorPanel({
   disabledMessage = "",
   saveError = null,
   saving = false,
+  deleting = false,
   reloadAction = "",
-  submitLabel = "Save Row",
+  submitLabel = "Save",
+  deleteAction = "",
+  deleteRowIndex = null,
+  deleteLabel = "Delete Row",
+  deleteEnabled = false,
   emptyEditableMessage = "This row has no editable scalar columns.",
 }) {
   const canSubmit = !disabledMessage && editableFields.length > 0;
+  const canDelete = !disabledMessage && deleteEnabled;
+  const formId = `${formName}-panel-form`;
 
   return `
     <section class="flex h-full min-h-0 flex-col bg-surface-low">
       <header class="border-b border-outline-variant/10 bg-surface-container px-6 py-5">
-        <div class="flex items-start justify-between gap-4">
+        <div class="space-y-4">
           <div>
             <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
               ${escapeHtml(sectionLabel)}
@@ -50,13 +57,58 @@ export function renderRowEditorPanel({
                 : ""
             }
           </div>
-          <button
-            class="border border-outline-variant/20 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface hover:bg-surface-container-highest"
-            data-action="${escapeHtml(closeAction)}"
-            type="button"
-          >
-            Close
-          </button>
+          <div class="flex flex-wrap items-center justify-end gap-2">
+            ${
+              reloadAction
+                ? `
+                    <button
+                      class="border border-outline-variant/20 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface hover:bg-surface-container-highest"
+                      data-action="${escapeHtml(reloadAction)}"
+                      type="button"
+                    >
+                      Reload
+                    </button>
+                  `
+                : ""
+            }
+            ${
+              canSubmit
+                ? `
+                    <button
+                      class="bg-primary-container px-5 py-3 text-[10px] font-black uppercase tracking-[0.16em] text-on-primary disabled:cursor-default disabled:opacity-40"
+                      form="${escapeHtml(formId)}"
+                      type="submit"
+                      ${saving || deleting ? "disabled" : ""}
+                    >
+                      ${escapeHtml(saving ? "Saving..." : submitLabel)}
+                    </button>
+                  `
+                : ""
+            }
+            ${
+              canDelete
+                ? `
+                    <button
+                      class="border border-error/25 bg-error-container/10 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-error transition-colors hover:bg-error-container/20 disabled:cursor-default disabled:opacity-40"
+                      data-action="${escapeHtml(deleteAction)}"
+                      data-row-index="${escapeHtml(String(deleteRowIndex ?? ""))}"
+                      type="button"
+                      ${saving || deleting ? "disabled" : ""}
+                    >
+                      ${escapeHtml(deleting ? "Deleting..." : deleteLabel)}
+                    </button>
+                  `
+                : ""
+            }
+            <button
+              aria-label="Close panel"
+              class="flex h-11 w-11 items-center justify-center border border-outline-variant/20 text-on-surface hover:bg-surface-container-highest"
+              data-action="${escapeHtml(closeAction)}"
+              type="button"
+            >
+              <span class="material-symbols-outlined text-base">close</span>
+            </button>
+          </div>
         </div>
       </header>
       <div class="custom-scrollbar flex-1 overflow-auto px-6 py-6">
@@ -68,7 +120,7 @@ export function renderRowEditorPanel({
                 </div>
               `
             : `
-                <form class="space-y-6" data-form="${escapeHtml(formName)}">
+                <form class="space-y-6" data-form="${escapeHtml(formName)}" id="${escapeHtml(formId)}">
                   ${hiddenFields
                     .map(
                       (field) => `
@@ -92,7 +144,7 @@ export function renderRowEditorPanel({
                                       ${escapeHtml(field.label ?? field.name)}
                                     </span>
                                     <textarea
-                                      class="min-h-[112px] w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+                                      class="min-h-[56px] w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
                                       name="field:${escapeHtml(field.name)}"
                                     >${escapeHtml(field.value ?? "")}</textarea>
                                   </label>
@@ -117,28 +169,6 @@ export function renderRowEditorPanel({
                         `
                       : ""
                   }
-                  <div class="flex items-center justify-end gap-3 border-t border-outline-variant/10 pt-6">
-                    ${
-                      reloadAction
-                        ? `
-                            <button
-                              class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface hover:bg-surface-container-highest"
-                              data-action="${escapeHtml(reloadAction)}"
-                              type="button"
-                            >
-                              Reload
-                            </button>
-                          `
-                        : ""
-                    }
-                    <button
-                      class="bg-primary-container px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-on-primary disabled:cursor-default disabled:opacity-40"
-                      type="submit"
-                      ${canSubmit ? "" : "disabled"}
-                    >
-                      ${escapeHtml(saving ? "Saving..." : submitLabel)}
-                    </button>
-                  </div>
                 </form>
               `
         }