Skip to main content

Creating a basic one window app

To give you a feel for Overwolf's development platform, here's a short explanation on how to create a simple app that displays a single basic Overwolf app window.

In this example, we will develop a one-window app from scratch. This sample window will not interact with game events and not even get injected into any game, it's just a demonstration of how to build and pack a window as an Overwolf app that can be launched from the Overwolf dock.

info

To learn how a modern, real-world Overwolf app should look like, refer to sample app guide.

Get the Overwolf client​

To build Overwolf apps, you first need to download the Overwolf client. You can find the latest version Here.

Building a demo app from scratch​

This example details the steps in creating a simple, single window Overwolf app. The source code and files that used in this example can be found in the app's repository.

Let's get to it! To build a one-window app:

  1. Create a folder, name it whatever you like.

  2. Create a file named "manifest.json" in that folder.

  3. Copy and paste the manifest code snippet found below into the "manifest.json" file. You can read the Manifest.json section to learn about additional features you can use to make your app even more awesome.

{
	"manifest_version":1,
	"type":"WebApp",
	"meta":{
		"name":"Demo App",
		"version":"1.0.0",
		"minimum-overwolf-version":"0.199.0.15",
		"author":"Developer Name",
		"icon":"IconMouseOver.png",
		"icon_gray":"IconMouseNormal.png",
		"description":"Demo App"
	},
	"data": {
		"start_window":"MainWindow",
		"windows":{
			"MainWindow":{
					"file":"index.html",
					"transparent": false,
					"resizable": true,
					"use_os_windowing": true,
					"size": {
						"width":700,
						"height":400
						},
					"min_size": {
						"width":400,
						"height":400
					}
				}
		}
	}
}

  1. Choose icons for your app and place them in the folder you created. Remember to reference it in the "icon" field of your app's manifest.json. For this example you can download sample icons from the app's repository.

  2. Create an index.html file in the main folder and paste this snippet there:

<!DOCTYPE html>
<html>
<body>

<h1>Basic sample app</h1>
<p>This is a native desktop window that cannot be injected into the game.</p>

</body>
</html>
  1. Load the app as an "unpacked" extension.

Your Overwolf app can now run in development mode!
To check your app, launch it from the dock, it should show:

alt-text

Congratulations! You can now use standard web development techniques to create, debug, and complete your application. The source code and files that used in this example can be found in the app's repository.

Real world Sample app​

As mentioned, the app you built is technically working, but does nothing. To learn how to build an app that actually pulls in-game events, pops notifications, displays in-game overlays and more - please continue to study our official sample app showcasing what you can do and how. Continue to the sample app guide.