UD5 Toolkit
GraphQL Playground - Online Query & Schema Explorer
Execute GraphQL queries against any endpoint with variables and headers. Explore schema via introspection. All requests made directly from your browser.
GraphQL Query Builder - Online Visual Construct Request
Query Builder
Variables
Root Fields
Add a root field to start building your query.
Generated Query
Frequently Asked Questions
A GraphQL Query Builder is a visual tool that helps you construct GraphQL queries without manually writing the syntax. You can add fields, nested fields, arguments, and variables through an intuitive interface, and instantly see the generated query.
Click the icon next to any field, then enter the child field name. The child will appear indented under its parent, and you can keep nesting as deep as needed.
Use the button on a field to add an argument. Specify the argument name, value, and type (String, Int, Boolean, etc.). For variables, select "Variable" and enter the variable name (without the $).
Yes! Use the dropdown at the top to switch between Query, Mutation, and Subscription. The generated output will include the correct operation type.
First, define your variables in the Variables section (name, type, optional default). Then, when adding an argument to a field, select "Variable" as the type and enter the variable name (without $). The builder will declare the variable in the query operation.
Click the "Copy" button next to the code preview, and the full query will be copied to your clipboard. You can then paste it into your GraphQL client or IDE.
GraphQL Request Tester - Online Simple Client
Enter a GraphQL endpoint, write a query, and see the response. Add headers and variables. Simple testing client.
JSON to Graph Visualization - Online Tree Diagram
Paste a JSON object and see a dynamic, draggable tree graph representation. Excellent for debugging nested data.
Visual Fraction Adder – Online Slice & Combine Pies
Drag pie slices to represent fractions and see them added together. Great for visual learners.
Paper Size Visual Comparison – Online A4 vs Letter vs Legal
Overlay outlines of different paper sizes scaled to real dimensions on screen. Choose the right one.
Breathing Exercise Timer - Online Inhale Hold Exhale Visual Guide
Animated circle guides your breathing: breathe in, hold, breathe out. Customizable ratios (e.g., 4-7-8). Soothing colors, optional bell sound. Purely local.
Bookmarklet Code Builder - Online Convert JS to Bookmark
Write a JavaScript snippet and get a ready‑to‑drag bookmarklet link. With minification and encoding. Easy browser tools.
Binary Number Explainer - Online Visual Bit Representation
Enter a decimal number and see a visual breakdown of bits, place values, and bitwise operations. Learn binary easily.
CSS Subgrid Layout Builder - Online Align Nested Grids
Design a layout where nested grids share track sizes with their parent via subgrid. Copy the complete CSS.
Permissions Query API Demo - Online Check All APIs
Query the permission state of camera, microphone, geolocation, and more. See the response and learn the API.
CSS Grid Layout Builder - Online Visual Drag & Drop
Add rows and columns, merge cells, and set gaps visually. Get the grid‑template CSS and HTML. Fast layout prototyping.
AudioContext Sandbox - Online Web Audio API Visual Programming
Connect oscillators, gain nodes, and filters with a visual graph. Hear the result in real time. Learn Web Audio interactively.
Advanced CSS Gradient Builder - Online Multi‑Stop & Angle
Create complex linear gradients with any number of color stops, exact angles, and length units. Live preview and CSS code.
Text to Binary Grid - Online Visual Representation
Enter text and see each character's 8‑bit binary laid out in a black‑and‑white grid. Beautiful data art. Local.
Atom Builder 2D - Online Create Elements with Protons/Electrons
Drag protons, neutrons, and electrons onto a Bohr model template. See the element change. Educational tool.
Vanilla JS Plugin Builder - Online Template Generator
Get a clean, commented JS plugin skeleton with IIFE or ES module pattern. Start your new library faster.
Elevator Pitch Builder - Online Structured Intro
Craft a 30‑second elevator pitch by filling in problem, solution, and ask. Copy the final professional text.
Decision Tree Builder - Online Visual Yes/No Path
Build a simple decision tree by adding yes/no nodes. Flowchart style. Export as text outline.
Collatz Conjecture Visualizer - Online Hailstone Numbers
Enter a number and see its Collatz sequence graphed. Watch the steps until it reaches 1. Mesmerizing math.
Keyboard Layout Tester - Online Visual Key Press Viewer
Press any key and see it light up on a standard QWERTY layout. Check functionality or demonstrate shortcuts.
Cron Job Simulator - Online Visual Schedule Tester
Set a cron expression and see a calendar of the next 1,000 execution times. Never miss a schedule again.
SQL Query Formatter - Online Prettify & Highlight
Upload ugly SQL and get a beautifully indented, syntax‑highlighted version. Supports multiple dialects. All local.
Digital Hourglass - Online Visual Timer with Sand
An animated hourglass that you can set for any time. Watch the sand flow. Beautiful and calming timer.
CSS Grid Playground - Online Interactive Layout Builder
Experiment with CSS Grid properties visually. Add rows, columns, and areas. See the grid in action and copy the code.
CSS‑Only Accordion Builder - Online No JavaScript FAQ
Configure and generate a pure CSS accordion with details/summary styling. Copy the HTML/CSS. Accessible and lightweight.
Yoga Sequence Builder - Online Drag & Drop Poses
Build a yoga flow by dragging pose cards into a sequence. Pose reference images included. Print or share your flow.
Venn Diagram Builder - Online 2‑ & 3‑Set Overlap Visualizer
Create simple 2‑ or 3‑set Venn diagrams by entering comma‑separated lists. Shareable via URL fragment. No account.
Crossword Builder - Online Create & Solve Simple Puzzles
Build a small crossword by adding words and clues. Export as a printable grid or solve in browser. Perfect for classrooms.
Query String Parser & Builder - Online URL Params Editor
Parse a URL's query string into a key-value table, or build a query string from parameters. Perfect for API testing and web development.
RegEx Tester - Online Regular Expression Builder & Matcher
Build and test regular expressions against sample text. Real-time match highlighting, capture groups display, and flavor options. All inside your browser.