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.
UD5 Toolkit
Explore, build & test JavaScript's ? : operator in real-time
Write a JavaScript snippet and get a ready‑to‑drag bookmarklet link. With minification and encoding. Easy browser tools.
Animate text that looks like it's being decoded or scrambled before settling on the final word. Copy the JS snippet.
Drop a PDF and extract any embedded JavaScript or form actions. Check for malicious code. Privacy‑friendly analysis.
Test SQL injection inputs on a mock database and see the resulting query. Learn how to prevent SQLi. No real data.
Paste JavaScript and catch syntax errors instantly with line numbers. Lightweight pre‑commit check. Local.
Write modern CSS color functions like oklch(), lab(), hwb() and see the rendered color with fallback. Copy compatible code.
Create promises that resolve or reject after a delay. See state changes and chain .then/.catch. Debug async code.
Write a generator function and step through it with next(). See values and done state. Understand iterators.
Set perspective and rotate children in 3D space. See the effect of perspective‑origin. Copy the CSS. Learn 3D transforms.
Drag to resize a box and see the Resize Observer callback fire. Get contentRect and borderBoxSize. Learn the API.
Write JavaScript using element.animate() and see the result in a live preview. Compare with CSS keyframes. Debugger included.
Write a compute shader in WGSL and run it in the browser. See the output on a canvas. Learn WebGPU. Real‑time compilation.
Type directly into a contenteditable div with real‑time CSS filters, shadows, and colors. Download as HTML. Fun demo.
Input any JavaScript object and see if structuredClone can deep‑copy it. Compare with JSON.parse/stringify. Learn transferables.
Test the Fullscreen API: request fullscreen on a colored div, detect changes, and copy the JavaScript boilerplate.
Choose Babel presets (env, React, TypeScript) and plugins. Get a clean babel.config.json to transpile your code. Local tool.
Press any key to see the complete KeyboardEvent properties: key, code, keyCode, modifiers. Indispensable for game & shortcut developers.
Pick two images or colors and apply all 16 CSS mix‑blend‑mode values live. See and copy the right CSS for your design.
Experiment with the CSS color-mix() function. Pick two colors and mix them in different color spaces (srgb, oklch). Copy the 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.
Write JavaScript code and see the output or console.log results immediately. Safe iframe sandbox. For quick experiments.
Paste any JavaScript snippet and get a ready‑to‑drag bookmarklet link. Minify and encode automatically. Pure client.
Convert any text into JavaScript‑style \uXXXX escape sequences and vice versa. Handles emojis. Useful for i18n development.
A replica of the famous Flexbox Froggy game: solve alignment puzzles by writing CSS. Progress saved locally. Fun frontend learning.
Experiment with CSS Grid properties visually. Add rows, columns, and areas. See the grid in action and copy the code.
Paste any JavaScript expression and see its evaluated type and value. Understand JS coercion and type quirks. Educational.
Visually experiment with Flexbox container and item properties. See the layout update in real time and copy the CSS. Learn by doing, fully interactive.
Press any key to see the corresponding JavaScript event key, code, and keyCode. An essential debugging tool for front-end developers handling keyboard input.
Minify JavaScript and CSS code to reduce file size for production. Remove whitespace and comments instantly. Run locally, your code stays private.
Make your JavaScript code more readable with this online beautifier. Format and indent JS automatically. Works entirely in your browser, protecting your code privacy.