DevUtils — Community Tools

Build a tool. Help millions of developers. Get featured on devutils.lol.

DevUtils is a collection of privacy-first, browser-native developer tools. Everything runs locally — no servers, no sign-ups, no data collection.

This repo is your gateway to contributing new tools. Follow the architecture below, submit a PR, and we'll integrate it into the main site.

---

🏗️ Architecture at a Glance

Every tool in DevUtils follows a 4-file pattern:

your-tool/
└── yourToolPage.tsx          ← "use client" React component (your entire tool UI + logic)

Plus 3 registration points (we handle these after accepting your PR):

File	What you add
data/tools.ts	Tool metadata (title, description, icon, category)
tool-pages/ToolContainer.tsx	Dynamic import for code-splitting
data/pSeoPages.ts	SEO config, FAQs, related tools

You only need to build yourToolPage.tsx. We take care of registration.

---

🚀 Quick Start

# 1. Fork this repo
# 2. Copy the template
cp -r templates/tool-starter my-awesome-tool

# 3. Rename and build your tool
mv my-awesome-tool/toolStarterPage.tsx my-awesome-tool/myAwesomeToolPage.tsx

# 4. Submit a PR with your tool folder + the filled-out TOOL_SUBMISSION.md

---

📐 Tool Architecture Deep-Dive

1. The Tool Component (yourToolPage.tsx)

This is a single "use client" Next.js component that contains all your tool's UI and logic.

"use client";

import { useState } from "react";
// Import Lucide icons, NOT other icon libraries
import { Copy, Check, Upload } from "lucide-react";

export default function MyToolPage() {
    const [input, setInput] = useState("");
    const [output, setOutput] = useState("");

    // Your tool logic here

    return (
        <div className="max-w-5xl mx-auto space-y-4">
            {/* Your tool UI here */}
        </div>
    );
}

Rules:

• ✅ Must be "use client" (tools are interactive)
• ✅ Must export default the component
• ✅ Use Tailwind CSS classes for styling (our site uses Tailwind)
• ✅ Use lucide-react for icons
• ✅ All processing must happen in the browser (no API calls to external servers)
• ✅ Support dark mode via dark: Tailwind prefixes
• ❌ No external API calls (privacy-first)
• ❌ No npm install of heavy libraries without discussion
• ❌ No inline <style> tags — use Tailwind

2. Tool Registration (data/tools.ts)

We handle this — but here's what we add so you understand the system.

{
    toolId: "my-awesome-tool",        // kebab-case, unique
    slug: "my-awesome-tool",          // same as toolId
    icon: Wrench,                     // Lucide icon
    title: "My Awesome Tool",         // User-facing title
    description: "One-line description of what it does",
    parentType: "refinery",           // Category (see below)
    lastModified: "2026-02-23",
    isNew: true,
}

Categories (parentType):

Category	Use for	Icon vibe
forge	Generators, creators	Building something new
refinery	Converters, formatters, transformers	Reshaping data
laboratory	Inspectors, debuggers, analyzers	Examining things
terminal	DevOps, network, system tools	Infrastructure
studio	Design, visual, creative tools	Visual work

3. Dynamic Import (ToolContainer.tsx)

We handle this.

const MyAwesomeTool = dynamic(
    () => import("./my-awesome-tool/myAwesomeToolPage"),
    { loading: () => <ToolLoader /> }
);

// In the switch statement:
case 'my-awesome-tool': return <MyAwesomeTool />;

4. SEO Config (data/pSeoPages.ts)

We handle this — but you should fill out the SEO section in TOOL_SUBMISSION.md.

"my-awesome-tool": {
    slug: "my-awesome-tool",
    toolId: "my-awesome-tool",
    title: "SEO title — include keywords | DevUtils",
    description: "SEO meta description. ~155 characters.",
    visibleHeader: {
        h1: "Visible Page Heading",
        description: "One paragraph shown below the heading"
    },
    faqList: [
        { question: "What does this tool do?", answer: "..." },
        // 4-6 FAQs, each answer max ~50 words
    ],
    relatedSlugs: ["json-formatter", "diff-checker"],
}

---

🎨 Design System

Your tool lives inside a page that already provides:

• Background gradient (from-slate-100 via-gray-100 to-slate-200 / dark mode)
• Page header with h1 + description
• Community section, related tools, and FAQs below your tool

Your component just needs to render the tool itself. Use our card pattern:

{/* Standard card wrapper */}
<div className="bg-white dark:bg-gray-900/70 rounded-2xl border border-gray-200 dark:border-gray-700/70 shadow-sm p-4">
    {/* Your content */}
</div>

Color palette:

• Primary: indigo-500 / indigo-600
• Success: emerald-500
• Error: red-500
• Warning: amber-500
• Cards: bg-white dark:bg-gray-900/70
• Borders: border-gray-200 dark:border-gray-700/70
• Text: text-gray-800 dark:text-gray-200
• Muted text: text-gray-500 dark:text-gray-400

---

📁 Folder Structure

devutils-community/
├── README.md                  ← You are here
├── CONTRIBUTING.md            ← Detailed contribution guide
├── TOOL_SUBMISSION.md         ← Fill this out with your PR
├── templates/
│   └── tool-starter/
│       └── toolStarterPage.tsx   ← Copy this to start
├── examples/
│   └── word-counter/
│       └── wordCounterPage.tsx   ← Full working example
└── .github/
    └── ISSUE_TEMPLATE/
        ├── tool-idea.md
        └── bug-report.md

---

💡 Tool Ideas We'd Love

Not sure what to build? Here are some tools the community has requested:

• Regex Playground — Live regex tester with match highlighting
• Markdown Preview — Side-by-side Markdown editor + preview
• SVG Optimizer — Paste SVG, get optimized output
• Timestamp Converter — Unix ↔ ISO ↔ Relative time
• URL Encoder/Decoder — Encode, decode, parse query strings
• Password Generator — Configurable secure password generator
• Lorem Ipsum Generator — Paragraphs, sentences, words
• QR Code Generator — Text/URL to QR code, downloadable
• Crontab Guru — Visual cron expression builder
• CSS Minifier — Minify + beautify CSS

Have an idea? Open an issue!

---

🤝 How to Submit

1. Fork this repo
2. Copy templates/tool-starter/ → your-tool-name/
3. Build your tool component
4. Fill out TOOL_SUBMISSION.md
5. Open a PR with your tool folder + the filled submission doc

We'll review, provide feedback, and integrate accepted tools into the main site.

---

📜 License

MIT — Your tool, your credit. All accepted tools are attributed to their creator.

---

Built with ❤️ by Sunanda and the DevUtils community
devutils.lol · Discord · Twitter/X