Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.

Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.

<button>Present</button>

.hidden {  display: none;}

// The Present button is visible if at least one presentation display is availableconst presentBtn = document.getElementById("presentBtn");// It is also possible to use relative presentation URL e.g. "presentation.html"const presUrls = [  "https://example.com/presentation.html",  "https://example.net/alternate.html",];// Show or hide present button depending on display availabilityconst handleAvailabilityChange = (available) => {  if (available) {    presentBtn.classList.remove("hidden");  } else {    presentBtn.classList.add("hidden");  }};// Promise is resolved as soon as the presentation display availability is known.const request = new PresentationRequest(presUrls);request  .getAvailability()  .then((availability) => {    // availability.value may be kept up-to-date by the controlling UA as long    // as the availability object is alive. It is advised for the web developers    // to discard the object as soon as it's not needed.    handleAvailabilityChange(availability.value);    availability.onchange = () => {      handleAvailabilityChange(availability.value);    };  })  .catch(() => {    // Availability monitoring is not supported by the platform, so discovery of    // presentation displays will happen only after request.start() is called.    // Pretend the devices are available for simplicity; or, one could implement    // a third state for the button.    handleAvailabilityChange(true);  });

presentBtn.onclick = () => {  // Start new presentation.  request    .start()    // The connection to the presentation will be passed to setConnection on success.    .then(setConnection);  // Otherwise, the user canceled the selection dialog or no screens were found.};

<button>Reconnect</button>

const reconnect = () => {  const presId = localStorage.getItem("presId");  // presId is mandatory when reconnecting to a presentation.  if (presId) {    request      .reconnect(presId)      // The new connection to the presentation will be passed to      // setConnection on success.      .then(setConnection);    // No connection found for presUrl and presId, or an error occurred.  }};// On navigation of the controller, reconnect automatically.reconnect();// Or allow manual reconnection.reconnectBtn.onclick = reconnect;

navigator.presentation.defaultRequest = new PresentationRequest(presUrls);navigator.presentation.defaultRequest.onconnectionavailable = (evt) => {  setConnection(evt.connection);};

<button>Disconnect</button><button>Stop</button><button>Reconnect</button>

let connection;// The Disconnect and Stop buttons are visible if there is a connected presentationconst stopBtn = document.querySelector("#stopBtn");const reconnectBtn = document.querySelector("#reconnectBtn");const disconnectBtn = document.querySelector("#disconnectBtn");stopBtn.onclick = () => {  connection?.terminate();};disconnectBtn.onclick = () => {  connection?.close();};function setConnection(newConnection) {  // Disconnect from existing presentation, if not attempting to reconnect  if (    connection &&    connection !== newConnection &&    connection.state !== "closed"  ) {    connection.onclose = undefined;    connection.close();  }  // Set the new connection and save the presentation ID  connection = newConnection;  localStorage.setItem("presId", connection.id);  function showConnectedUI() {    // Allow the user to disconnect from or terminate the presentation    stopBtn.classList.remove("hidden");    disconnectBtn.classList.remove("hidden");    reconnectBtn.classList.add("hidden");  }  function showDisconnectedUI() {    disconnectBtn.classList.add("hidden");    stopBtn.classList.add("hidden");    if (localStorage.getItem("presId")) {      // If there is a presId in localStorage, allow the user to reconnect      reconnectBtn.classList.remove("hidden");    } else {      reconnectBtn.classList.add("hidden");    }  }  // Monitor the connection state  connection.onconnect = () => {    showConnectedUI();    // Register message handler    connection.onmessage = (message) => {      console.log(`Received message: ${message.data}`);    };    // Send initial message to presentation page    connection.send("Say hello");  };  connection.onclose = () => {    connection = null;    showDisconnectedUI();  };  connection.onterminate = () => {    localStorage.removeItem("presId");    connection = null;    showDisconnectedUI();  };}

const addConnection = (connection) => {  connection.onmessage = (message) => {    if (message.data === "Say hello") connection.send("hello");  };};navigator.presentation.receiver.connectionList.then((list) => {  list.connections.forEach((connection) => {    addConnection(connection);  });  list.onconnectionavailable = (evt) => {    addConnection(evt.connection);  };});

connection.send('{"string": "你好，世界!", "lang": "zh-CN"}');connection.send('{"string": "こんにちは、世界!", "lang": "ja"}');connection.send('{"string": "안녕하세요, 세계!", "lang": "ko"}');connection.send('{"string": "Hello, world!", "lang": "en-US"}');

connection.onmessage = (message) => {  const messageObj = JSON.parse(message.data);  const spanElt = document.createElement("SPAN");  spanElt.lang = messageObj.lang;  spanElt.textContent = messageObj.string;  document.body.appendChild(spanElt);};

Help improve MDN

This page was last modified on⁨Sep 19, 2025⁩ byMDN contributors.