d-tools

Open-source developer tools suite with a headless-first architecture. 54 tools across 14 categories, zero external dependencies in the core engine.

Live Demo

Architecture

@d-tools/core     Pure TypeScript engine — tools, registry, pipeline
@d-tools/react    Headless React hooks & components (unstyled, logic-only)
@d-tools/app      Styled showcase app (Tailwind CSS 4, deployed to GitHub Pages)

The three-layer design means you can use @d-tools/core in any JS/TS environment (Node, Deno, Bun, browser) and @d-tools/react in any React app — no styling opinions imposed.

Tools (54)

Category	Tools
Encoding	Base64 Encode/Decode, URL Encode/Decode, HTML Entities Encode/Decode, Hex/ASCII, Backslash Escape/Unescape, Punycode, Unicode Escape
Hashing	Hash Generate (MD5, SHA-1, SHA-256, SHA-512), Checksum (CRC32, Adler-32, FNV-1a)
Text	Case Convert, Line Sort, String Inspector, Text Diff, Text Replace, Text Stats, Markdown Preview
Formatting	JSON Format, XML Format, SQL Format, CSS Format
Conversion	CSV/JSON, JSON/YAML, Number to Words
Code Generation	JSON to Types, cURL to Code, HTML to JSX, SVG to CSS
Date/Time	Unix Timestamp Converter, Date Calculator
Networking	URL Parser, JWT Debugger, IP/CIDR Calculator, Cron Parser, User Agent Parser
Color	Color Converter (HEX, RGB, HSL)
Math	Number Base Converter, Expression Evaluator, Byte Formatter
Identifiers	UUID Generate/Decode, NanoID Generate
Regex	Regex Tester
Generators	Password, Random String, Lorem Ipsum, Mock Data
Security	Entropy Analysis, Magic Bytes Detector

Custom Layouts

11 tools feature rich, purpose-built UIs instead of a generic input/output split:

Color Converter — color picker, swatch preview, WCAG contrast checker
Regex Tester — /pattern/flags input, flag toggles, inline match highlighting
JWT Debugger — color-coded token segments, decoded panels, expiry badge
Text Diff — side-by-side editors, colored diff output
Hash/Checksum — multi-algorithm display, verify mode
Generators — copy-each-line, password strength meter
URL Parser — color-coded URL breakdown, query params table
Unix Timestamp — "Now" button, relative time callout
String Inspector — character table with color-coded categories
Number Base — multi-base output, visual bit grid
Cron Parser — preset buttons, field cards, next run times

Quick Start

Prerequisites

Bun v1.3+

Development

# Install dependencies
bun install

# Start dev server (app + watch builds)
bun run dev

# Build all packages
bun run build

# Run tests
bun run test

# Lint
bun run lint

Using the headless packages

# In your project
bun add @d-tools/core
bun add @d-tools/react  # if using React

Core — standalone tool execution:

import { registry } from "@d-tools/core";

const tool = registry.find("base64-encode");
const result = tool.execute("Hello, World!");
console.log(result.output); // "SGVsbG8sIFdvcmxkIQ=="

React — headless hooks:

import { useTool, useToolContext, ToolProvider } from "@d-tools/react";

function MyEncoder() {
  const { input, setInput, output, execute } = useTool("base64-encode");

  return (
    <div>
      <textarea value={input} onChange={e => setInput(e.target.value)} />
      <pre>{output.output}</pre>
    </div>
  );
}

// Wrap your app
<ToolProvider><MyEncoder /></ToolProvider>

Pipeline — chain tools:

import { usePipeline } from "@d-tools/react";

function MyPipeline() {
  const { steps, addStep, execute, result } = usePipeline();
  // Build multi-step transformations: encode → hash → format
}

Project Structure

packages/
  core/          Pure TS engine (zero deps)
    src/
      tools/     54 tool implementations across 14 categories
      registry/  Tool registry (register, lookup, search, filter)
      pipeline/  Pipeline engine (chain, serialize, deserialize)
      types.ts   ToolDefinition, ToolResult, OptionDefinition
  react/         Headless React layer
    src/
      hooks/     useTool, usePipeline, useShareableUrl, useClipboard
      components/ ToolProvider, PipelineProvider
  app/           Showcase app (Vite + React 19 + Tailwind CSS 4)
    src/
      components/
        layout/           Sidebar with search + collapsible categories
        tool-workspace/   Workspace + 11 custom layouts + smart output
        pipeline-editor/  Visual pipeline builder

Tech Stack

Runtime: Bun
Build: Turborepo + tsup (dual CJS/ESM)
Core: TypeScript strict, zero dependencies
React: React 19, headless component pattern
App: Vite 6, Tailwind CSS 4
Testing: Vitest
Linting: Biome (tabs, 100 char width)
Deploy: GitHub Actions → GitHub Pages

License

MIT

mde-pach/d-tools