JSON Toolkit

DashboardOverview of JSON tools
JSON EditorText & tree views, validation
Format JSONBeautify, minify, stats
Query JSONJSONPath & JMESPath
Compare JSONDiff, merge, side-by-side
Repair JSONFix malformed JSON
Validate JSONAJV schema validation
Large FilesVirtualized large JSON
Offline EditorLocal storage drafts
JSON to CSVArrays to spreadsheet
CSV to JSONSpreadsheet to JSON

Tools

Color Converters

20

Hex to RGB
RGB to Hex
Hex to Pantone
RGB to Pantone
HSV to Pantone
CMYK to Pantone
CMYK to HEX
CMYK to RGB
CMYK to HSV
HSV to HEX
HSV to RGB
HSV to CMYK
HEX to HSV
RGB to HSV
RGB to CMYK
HEX to CMYK
Pantone to HEX
Pantone to RGB
Pantone to CMYK
Pantone to HSV

Unit Converters

6

Length Converter
Weight Converter
Volume Converter
Area Converter
Time Converter
Timestamp Converter

SQL Converters

5

SQL to CSV
SQL to JSON
SQL to XML
SQL to YAML
SQL to HTML

Encode & Decode

39

File Converters

53

Utility Tools

8

JSON Minifier
JSON Stringify
Credit Card Validator
Credit Card Generator
XPath Tester
JSON Path Tester
JSON Diff
XML Diff

Chart Tools

5

Line Graph Maker
Bar Graph Maker
Pie Chart Maker
Doughnut Chart Maker
Scatter Plot Maker

Viewers

10

JSON Viewer
XML Viewer
CSV Viewer
YAML Viewer
Markdown Viewer
JavaScript Viewer
Html Viewer
Mxml Viewer
Rss Viewer
Bbcode Viewer

Programming Editors

8

JSON Editor
HTML Editor
XML Editor
YAML Editor
Java Editor
Csharp Editor
Actionscript Editor
Markdown Editor

Parsers

4

URL Parser
JSON Parser
XML Parser
YAML Parser

CSS Tools

4

CSS Beautifier
CSS to SCSS
CSS to LESS
CSS to SASS

Escape/Unescape

9

HTML Escape
XML Escape
Java Escape
C# Escape/Unescape
JavaScript Escape
CSV Escape/Unescape
SQL Escape/Unescape
JSON Escape/Unescape
Un-Google Link

Cryptography

8

MD5 Hash
SHA256 Hash
SHA1 Hash
SHA384 Hash
SHA512 Hash
MD2 Hash Generator
MD4 Hash Generator
HMAC Generator

Beautifiers

10

JSON Beautifier
CSS Beautifier
XML Beautifier
JavaScript Beautifier
YAML Beautifier
SQL Formatter
TypeScript Formatter
C# Beautifier
Java Beautifier
Python Beautifier

String Utilities

15

Word Counter
Case Converter
Reverse String
Password Generator
String to Hex
Hex to String
String to Binary Converter
Binary to String Converter
Word Repeater
Remove Empty Lines
Remove Duplicate Lines
Sort Text Lines
Upside Down Text
Random Word Generator
Remove Accents

Syntax Highlighting

5

JSON Syntax Highlighting
XML Highlighter
HTML Pretty Print
JavaScript Pretty Print
Code Highlighter

Compress / Decompress

2

GZip Decompress
Zlib Decompress

Validators

7

JSON Validator
XML Validator
CSS Validator
JavaScript Validator
YAML Validator
JSON5 Validator
API Test

Number Utilities

8

All Numbers Converter
Decimal to Binary
Decimal to Octal
Binary to Decimal
Binary to Hex
Hex to Decimal
Hex to Binary
Octal to Decimal

Bitwise Tools

4

Bitwise Calculator
XOR Calculator
AND Calculator
OR Calculator

IP Tools

5

IP to Hex
Hex to IP
Binary to IP
IP to Binary
DNS Lookup

Random Tools

5

Random UUID Generator
Random Number Generator
Random String Generator
Random JSON Generator
Random IP Address

Other Tools

3

Lorem Ipsum
Sharelink Generator
Hostname to IP

Minifiers

6

JSON Minify
CSS Minify
XML Minify
HTML Minify
JavaScript Minify
SQL Minifier

CSV Tools

6

CSV to JSON
CSV to XML
CSV to HTML
CSV to SQL
CSV to Excel
CSV to TSV

Sample downloads

Sample videos
Minimal MP4 shells and notes
Sample audio
WAV tones (mono and stereo)
Sample documents
PDF, DOCX, RTF, CSV, Markdown, text
Sample images
PNG, JPEG, GIF, WebP, ICO, SVG
Other sample files
JSON, CSV, HTML, ZIP, YAML, TOML, XML

