Present from your phone, even on a static host

In this guide you pair a phone with the presenter view and present from it: next and back with your thumb, your notes for each click in your hand, the timer, and a laser you aim by touching the slide or by moving the phone. It takes about five minutes.

You need a deck (see Your first deck in 5 minutes), a phone with a camera, and one of these:

Where the deck runs	What pairs the phone	Jump to
Published on deck.kadal.cc	the deck’s live room	A published deck
On your laptop, kadal-deck dev	the dev server	On your laptop
A static build on GitHub Pages, Netlify, S3 or any file server	kadal-deck relay, which you run	On a static host

1. Open the presenter view where the phone can reach it

The QR code the presenter view shows carries the address of the page it is on. So open the presenter view at an address your phone can open too, never at localhost.

A published deck

1. Publish the deck: npx kadal-deck publishpnpm exec kadal-deck publishyarn kadal-deck publishbunx kadal-deck publish (see The hosted service).
2. On the deck’s page in the dashboard, click Presenter view. Signed in there, you don’t need a passcode: the dashboard opens the deck with a presenter ticket that lasts 12 hours.

To present from a computer where you aren’t signed in, set a presenter passcode on the same page (four characters or more) and open https://decks.kadal.cc/@<you>/<slug>/presenter; it asks for the passcode once.

On your laptop

Run the dev server on your network:

npmpnpmyarnbun

npx kadal-deck dev --host

pnpm exec kadal-deck dev --host

yarn kadal-deck dev --host

bunx kadal-deck dev --host

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.20:5173/

Open the Network address followed by presenter (here http://192.168.1.20:5173/presenter). The phone must be on the same Wi-Fi.

Two variations:

• npx kadal-deck dev --host --httpspnpm exec kadal-deck dev --host --httpsyarn kadal-deck dev --host --httpsbunx kadal-deck dev --host --https serves a self-signed certificate, so the phone’s air pointer works (motion sensors need https). The phone warns about the certificate once; accept it.
• npx kadal-deck dev --tunnelpnpm exec kadal-deck dev --tunnelyarn kadal-deck dev --tunnelbunx kadal-deck dev --tunnel puts the deck on the internet through a Cloudflare Quick Tunnel (install cloudflared first), for when the phone is on a different network. It prints an https address and a QR code in the terminal, and guards the presenter view with a password it prints (or the one you give with --remote <password>).

On a static host

A build has no server of its own, so you run a small relay that carries the remote’s messages.

1. Build the deck and put dist/ on your host as usual:

   npmpnpmyarnbun

   npx kadal-deck build

   pnpm exec kadal-deck build

   yarn kadal-deck build

   bunx kadal-deck build

2. Start a relay. For a deck served over https (GitHub Pages, Netlify and the like), the relay must be wss://, so use a tunnel:

   npmpnpmyarnbun

   npx kadal-deck relay --tunnel

   pnpm exec kadal-deck relay --tunnel

   yarn kadal-deck relay --tunnel

   bunx kadal-deck relay --tunnel

   relay  ws://127.0.0.1:4174/
          password  updr-ynz6-n9er   (made up; --password <p> sets your own)
          the presenter view's Phone remote asks for the password once; a phone needs only the QR
   tunnel wss://example-words-here.trycloudflare.com/   (a Cloudflare Quick Tunnel: for a deck on https)

   Keep this terminal open for the whole talk.

3. Open the presenter view with the relay’s address added:

   https://you.github.io/my-talk/presenter?relay=wss://example-words-here.trycloudflare.com/

   For a relay with a fixed address, put it in the deck instead, and every build uses it:

   ---
   title: My talk
   remote:
     relay: wss://relay.example.com/
   ---

   Remote relay covers running one on a server.

2. Pair the phone

1. In the presenter view, click Phone remote in the toolbar.
2. On a static host, the dialog first asks for the relay’s password: type the one the relay printed and press Connect. The tab remembers it.
3. Scan the QR code with the phone’s camera and open the link. The phone shows Connected, the slide, your notes and the timer.

The code in the QR works once and changes every 30 seconds while the dialog is open. Only one phone is the remote at a time: if another phone scans, it takes over and the first one says so. If the phone’s browser reloads or the Wi-Fi drops, it reconnects by itself, with no new scan.

3. Present from it

• Next is the big button; the arrow beside it goes back. In Laser or Zoom mode, swiping left on the slide is next and swiping right is back.
• Laser: touch the slide on the phone and a dot appears at that spot on every screen.
• Hold to point: hold the button and move the phone to aim the laser across the room. On an iPhone, the first time, it says Tap to allow motion · then hold to point: tap it, allow motion, then hold. On plain http it says the air pointer needs HTTPS; touch the slide instead.
• Pen draws on the slide; Zoom zooms into the point you tap.
• Blackout blanks the audience’s screens; Slides lists every slide to jump to.
• The notes show the part for the current click step. A− and A+ resize them.

The settings button switches the laser to a spotlight, sets how far you turn the phone to reach the edge, and makes the phone buzz at chosen minutes into the talk.

4. Rehearse once

Before the talk, on the network you will present on:

• pair the phone and click through the whole deck;
• try the air pointer from where you will stand;
• check the phone’s screen stays on (the remote asks the browser to keep it awake);
• for a relay, note its password somewhere you can read it on stage.

If the phone says Not paired, its code expired: scan the QR again. If it says Waiting for the presenter view, the presenting window is closed or asleep; bring it back and the phone carries on.

Next

• Phone remote: every control and the pairing rules.
• Remote relay: the relay’s options, and running it on a server.
• Give a talk with a live audience: polls, questions and reactions on the phones in the room.