UD5 Toolkit
Visual Fraction Adder – Online Slice & Combine Pies
Drag pie slices to represent fractions and see them added together. Great for visual learners.
Decision Tree Builder - Online Visual Yes/No Path
Decision Tree Builder
Click "Root" to start building your Yes/No decision tree, or load the example below.
Frequently Asked Questions
A decision tree is a flowchart-like structure where each internal node represents a decision or question, each branch represents an outcome (Yes/No), and each leaf node represents a final conclusion or action. It's widely used in decision analysis, machine learning, business strategy, and everyday problem-solving to visualize choices and their potential consequences.
Start by clicking the "Root" button to create your starting question. Each node has Yes (green) and No (red) branches. Click the + icons on any node to add follow-up questions, or click the node itself to edit its text. You can drag the canvas to pan, use the mouse wheel to zoom, and export your tree as JSON, PNG, or SVG.
Decision trees are used in business planning (evaluating project viability), medical diagnosis (symptom-based pathways), customer support (troubleshooting guides), software debugging (error resolution flowcharts), personal decisions (career choices, financial planning), and machine learning (classification and regression models). They help break complex decisions into simple Yes/No steps.
Absolutely! You can export as JSON to save and later re-import your tree for editing. Use Export PNG for a high-resolution image suitable for presentations, documents, or sharing online. The Export SVG option provides a scalable vector graphic ideal for printing or embedding in websites. All exports maintain the visual structure of your tree.
Good decision tree questions are clear, binary, and actionable. Each question should have a definitive Yes or No answer. Avoid ambiguous or open-ended phrasing. For example, "Is the budget over $10,000?" is better than "What is the budget?" Keep questions mutually exclusive—the Yes and No paths should lead to distinct next steps. Leaf nodes should contain final conclusions or actions.
No. This tool runs entirely in your browser. Your decision tree data is stored only in your browser's local storage (for convenience) and is never uploaded to any server. You can clear your data at any time using the Reset button. For complete privacy, export your tree as a JSON file and delete the browser data.
Pan: Click and drag any empty area of the canvas to move around. Zoom: Use your mouse scroll wheel or the +/- buttons in the toolbar. Click "Fit" to automatically adjust the view so the entire tree is visible. On mobile devices, you can pinch to zoom and drag to pan. The current zoom level is always displayed in the toolbar.
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.
Memory Palace Trainer – Online Visualize & Place Items
Virtual rooms where you can place images representing items to remember. Practice the method of loci.
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.
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.
CSS Transition Playground - Online Visual Easing Curve Builder
Choose a property, duration, and bezier curve. Trigger the transition and see the animation. Copy the complete CSS rule.
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.
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.
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.
Brain Teaser Riddles - Online Logic Puzzles & Answers
A collection of clean, family‑friendly riddles with a reveal‑on‑click answer. Random riddle each time. Perfect for break time.
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.
GraphQL Query Builder - Online Visual Construct Request
Build a GraphQL query by selecting fields and nesting visually. Copy the built query string. For learning and fast prototyping.
Gray Code Converter - Online Binary to Reflected Code
Translate between binary and Gray code (reflected binary code). See the bit changes. Useful for digital logic.
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.
Prime Factor Tree Generator - Online Visual Factorization
Enter a number and see an animated factor tree breaking it down to primes. Perfect for teaching factorization.
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.