Ono Toolkit

A suite of small, fast, privacy-first tools that run entirely in your browser. Your files and data never leave your device - no uploads, no accounts, no tracking.

Live → onotoolkit.irfankurniawan.com

---

Table of Contents

• Features
• Tech Stack
• Getting Started
• Project Structure
• Adding a New Tool
• Testing
• Contributing
• License
• Author

Features

Everything runs client-side. Files, tokens, and secrets are processed locally and are never sent to a server.

PDF

• Compress PDF - shrink PDFs with adjustable quality (Ghostscript-WASM), with a before/after page preview slider.
• Merge / Split / Rotate PDF - reorder and combine, extract page ranges (one PDF or a ZIP), and rotate pages, on a shared page organizer (pdf-lib).
• JPG to PDF / PDF to JPG - combine images into a PDF, or turn pages into images (single file or ZIP).
• HTML to PDF / Word to PDF - render pasted/uploaded HTML or a DOCX to PDF.
• PDF to Markdown / PDF to Word - extract a PDF to editable Markdown or a DOCX (best-effort).

Image

• Background Remover - erase an image background or swap in a solid colour, powered by @imgly/background-removal running its ONNX model entirely in the browser; exports a lossless PNG.
• Watermark Remover - brush over a watermark and inpaint it away with MI-GAN via ONNX Runtime Web (WebGPU → WASM). Only the painted pixels are regenerated; every other pixel stays byte-identical.
• Compress Images - batch-compress JPG, PNG, and WebP with jSquash (MozJPEG, oxipng, WebP). Choose the output format, keep PNG transparency (lossless oxipng or WebP) or flatten it to a colour, preview before/after, and download individually or as a ZIP.
• Image Converter - convert between JPG, PNG, WebP, GIF, BMP, ICO, and AVIF (jSquash + gifenc + native encoders for ICO/BMP). PNG to multi-size ICO favicons included, with before/after preview.
• Image Resizer - resize by percentage, exact pixels (fit/fill/stretch), or a target file size - the tool binary-searches quality and scale to hit the budget, in JPG, PNG, WebP, GIF, BMP, ICO, or AVIF.

Video

• Screen Recorder - a local-first recording studio built on native browser APIs (getDisplayMedia / getUserMedia, canvas compositing, canvas.captureStream() + MediaRecorder) - no uploads, no time limits. Choose what to capture up front (screen, screen + camera, or camera only), then change your mind mid-recording: add a screen to a camera session, or drop in a webcam on a screen session. The webcam bubble is a movable, resizable picture-in-picture with circle / rounded / square shapes, and a draggable pen dock lets you annotate (pen, highlighter, rectangle, arrow) with the strokes burned into the final video. Microphone and system audio are mixed through the Web Audio graph, and every finished recording is saved to a persistent, on-device library (IndexedDB) with poster thumbnails, rename, download, and delete.

Developer

• JWT Debugger (RFC 7519) - Decoder and Encoder tabs powered by jose: a colored token editor, decoded header/payload with JSON highlighting, a claims breakdown with expiry state, optional signature verification and signing/generation across HS/RS/PS/ES/EdDSA (HMAC secret with a Base64URL switch, or a PEM/JWK key), and a "Generate example" that even mints key pairs in the browser.
• JSON Formatter - side-by-side CodeMirror editors with inline validation: pretty-print with a 2/3/4-space or tab indent, minify, recursively sort keys, and convert JSON to YAML, CSV, or XML (yaml, json-2-csv, fast-xml-parser), with upload, copy on both panes, and download.

Text & Markdown

• Markdown Studio - edit Markdown in a live editor and export to PDF or Word (DOCX).

Plus a considered experience: light/dark themes, mobile-first responsive layouts, motion.dev micro-interactions (an animated orbiting-planet logo), and a privacy notice with a first-visit consent popup.

Why the YouTube Downloader was removed

