The Web standalone contains a number of files:
- Wasm Engine Files - standalone.zip - ICU Data Files (optional)
# HTML Page A test HTML page. This can be opened in a browser and will correctly prepare, download and start your Web app in a convenient test environment.
# Advanced: - Web Standalone Filesystem
# Advanced: Embedding in a web page
The default HTML5 page provided by the Web standalone builder is designed for testing and debugging purposes. However, you may want to embed the standalone engine in a more visually appealing page.
To do this, you require three elements: 1) A canvas 2) A JavaScript Module object, and 3) An HTML `<script>` element that downloads the engine.
# The canvas
The engine renders into a HTML5 `<canvas>` element contained within a `<div>` element. There are some important considerations when creating the canvas & div: - both the canvas and div must have absolutely no border, or mouse coordinate calculations will be incorrect - they will be automatically resized by the engine to match the size of your stack, so don't attempt to set their size using HTML or CSS - the canvas should be the only element within the containing div, which may be used to hold additional elements as native layers are added to the app. - the canvas needs to be easily uniquely identifiable, so that the engine can find it.
The absolute minimum canvas element would look something like this:
<div> <canvas style="border: 0px none;" id="canvas" oncontextmenu="event.preventDefault();" > </canvas> </div>
By default, most web browsers will indicate when the canvas has focus by displaying a highlighted outline.
This helps users identify which part of the web page is capturing their key presses. You can usually disable this outline by adding outline: none; to the canvas's CSS styles.
# The Module object
The top-level JavaScript Module object contains the parameters that control how the engine runs. At minimum, you need only specify the Module.canvas, which should be your canvas element.
The absolute minimum Module object declaration would look something like:
<script type= "text/javascript"> var Module = { canvas: document.getElementById('canvas'), }; </script>
<script type="text/javascript"> var Module = { canvas: document.getElementById('canvas'), }; </script>
# Engine download The engine is quite a large JavaScript file, so it's downloaded asynchronously in order to let the rest of the page finish loading and start being displayed.
Quite straightforwardly:
<script async type="text/javascript" src="standalone-<version>.js"></script>
<script async type= "text/javascript" src= "standalone-<version>.js"></script>
Make sure to replace <version> as appropriate.
# Bringing it all together Here's the complete skeleton web page for an W eb standalone:
<html> <body> <div> <canvas style="border: 0px none"; id="canvas" oncontextmenu="event.preventDefault()" ></canvas> </div> <script type="text/javascript"> var Module = { canvas:document.getElementById('canvas') }; </script> <script async type="text/javascript" src="standalone-community.js"></script> </body> </html>
# Advanced: Speeding up engine download Currently, the engine files are almost 30 MB, which is a lot to download before the engine can start. It is possible to speed up the download by enabling deflate compression in the web server configuration.
Enabling deflate compression reduces the total download size to around 6.3 MB. It's recommended to pre-compress the engine with gzip, and then configure your web server to serve the pre-compressed files.
- For the Apache web server, configure mod deflate to serve pre-compressed content - For the NGINX web server, add gzip_static on; to your configuration.
# Advanced: Adding Web Fonts The W eb engine uses web fonts to render text, by default it uses the generic CSS font family 'sans-serif' . T o add additional web fonts for the engine to use, they must be added to the DOM's FontFaceSet document.fonts The standalone builder will add a number of default fonts to the test HTML page unless a custom HTML page has been specified. This list currently includes: Helvetica Arial Times New Roman Courier New This list of default fonts can be overridden by providing a web-fonts.txt file in the standalone Copy Files list. The contents of this file will be merged with the node of the test page. Fonts can be added to the document using HTML, CSS or JavaScript. They can be added to the web-fonts.txt file using only HTML. For example, tags can be added to the HTML: <link href= rel= "stylesheet"> "https://fonts.googleapis.com/css2?family=Roboto&display=swap" Or an @import rule can be added to CSS (or inside <style> tag in HTML): <style> </style> @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); FontFace rules can be added to CSS (or inside <style> tag in HTML): 541 LiveCode 10.0.2-rc-4 User Guide 5/21/25 <style> @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url(https://InsertRobotoLocation.woff2) format('woff2'); } </style> JavaScript can be used to create a FontFace object which can then be added to the DOM's FontFaceSet Before the engine starts any existing fonts contained in the DOM's FontFaceSet are downloaded, this can be disabled with the Module.livecodeLoadFonts property . The engine on startup will then cache these fonts and required data for use with text rendering, this cache can be refreshed by calling the livecodeResetFonts function contained within the DOM liveCode object: do "{ document.liveCode.livecodeResetFonts(); }" as "JavaScript" Advanced: Customizing the Module object There are a number of LiveCode-specific Module attributes that you can modify to affect how the engine behaves: Module.livecodeStandalone: the filename of the standalone archive (default standalone.zip ) Module.livecodeIcuCore: the filename of the icu core data (default icu-core.dat) Module.livecodeIcuIter: the filename of the icu break iteration data (default icu-iter.dat) Module.livecodeIcuColl: the filename of the icu collation data (default icu-coll.dat) Module.livecodeStandalonePrefixURL: Prepended to both the standalone archive filename and the icu data filenames to construct their full URL (default empty) Module.livecodeStandaloneRequest: If you assign a network request to this attribute (before the engine runs), then it will use that request for the standalone archive instead of automatically starting a download for you. This means that you can, in your HTML, fire off a request for the standalone before the engine script actually arrives. For this to work, the network request should be an XMLHttpRequest with its responseType set to arraybuffer. Module.livecodeLoadFonts: A boolean value to control if fonts in the DOM's FontFaceSet should be loaded before engine startup, by default this is true. See also Emscripten's Module object documentation.