@inspirejs/core
v3.0.2
Published
Lean, hackable, extensible slide deck framework — core engine
Readme
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!
This repo is the core engine (@inspirejs/core). Inspire.js is split across a few packages:
| Package | What it is |
| ------------------------------------------------------------- | ------------------------------------------------------------------- |
| @inspirejs/core | this repo — the core engine + inspire.css |
| @inspirejs/plugins | optional plugins, autoloaded on demand |
| inspirejs.org | meta package: bundles core + plugins in one install |
| demo / theme | the inspirejs.org site + the default theme |
Getting started
npm install @inspirejs/core@inspirejs/core is native ESM and imports its dependencies by bare specifier (e.g. @inspirejs/core). Resolve those however your project already does — an import map, a bundler, or a no-build tool. Then include the stylesheet and import the engine:
<link href="/path/to/@inspirejs/core/inspire.css" rel="stylesheet" />
<script type="module">
import "@inspirejs/core"; // initializes automatically
</script>That’s it. Slides are any elements with class="slide" — no JS needed to create them. import Inspire from "@inspirejs/core" gives you the API (also the global Inspire).
Plugins (optional)
You don’t need plugins to use Inspire.js. Extra functionality (syntax highlighting, presenter view, live demos, …) lives in the separate @inspirejs/plugins package, which autoloads on demand — just add a second import:
import "@inspirejs/plugins";Or install inspirejs.org, which bundles core + plugins.
Core plugins (built in)
A few fundamental features ship bundled with core as built-in plugins — modular internally, but always on, with nothing extra to install. Currently:
autosize— shrinks a slide's font-size to keep its content from overflowing the viewport. Opt out for the whole deck withclass="no-autosize"(orno-plugins) on<body>, or per slide/subtree withclass="dont-resize",--dont-resize,--font-sizing: fixed, oroverflow: hidden | clip.
Legacy URLs
Old absolute URLs like https://inspirejs.org/inspire.mjs, /inspire.css, and /plugins/… still resolve, but migrate off them as soon as possible. They only redirect to the new packages to soften breakage; because the underlying files have been reorganized, they are unlikely to keep working correctly. Depend on the npm packages instead.
Incremental display
To reveal parts of a slide one step at a time, add class="delayed" to any element. Each delayed element appears on its own step as you advance, in source order:
<ul>
<li class="delayed">First, then…</li>
<li class="delayed">second, then…</li>
<li class="delayed">third.</li>
</ul>Use class="delayed-children" on a container to make all of its direct children delayed, without annotating each one:
<ul class="delayed-children">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>Controlling order and grouping with data-index
By default, delayed items reveal in source order. Add data-index to override that order — items are revealed from lowest index to highest (items without data-index count as 0, so they come first). The values only set relative order; gaps don't matter, so data-index="2" then data-index="10" is the same as 1 then 2.
Items that share the same data-index are revealed together, in a single step. This is handy for revealing a whole group at once — e.g. a table column:
<tr><td>R</td><td>255</td><td class="delayed" data-index="1">0xFF</td></tr>
<tr><td>G</td><td>0</td> <td class="delayed" data-index="1">0x00</td></tr>
<tr><td>B</td><td>140</td><td class="delayed" data-index="1">0x8C</td></tr>All three 0x… cells appear on the same step. Items without data-index are never grouped — each still gets its own step.
API FAQ
Running code after any imports have loaded
await Inspire.importsLoaded;
// code to run after imports have loadedNote 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 executedor:
await Inspire.loadPlugin(PLUGIN_ID);
// code to run after the plugin with id PLUGIN_ID has loaded and executedThe 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
}
});