> The new industry format for HTML graphics by EBU
OGraf is a specification for HTML graphics created by the EBU, in partnership with SPX and other industry leaders, to define the structure of a HTML graphics to ensure compatibility.
While the specs can seem like a lot, it is basically just a set of files, format, and terminologies to be used . A common misconception is that OGraf affects a graphic's functionality- this is not true. OGraf can be thought of as a "wrapper" for all HTML graphics for interoperability between tools and environments- a shared language.
---
## Basic OGraf Template structure
![[training material - OGraf.jpg]]
> Conceptual diagram of OGraf template
OGraf templates are made up of 2 required components, +1 optional file for better dev experience:
1. **template.mjs**
2. **template.ograf.json**
3. **template.html (optional)**
### 1. template.mjs
**Primary Functions:**
- Define the required actions, following the OGraf specs
If you want a "pure" OGraf template, you can also define the DOM as well as all of the graphics logic in here
![[spx-ograf-translation.png]]
> Required functions in both SPX spec and OGraf spec. Blue is required, Black is required for certain functionalities, and gray is optional.
### 2. template.ograf.json
This is the manifest file where OGraf template definitions are defined.
**Primary Functions:**
- Define the required properties
- Define vendor specific ones
```json
{
"$schema": "https://ograf.ebu.io/v1/specification/json-schemas/graphics/schema.json",
"name": "Name Left Graphic",
"description": "This graphic includes a name on the left side of the screen.",
"id": "name-left-graphic",
"version": "1",
"supportsRealTime": true,
"supportsNonRealTime": false,
"main": "NAME_LEFT.mjs",
"schema": {
"type": "object",
"properties": {
"comment": {
"type": "string",
"title": "Nickname of this item on the rundown",
"default": "[ Item nickname ]"
},
"instruction": {
"v_spx": {
"ftype": "instruction"
},
"type": "string",
"title": "Instruction",
"default": "You can leave any field empty for a different style. This is an example from the default template pack. For more templates see ▶ spxgraphics.com/store"
},
"f0": {
"type": "string",
"title": "Fullname",
"default": "Tomppa"
},
"f1": {
"type": "string",
"title": "Title",
"default": "Ograf expert"
},
"f2": {
"type": "string",
"title": "Company or Location",
"default": "SPX Graphics"
},
"f99": {
"v_spx": {
"ftype": "filelist",
"assetfolder": "./resources/Name_left/themes/",
"extension": "css"
},
"type": "string",
"title": "Visual Theme",
"default": "./resources/Name_left/themes/Default.css"
}
}
},
"v_spx": {
"playserver": "OVERLAY",
"playchannel": "1",
"playlayer": "1",
"webplayout": "1",
"out": "manual",
"uicolor": "3"
}
}
```
> example of a OGraf manifest
### 3. template.html
This is an optional approach, which we use internally at SPX, to create OGraf compatible templates. In theory, we're creating a generic HTML graphic in here and then "wrapping" it with the OGraf specs in the template.mjs file.
**The benefits of using this approach**
- Edit the DOM in HTML
- Use familiar methods to create graphics
- The simplest way to convert existing graphics into OGraf
## References
[OGraf official specs](https://ograf.ebu.io/v1/specification/docs/Specification.html)
---
## Read Next
- [[Documentation/Graphic Templates/Formats/HTML|HTML Templates]] - Detailed HTML template guide
- [[Documentation/Graphic Templates/Advanced/Scene and Transition Logic|Transition Logic]] - State-based graphics with OGraf
- [[Guides/Tutorials/How to convert SPX Templates to OGraf|Converting to OGraf]] - Migration guide
- [[Documentation/Graphic Templates/Overview|Templates Overview]] - General templates information