The YouTube Downloader tool was removed because its backend couldn't be kept working reliably, and the maintainer doesn't have the time to fix it right now. It may return in the future if spare time allows.

Tech Stack

• Nuxt 4 (Vue 3, SSR) with Nuxt UI
• Pinia for state, Zod for validation
• motion-v for animation
• jose (JWT), Ghostscript-WASM + pdf-lib + pdf.js (PDF), CodeMirror 6 (JSON editor)
• @imgly/background-removal + onnxruntime-web with MI-GAN (in-browser image AI), jSquash (MozJPEG/oxipng/WebP image compression)
• MediaRecorder + canvas compositing + Web Audio for in-browser screen recording, with recordings persisted locally in IndexedDB.
• Heavy work runs in Web Workers; WASM is loaded lazily, client-side only.
• TypeScript throughout (no any), ESLint + Prettier, Vitest + Playwright.

Getting Started

Prerequisites

• Node 24 (see .node-version)
• pnpm 11 (corepack enable will provide it)

Install & run

pnpm install
pnpm dev            # http://127.0.0.1:3000

Production preview

pnpm build          # static + SSR build
pnpm --dir apps/web run preview

Project Structure

onotoolkit/
  apps/web/                 # the Nuxt app
    app/
      components/           # layout/, tool/, ui/ (reusable, no giant components)
      composables/          # useGhostscript, usePdfRender, useJwt, useFileDownload
      pages/                # index.vue + tools/*.vue + privacy.vue
      stores/               # Pinia stores (one per tool)
      tools/registry.ts     # single source of truth for the tool catalog
      types/ utils/ schemas/ workers/
    tests/                  # Vitest unit + engine tests
  tests/e2e/                # Playwright end-to-end tests
  wrangler.jsonc            # Cloudflare Worker config

Adding a New Tool

The tool catalog is driven by one registry, so adding a tool is small and self-contained:

1. Add an entry to apps/web/app/tools/registry.ts (slug, title, description, icon, group, status, route). It appears on the landing page automatically.
2. Create apps/web/app/pages/tools/<name>.vue using the shared ToolLayout and UI components (AppCard, and helpers like JsonHighlight).
3. Put logic in a composable (app/composables/) and state in a Pinia store (app/stores/); keep pure, testable helpers in app/utils/.
4. Add Vitest unit tests and a Playwright e2e spec.

Testing

pnpm validate       # format:check + lint + typecheck + unit tests + build
pnpm test           # unit tests (Vitest), incl. real Ghostscript + jose checks
pnpm test:e2e       # end-to-end (Playwright), desktop + mobile

Please make sure pnpm validate passes before opening a pull request.

Contributing

Contributions are welcome! Please read CONTRIBUTING.md for the workflow, coding standards, and how to open issues and pull requests. In short: open an issue to discuss, branch from main, keep changes focused, run pnpm validate, and open a PR.

License

Licensed under AGPL-3.0. This is required because Ono Toolkit bundles and serves Ghostscript (AGPL-3.0) for PDF compression - and @imgly/background-removal (AGPL-3.0) for background removal - so the whole distributed app must remain open-source under AGPL. If you fork or self-host a modified version, you must also make your source available to your users.

Acknowledgements

A huge thank-you to the open-source projects that make the in-browser image tools possible - all AI runs on-device, nothing is uploaded:

• @imgly/background-removal by IMG.LY - browser background removal (AGPL-3.0).
• MI-GAN by Picsart AI Research (ICCV 2023) - the inpainting model used for watermark removal (MIT), with the ONNX weights hosted on Hugging Face.
• ONNX Runtime Web by Microsoft
  • in-browser model inference (MIT).
• lxfater/inpaint-web - reference for the MI-GAN browser I/O contract.
• jSquash by Jamie Sinclair - the Squoosh WebAssembly codecs (MozJPEG, oxipng, WebP) that power image compression, entirely in the browser (MIT).

Author

Built by Muhammad Irfan Kurniawan.