Get Started

Start a new project by creating a Presenter.js presentation:

npm create presenter

Or add Presenter.js to an existing project with npm install presenter.

Your First Presentation

Once you've named and created a new presentation with npm create presenter, run the following command from the project directory to start running your presentation:

npm run serve

Visit the URL shown in your terminal (likely http://localhost:8080/) and you should see a "Welcome to Presenter.js!" message.

Your presentation reloads automatically: any time you make a change to the code, the presentation will update to reflect the change.

Understanding Presenter.js

Take a look at presentation.ts. This file defines your presentation. A presentation is just a JavaScript object that includes an array of slides to render in order.

export const presentation = Presentation({
  title: "Presentation",
  slides: [TitleSlide],
});

The initial presentation has just a single slide. Once you've added more, you can navigate your presentation by pressing the spacebar or the right arrow key to advance. Press the left arrow key to go back.

Slides

Take a look at the slide in TitleSlide.ts.

import { Anchor, Slide, Text } from "presenter";
import { position } from "../size";

const title = Text("Welcome to Presenter.js!", {
  anchor: Anchor.CENTER,
  fontSize: 150,
  ...position(0.5, 0.5),
});

export const TitleSlide = Slide({
  objects: [title],
});

This file defines a slide. A slide specifies objects on the slide, plus any animations for those objects. It doesn't need to be defined in a separate file, but separate files for slides can be easier to read and maintain.

The slide has a single object. A Presenter.js object is an element that can be rendered onto a slide. In this case, a Text object is rendered on the slide.

Try changing the "Welcome to Presenter.js!" text. You should see your presentation update!

Objects in Presenter.js have properties that define how they appear. In this Text object, we're specifying the following properties:

• x and y specify where on the slide the object should render. 0, 0 is the upper-left corner of the slide, and the lower-right corner is 3840, 2160 by default.
  • Here, the position helper function is a shorthand for specifying x and y relative to the size of the presentation. position(0.5, 0.5) is the center of the slide.
• anchor specifies how to position the object relative to its x and y coordinates. Objects by default use Anchor.TOP_LEFT, which places the upper-left part of the object at its specified coordinates. Anchor.CENTER ensures the text shows up perfectly centered on screen.
• fontSize specifies how large to render the text.

Text also supports other properties like color, opacity, fontFamily, and fontWeight.

Try creating your own slides with new Text objects to explore how they appear in Presenter.js! Then, continue to the rest of the documentation to learn more about how to build presentations in Presenter.js.