Skip to content

Getting Started

Jump to bottom
Michael Dohmen edited this page Aug 15, 2026 · 4 revisions

Getting Started

Clone and build

git clone https://github.com/m-dohmen/openToolbox
cd openToolbox
npm install
npm run build     # → dist/index.html

Open dist/index.html in a browser. That's the whole thing — no dev server, no npm start, no port to remember. The build takes well under a second and produces a single ~90–120 KB file (size varies a bit with which features — logo, translations — end up inlined).

Or skip the build and just look

The live demo is a full build of examples/portfolio.domain.js, published from main. Everything below works the same way in it.

What you'll see

The shipped example is an action items tracker (audits, approvals, steering-meeting follow-ups) with 11 seeded demo records, so the file isn't empty on first open. It's meant as a working reference, not the point of the template — see Building Your Own Tool for swapping it for your own domain.

The settings page

Try the core loop

  1. Click New action item, fill in a title, hit Apply.
  2. Click Save (or Ctrl/Cmd+S). Depending on your browser:
    • Chromium (Chrome, Edge): a native "Save As" dialog appears once; every save after that writes straight back to the same file, no dialog.
    • Firefox / Safari: it goes to your Downloads folder.
  3. Close the tab, reopen the saved file. Your record is still there — it's now baked into the file's payload block, not stored anywhere else.
  4. Open Settings (gear icon) and look around: color scheme, row density, language, colours, branding, encryption, AI integration, CSV/JSON export and import, configuration export.

Try encryption

Settings → Security → Encrypt. Set a passphrase (a strength hint appears, but nothing is blocked — a short passphrase is a legitimate choice in an already-secured environment). Save. Reopen the file: you're asked for the passphrase before anything renders. Wrong passphrase, clear rejection; no way to recover data without it — see Security and Encryption.

Try the AI assistant (optional)

Off by default — the app opens no network connection until you turn this on. If you want to try it against a real OpenAI-compatible endpoint (OpenAI itself, Azure AI Foundry, LiteLLM, Ollama, vLLM, OpenRouter…), see AI Assistant for the CORS caveat you'll hit from a local file, and for how the client negotiates whatever dialect your endpoint speaks.

Running the test suite

npx playwright install chromium   # first time only
npm test

Drives a real headless Chromium against the built file and walks the entire feature set — see Testing for what exactly gets exercised.

Next steps

Home — build with an AI agent

Once you're building

Reference

Clone this wiki locally