DYDevKitYard
ElementYard

Browser-based developer tools

Finish everyday development tasks without leaving your browser.

Format code, convert files, optimise images, work with SVG and check interface accessibility with practical browser tools.

Browse toolsExplore icons

Universal Search

Find the right DevKitYard resource.

Featured starting points

Featured starting points

TJSON Formatter & ValidatorIIcon CatalogueCNavbar ComponentsGBuild a Landing PageDSColour Systems

Featured tools

Six useful tools covering data, SVG, files, CSS, website assets and Base64 decoding.

Choose by task

Find the right starting point without learning the categories.

Work with data

Format, inspect, compare and convert structured data.

JSON Formatter & ValidatorOpen →JSON ViewerOpen →JSON Diff CheckerOpen →JSON to YAMLOpen →

Build interface styles

Create CSS motion and colour, then check accessibility.

CSS Gradient GeneratorOpen →CSS Animation GeneratorOpen →Contrast CheckerOpen →CSS Layout ToolkitOpen →

Prepare images and files

Resize, compress, rename and clean files locally.

Image ResizerOpen →Image CompressorOpen →Bulk File RenamerOpen →Metadata RemoverOpen →

Work with SVG and icons

Generate SVG backgrounds or find reusable interface icons.

SVG Wave GeneratorOpen →
Icon CatalogueBrowse →

Browse DevKitYard

Tools and references for practical web work.

Browser utilitiesTools

Fast local-first workspaces for developer and designer tasks.

SVG libraryIcons

Original outline icons with search, favourites and customisation.

UI building blocksComponents

Content pages for reusable sections that connect to ElementYard.

Quick referencesCheatsheets

Scannable references and interactive examples for daily web work.

Workflow learningGuides

Step-by-step resources for building and launching better interfaces.

FoundationsDesign Systems

Generators and guidance for tokens, themes and accessibility.

Visual editorElementYard

Open the visual workspace for customising and exporting UI.

Featured workflows

Jump into common project moments.

DevKitYard connects utilities, references and UI foundations so you can move from small fixes to complete interface workflows without losing the thread.

Build a landing pagePlan the structure, choose sections, check accessibility and prepare metadata.Create a design systemTurn colour, type, spacing, radius and shadow decisions into reusable rules.Improve website SEOAudit intent, titles, descriptions, structured data, sitemap and internal links.Work with JSONFormat, validate and inspect JSON before moving into APIs or config files.Customise iconsSearch the icon library, favourite options and customise SVG output.Resize imagesCreate website, social, documentation and app image exports in one browser workflow.
Browser-first

Use fast web workspaces without account setup or unnecessary project scaffolding.

Privacy-respecting

Tools explain when work happens locally in your browser and avoid fake capabilities.

Built to bookmark

Each section is designed for repeat work: search, use, copy, download and move on.