Build Beautiful Slide Decks with reveal.js in Minutes

// Before you start

What you need

Node.js installed (version 18 or higher — download from nodejs.org)
npm installed (comes bundled with Node.js)
A terminal or command prompt you can open
A text editor (Notepad, TextEdit, VS Code, anything works)
Git installed (download from git-scm.com)

Step 1 of 6

Download the reveal.js project files

2 min

This command copies the entire reveal.js project from GitHub onto your computer into a folder called 'reveal.js'. Think of it like downloading a zip file, but faster and already unpacked.

Terminal · mac

$ git clone https://github.com/hakimel/reveal.js.git && cd reveal.js

What you should see

You should see lines like 'Cloning into reveal.js...' followed by 'Resolving deltas: done.' Your terminal prompt will then move into the reveal.js folder.

This might happen

Git is not recognized as a command

Install Git from git-scm.com, restart your terminal, then try again.

Step 2 of 6

Install the project's dependencies

3 min

reveal.js needs a few helper packages to run its local preview server. This command reads the project's list of requirements and downloads them automatically into a folder called 'node_modules'. You only do this once.

Terminal · mac

$ npm install

What you should see

A progress bar or a list of packages being downloaded, ending with a line like 'added 432 packages in 12s'. You may see some yellow warning lines — those are safe to ignore.

This might happen

npm install fails with permission errors on Mac/Linux

Do NOT use sudo. Instead, fix npm permissions by following the guide at docs.npmjs.com/resolving-eacces-permissions-errors-with-npm-install.

Step 3 of 6

Start the local preview server

1 min

This command starts a tiny web server on your computer so you can preview your presentation in a browser. It also watches for any changes you make and refreshes the browser automatically.

Terminal · mac

$ npm start

What you should see

You should see output ending with something like 'Server running at http://localhost:8000'. Your default browser may open automatically.

This might happen

Port 8000 is already in use and the server fails to start

Close any other app using port 8000, or open package.json in a text editor and change '8000' to another number like '8080', then run npm start again.

Step 4 of 6

Open your presentation in the browser

1 min

If the browser did not open automatically, you need to open it yourself. This URL points to the local server running on your machine — it only works while 'npm start' is running in your terminal.

Terminal · mac

$ open http://localhost:8000

What you should see

A full-screen slide presentation appears in your browser. You can press the right arrow key or spacebar to advance slides. Press 'S' to open the speaker notes panel.

This might happen

'open' command not found on Windows

On Windows, just type http://localhost:8000 directly into your browser's address bar and press Enter.

Step 5 of 6

Edit the slides to add your own content

10 min

Your slides live inside the file 'index.html' in the reveal.js folder. Open it in any text editor. Find the section tags that look like '<section>Your slide text here</section>' — each pair of section tags is one slide. Change the text between those tags to your own content. Save the file and your browser will refresh automatically to show the changes. To add a new slide, copy one of the existing '<section>...</section>' blocks and paste it after the previous one.

Terminal · mac

$ open index.html

What you should see

Your text editor opens index.html. You will see HTML with many <section> blocks. Edit the text inside them and save — the browser preview updates within a second or two.

This might happen

Editing HTML feels confusing — you accidentally break the layout

Only change text that sits between the > and < characters inside a section block. Do not delete any angle brackets or quotation marks. If something breaks, press Ctrl+Z (or Cmd+Z on Mac) to undo.

Step 6 of 6

Export your presentation to PDF

3 min

reveal.js has a built-in PDF export mode. You do not need any extra software — just your browser's print dialog. This works best in Google Chrome or Chromium.

Terminal · mac

$ open 'http://localhost:8000/?print-pdf'

What you should see

The presentation reloads in a vertical, page-by-page layout. Each slide appears as a separate page.

This might happen

The PDF looks cut off or slides are missing

In Chrome's print dialog, set 'Margins' to None, enable 'Background graphics', and set paper size to A4 or Letter. Then click Save as PDF.

// Status

cooked. baked. worked.

A working, browser-based slide presentation running on your computer that you can navigate with arrow keys, view speaker notes, and export to PDF. The presentation uses your own text inside reveal.js's clean default theme.

// the honest bit

The honest part

reveal.js is genuinely easy to get running, but customizing the look beyond the built-in themes requires editing CSS files — that is outside pure copy-paste territory. Embedding videos, custom fonts, or complex layouts will need some HTML knowledge. If you want a fully visual editor with no code at all, the same team runs slides.com (paid after a free tier). The local server only works on your own machine; sharing with others requires uploading the folder to a web host or using a service like GitHub Pages.