Skip to main content
Version: v2.0.0-beta.44

Frontend

Script Injection

When Wails serves your index.html, by default, it will inject 2 script entries into the <body> tag to load /wails/ipc.js and /wails/runtime.js. These files install the bindings and runtime respectively.

The code below shows where these are injected by default:

<html>
<head>
<title>injection example</title>
<link rel="stylesheet" href="/main.css">
<!-- <script src="/wails/ipc.js"></script> -->
<!-- <script src="/wails/runtime.js"></script> -->
</head>

<body data-wails-drag>
<div class="logo"></div>
<div class="result" id="result">Please enter your name below 👇</div>
<div class="input-box" id="input" data-wails-no-drag>
<input class="input" id="name" type="text" autocomplete="off">
<button class="btn" onclick="greet()">Greet</button>
</div>

<script src="/main.js"></script>
</body>

</html>

Overriding Default Script Injection

To provide more flexibility to developers, there is a meta tag that may be used to customise this behaviour:

  <meta name="wails-options" content="[options]">

The options are as follows:

ValueDescription
noautoinjectruntimeDisable the autoinjection of /wails/runtime.js
noautoinjectipcDisable the autoinjection of /wails/ipc.js
noautoinjectDisable all autoinjection of scripts

Multiple options may be used provided they are comma seperated.

This code is perfectly valid and operates the same as the autoinjection version:

<html>

<head>
<title>injection example</title>
<meta name="wails-options" content="noautoinject">
<link rel="stylesheet" href="/main.css">
</head>

<body data-wails-drag>
<div class="logo"></div>
<div class="result" id="result">Please enter your name below 👇</div>
<div class="input-box" id="input" data-wails-no-drag>
<input class="input" id="name" type="text" autocomplete="off">
<button class="btn" onclick="greet()">Greet</button>
</div>

<script src="/wails/ipc.js"></script>
<script src="/wails/runtime.js"></script>
<script src="/main.js"></script>
</body>

</html>