> The *meat and bone* for live graphics is the graphic templates SPX uses HTML templates for visuals. Templates can have any features supported by the [[Documentation/Renderer/Overview|renderers]], such as Canvas objects, WebGL animations, CSS transforms and animations, animation libraries (GSAP, ThreeJS, Anime, Lottie/Bodymovin), and templates can utilize AJAX calls for data visualizations and other advanced uses. --- ## Graphic Templates Templates are HTML files that define: - Visual design - How graphics look (HTML/CSS) - Behavior - How graphics animate and interact (JavaScript) - Input fields - What content can be edited ([[Documentation/Graphic Templates/Formats/HTML#Template Definition|template definition]]) - Playout settings - Where and how graphics play out ## Template Structure SPX Solo comes with a starter template package for reference. See folder `ASSETS/templates/smartpx/Template_Pack_1` Recommended Folder Structure ⏵ LOG ⏵ DATAROOT ⏷ ASSETS ┝━⏵ video ┝━⏵ media ┕━⏷ templates ┝━⏵ smartpx ┝━⏵ yle ┕━⏷ myCompany ┝━⏵ ProjectA ┕━⏷ ProjectB ┝━⏵ css ┝━⏵ js ┝━ Template1.html ┕━ Template2.html The templates must be within ASSETS/templates folder structure. It is preferred to have a single subfolder for all your templates (myCompany in the example above) and further subfolders for different template packs or visual styles within it (ProjectA, ProjectB in the example). Template Loading SPX user interface and [[Documentation/Renderer/Web Render|web playout]] always load templates from ASSETS/templates folder, but [[Documentation/Renderer/Workflows/CasparCG - AMCP|CasparCG]] playout can be configured to playout copied templates from template-path folder configured in CasparCG Server caspar.config file. ## Template Definition Each HTML template must have a SPXGCTemplateDefinition object present in the HTML file's source code, within the HEAD section. This definition configures: What kinds of controls are shown to the operator How the graphic should playout (server, channel, [[Documentation/Renderer/Layers|layer]]) Default values and settings See [[Documentation/Graphic Templates/Formats/HTML#Template Definition|Template Definition]] for detailed information. Using Existing Templates You can use existing HTML templates with SPX by adding a template definition to them. ## Template Features Templates can include: HTML/CSS - Standard web technologies JavaScript - Custom logic and interactivity Canvas - 2D graphics and animations WebGL - 3D graphics CSS Animations - Smooth transitions Animation Libraries - GSAP, ThreeJS, Anime.js, Lottie AJAX - Data fetching and real-time updates Media - Images, videos, audio > [!TIP] Looking for ready-made templates? Browse the [SPX Store](https://spxgraphics.com/store). --- ## Read Next - [[Documentation/Graphic Templates/Formats/HTML|HTML Templates]] - Detailed guide to HTML template format - [[Documentation/Graphic Templates/Formats/OGraf|OGraf Templates]] - EBU standard format - [[Documentation/Graphic Templates/Advanced/Scene and Transition Logic|Transition Logic]] - State-based graphics - [[Documentation/Graphics Controller/Project Settings|Project Settings]] - Template configuration per project