LeaVerou / inspire.js

Lean, hackable, extensible slide deck framework. Previously known as CSSS.

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="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.

Migrating from CSSS

• Almost all HTML syntax is the same! The same JS events are still fired. So, very little should break.
• slideshow.css is now inspire.css
• slideshow.js is now inspire.js
• You don't need to run JS to create a slideshow, it is created automatically.
• The SlideShow JS class is now Inspire
• The slideshow JS variable is now Inspire
• Presenter view will not be loaded unless there is at least one class="presenter-notes" item.
• The CSS Controls plugin is now gone. Use Mavo if you need this functionality.
• The CSS Snippets plugin is now gone. We will soon add a much better one, extracted based on the live demo script in https://github.com/leaverou/talks.
• Incrementable is no longer a plugin. Use the separate script from https://github.com/leaverou/incrementable.
• reusable.css has now been merged into the default theme, theme.css.
• data-import is now data-insert

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
	}
});