DYDevKitYard
Browse Tools

Tool Directory

Browse tools by section.

A growing set of practical utilities for everyday development and design work. Pick a section, then open a tool when it is ready.

Format JSONDecode JWTCheck contrastClean textConvert JSONBuild meta tags

Sections

Start with the type of task you need to handle.

SVG2 tools

Focused SVG toolkits for backgrounds, cleanup and conversion.

CSS6 tools

Create practical CSS values for visual interface work.

Code15 tools

Format, validate, encode and inspect common code formats.

Files9 tools

Clean, rename and compress everyday project files.

Design15 tools

Check colours, assets and previews for web design tasks.

HTML10 tools

Generate and format HTML metadata, robots files and sitemaps.

Text8 tools

Count, convert and clean text for content and URL workflows.

Converters11 tools

Convert common developer formats, colours and structured data.

Developer Utilities8 tools

Generate passwords, random strings, cron expressions and checks.

React1 tools

One React toolkit for components, hooks, layouts and snippets.

Tailwind1 tools

One Tailwind toolkit for components, layouts and utility classes.

Tools by category

Browse a focused sample from each section, then open the full category when you need more.

SVG Tools

Focused SVG toolkits for backgrounds, cleanup and conversion.

2 tools
SSVG Background ToolkitGenerate SVG waves, blobs, patterns, grids, meshes and backgrounds.Open toolSSVG Optimizer & ConverterClean, edit and convert SVG markup into optimized SVG, JSX and React output.Open tool
View all SVG tools →

CSS Tools

Create practical CSS values for visual interface work.

6 tools
CCSS Visual Effects ToolkitGenerate gradients, shadows, radius, glass, neumorphism and skeleton CSS effects.Open toolCCSS Layout ToolkitGenerate flexbox, grid, aspect ratio, media query and clamp CSS.Open toolCCSS Animation ToolkitGenerate CSS animations, keyframes and transform snippets.Open toolCCSS Formatter & MinifierFormat and minify CSS for cleaner stylesheets.Open toolCCSS Variable GeneratorGenerate CSS custom property starter snippets.Open toolCCSS Reset GeneratorGenerate a small CSS reset starter stylesheet.Open tool
View all CSS tools →

Code Tools

Format, validate, encode and inspect common code formats.

15 tools
JJSON Formatter & ValidatorFormat, validate, minify, sort and inspect JSON in your browser.Open toolUUUID GeneratorGenerate UUID values for local testing and sample data.Open toolJJWT DecoderInspect JWT payloads while debugging auth flows.Open toolRRegex TesterCheck regular expressions against sample text.Open toolBBase64 Encoder / DecoderEncode and decode Base64 strings for API and data work.Open toolJJSON Diff CheckerCompare two JSON snippets and list changed keys.Open tool
View all Code tools →

Files Tools

Clean, rename and compress everyday project files.

9 tools
MMetadata RemoverPreview a file-cleaning flow for stripping metadata.Open toolBBulk File RenamerPlan batch rename patterns before touching real files.Open toolIImage ToolkitCompress, resize, convert, crop and optimize images in your browser.Open toolPPDF ToolkitCompress, merge, split, rotate, extract and clean PDF files.Open toolPPDF to ImagesPlan PDF page image export settings.Open toolIImages to PDFPlan image ordering for PDF creation.Open tool
View all Files tools →

Design Tools

Check colours, assets and previews for web design tasks.

15 tools
CColor Palette GeneratorGenerate palettes, shades, tints, gradients and mixed colors.Open toolCContrast CheckerCheck foreground and background colour contrast.Open toolFFavicon GeneratorPrepare favicon assets for browsers and devices.Open toolCColor ConverterConvert colors between HEX, RGB and HSL formats.Open toolSShadow Palette GeneratorGenerate a small shadow palette for interface depth.Open toolFFont Pairing ToolGenerate simple heading and body font pairings.Open tool
View all Design tools →

HTML Tools

Generate and format HTML metadata, robots files and sitemaps.

10 tools
MMeta & Open Graph GeneratorGenerate SEO meta tags and Open Graph sharing metadata.Open toolRRobots.txt GeneratorCreate a simple robots.txt file with allow and disallow rules.Open toolSSitemap GeneratorTurn a list of URLs into a basic XML sitemap.Open toolHHTML Formatter & MinifierFormat and minify HTML markup for cleaner editing and sharing.Open toolSSchema Markup GeneratorGenerate JSON-LD schema markup for common page types.Open toolEEmail Signature GeneratorGenerate a simple HTML email signature starter.Open tool
View all HTML tools →

Text Tools

Count, convert and clean text for content and URL workflows.

8 tools
TText CounterCount words, characters, sentences and reading time.Open toolSSlug GeneratorConvert titles and phrases into URL-friendly slugs.Open toolCCase ConverterConvert text between uppercase, lowercase, title case and sentence case.Open toolTText Diff CheckerCompare two blocks of text and summarize line changes.Open toolLLorem Ipsum GeneratorGenerate placeholder lorem ipsum text.Open toolRRandom Text GeneratorGenerate short random placeholder text.Open tool
View all Text tools →

Converters Tools

Convert common developer formats, colours and structured data.

11 tools
JJSON to CSVConvert a JSON array of objects into simple CSV text.Open toolCCSV to JSONConvert CSV text into a JSON array for data workflows.Open toolJJSON to YAMLConvert simple JSON objects into YAML-style text.Open toolYYAML to JSONConvert simple YAML-style key values into JSON.Open toolXXML to JSONConvert simple XML-like markup into a JSON summary.Open toolMMarkdown to HTMLConvert basic Markdown text into HTML markup.Open tool
View all Converters tools →

Developer Utilities Tools

Generate passwords, random strings, cron expressions and checks.

8 tools
PPassword ToolkitGenerate passwords and check simple strength signals.Open toolRRandom Generator ToolkitGenerate random strings and numbers for tokens, fixtures and sample data.Open toolCCron Generator & ParserBuild cron expressions and explain readable schedules.Open toolGGitignore GeneratorGenerate a starter .gitignore from common presets.Open toolDDeveloper Lookup ToolkitLook up HTTP statuses, MIME types, user agents and DNS helper notes.Open toolEEnvironment Variable GeneratorGenerate starter environment variable examples.Open tool
View all Developer Utilities tools →

React Tools

One React toolkit for components, hooks, layouts and snippets.

1 tools
RReact Generator ToolkitGenerate React components, hooks, pages, layouts and TypeScript snippets.Open tool
View all React tools →

Tailwind Tools

One Tailwind toolkit for components, layouts and utility classes.

1 tools
TTailwind Builder ToolkitGenerate Tailwind components, layouts, classes and starter snippets.Open tool
View all Tailwind tools →

What this page offers

This directory brings every DevKitYard utility into one place so you can jump from a category to a specific tool without hunting through menus.

Popular tools

JSON Formatter & ValidatorSVG Background ToolkitCSS Visual Effects ToolkitMetadata RemoverColor Palette Generator

Related categories

SVG ToolsCSS ToolsCode ToolsFiles ToolsDesign ToolsHTML ToolsText ToolsConverters ToolsDeveloper Utilities ToolsReact ToolsTailwind Tools

FAQ

What tools are available on DevKitYard?

DevKitYard includes SVG, CSS, code, file and design utilities for common web development tasks.

Are these tools browser-based?

Many tools run in your browser where possible, especially formatters, generators, previewers and lightweight file utilities.

Will more tools be added?

Yes. The directory is built to expand into a larger library of developer and designer utilities over time.