Project Structure & File Tree
Relevant source files
The following files were used as context for generating this wiki page:
DevUtils is a cross-platform developer tool suite built using the Tauri framework and Next.js. It is designed as a "Swiss Army Knife" for developers, providing a multi-tab interface to access various utility and "fun" tools, such as JWT decoders, base64 encoders, and git blame simulators.
Sources: README.md:3-8, messages/en.json:2-15
The project's architecture leverages Rust for the backend (via Tauri) and TypeScript/React for the frontend. The structure is organized to support extensibility, allowing developers to easily add new tools by creating components within a dedicated directory and registering them in a central content manager.
Sources: README.md:12-23, components/tool-content.tsx:28-50
Core Architecture
DevUtils utilizes a hybrid architecture where the frontend (Next.js) handles the user interface and tool logic, while the backend (Tauri/Rust) manages system-level operations like file system access and window management.
Sources: src-tauri/tauri.conf.json:7-20, package.json:40-52
Dependency Management
The project uses pnpm for package management. Key dependencies include:
- Frameworks: Next.js 16.1.4, React 19.2.3, and Tauri 2.9.1.
- UI Components: Radix UI primitives for accessible components (Dialog, Tabs, ScrollArea, etc.) and Lucide React for iconography.
- Logic:
josefor JWT operations,crypto-jsandhash-wasmfor cryptography, andi18nextfor internationalization.
Sources: package.json:34-75
Development and Build Scripts
The project defines a specific workflow for development and building:
pnpm dev: Starts the Next.js development server.pnpm tauri dev: Launches the Tauri development environment with hot-reloading.pnpm build: Compiles the Next.js application into theoutdirectory for production.
Sources: package.json:6-12, src-tauri/tauri.conf.json:11-12
Component Organization
The frontend logic is primarily located in the components/ directory, divided into UI primitives and specific tool implementations.
Sources: components/tool-content.tsx:5-26
Tool Registry and Content Management
The ToolContent component acts as a dynamic router for the active tool. It uses a useTabStore to determine which tab is currently selected and maps a toolId to a specific React component.
The application maintains a mapping of unique strings (e.g., json-csv) to their respective component classes.
Sources: components/tool-content.tsx:28-52
Tool Implementation Pattern
Tools are typically implemented as "client" components using React hooks (useState, useCallback, useEffect). They follow a consistent structure:
- State Management: Handling input/output text and configuration (e.g., format selection).
- Translation: Using
useTranslationfor multi-language support. - Logic: Specialized functions for parsing (e.g.,
parseJson,parseCsv) and converting data. - UI: Cards containing
Textareafor input and output, withButtonactions for copying or clearing.
Sources: components/tools/data-converter.tsx:1-40, components/tools/jwt-decoder.tsx:1-50
Configuration and Localization
Internationalization (i18n)
Localization files are stored in the messages/ directory. The project supports English (en.json), Simplified Chinese (zh.json), and Traditional Chinese (zh-TW.json).
| Key Path | Description | Example (EN) |
|---|---|---|
app.title | Main application title | "The Swiss DevUtils" |
sidebar.utilityTools | Sidebar category | "Utility Tools" |
tools.jwtDecoder.name | Tool display name | "JWT Can Opener" |
Sources: messages/en.json:1-60, messages/zh.json:1-15
Desktop Configuration
The src-tauri/tauri.conf.json file configures the desktop environment, including window dimensions and security permissions.
| Option | Value | Description |
|---|---|---|
productName | DevUtils | The name of the bundled executable. |
width | 1200 | Default window width. |
height | 800 | Default window height. |
permissions | fs:allow-read-file | Grants the app permission to read local files. |
Sources: src-tauri/tauri.conf.json:3-48
Project Layout
The following tree represents the high-level file structure of the repository:
devutils/
├── components/ # React components
│ ├── tools/ # Individual tool implementations
│ │ ├── base64-tool.tsx
│ │ ├── data-converter.tsx
│ │ ├── jwt-decoder.tsx
│ │ └── ...
│ └── tool-content.tsx # Dynamic tool renderer
├── messages/ # Localization JSON files (en, zh, zh-TW)
├── src-tauri/ # Tauri/Rust backend configuration
│ └── tauri.conf.json # App manifest and permissions
├── package.json # Node.js dependencies and scripts
└── README.md # Project overview and dev instructions
Sources: README.md:1-25, components/tool-content.tsx:1-26, src-tauri/tauri.conf.json:1-10
Conclusion
The structure of DevUtils is a modular, component-based architecture designed for high maintainability. By separating the tool definitions into a dedicated components/tools/ directory and utilizing a central registry, the project facilitates rapid contribution and consistent user experiences across different utilities.
Sources: README.md:48-60, components/tool-content.tsx:100-150