Opinionated JSX based slides generator.

View on GitHub


%s %s

Opinionated JSX based slides generator.


npx --package=freya-slides -- create-freya-slideset my-slideset 
cd my-slideset 
npm install 
freya dev 


Creating and editing slidesets

Once the installation has been completed, you can start writing your slideset.

Execute freya dev and it will start a server listening on http://localhost:3000.

Inside the src/talks folder you have to create a folder for each slideset, each slideset will be reachable at http://localhost:3000/$NAME. Each file change will rebuild all the slidesets but the browser must be refreshed manually.

The new folders must contain at least the file talk.yml, with a structure similar to the following:

  theme: main 
    width: 2000 
    height: 1120 
  - title: 'Hello world!' 

The config.theme value must point to a folder in the src/themes folder (see below).

The document value can contain additional keys.

The slides value must be an array. Each slide structure is free for you to use. freya only needs the title, layout and notes properties:

Talk assets

Images and other assets can be stored in the src/talks/$NAME/assets folder and you can reference them using the @talk root folder in URLs.

When using URLs in the layout JSX, you can use the resolveImageUrl function to have a working URL. For instance:

resolveImageUrl('theme', 'id', '@talk/logo.jpg') 


Once you have done editing, you should execute freya build. Slides will be exported in the dist/html folder, along with a Netlify configuration file.

If you want to export as JPEG or PDF you can execute freya jpeg or freya pdf. In both cases, speaker notes will be exported as separated HTML file in the same folder.


During development, when accessing deployed slideset or when using freya serve, you can navigate slides by pressing the arrow keys, Space, Enter or Backspace.

You can show a list of all slides by pressing g or l and hide it by pressing g, l or the Escape key.

You can enter presenter mode by pressing p. In presenter mode, you will also see a timer (which can be stopped by pressing s and reset by pressing t), the previous and next slides and the speaker notes.

All other session of the browser connected to the same slideset will see the same slide that you are presenting.

Presenter mode can be exited by pressing p or the Escape key.


Themes can be created by adding a new folder in the folder src/theme. A theme must contain at least the following files:

ESM Only

This package only supports to be directly imported in a ESM context.

For informations on how to use it in a CommonJS context, please check this page.

Contributing to freya-slides


Copyright (C) 2022 and above Shogun (

Licensed under the ISC license, which can be found at

Made by a proud Italian!