The demos can be used in two ways depending on your workflow. You can run it instantly on JT by simply
clicking 'View Demo', which opens the page directly in your browser with no setup required. Alternatively,
if you want to test or modify the demo in your own environment, click 'Download Demo' to save the HTML file
locally. You can then upload it to your localhost server and run it there, giving you full control to
experiment, debug, and integrate it with your own setup.
To begin, open Browser Developer Tools (DevTools) which is essentially an entire debugging suite built into
web browsers; you can typically open it with 'Ctrl + Shift + I'. We will use DevTools to inspect the browser
console logs for some demo sections.
This exercise will demonstrate how to render the Window Frame inside the browser. You can think of this as the 'Hello World' introduction to Web Interface, where the goal is to display a blank window inside a web page which will later 'house' all the other components - nothing complicated at this stage. The following demo should simply display a light-grey frame (or canvas) at the top-left corner of the browser screen at its default size. You should also observe a brief loading screen before the render completes.
<!DOCTYPE html> <!-- Copyright (c) 2026 by Javaika Technologies -->
<html lang = "en-AU"> <!-- Set the primary language to en-AU -->
<head>
<title>Window Frame</title> <!-- Set the page title -->
<meta name = "robots" content = "noindex, follow">
</head>
<body>
<!-- Include the framework script tag -->
<script type = "module" src = "https://www.javaika.com/frame/web-interface@main/api.js"></script>
<!-- Run the demo as an ES Module -->
<script type = "module">
// Initialize a shorter prefix for referencing.
const jwi = window.javaika.webInterface;
// Initialize the developer token endpoint.
jwi.init({
tokenEndpoint: "https://www.javaika.com/pscript/jwt-access.php"
});
// Authenticate before using the framework.
jwi.requestToken({
framework: "web_interface" // Specify the framework for token issuance.
});
// Authenticate callback handler.
function onAuthenticate(event)
{
jwi.refreshToken(); // Refresh the authentication token.
console.log('[Web Interface] Authentication received callback:', event);
}
// Initialized callback handler.
function onInitialized(event)
{
// Define the controls for the interface.
let windowFrame = new jwi.WindowFrame();
// Render interface to the browser window.
jwi.renderInterface(windowFrame);
console.log('[Web Interface] Framework initialized callback:', event);
}
// Callback event after authenticate.
document.addEventListener
(
'javaika.webInterface.authenticate', onAuthenticate
);
// Callback event after initialized.
document.addEventListener
(
'javaika.webInterface.initialized', onInitialized
);
</script>
</body>
</html>
Next capability: Discuss manual resizing of the window frame.