High-Level Architecture
Relevant source files
The following files were used as context for generating this wiki page:
DevUtils is a cross-platform desktop application designed as a "Swiss Army Knife" for developers. It provides a suite of utility tools such as encoders, decoders, format converters, and security testers within a single, unified interface. The project leverages a hybrid architecture combining a high-performance Rust backend with a modern React/Next.js frontend.
Sources: README.md:1-10, package.json:1-5
Core System Architecture
The application is built using the Tauri framework, which facilitates the communication between a web-based frontend and a native system backend. This approach minimizes resource consumption compared to traditional Electron-based applications while providing access to system-level features like file system operations.
Frontend-Backend Relationship
The frontend is constructed using Next.js and React 19, styled with Tailwind CSS. It manages the user interface, tool state, and client-side logic. The backend, written in Rust, handles system configurations, window management, and security capabilities.
The diagram above illustrates the multi-layered architecture where Tauri acts as the bridge between the React frontend and the native Rust environment.
Sources: README.md:33-35, package.json:44-60, src-tauri/tauri.conf.json:7-30
Component Architecture and Tool Registry
The application employs a modular tool system. Each tool is developed as an independent React component and registered in a centralized content manager.
Dynamic Tool Loading
The ToolContent component acts as a dynamic router. It retrieves the active tab state from a useTabStore and renders the corresponding tool component based on a toolId. If no tool is selected, it provides a landing state with search hints.
| Component | Responsibility | Relevant Tools |
|---|---|---|
ToolContent | Dynamic rendering of active tools | All |
Base64Tool | Text/File encoding & decoding | Base64, Hex, Ascii85 |
HashGenerator | Cryptographic hashing | MD5, SHA, BCrypt, Argon2 |
JwtDecoder | Token debugging | JWT Header/Payload |
WebSocketFishScaler | Real-time communication testing | WS/WSS protocols |
Sources: components/tool-content.tsx:28-55, components/tools/base64-tool.tsx:39-45, components/tools/hash-generator.tsx:49-65
Data Processing and Logic
The application distributes logic between client-side JavaScript and native plugins for performance and security.
1. Cryptographic and Encoding Operations
Heavy cryptographic operations (like hashing and encoding) utilize specialized libraries:
- WebAssembly (Wasm):
hash-wasmis used for high-performance hashing (MD5, SHA families) without blocking the main UI thread. - Client-Side Libraries:
crypto-jsandbcryptjshandle standard encryption and password hashing needs. - Streaming: For large files, the application implements chunked processing to avoid memory overflows.
2. File System Integration
The application uses the @tauri-apps/plugin-fs for native file access. This allows features like the Base64Tool and HashGenerator to process local files directly.
Sequence diagram showing the flow of data from a user's file system through the Tauri bridge to the application logic.
Sources: components/tools/hash-generator.tsx:88-140, components/tools/base64-tool.tsx:325-345, package.json:52-53
Internationalization and Settings
Configuration and localization are managed globally to ensure a consistent experience.
- i18next: The application uses
react-i18nextfor managing translations across multiple languages (English and Chinese). Translation keys are organized by tool (e.g.,tools.jsonCsv.autoFix). - Zustand: Global state management (like active tabs and boss mode settings) is handled via Zustand stores.
- Tauri Config: System-level settings, including window dimensions (1200x800) and Content Security Policy (CSP), are defined in
tauri.conf.json.
| Setting Category | Implementation | File Reference |
|---|---|---|
| Window Size | Aligned to 1200w x 800h | src-tauri/tauri.conf.json |
| CSP | default-src 'self' | src-tauri/tauri.conf.json |
| Localizations | en.json, zh.json | messages/ |
| State | useSettingsStore, useTabStore | lib/ |
Sources: messages/en.json:1-10, src-tauri/tauri.conf.json:12-25, components/tools/boss-mode.tsx:100-110
Security Implementation
DevUtils implements several security layers to protect the user while providing "hacker" tools:
- CSP (Content Security Policy): Restricts script and style sources to
'self'to prevent XSS. - Local Processing: Tools like the
JwtToothpick(brute-forcer) andHashGeneratorensure that sensitive data (tokens, files) never leaves the local machine. - Capabilities System: Tauri's capability system explicitly defines which frontend windows have permission to use system APIs like
dialog:defaultorfs:allow-read-file.
Sources: src-tauri/tauri.conf.json:28-39, components/tools/jwt-toothpick.tsx:11-20
DevUtils represents a robust implementation of the Tauri-Next.js stack, prioritizing modularity for easy tool extension and native performance for data-intensive developer tasks.