Presenter.js

Create

Presenter.js enables you to write JavaScript or TypeScript code to create slide presentations. Each presentation is just code, so you can create pixel-perfect designs, version control your work, create reusable slide components, and programmatically generate complex and dynamic content.

const hello = Text("Hello, world!", {  anchor: Anchor.CENTER,  color: Color.WHITE,  fontSize: 300,  ...position(0.5, 0.5),});
const slide = Slide({  objects: [hello],});

Animate

Presenter.js makes it easy to create beautiful animations. Animate any object property and chain animations together.

const slide = Slide({  objects: [step1, arrow, step2],  animations: [    Animate(step1, { x: 1000 }),    FadeIn(step2),    Animate(arrow, { drawn: 1 }),    [      Animate(step1, { y: 700 }),      Animate(step2, { y: 1500 }),      Animate(arrow, { startY: 700, endY: 1500 }),    ],  ],});

Code

Every slide in Presenter.js is a JavaScript object, so you can quickly generate content and animations with functions, loops, and other programming constructs.

const colors = Grid({  rows: 8,  cols: 8,  objects: (i, j) =>    Rectangle({      fillColor: Color(i * 32, j * 32, 128),    }),  ...props,});
const slide = Slide({  objects: [colors.grid],});