>Make your first SPX template from scratch. This article will give you basic understanding about [[Documentation/Graphic Templates/Formats/HTML|HTML templates]] in SPX. As a *hello world* -exercise we create a simple one liner title graphic as shown below. ![[hello-world.png]] ## What you need? 1. Windows, Mac, or Linux computer 2. SPX application installed to it (spxgraphics.com/software#compare) 3. A text editor ([MS Visual Studio Code](https://code.visualstudio.com/) is recommended, but any plain text editor will work. Do _not_ use a word processor, such as MS Word!) Image shows HTML, CSS and JS files open in a VS Code Workspace: ![[vscode.png]] ## Prepare empty files A typical HTML page consists of several files which are being interpreted by the [[Documentation/Renderer/Overview|renderer]]. We do the same here for our first SPX-template. Go to your SPX install folder and into `ASSETS/templates` -subfolder. Create a new folder (for all your future templates) using your (or your company) name. Then in that, create a new subfolder for your new template and also `css` and `js` subfolders for style and javascript -files. The recommended folder structure follows this principle ``` {SPXROOT}/ASSETS/templates/{authorName}/{projectName}/ ``` so in my case, it would be `C:/SPX/ASSETS/templates/tuomo/helloWorld/` Then create three empty files in there: - `helloWorld.html` - the template file itself - `css/styles.css` - CSS stylesheet in `css` subfolder - `js/spx_interface.js` - javascript helper file in `js` subfolder >[!info] If you are in a hurry, you can download [hello-world-template-completed.zip](https://storage.googleapis.com/spx-gc-bucket-fi/CommunityFiles/helloWorld2026/hello-world-template-completed.zip). ## HTML file content All SPX templates can be considered "full viewport graphics" and in most workflows, SPX output always fills the entire screen with a transparent area, and visual elements of the template can appear anywhere on this area. The HTML template files for SPX can have any HTML tags and features in them, but templates usually follow this basic structure: ``` HTML │ ├─HEAD │ ├─ styles.css │ ├─ script.js │ └─ SPXGCTemplateDefinition{} │ └─ BODY └─ Elements ``` Using this as our guidelines, we can start to create a very basic SPX-template with this HTML-code. Please note, this is **not working code** since it is lacking important javascript functions, but outlines the basic HTML element part of the template. ```html <html> <head> <meta charset="utf-8" /> <title>My First SPX Template</title> </head> <body> <div class="SPXWindow"> <div id="f0"></div> </div> </body> </html> ``` <html> <head> <meta charset="utf-8" /> <title>My First SPX Template</title> </head> <body> <div class="SPXWindow"> <div id=" **f0** "></div> </div> </body> </html> The `SPXWindow` -class and other styles are defined in `styles.css` -file which we assign to HTML template later. An important value in the HTML is element with ID **f0** , this will be the text the user can update from the SPX Graphics Controller GUI. ## Template Definition The link between the HTML file and SPX user interface is a `SPXGCTemplateDefinition` object, which defines how the template should be played out and what kind of input fields are exposed to the user in SPX. ![[Pasted image 20260129104746.png]] In this template, we will only have a single text field, so our template definition looks like the following. (For details see [documentation](https://github.com/TuomoKu/SPX-GC#templatedefinition)) ``` html <script> window.SPXGCTemplateDefinition = { "description": "My first template", "webplayout": "7", "out": "manual", "DataFields": [ { "field": "f0", "ftype": "textfield", "title": "Type something here", "value": "Hello World!" } ] }; </script> ``` ## Link external JS and CSS files CSS stylesheets defines colors and fonts and other visual parameters for HTML elements. In this example we use CSS transitions to fade our text on and off. There are a ton of options how to animate items, but a simple fade will do for this exercise. We have two classes to help in this: **fadeIN** and **fadeOUT.** Then the javascript logic will toggle these CSS classes with play and stop events. A snippet from the CSS style: ```css .fadeIN { opacity: 1!important; transition: all; transition-duration: 0.5s; } .fadeOUT { opacity: 0!important; transition: all; transition-duration: 0.2s; } ``` External CSS and JS files are linked to HTML with these directives in the ``<head>`` section: ```html <link rel="stylesheet" href="./styles.css"> <script src="./spx_interface.js"></script> ``` You can download the external files from here: * [styles.css](https://storage.googleapis.com/spx-gc-bucket-fi/CommunityFiles/helloWorld2026/styles.css) - an example stylesheet for the Hello World -example * [spx_interface.js](https://storage.googleapis.com/spx-gc-bucket-fi/CommunityFiles/helloWorld2026/spx_interface.js) - an example SPX data parser ## SPX command handlers The `spx_interface.js` file introduces `play()` and `stop()` functions, but they trigger `runAnimationIN()` and `runAnimationOUT()` functions which are implemented in the template itself. Once these are done, the template is completed and can be added to SPX in [[Documentation/Graphics Controller/Project Settings|Project Settings]] and then it can be added to the [[Documentation/Graphics Controller/Rundown Settings|rundown]] for testing. Completed HTML code: >[!info] You can copy and paste the HTML code here or download [helloWorld.html](https://storage.googleapis.com/spx-gc-bucket-fi/CommunityFiles/helloWorld2026/helloWorld.html) ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="./css/styles.css"> <script src="./js/spx_interface.js"></script> <title>My First SPX Template</title> <script> function runAnimationIN() { document.getElementById('f0').classList = "fadeIN" } function runAnimationOUT() { document.getElementById('f0').classList = "fadeOUT" } window.SPXGCTemplateDefinition = { "description": "My first template", "webplayout": "7", "out": "manual", "DataFields": [ { "field": "f0", "ftype": "textfield", "title": "Type something here", "value": "Hello World!" } ] }; </script> </head> <body> <div class="SPXWindow"> <div id="f0"></div> </div> </body> </html> ``` SPX comes with several default templates. See `ASSETS/templates` -folder structure for more examples. ## Import errors and messages When HTML files are added to the SPX project they are scanned for the `TemplateDefinition` -data. Some templates may generate errors or other log messages to the [[Documentation/Server/Overview|SPX Server]] console during import. These errors usually can be safely ignored. Errors and messages are generated when the template is parsed for the template definition. Typical causes for these are Javascript functions that are executed "onLoad". Usually these messages can be ignored, but if they prevent the import of the template, or crash the SPX server, please read the error messages carefully and see the template source code if those root functions could be temporarily disabled. After the import, they can be re-activated for runtime. ## Getting real This tutorial gives you the very basics of HTML template creation. In actual production you will need to use more advanced features such as still images, real-time data, videoclips, image sequences, graphs & charts, maps, detailed animations, transition logic, responsive design, custom UI's, etc. HTML templates can converted to OGraf templates be "wrapped" the code into a valid OGraf construct. This can be done manually or using AI driven development. Read more about [OGraf here](https://ograf.ebu.io/). HTML, CSS and JS has almost unlimited capabilities for motion design. See [our page](https://spxgraphics.com/create) for a list of various graphics creation tools and workflows and you can also find inspiration by looking up design heavy examples with keywords like `lottie`, `webgl`, `gsap demos`, `browser based motion design` and so on. Explore! --- ## Read Next * [Graphics Creation tools](https://spxgraphics.com/create) on SPX website - [[Documentation/Graphic Templates/Formats/HTML|HTML Template Format]] - Complete documentation on HTML templates - [[Documentation/Graphic Templates/Overview|Graphic Templates Overview]] - Overview of all SPX template formats - [[Guides/Tutorials/Create your first SPX plugin|Create your first SPX plugin]] - Extend SPX with custom plugins - [[Documentation/Graphics Controller/Project Settings|Project Settings]] - Add templates to your SPX project