Creating a New Tool
Relevant source files
The following files were used as context for generating this wiki page:
This guide explains the process of developing and integrating a new utility or "fun" tool into the DevUtils ecosystem. DevUtils is built using Tauri and Next.js, prioritizing a multi-tab interface and a lightweight footprint.
Tools in DevUtils are modular React components located within the components/tools/ directory. Integration requires registering the component in the central content manager, defining its metadata, and providing localized strings for the user interface.
Sources: README.md:3-8, components/tool-content.tsx:1-50
Architecture and Integration Flow
The integration of a new tool follows a specific data flow where the sidebar handles selection, the tab store manages state, and the ToolContent component dynamically renders the active tool based on a registry.
Tool Registration Process
To make a tool visible and functional, it must be added to the toolComponents record. This record maps a unique string identifier (toolId) to the React component responsible for the tool's logic.
The dynamic rendering logic in ToolContent looks up the component using activeTab.toolId. If no matching component is found, an error state is displayed.
Sources: components/tool-content.tsx:30-55, components/tool-sidebar.tsx:47-65
Component Requirements
Each tool component must accept a tabId prop, allowing the tool to potentially manage tab-specific state if required by the application's store.
interface ToolProps {
tabId: string;
}
export function NewTool({ tabId }: ToolProps) {
// Tool implementation
}
Sources: components/tool-content.tsx:30, components/tools/blame-intern.tsx:88-90
Localization (i18n)
DevUtils uses react-i18next for multi-language support. Every tool must have a corresponding entry in the translation files (e.g., messages/en.json).
Translation Schema
The translations are structured under the tools key. A standard tool requires the following fields:
| Field | Description |
|---|---|
name | The full name displayed in headings and tooltips. |
shortName | A condensed name used for UI elements with limited space. |
description | A brief summary of the tool's purpose. |
Example JSON Structure
"tools": {
"myNewTool": {
"name": "My New Tool",
"shortName": "New Tool",
"description": "Performs a specific developer task",
"input": "Input Label",
"output": "Output Label"
}
}
Sources: messages/en.json:20-100, components/tool-sidebar.tsx:69-80
UI Components and Styling
Tools should utilize the project's established UI primitive library (Radix UI + Tailwind CSS) to maintain visual consistency. Common patterns observed in existing tools include:
Layout Patterns
- Card Containers: Using
Card,CardHeader, andCardContentto group inputs and results. - Responsive Grids: Utilizing
grid-cols-1 lg:grid-cols-2for side-by-side input and output panels on larger screens. - Scroll Areas: Implementing
ScrollAreafor logs or long lists of history.
Common Interactive Elements
| Component | Usage |
|---|---|
Button | Triggering actions like "Generate", "Clear", or "Copy". |
Textarea | Handling large block inputs like JWTs or cURL commands. |
Select | Choosing between different algorithms (e.g., MD5 vs SHA256). |
Tabs | Switching between sub-features (e.g., "Text" vs "File" modes). |
Sources: components/tools/blame-intern.tsx:136-210, components/tools/base64-tool.tsx:550-620, components/tools/hash-generator.tsx:600-650
Implementation Example: Data Processing
Most tools follow a pattern of taking user input, processing it through a specific logic layer (e.g., CryptoJS, hash-wasm, or native JS), and displaying the result with a "Copy to Clipboard" feature.
Feature Integration: File Support
If the tool requires file handling, it should use the readFile API from @tauri-apps/plugin-fs and implement a drag-and-drop listener via getCurrentWebview().onDragDropEvent.
Sources: components/tools/base64-tool.tsx:476-510, components/tools/hash-generator.tsx:530-555
Summary
To create a new tool, developers must implement a React component in components/tools/, register it in the toolComponents map within components/tool-content.tsx, and define metadata in lib/tools-meta.ts. Consistency is maintained through the use of shared UI components and a mandatory localization structure in messages/en.json. Once integrated, the tool automatically benefits from the project's tab management and sidebar navigation systems.
Sources: README.md:38-40, components/tool-sidebar.tsx:102-120