Inspire.js

Lean, hackable, extensible slide deck framework. Create basic slides by just writing HTML and CSS, do fancy custom stuff with JS, the sky is the limit!

Getting started

CDN

<script src="https://inspirejs.org/inspire.js"></script>

or

import Inspire from "https://inspirejs.org/inspire.mjs";

NPM

npm install inspirejs

then

<script src="https://github.com/LeaVerou/inspire.js/raw/master/node_modules/inspirejs.org/inspire.js"></script>

or

import Inspire from "node_modules/inspirejs.org/inspire.mjs";

or if you use a bundler:

import Inspire from "inspirejs.org";

Quick start

• Copy (and rename) blank.html somewhere
• Also copy talk.css, theme.css
• Add Your Own Content
• Add talk-specific styling to talk.css

Previously known as CSSS.

If you were using CSSS and would rather stay at it, run git checkout v1.0.0 and stay there.

API FAQ

Running code after any imports have loaded

await Inspire.importsLoaded;
// code to run after imports have loaded

Note that await needs to be inside an async function otherwise it will error. However, this could just be a self-executing async function.

Running code after a specific plugin has loaded

await Inspire.importsLoaded;
await Inspire.plugins.loaded.PLUGIN_ID.loaded;
// code to run after the plugin with id PLUGIN_ID has loaded and executed

or:

await Inspire.loadPlugin(PLUGIN_ID);
// code to run after the plugin with id PLUGIN_ID has loaded and executed

The second example would load the plugin if it hasn't otherwise been loaded, but if it will never be loaded twice.

Running code when a specific slide is displayed

You can do this via the slidechange hook:

Inspire.hooks.add("slidechange", env => {
    if (Inspire.currentSlide.id === "slide-id") {
        // Code to run
    }
});

or, via an event:

document.addEventListener("slidechange", evt => {
    if (Inspire.currentSlide.id === "slide-id") {
        // Code to run
    }
});

Running code when a specific slide is displayed for the first time

You can do this via the slidechange hook:

Inspire.hooks.add("slidechange", env => {
    if (Inspire.currentSlide.id === "slide-id" && env.firstTime) {
        // Code to run
    }
});

or, via an event:

document.addEventListener("slidechange", evt => {
    if (Inspire.currentSlide.id === "slide-id" && evt.firstTime) {
        // Code to run
    }
});

or:

$("#slide-id").addEventListener("slidechange", evt => {
    // Code to run
}, {once: true});

Running code after a specific slide has been displayed

You can do this via the slidechange hook:

Inspire.hooks.add("slidechange", env => {
    if (env.prevSlide.id === "slide-id") {
        // Code to run
    }
});

or, via an event:

document.addEventListener("slidechange", evt => {
    if (evt.prevSlide.id === "slide-id") {
        // Code to run
    }
});