Bookmarklet Generator - Online Convert JS to Browser Bookmark
Paste any JavaScript snippet and get a ready‑to‑drag bookmarklet link. Minify and encode automatically. Pure client.
UD5 Toolkit
Convert your JavaScript code into a ready-to-use bookmarklet. Drag it to your bookmarks bar & run it on any page.
Copied!
javascript:... code into the URL field, and save it. Open any page, tap the bookmark to execute.
javascript: URI scheme. When a browser encounters a bookmark with a javascript: URL, it executes the JavaScript code in the context of the currently loaded page. This gives the bookmarklet full access to the page's DOM, variables, and APIs — which is why it can modify content, read data, and interact with the page just like a script that was natively included. Our builder wraps your code in an IIFE (Immediately Invoked Function Expression) to prevent variable leaks and uses encodeURIComponent() to ensure all special characters are properly encoded for URL compatibility.
encodeURIComponent) converts special characters like spaces, quotes, ampersands, and other symbols into their percent-encoded equivalents (e.g., space becomes %20). This is essential because bookmark URLs must conform to URI standards. Without encoding, characters like #, &, ?, and unescaped spaces could break the bookmark or be misinterpreted by the browser. Proper encoding ensures your bookmarklet works reliably across all browsers and platforms.
frame or iframe sandboxing<script> tag and appending it to the DOM. For example:var s=document.createElement('script');s.src='https://cdn.jsdelivr.net/npm/lodash@4/lodash.min.js';s.onload=function(){/* your code */};document.head.appendChild(s);javascript:... URL in the URL field. You can copy it back into this tool (the builder automatically strips the javascript: prefix and decodes it for editing), make your changes, and regenerate. To delete, simply right-click and choose "Delete" or remove it from the Bookmark Manager.
void(0); prevents this, but if unwrapped, add void(0); at the end of your code.Content-Security-Policy headers that block inline scripts.
Paste any JavaScript snippet and get a ready‑to‑drag bookmarklet link. Minify and encode automatically. Pure client.
Animate text that looks like it's being decoded or scrambled before settling on the final word. Copy the JS snippet.
Design a layout where nested grids share track sizes with their parent via subgrid. Copy the complete CSS.
Drop a PDF and extract any embedded JavaScript or form actions. Check for malicious code. Privacy‑friendly analysis.
Create promises that resolve or reject after a delay. See state changes and chain .then/.catch. Debug async code.
Add rows and columns, merge cells, and set gaps visually. Get the grid‑template CSS and HTML. Fast layout prototyping.
Write JavaScript using element.animate() and see the result in a live preview. Compare with CSS keyframes. Debugger included.
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.
Create complex linear gradients with any number of color stops, exact angles, and length units. Live preview and CSS code.
Write JavaScript code and see the output or console.log results immediately. Safe iframe sandbox. For quick experiments.
Drag protons, neutrons, and electrons onto a Bohr model template. See the element change. Educational tool.
Get a clean, commented JS plugin skeleton with IIFE or ES module pattern. Start your new library faster.
Craft a 30‑second elevator pitch by filling in problem, solution, and ask. Copy the final professional text.
Build a simple decision tree by adding yes/no nodes. Flowchart style. Export as text outline.
Convert any text into JavaScript‑style \uXXXX escape sequences and vice versa. Handles emojis. Useful for i18n development.
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.
Configure and generate a pure CSS accordion with details/summary styling. Copy the HTML/CSS. Accessible and lightweight.
Build a yoga flow by dragging pose cards into a sequence. Pose reference images included. Print or share your flow.
Build a GraphQL query by selecting fields and nesting visually. Copy the built query string. For learning and fast prototyping.
Type any condition and see the result of the ternary operator. Understand truthy/falsy values. Quick learning tool.
Create simple 2‑ or 3‑set Venn diagrams by entering comma‑separated lists. Shareable via URL fragment. No account.
Build a small crossword by adding words and clues. Export as a printable grid or solve in browser. Perfect for classrooms.
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.
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.
Build and test regular expressions against sample text. Real-time match highlighting, capture groups display, and flavor options. All inside your browser.