Loading…

© 2026 Codepicker. All rights reserved.

About Contact Privacy Cookies Terms

Home Tools JSON tools Sample downloads

Tagged snippets

Snippets tagged “Accessibility”

All indexed snippets that share this tag. Clear the filter to return to the global randomized feed.

Clear tag filter

Randomized on refresh63 snippets indexed

// site modules

Snippets, tools, JSON, and sample files

Each area is self-contained: browse code here, open converters in the toolbox, shape JSON in JSON Toolkit, or grab fixtures for tests and demos.

Snippets
Search and open curated frontend examples—HTML, CSS, JS, and frameworks—with previews and copy-ready source.
Open search
Developer tools
Browser-side formatters, encoders, validators, and small utilities—no server round trip for typical tasks.
Browse tools
JSON Toolkit
Edit, format, validate, query, compare, and convert JSON and CSV in one workspace built for larger payloads and offline use where supported.
Open JSON Toolkit
Sample files
Download small test assets—documents, images, audio, video, and other fixtures—for uploads, parsers, and UI demos.
View sample downloads

// main content

Results for tag “accessibility”

Page 1 of 1

<del>, <ins> Code Diff
A <del>, <ins> code diff built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Code Diff Frontend Ui+4 more
Demo Code
Technologies
html, css
Difficulty
beginner
Responsive
Yes
Scroll-Snap Grid Navigation with Intersection Observer
A scroll-snap grid navigation with intersection observer built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
Intersection Observer API, CSS Scroll Snap, Container Queries
Difficulty
intermediate
Features
Keyboard Navigation, Snap-to-grid, Responsive Typography
Responsive
Yes
Spoiler alert with <details> and <summary>
A spoiler alert with <details> and <summary> built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Semantic Html Html+3 more
Demo Code
Technologies
HTML
Difficulty
Beginner
Responsive
Yes
Code Snippet Repository
A code snippet repository built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Semantic Html Html+3 more
Demo Code
Technologies
HTML
Difficulty
beginner
Responsive
Yes
AI Hero Chat Using the Popover API
A ai hero chat using the popover api built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Difficulty
Intermediate
Features
Popover API, CSS @layer, Open Props
Responsive
Yes
Animated Details Element
A animated details element built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
HTML, CSS
Difficulty
Beginner
Features
CSS Animations, Native Disclosure
Responsive
Yes
<details> and <summary>
A <details> and <summary> built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Semantic Html Html+3 more
Demo Code
Technologies
HTML
Difficulty
Beginner
Responsive
Yes
Details + Summary
A details + summary built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Semantic Html Html+3 more
Demo Code
Technologies
HTML
Difficulty
Beginner
Responsive
Yes
Accessibility Contrast Controller Popover
A accessibility contrast controller popover built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+3 more
Demo Code
Technologies
JavaScript, CSS, HTML
Difficulty
Advanced
Browser support
Chrome 125+, Edge 125+, Safari 26+, Firefox 147+
Features
Popover API, Anchor Positioning, Global Filters, Continuous Input
Responsive
Yes
HTML5 Details & Summary
A html5 details & summary built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
HTML5
Difficulty
Beginner
Features
Native Toggle, No-JS Accordion
Responsive
Yes
Details & Summary
A details & summary built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Semantic Html Html+3 more
Demo Code
Technologies
HTML, CSS
Difficulty
Beginner
Responsive
Yes
Dt and dd: Primer Accordion
A dt and dd: primer accordion built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Semantic Html Html+3 more
Demo Code
Technologies
HTML, CSS
Difficulty
beginner
Responsive
Yes
Dropdown Menu with Tailwind and Alpine.js
A dropdown menu with tailwind and alpine.js built with modern frontend techniques for responsive and reusable UI.
Menu Ui Accessibility Navbar Semantic Html+4 more
Demo Code
Technologies
Tailwind CSS, Alpine.js
Difficulty
Beginner
Features
Rotating chevron, Custom summary styling, Interactive checklist
Responsive
Yes
Unit Testing Results Panel
A unit testing results panel built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Semantic Html Html+4 more
Demo Code
Difficulty
Beginner
Features
Collapsible sections, Status labeling, Developer-centric UI
Responsive
Yes
Details Element
A details element built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
HTML
Difficulty
Beginner
Responsive
Yes
Sticky Figcaption with Protruding Figure
A sticky figcaption with protruding figure built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+3 more
Demo Code
Technologies
HTML, CSS
Responsive
Yes
HTML Figure & Figcaption
A html figure & figcaption built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Semantic Html Html+3 more
Demo Code
Technologies
HTML
Difficulty
beginner
Responsive
Yes
Nice Content Scroller – Lesson Variant
A nice content scroller – lesson variant built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Semantic Html Html+4 more
Demo Code
Technologies
CSS @layer, color-mix, light-dark
Difficulty
advanced
Features
custom scrollbars, theme-aware coloring, CSS anchoring, keyboard accessibility
Responsive
Yes
Details Modal
A details modal built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Difficulty
beginner
Responsive
Yes
Tabs Based on the Details Tag
A tabs based on the details tag built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
HTML, CSS, jQuery
Difficulty
intermediate
Features
Exclusive open state, Native HTML components
Responsive
Yes
Use Alt Tags in IMG Captions
A use alt tags in img captions built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
HTML
Difficulty
beginner
Responsive
Yes
Displaying Link URLs
A displaying link urls built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+3 more
Demo Code
Technologies
HTML, CSS
Difficulty
beginner
Responsive
Yes
Flag # links!
A flag # links! built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+3 more
Demo Code
Technologies
HTML, CSS
Difficulty
beginner
Responsive
Yes
Transforming Select Fields using DL, DT & DD
A transforming select fields using dl, dt & dd built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Semantic Html Form Elements+5 more
Demo Code
Technologies
HTML, CSS
Difficulty
beginner
Responsive
Yes
Pure CSS Animated Details Accordion
A pure css animated details accordion built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
HTML, CSS
Difficulty
Intermediate
Browser support
Chrome 129+, Edge 129+
Features
Smooth Height Transition, Zero JavaScript, Discrete Animations, Exclusive Expansion
Responsive
Yes
A Detailed Summary of Life
A a detailed summary of life built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Semantic Html Html+3 more
Demo Code
Technologies
HTML
Difficulty
beginner
Responsive
Yes
Details Elements Example
A details elements example built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
HTML
Difficulty
Beginner
Responsive
Yes
Accessible Text Color Based on the Background Element
A accessible text color based on the background element built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Html Frontend Ui+3 more
Demo Code
Difficulty
intermediate
Features
high-contrast, dynamic-color-adaptation
Responsive
Yes
Details/Summary Animated Accordion
A details/summary animated accordion built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
HTML, CSS
Difficulty
beginner
Responsive
Yes
Details and Summary
A details and summary built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
HTML
Difficulty
beginner
Features
native-collapsible, zero-js
Responsive
Yes
Details and Summary
A details and summary built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
HTML, CSS
Difficulty
Beginner
Responsive
Yes
Figure & Figcaption
A figure & figcaption built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Semantic Html Html+3 more
Demo Code
Technologies
HTML, CSS
Difficulty
beginner
Responsive
Yes
Author Cards with Popover API
A author cards with popover api built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+4 more
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Intermediate
Features
Popover API, CSS Anchor Positioning, Native Top Layer
Responsive
Yes
Auto Color Palette Formatting
A auto color palette formatting built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Form Elements Html+5 more
Demo Code
Features
Contrast detection, Dynamic background calculation, Automatic text color switching
Del & ins
A del & ins built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Semantic Html Diff+10 more
Demo Code
Technologies
HTML
Difficulty
Beginner
Responsive
Yes
Details & Summary
A details & summary built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Semantic Html Html+3 more
Demo Code
Technologies
HTML, CSS
Difficulty
Beginner
Responsive
Yes
Details Element for Help Text
A details element for help text built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Semantic Html Html+3 more
Demo Code
Technologies
HTML, CSS
Difficulty
Beginner
Features
Collapsible content, Zero-JS toggle, A11y compliant
Responsive
Yes
Vocabulary Flashcards
A vocabulary flashcards built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Semantic Html Html+5 more
Demo Code
Technologies
HTML, CSS
Difficulty
beginner
Responsive
Yes
<del> & <ins> with CSS
A <del> & <ins> with css built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Semantic Html Diff+10 more
Demo Code
Technologies
HTML, CSS
Difficulty
beginner
Responsive
Yes
Higher Contrast Panels On Patterned Backgrounds
A higher contrast panels on patterned backgrounds built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+3 more
Demo Code
Difficulty
beginner
Responsive
Yes
Picture Cards - Figure & Figcaption
A picture cards - figure & figcaption built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+4 more
Demo Code
Technologies
HTML, CSS
Difficulty
beginner
Responsive
Yes
Animate Accordions with WAAPI
A animate accordions with waapi built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
WAAPI, JavaScript, HTML, CSS
Difficulty
Intermediate
Responsive
Yes
Native Rounded Outline
A native rounded outline built with modern frontend techniques for responsive and reusable UI.
Accessibility Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS
Difficulty
beginner
Responsive
Yes
TreeView Details/Summary
A treeview details/summary built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
HTML, CSS
Difficulty
easy
Features
Collapsible, No-JS, Hierarchical
Responsive
Yes
DL and DT
A dl and dt built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Semantic Html Html+3 more
Demo Code
Technologies
HTML
Difficulty
Beginner
Responsive
Yes
HTML Sub and Sup
A html sub and sup built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Semantic Html Html+4 more
Demo Code
Technologies
HTML
Difficulty
Beginner
Responsive
Yes
Sliding Reveal Description List
A sliding reveal description list built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Semantic Html Html+4 more
Demo Code
Technologies
HTML, CSS
Difficulty
beginner
Responsive
Yes
Gallery with Figure & Figcaption
A gallery with figure & figcaption built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
HTML, CSS
Difficulty
beginner
Responsive
Yes
Details & Summary
A details & summary built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Semantic Html Html+3 more
Demo Code
Technologies
HTML
Difficulty
Beginner
Features
Collapsible content, Native disclosure widget
Responsive
Yes
HTML Only Accordion
A html only accordion built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
HTML
Difficulty
beginner
Features
Zero-JS, Native Browser Toggle
Responsive
Yes
Accessible Password Input with Custom Web Components
A accessible password input with custom web components built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Form Elements Html+4 more
Demo Code
Technologies
Vanilla JavaScript, Web Components, CSS Custom Properties
Difficulty
Intermediate
Features
Real-time validation, Accessible ARIA patterns, Custom Element encapsulation
Responsive
Yes
HTML Figure & Figcaption
A html figure & figcaption built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Semantic Html Html+3 more
Demo Code
Technologies
HTML
Difficulty
beginner
Responsive
Yes
Figure & Figcaption Tags
A figure & figcaption tags built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Semantic Html Html+3 more
Demo Code
Technologies
HTML
Difficulty
beginner
Responsive
Yes
HTML5 Details & Summary File Tree
A html5 details & summary file tree built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
HTML5, CSS3
Difficulty
beginner
Features
No-JS, Collapsible, Nested Hierarchy
Responsive
Yes
Figure & Figcaption with CSS
A figure & figcaption with css built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+3 more
Demo Code
Technologies
HTML, CSS
Difficulty
beginner
Responsive
Yes
CSS Tabs Component using Details Tag (No JS)
A css tabs component using details tag (no js) built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
HTML, CSS
Difficulty
Beginner
Features
No-JS, Exclusive-open behavior
Responsive
Yes
Writer's Unblock with HTML dt and dd Tags
A writer's unblock with html dt and dd tags built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Semantic Html Html+3 more
Demo Code
Technologies
HTML
Difficulty
beginner
Responsive
Yes
Gracefully-degrading <details> Accordion
A gracefully-degrading <details> accordion built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
HTML, CSS
Difficulty
Beginner
Features
Zero-JS, Accessible, Graceful Degradation
Responsive
Yes
Multiple Popovers with Anchor Positioning and @property
A multiple popovers with anchor positioning and @property built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
CSS Anchor Positioning, Popover API, CSS @property, Vanilla JS
Difficulty
Advanced
Features
Zero-dependency, Hardware-accelerated animations, Native browser anchoring
Responsive
Yes
HTML <details> & <summary>
A html <details> & <summary> built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
HTML
Difficulty
Beginner
Responsive
Yes
Recipe with <details> and <summary>
A recipe with <details> and <summary> built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
HTML, CSS
Difficulty
Beginner
Responsive
Yes
Multi-line Link
A multi-line link built with modern frontend techniques for responsive and reusable UI.
Accessibility Text Formatting Semantic Html Html+4 more
Demo Code
Technologies
HTML, CSS
Difficulty
beginner
Responsive
Yes
Native HTML Details Element
A native html details element built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
HTML
Difficulty
beginner
Features
Collapsible content, Zero-JS, Native browser support
Responsive
Yes

// secondary navigation

Browse categories

Jump into HTML, CSS, JavaScript, Bootstrap, Tailwind CSS, and the rest when you want to narrow the view.

Languages

HTML
826 snippets · 0 subcategories (62 nested)
/html-code-examples
Open
CSS
10,162 snippets · 0 subcategories (443 nested)
/css-code-examples
Open
JavaScript
2,212 snippets · 0 subcategories (241 nested)
/javascript-code-examples
Open

Frameworks

Bootstrap
1,534 snippets · 0 subcategories (112 nested)
/bootstrap-code-examples
Open
Tailwind CSS
1,257 snippets · 0 subcategories (122 nested)
/tailwind-css-code-examples
Open
JQuery
1,380 snippets · 0 subcategories (34 nested)
/jquery
Open
React
4,503 snippets · 0 subcategories (37 nested)
/react
Open
Vue
94 snippets · 0 subcategories (7 nested)
/vue
Open