stories.js 🖼️

stories.js is a Web Component that allows you to create stories on your website.


How it Works

To advance a story, you can click on either the story image or use the right keyboard arrow.

To move back a story, you can use the left keyboard arrow.

When all stories have been viewed, or when the user clicks the X button, the stories will close.

Project Screenshot

Screenshot of stories.js displaying a story


First, define a list that specifies all of the objects you want to show in your story:

var images = [

Then, link to the stories.js stylesheet and script and add the <html-story> element to your page.

    <link rel="stylesheet" href="stories.css">


<script src="stories.js"></script>

Finally, call the show() method on the <html-story> in any element that you want to trigger the story pop up:

<button onclick="document.querySelector('html-story').show()">Show</button>