• Vanilla

mark.js: JavaScript keyword highlighter

formerly known as jquery.mark or jmHighlight, mark.js is a text highlighter written in JavaScript and jQuery. It can be used to dynamically mark search terms or custom regular expressions and offers you built-in options like diacritics support, separate word search, custom synonyms, iframes support, custom filters, accuracy definition, custom element, custom class name and more.

  • Spotlight

TypeIt: jQuery Animated Typing Plugin

TypeIt is a high quality jQuery plugin that types text a given string or strings of text on a page. Its responsive, lightweight and easy to customize.

To get started you can either pass in settings object, use data-typeit-* attributes, or You can define your string by dropping it directly in the HTML element. You can have it play back multiple strings and even set it to delete the previous string before starting a new one for that realistic effect. You can also alter details like speed, and even pacing to make it feel like a person is doing the typing.

  • Spotlight

bigfoot.js: Create Better Footnotes

Bigfoot is a jQuery plugin to help you create better footnotes and make them a lot easier to use.

Footnotes on the web can be a pain; you click a tiny number, get transported somewhere near the bottom of the page, find the footnote, and click on a link to go back where you can from.

This script makes that process painless by automatically detecting the footnote link and content. Then it turns the link into an easy-to-click button, and adds a popover when the the footnote button is clicked.

The script and default styles are built to work great on any size viewport; the popover is positioned on the top or bottom automatically (based on the relative amount of space), will update its location as the viewport changes size and will ensure that the popover never scrolls off screen. These elements make for a better user experience.

The tool is easy to install and use and comes with some options so you can make adjustments on your own.


  • Vanilla

underline.js: Draw and Animate the Text Underline

A javascript library that sets out to do one simple job — draw and animate the most perfect and playful text underline, that’s exactly what underline.js does.

Here are some of the features of the tool:

  • It is pixel-perfect on the half pixel level for retina displays
  • It has an optimized thin stroke width that is always one-sixth of the width of a period
  • It sits on the optimal Y position between the baseline and descender line (the golden ratio point
  • It has holes around descenders to completely respect the type’s shape

According to the developer, the concept of underline.js is in constant development and is designed to help push the boundary of web typography.

There’s more to learn about this tool as well if you are interested in the story behind its development. You can watch the video from the NY Tech Meetup where it was presented.


Confirm Mailto: Confirm Before Opening Mailto Links

Confirm mailto is a simple little plugin that can save user frustration when it comes to clicking mailto: links because it adds a confirmation step to the process. It is designed to work with the default email client of the user.

The jQuery plugin has two options for usage — basic and advanced.

The basic option is a simple jQuery load with to plugin code at the top of the Javascript file with a call to load.

But if you want more control over the plugin, you can use the code using the advanced method. This code is a little more for those who are code-savvy and want to add some customized elements. With advanced settings, you can control default text in the body of the message as well. The code allows for settings for success, fail and callback as well.


Morphext: jQuery Rotating Carousel-Style Plugin

Morphext is a simple jQuery rotating, carousel-style plugin for text phrases powered by Animate.css. It does for lettering what a slider does with images so that you can display key words or phrases such as mission statements, taglines or catch phrases on your website.

Morphext comes with a lot of different morphing styles so that you can display text in almost any way you can imagine. This set of text features includes:

  • Bounce
  • Flash
  • Pulse
  • Rubber Band
  • Shake
  • Swing
  • Tada
  • Wobble
  • Fades
  • Flips
  • Rotation
  • Zoom in and out
  • Speed in
  • Roll in

What’s nice about Morphext is it does all of this while maintaining the readability of the words. You get the best of both worlds with a neat animation and highly readable text.

Installation using Bower is pretty straightforward. Just add the CSS and JS to your code, note the phrases to apply effects to and trigger the plugin. There are a few options for you to think about, including animation, separation, speed and phrase completion. (If you are worried about making it work, the demo includes some nice examples of usage.)



A simple autocue/teleprompter system, to scroll through lines of text.



Make superscript footnote markers with scrolling anchor links to a footnote section

  • Spotlight


Scribble out text with a squiggle instead of a boring strike-through.



A plugin for creating exceptional footnotes.



Shortens your text to a specified size, and then adds an ellipsis to the end.