Home

Awesome

mithril-slides

A Keynote-inspired presentation app written with Mithril

screenshots

Features

themes

Getting started

  1. Clone mithril-slides repository at the command prompt if you haven't yet:

     $ git clone https://github.com/wulab/mithril-slides.git
    
  2. Change directory to mithril-slides and start a web server:

     $ cd mithril-slides
     $ python -m SimpleHTTPServer 8000       # Python 2
     $ python -m http.server 8000            # Python 3
    
  3. Using a browser, go to http://localhost:8000 and you'll see example slides.

  4. To add or edit slides, make changes to the slides.json file and reload your browser.

Keyboard shortcuts

Shortcuts for navigating slides are listed below.

ActionShortcut
Advance to the next slide<kbd>Right Arrow</kbd>, <kbd>Down Arrow</kbd>, <kbd>Space bar</kbd> or <kbd>Return</kbd>
Go to previous slide<kbd>Left Arrow</kbd>, <kbd>Up Arrow</kbd> or <kbd>Backspace</kbd>
Quit presentation mode<kbd>Esc</kbd> or <kbd>Q</kbd>
Show or hide the pointer<kbd>C</kbd>
Change presentation theme<kbd>T</kbd>

Offline mode

mithril-slides requires an internet connection to work. If you are to present in a place without one. You can still use mithril-slides by checking out offline branch before starting a web server:

    $ git checkout offline
    $ python -m SimpleHTTPServer 8000       # Python 2
    $ python -m http.server 8000            # Python 3

You also need to change src properties of all image and embed objects in your slides.json file to local files.

Known issues

Some websites can not be embedded because they have secure HTTP headers (either X-Frame-Options or Content-Security-Policy) set in their responses. To remove those headers, you need a browser extension. For Google Chrome, install ModHeader extension and add response headers for above headers with empty values. For Firefox, install Modify Response Headers add-on and add filters for those headers. The following slide can be used to test your setup:

    {
        "embed": {
            "src": "https://github.com/",
            "width": "1024",
            "height": "768",
            "sandbox": "allow-forms allow-same-origin allow-scripts"
        }
    }