UD5 Toolkit
Choose‑Your‑Own‑Adventure Tree Builder – Visual Story Map
Draw a branching story tree by adding nodes and connecting them. Export as a JSON or play through the interactive narrative.
Setlist Builder – Online Drag Songs into Order & Time
Setlist Builder
Drag songs into order — plan your perfect set
0 songs
0m 0s
Your setlist is empty.
Add your first song below or drag songs to reorder.
Frequently Asked Questions
A Setlist Builder is an online tool that helps musicians, bands, and DJs organize and arrange their performance setlists. You can add songs with their durations, drag and drop to reorder them, and automatically calculate the total performance time. It's essential for planning concerts, rehearsals, weddings, or any live music event.
On desktop, simply grab the handle on any song row and drag it to your desired position. On mobile devices, use the up and down arrow buttons to move songs. The setlist automatically saves to your browser's local storage, so you won't lose your work.
Enter each song's duration in mm:ss format (e.g., "3:30" for three minutes and thirty seconds). The tool automatically parses all durations, sums them up, and displays the total in a human-readable format. If the total exceeds 60 minutes, it shows hours and minutes (e.g., "1h 23m"). You can also enter plain numbers like "4" which will be interpreted as "4:00".
Yes! Your setlist is automatically saved to your browser's local storage. When you return to this page, your songs and their order will be restored instantly. No account or registration is required. Just don't clear your browser data if you want to keep your setlists.
Enable the "Start time" option and set your concert's start time (e.g., 7:00 PM). The tool will calculate and display the estimated end time for each song, helping you plan exactly when each track will finish during your performance. This is invaluable for planning set transitions and ensuring you stay on schedule.
Absolutely! Click the Copy button to copy your setlist as formatted text to your clipboard — perfect for sharing via email or messaging apps. Use the Print button for a clean, printer-friendly version of your setlist without any UI elements, ideal for having a physical copy on stage.
Yes, this Setlist Builder is 100% free with no registration, no ads, and no hidden fees. It runs entirely in your browser — your data never leaves your device. Use it as much as you want for band practice, gig planning, wedding DJ sets, or any live performance preparation.
Gratitude Tree – Add a Leaf for Every Thankful Thought
Type what you’re thankful for and it appears as a leaf on a bare tree. Over time, the tree fills with colorful gratitude leaves.
Skincare Routine Builder – AM & PM Steps by Skin Type
Select your skin type and concerns to get a basic morning and evening routine with product types (cleanser, moisturizer, SPF) in the right order.
UTM Campaign URL Builder – Track Marketing Links
Fill in the source, medium, campaign, term, and content fields to generate a properly formatted UTM‑tagged URL. Copy the clean link for your ads.
Interactive GraphQL Query Builder – Point & Click
Paste a GraphQL schema or introspection result and build queries by checking fields. See the resulting query string and copy it for use in your app.
Scavenger Hunt List Builder – Online Indoor/Outdoor Clues
Type a list of items to find and generate a printable checklist with checkboxes. Great for parties.
Visual Cron Schedule Builder – Online Next 10 Runs Preview
Build a cron expression using plain English toggles and see its visual timeline. No memorization needed.
Comic Strip Layout Builder – Online Drag Panels
Arrange pre‑drawn comic panels into a strip. Add speech bubbles. Export as image. Fun for kids.
One‑Page Resume Builder - Online Simple CV Generator
Fill in a form to generate a clean, ATS‑friendly one‑page resume. Customize sections, colors, and export as print‑ready PDF. Personal data stays in your browser.
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.
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.
WCAG Safe Palette Builder - Online Accessible Color Sets
Start with a base color and generate an extended palette where every shade contrasts properly with white and black. Export tokens.
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.
Cocktail Builder - Online What Can I Make?
Select the ingredients you have at home and see a list of cocktails you can make. Surprise yourself. Local database.
Scroll‑Driven Carousel Builder - Online CSS-Only Slider
Construct a CSS‑only carousel with scroll‑snap and scroll‑driven animations. Configurable gap, items, and progress indicator. Copy the HTML/CSS.
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.
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.
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.
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.
Resistor Color Code Calculator - Online Band to Value
Select color bands to decode a resistor's value, tolerance, and temperature coefficient. Essential for anyone working with electronics hardware.
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.