How devtools-x Fits 41 Tools in a 10MB App

Reference: fosslife/devtools-x — MIT · TypeScript

devtools-x is a cross-platform desktop app that bundles about 41 developer utilities — JSON formatter, hash, regex tester, color tools, image compressor, and more — in one window. Every tool runs offline on your own machine, with no account and no server. The interesting part is the architecture: it is not an Electron app, and it stays near 10MB.

What is devtools-x in one paragraph?

devtools-x is an offline-first collection of developer tools packaged as one desktop app for Windows, macOS, and Linux, with 1,526 stars and an MIT license as of June 2026.¹ Its README states it has "about 41 features as of now, and growing."² It is built on Tauri, not Electron, so the bundle stays around 10MB.

What problem does devtools-x solve?

Developers keep a drawer of single-purpose web tools: a JSON beautifier, a base64 decoder, a regex tester on a third site. Each is a paste into a stranger's textbox and a bet the page is not logging it. The two best-known native toolboxes split along OS lines: "devutils is macOS-only, and devtoys is Windows-only."³

The maintainer, Sparkenstein, names the itch directly in the README: "This project exists solely because I was fed up switching between different tools on different OSes."⁴ devtools-x answers with one offline app that runs the same 41-odd tools on every platform — and, because the work happens locally, your data never leaves the machine. That local-data posture is the same reason we argue your tools should keep your data on your own device.

How does devtools-x organize 41 tools in one app?

The whole toolbox hangs off a single flat array. src/Layout/Navbar/items.tsx exports navitems, where each tool is one plain object — an id, a route, an icon, a label, and a group. Adding a tool means appending an object, registering a route, and writing the component. There is no plugin framework.

export const navitems: NavItem[] = [
  { id: "json-formatter", to: "/json-formatter", icon: <IconAnchor />, text: "JSON", group: "Minifier/Formatters" },
  { id: "regex", to: "/regex", icon: <IconRegex />, text: "Regex Tester", group: "Testing" },
  { id: "hash-text", to: "/hash-text", icon: <IconHash />, text: "Hashing Text", group: "Hashing" },
  // ...dozens more
];

A separate groupIcons map sorts those rows into ten buckets — Web, Utilities, Testing, Password, Image, Generators, Minifier/Formatters, Previewers, Converters, and Hashing. The sidebar renders straight from this array, so the data structure is the navigation. One typed list is the single source of truth for the entire tool surface.

How does devtools-x route and search across tools?

The same registry drives both navigation and search. In src/App.tsx, every feature is loaded lazily through loadable, then wired to a route, so each tool ships as its own code-split chunk that only loads when you open it.

const JsonFormatter = loadable(() => import("./Features/json/JsonFormatter"));
const RegexTester = loadable(() => import("./Features/regex/RegexTester"));
// one <Route> per tool:
<Route path="/json-formatter" element={<JsonFormatter />} />
<Route path="/regex" element={<RegexTester />} />

The clever reuse is the command palette. The same registry feeds a Mantine Spotlight bound to Cmd+K, so the array that builds the sidebar also builds a search-to-jump launcher — no second list to keep in sync. One pragmatic exception is hard-coded in the source: the number converter is not lazy-loaded, because of a documented rare crash. The comment in App.tsx reads, verbatim, "keep Num converter here, do not lazy load. there's a rare crashing bug."⁵

Why is devtools-x not an Electron app?

devtools-x is built on Tauri, and the README puts it in capitals: "DevTools-X is NOT WRITTEN IN ELECTRON."⁶ That choice is the entire size story. The README claims "Tauri bundle is super small, about 10MB of installer."⁷ A typical Electron app ships a full Chromium engine and lands in the 80–150MB range.

The mechanism is documented in Tauri's own docs. A Tauri app "only contains the code and assets specific for that app and doesn't need to bundle a browser engine with every app" — it reuses the system's existing webview.⁸ The docs note that "a minimal Tauri app can be less than 600KB in size" and that Tauri "by default provides very small binaries."⁹ devtools-x then leans into it: the Rust release profile in Cargo.toml sets opt-level = "z", lto = true, strip = true, and panic = "abort" — every knob turned toward a smaller binary.¹⁰

