Dependency Graph Builder - Online Visualize NPM/Import Dependencies
Enter dependencies in a simple text format and see a force‑directed graph of the project's dependency tree. For planning architectures.
UD5 Toolkit
See how much physical space $1 billion (and more) really takes up — in $100 bills
The stack is taller than the Burj Khalifa (2,717 ft) — the world's tallest building!
Enter dependencies in a simple text format and see a force‑directed graph of the project's dependency tree. For planning architectures.
Paste code and generate a beautiful, syntax‑highlighted PNG image. Choose theme and window style. Shareable code pics.
Learn how to let content extend a few pixels beyond a clip boundary with overflow‑clip‑margin. Interactive playground.
Type a password and see a bar that fills based on estimated bits of entropy. Color‑coded feedback. No storage.
Project your retirement savings growth with monthly contributions, employer match, and CAGR. Interactive chart. Financial data stays on your device.
Create beautiful, syntax-highlighted screenshots of your code snippets. Choose themes and export as PNG. All client-side canvas rendering.
Adjust margin, border, padding, and content sizes interactively and see the rendered box model. Get the exact CSS. Teach or learn layout.
Visually design a custom :focus‑visible outline style. Copy the CSS. Better than the default.
Load images or use colors and apply all 15 CSS blend modes. Visual tester for creative effects.
Define password rules and see a live checklist that updates as you type. Design better password UX for your app.
Create colorful digital sticky notes on a corkboard. Drag, edit, and delete. Notes persist in local storage. No login.
Enter container width, number of items, gap, and flex‑basis. See the resulting sizes instantly. Plan your flex layout.
Create outlined text with the text‑stroke property. Adjust width and color. Preview and copy the CSS.
See the difference between :focus and :focus‑visible on interactive elements. Learn which to use for better UX.
Paste a screenshot or image, crop it, and add arrows, rectangles, and text. Essential for bug reports and tutorials.
Find the ideal height to hang art based on wall and furniture dimensions. Follow gallery standard 57‑inch center rule.
Generate the Koch snowflake fractal to a desired iteration level. See how the perimeter grows. Interactive geometric art.
Upload an image and get a suggested alt text description using a local vision model (WASM). Improve SEO and accessibility fast.
Generate Lorem Ipsum placeholder text for your designs and mockups. Specify paragraphs, words, or bytes. Produce classic or custom dummy content instantly.
Paste HTML/CSS snippets or enter properties to test how z‑index and stacking contexts interact. Real‑time example.
Visually configure scroll‑snap containers and items. Adjust alignment, stop behavior, and padding. Copy the clean CSS instantly.
Use isolation: isolate to contain mix‑blend‑mode and filters. See the visual difference with and without. Quick demo.
Generate a random HTML/CSS card with different box model properties. Inspect and guess the size. For learners.
Design a tooltip that appears on hover without JavaScript. Choose positioning, arrow, and animation. Copy the clean HTML/CSS.
Interactively add and adjust multiple box shadows on a sample element. Drag sliders for offset, blur, spread, and color. Copy the clean CSS code instantly.
Create a 'SALE' or 'NEW' corner ribbon in pure CSS. Adjust colors, position, and text. Great for e‑commerce.
Follow along with animated crease patterns to fold a paper crane. Pause and rewind steps.
Design layered box shadows interactively and get the CSS code in real time. Adjust offset, blur, spread, and color. Essential tool for UI designers.
Convert 3-digit capacitor codes (like 104, 222) to capacitance value in pF, nF, µF. Also converts back. Useful for reading tiny ceramic capacitors.
Design neumorphic elements by adjusting box‑shadow parameters. Real‑time preview and CSS output. For modern soft UI interfaces.