Bookmarklets, Favelets and Snippets


If you’ve used them once you’ll never be able to work without them. Bookmarklets1 (or Favelets) are tiny Javascript-Snippets, which are stored within a bookmark and add particular functionalities to the browser you’re using. It doesn’t matter whether you browse, bookmark, look up, search, design or program – depending on your interests, bookmarklets can significantly enhance your efficiency and productivity. However, if you take a look around, you’ll find hundreds of sites, which offer favelets of any possible kinds. Indeed, you’ll find thousands of bookmarklets, many of which you aren’t really interested in. What you eventually are interested in, is a hand-picked choice of the most useful snippets you can directly copy and use from one single page.

We’ve chosen some of the most useful bookmarklets, written new ones and listed them below. You’ll find the source, from which a bookmarklet is copied or modified, or a detailed description of the snippets, in the brackets.

To install the bookmarket just drag’n’drop the JavaScript-Code from the link to the toolbar of your browser. To use the bookmarklet select the text on a page or an address of a web-page and click on the bookmarklet. If you don’t select any text or url and click on the snippet, you’ll get a JavaScript window, in which you can input text manually.

If you use many favelets, you might be willing to check out the Blummy Bookmarklet2 (The Bookmarklet Management Bookmarklet), a free tool for quick access to your favorite web services via your bookmark toolbar.

Looking up

Social Networks, Web 2.0, Online-Services

Web-Design, Web-Development

  • Color List Favelet47 creates a color palette which is used on a given page.
  • Elements inspector48 offers the same functionality as Aardvark Firefox Extension49; it shows the information about Div-Containers, Headers, Paragraphs etc. []
  • Favelet Suite50 is a package of 16 Bookmarklets, which can be used in web-development. Document Tree Chart, Javascript Object Tree, Mouseover DOM Inspector, Ruler, Style Sheet Viewer etc.
  • Layout Grid Bookmarklet51 creates a Grid-Overlay of the page; useful, i.e. if you want to calculate the layout size.
  • SEO Bookmarklets52 is a collectino of 22 Favelets for SEO-analysis. It uses search engines, social networks and further services.
  • Web Developer Favelets: 9 simple Favelets a web-developer will use on a daily basis.
  • string2html53 converts strings to HTML-Entities [wzb54].

Links Functionality

Better Navigation

Tools for Bloggers

Useful Tools

Further Collections

↑ Back to topShare on Twitter

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops and loves solving complex problems in large companies. Get in touch.

  1. 1

    Wow, I haven’t heard of almost all of these, I am defiantly going to try and take advantage of some of these. Thanks!

  2. 2

    I just recently discovered the power of bookmarklets and the likes (due to the switch from firefox to shiira to safari, in the need of integration), and so this great post is right on spot.

    Thank you for that!

  3. 3

    A really nice collection. But some of them are only “javascript:q=” for me (one of them is check page rank).

  4. 4

    Man! Do you get paid to do this?!? I am sure even guys who get paid wont do such a good, read _great_, job! Awesome!

  5. 5

    I admire again and again your would list from the Web crate; and: again and again amazingly.
    therefore it is interesting to known , which of you favorite would be . . .

  6. 6

    Great list, thanks. One more for your online services section: OnlyWire – it lets you post to several social bookmarking sites simultaneously.

  7. 7

    Thanks for another great collection of resources!

  8. 8

    Wow. Blummy looks promising, and this is a great collection of bookmarks. I found that, if you have the extension enabled for Firefox, bookmarking these with the service and saving them with a tag like “bookmarklets” can make these easily accessible as well.

    Alternativly, I keep a “bookmarklets” folder (I moved the Bookmarks Toolbar next to my Firefox menu before enabling extension; in effect, this gives me two sets of bookmarks, one that syncs with the server, and one that does not) which also provides easy access for these.

    Again, nice list, and an as-always great post!

  9. 9

    MultiSubmit r00x :)

  10. 10

    I am curious if there is any way to show the “favicon” for bookmarklets (Firefox)? I always see the ugly “blank page” icon next to my bookmarklets.

  11. 11

    There is one more tinyurl-like, who seems much more sexy :

    The design is really nice !

    (and there is a french version :

  12. 12

    I have put up a few favelets of my own including an XSLT engine, a JavaScript command window, a GUID generator and more. Although most were written for Firefox, many work on IE/Safari/Opera. I even have some IE specific ones. Check them out at

  13. 13

    Hi, interesting unknown data formats and file extensions finder is Michal

  14. 14

    Nice list of bookmarklets. If you’re looking for more checkout I think it’s the biggest list of bookmarklets online.

  15. 15

    This is a great resource for finding bookmarklets. I’ve been working on a project where I create tutorials on how to install bookmarklets on various iOS devices such as the iPod touch, iPhone, and iPad.

    The site is

    The main issue is that you can’t “drag and drop” on an iPad or iPhone. However there are a couple techniques around this including using iCloud or emailing the JavaScript code to yourself.


↑ Back to top