4.3.0 • Public • Published


    The one-stop-shop for @infosupport employees to create and serve slick Reveal.js presentations.


    Both local and global installations are possible. Global is easiest and therefore the recommended approach.


    This has the advantage that you only have to install it and you're ready to go.

    npm install --global @infosupport/kc-cli # Windows
    npm install --global @infosupport/kc-cli --unsafe-perm=true # Linux


    With this, you are free to choose when you want to upgrade to newer versions of the CLI with, for example, a new corporate design.

    You will have to make it an npm project.

    npm init --yes
    npm install @infosupport/kc-cli # Windows
    npm install @infosupport/kc-cli --unsafe-perm=true # Linux

    Then, in the package.json, add a start script:

        "scripts": {
            "start": "kc serve"


    TO get a setup quick and easy, run kc init. This will generate a folder structure similar to this:

    |-- css
        |-- code.css
        |-- layout.css
    |-- assets
        |-- logo.svg
    |-- slides
        |-- 01-welcome
        |    |-- 01-intro.md
        |    |-- 02-agenda.md
        |-- 02-finance
            |-- 01-intro.md
            |-- 02-past-year.md
            |-- 03-projections.md
    |-- web-components
        |-- cool-graph
            |-- cool-graph.js
            |-- cool-graph.html.js
            |-- cool-graph.css.js

    From there, use your favorite text editor (e.g., Visual Studio Code) to change the content of the slides, modify the custom CSS, etc.

    A couple of notes on the project folders:

    • /slides contains subdirectories for each chapter/module and holds markdown files (the slides) inside those subfolders. /slides is the only required folder for a minimal setup
    • /css is for customizing the style of your presentation using CSS
    • /assets is for holding assets like images and videos. You can also name this folder something else like /img
    • /web-components is for your own custom, interactive presentation widgets. It's advanced stuff. Scroll down for more information.

    To view your presentation:

    kc serve     # for global installations
    npm start    # for local installations


    option description
    kc serve serve presentation from current directory on default port
    kc serve -o open presentation in default browser
    kc serve -p use random port
    kc serve -p <port> use specified <port>


    This will export your slides to PDF using Decktape and pdf-lib. First, Decktape reads all the presentation slides and uses pdf-lib to generate a PDF where every page is a slide. With a bit of custom code, this PDF is transformed into a PDF that fits our corporate design.

    First, serve your presentation (kc serve). Then run kc print.

    option description
    kc print print presentation to pdf using default url (http://localhost:15000) and the folder name as filename
    kc print --url [url] use specified url
    kc print --output [filename] use specified filename
    kc print --per-module generate a PDF for each module


    option description
    kc lint diagnose issues for when the presentation isn't running as it should

    Corporate identity

    By default, the corporate identity is applied to every slide. Certain slides can receive specific theming.

    • For the welcoming slide, often the very first slide, add <!-- .slide: class="is-welcome" -->
    • For a new chapter, add <!-- .slide: class="is-module" -->
    • For the closing slide, the very last slide, add <!-- .slide: class="is-closing" -->
    • To add a lab slide, add <!-- .slide: class="is-lab" -->
    • To disable theming, add <!-- .slide: class="is-empty" -->

    Web Components

    With Reveal.js, we can leverage Web Components to make slides more awesome. Right now, you can use these components out-of-the-box.

    Note that web components are not natively supported in IE and this CLI is quite comfortable with not making any effort whatsoever to make it work in those browsers.

    web component description
    <kc-timeline events='[{ "year": 2019, "caption": "cool stuff", "description": "detailed explanation of cool stuff" }]'> A graphical visualization of a timeline.
    <npm-weekly-downloads package="@stryker-mutator/core"></npm-weekly-downloads> Retrieves the number of weekly downloads for an npm package. Also caches the number in the session storage as to unburden npm's servers

    If you have (created or not) a web component that should be in this list, please let us know.

    Customization and fun stuff

    • The free version of font awesome v5 is included by default.
    • Add your own custom CSS by creating a folder css and placing .css files in there.
    • Add your own web components by creating a folder web-components with subfolders for every components. The main .js file should be the same name as the folder it's in.

    Example folder structure:

    |-- css
        |-- ...
    |-- slides
        |-- ...
    |-- web-components
        |-- cool-graph
            |-- cool-graph.js
            |-- cool-graph.html.js
            |-- cool-graph.css.js


    • Create default layouts for slides

    Known issues

    None at the moment.




    npm i @infosupport/kc-cli

    DownloadsWeekly Downloads






    Unpacked Size

    5.73 MB

    Total Files


    Last publish


    • avatar
    • avatar
    • avatar