book
mark
leet

Write bookmarklets as files in modern JavaScript
and easily sync to your browser.
”Bookmarklets allow you to always keep your common tasks on a web page just a click away.“ —Mozilla
Out-of-the-box with Babel's preset-env. Or customize your Babel config, e.g., for TypeScript or JSX to create DOM.
First, decide if you want to use our Codesandbox template, or locally. For local, open a terminal to create a new project:
$ npm init bookmarkleet my-bookmarklets
(copy)
Check out the example bookmarklet file under "src".

You can add your own next to this one.
alert('hi from bookmarkleet!');
(copy)
Now, back to the terminal, build your bookmarklets:
$ npm start
(copy)
This opens your browser, with all your bookmarklets.

To install your bookmarklet, drag to your bookmarks bar:
Dragging bookmarklets
On any site, in your browser's URL bar, you use bookmark autocompletion to run your bookmarklets by typing "bklt", space, and then the name of your file.
Invoking bookmarklets with URL bar autocomplete
Or sync all at once with our browser extension:
Syncing bookmarklets
Or download a bookmarks HTML file for import
into your browser's bookmarks manager.
(Instructions for chrome firefox)
Downloading bookmarklets
Your bookmarklets can also use dependencies from npm:
$ npm add polished
(copy)
import { invert } from "polished"
document.querySelectorAll("*").forEach(el => {
const { backgroundColor, color } = getComputedStyle(el)
el.style.backgroundColor = invert(backgroundColor)
el.style.color = invert(color)
})
(copy)
Example bookmarklet: invert colors
To customize your Babel config, just install presets or plugins, and create a ".babelrc.json" file.
For example, to use TypeScript:
$ npm add -D @babel/preset-typescript typescript
(copy)
{
"presets": [
"@babel/preset-env",
"@babel/preset-typescript"
],
}
(copy)
const message: string = 'hi'
alert(message)
(copy)
Or, to use JSX to create DOM with dom-chef:
$ npm add -D @babel/plugin-transform-react-jsx
(copy)
$ npm add dom-chef
(copy)
{
"presets": [
"@babel/preset-env",
],
"plugins": [
[
"@babel/plugin-transform-react-jsx",
{
"pragma": "h",
"pragmaFrag": "DocumentFragment"
}
]
]
}
(copy)
import { h } from 'dom-chef'
const handleClick = (e) => {
e.preventDefault();
alert("You clicked me!");
};
const el = (
<button class="btn" onClick={handleClick}>
Click me
</button>
);
document.body.prepend(el);
(copy)
Notice: We use cookies for analytics & ads. See more at our Privacy Policy.