Spotlight-style Element Highlighting Library – limelight.js

Category: Javascript | June 14, 2019
Author: jayfreestone
Views Total: 264 views
Official Page: Go to website
Last Update: June 14, 2019
License: MIT


Spotlight-style Element Highlighting Library – limelight.js


limelight.js is a standalone JavaScript library for creating a spotlight effect to highlight any DOM element within the document.

With a smooth transition effect when switching between highlighted DOM elements. Ideal for feature/site tour.

Also works with dynamic DOM element that automatically adjusts the height & width to fit the size of the element. Depending on the MutationObserver API.

How to use it:


$ npm install limelight --save
import Limelight from 'limelight';

Or include the following JavaScript and CSS files on the page.

<link rel="stylesheet" href="/path/to/limelight.css">
<script src="/path/to/index.js"></script>

Create a new limelight.js instance and specify the target element.

const demo = new Limelight(

Apply the spotlight effect to the element.;

Customize the spotlight effect with the following options.

const demo = new Limelight(

      // offset in pixels
      offset: 10,

      // click to close
      closeOnClick: true,

      // default classes
      classes: {
          window: 'limelight__window',
          activeClass: 'limelight--is-active',

      // extra CSS styles
      styles: {}


v2.0.0 (06/14/2018)

  • wrapper: Fix for page height jump.


  • style(css): Remove additional spaces.


  • Add transition to overlay.

You Might Be Interested In:

Leave a Reply