flowchart TD
    A[items.tsx<br/>flat navitems registry] --> B[Sidebar groups]
    A --> C[Cmd+K Spotlight palette]
    B --> D[React Router /route]
    C --> D
    D --> E[loadable lazy import<br/>per-tool JS chunk]
    E -->|pure JS tools| F[Run in system WebView]
    E -->|hot paths| G[invoke Rust command]
    G --> H[Rust shell: 8 commands<br/>hash / image / compress / qr / ping]
    F --> I[Local SQLite + settings.json<br/>no server]
    H --> I

What is devtools-x's Rust-versus-JavaScript split?

Most of devtools-x is JavaScript. The language breakdown is TypeScript 322KB to Rust 21KB by source bytes, and the Rust shell registers exactly eight commands — hash, ping, minifyhtml, compress_images, base64_image, compress, compress_images_to_buffer, and read_qr.¹¹ Everything else runs in the webview.

The README states the rule plainly: "Many modules are written in pure JS, rust is only needed for performance and security sensitive features like calculating hash or compressing image etc."¹² This is the reusable idea. You do not need a native function for a JSON pretty-printer; you do want one for hashing a large file or resizing an image. devtools-x crosses the JS-to-Rust boundary only where the speed or the OS access pays for the round trip, which keeps the surface small and the contribution bar low — the README's FAQ answers "Do I need to know Rust?" with "Absolutely not."¹³

How does devtools-x stay offline and keep your data local?

There is no backend. Persistence is a local SQLite database (sqlite:devtools.db) and a local settings.json store, both on your own disk. The snippets feature even ships full-text search: a migration creates an FTS5 virtual table with insert, delete, and update triggers, so saved snippets are searchable offline with no server in the loop.¹⁴

On launch the app checks GitHub releases for an update; otherwise it touches the network for nothing it does not need.

That is the design value worth stealing: a toolbox that processes your tokens, keys, and files should do it where the data already lives. devtools-x earns its privacy posture by architecture, not by promise.

What I would steal from devtools-x

Three ideas travel well beyond this app. First, when your "plugins" are really just routes, a typed array plus a .map() beats a plugin system, and that one array can power navigation, grouping, and a command palette at once. Second, lazy-load by default. Third, draw the native boundary on purpose and keep the host shell thin.

Is devtools-x worth using?

For an offline, cross-platform developer toolbox, yes — it covers the common utilities and keeps your input on your machine. Treat it as the everyday drawer, not a hardened vault: the README warns not every module is well tested on all three platforms. As a study in keeping a many-feature desktop app small, it is a clean reference.

Frequently Asked Questions

Is devtools-x an Electron app?

No. devtools-x is built on Tauri, and the README states it is "NOT WRITTEN IN ELECTRON." Tauri reuses the operating system's existing webview instead of bundling a browser engine, which is why the project can claim an installer of about 10MB rather than the 80MB-plus typical of Electron apps.

How big is the devtools-x download?

The README claims the installer is "about 10MB," a direct result of the Tauri architecture. Tauri's own docs note a minimal Tauri app can be under 600KB, and devtools-x further tunes its Rust release profile for size with opt-level = "z", link-time optimization, and stripped symbols.

Does devtools-x work offline?

Yes. Every tool runs locally in the app, and persistence uses a local SQLite database plus a settings.json file on your own disk. There is no backend server. The only routine network call is an optional check for app updates on launch.

Do I need to know Rust to contribute to devtools-x?

No. The README answers this directly: "Absolutely not." Most modules are written in pure JavaScript, and Rust is used only for performance- or security-sensitive features such as hashing files or compressing images. There are eight Rust commands in total, and the rest of the app lives in the webview.

How does devtools-x compare to DevToys?

DevToys is Windows-only and DevUtils is macOS-only; the README names both as inspirations. devtools-x is the cross-platform, non-Electron alternative, running the same class of tools on Windows, macOS, and Linux from one MIT-licensed codebase.

How are all the tools organized inside one app?

A single flat array, navitems in items.tsx, defines every tool as an object with an id, route, icon, label, and group. That one array renders the grouped sidebar and feeds a Cmd+K command palette, while React Router lazy-loads each tool's component as a separate chunk on demand.

Where does devtools-x store my data?

On your machine. devtools-x uses a local SQLite database (devtools.db) and a local settings.json store. Saved snippets are even indexed with SQLite FTS5 for offline full-text search. Nothing you paste or process is sent to a remote server.

A toolbox that handles your secrets should run where your secrets already live.

If you like tools that keep your work on your own device, that is the whole idea behind mnmnote.com.