Usage - Pelican-Party/steam-web-wrap GitHub Wiki

Launching Steam Web Wrap

At the moment, only online pages can be run using Steam Web Wrap, so the first step is to make sure your game is published online somewhere. If you haven't done this yet, you may also use https://steam-web-wrap-demo.deno.dev/ for experimentation.

To get started, you can download the latest build from the releases page. Once downloaded and extracted, you can run the application and provide an url through the command line.

On Windows:

.\steam-web-wrap\launch.exe --url=https://steam-web-wrap-demo.deno.dev/

On Linux:

./steam-web-wrap/launch.sh --url=https://steam-web-wrap-demo.deno.dev/

Additional command line flags include:

  • --appid=<your app id> Configures your steam app id and makes the Steamworks SDK work. This is only necessary during development, when launched from Steam, this app id will be determined automatically.
  • --no-fullscreen Launches the application in windowed mode.
  • --debug-mode This adds several debugging functions such as a 'Debug' menu (next to File, Edit, Window) that allows you to reload the page and show DevTools. This also prevents the process from crashing on errors among other things that make development easier.

Detecting if Your Game Is Running in Steam Web Wrap

You can use the user agent string to determine whether a page is opened in Steam Web Wrap or not. You can use this to determine whether to show certain UI for example:

if (navigator.userAgent.includes("steam-web-wrap/")) {
	exitButtonElement.classList.remove("hidden");
}

Toggling Fullscreen Programmatically

You can use the Fullscreen API like you normally would:

if (!document.fullscreenElement) {
	await document.body.requestFullscreen();
} else {
	await document.exitFullscreen();
}

Pages running in a browser don't normally start in fullscreen. But pages launched in Steam Web Wrap do. To adjust for this, the document.fullscreenElement is initially set to the <body> of the page. That way you can use this to update the UI of any fullscreen setting you might have.

Note

The fullscreen state is not maintained across sessions at the moment.

Giving Users a Way to Exit Your Game

In a browser, users can close your page at any time. But since Steam Web Wrap launches games in full screen by default, it might be difficult for users to find out how to close your game.

Even though they can still close the game through the steam overlay or by using shortcuts like Alt + F4 or Command + W, you might want to add an exit button in your menu somewhere. You can close the game by calling:

window.close()
⚠️ **GitHub.com Fallback** ⚠️