Explorador de schema

Cada campo de un manifiesto OGraf, en lenguaje claro.

Un catálogo pensado para diseñadores del schema canónico de manifiesto de la EBU. Recorre los campos de nivel superior, mira cada tipo de entrada del operador con una maqueta visual real y olvídate por completo de la jerga de JSON Schema.

Obteniendo el schema en directo de ograf.ebu.io…

Campos del manifiesto

Obligatorios

Grupos

Tipos de entrada del operador

La estructura completa, de un vistazo

Todo lo que puede contener un manifiesto OGraf — los campos obligatorios en rosa, los opcionales en gris. Haz clic en cualquier rama para saltar a su ficha detallada.

Manifiesto OGrafroot.json
- $schemastring · URL constante
- idstring
- namestring
- mainstring · archivo de entrada
- supportsRealTimeboolean
- supportsNonRealTimeboolean
- versionstring · ordenable
- descriptionstring
- stepCountnumber · por defecto 1 · -1 = dinámico
- authorobject
  - namestring
  - emailstring
  - urlstring
- customActionsarray · lib/action.json
  - idstring
  - namestring
  - descriptionstring
  - schemaobject | null (null = sin parámetros)
- schemagdd/object.json — formulario de datos del operador
  - typeboolean · string · number · integer · array · object
  - gddType1 de los 9 de abajo ↓
  - gddOptionsobject — extensiones, etiquetas…
  - defaultdepende del tipo
  - hiddenboolean — se omite en la etiqueta visible
  - ordernumber — pista de orden en la interfaz, menor primero
  - items(si type=array) → object.json recursivo
  - properties(si type=object) → object.json recursivo
  - → gddTypes9 tipos canónicos
- renderRequirementsarray de objetos de requisito
  - resolutionobject
    - widthconstraints/number · {min,max,exact,ideal}
    - heightconstraints/number
  - frameRateconstraints/number
  - accessToPublicInternetconstraints/boolean · {exact, ideal}
  - enginearray
    - typestring — CEF, Gecko, …
    - version.minstring — específica del motor
- thumbnailsarray
  - filestring — PNG, JPG, GIF, WebP
  - resolutionobject
    - widthinteger ≥ 1
    - heightinteger ≥ 1
- v_* (extensiones de fabricante)los campos personalizados con prefijo v_ se permiten en cualquier nivel

obligatorio · opcional · haz clic en cualquier rama para saltar a su ficha completa más abajo

Campos del manifiesto

Todo lo que puede ir en el nivel superior de un manifiesto .ograf.json, agrupado en las cinco cosas que de verdad importan a los diseñadores: quién es este grafismo, cómo se comporta, qué datos pide al operador, qué botones personalizados puede pulsar el operador y qué necesita del renderizador.

Identidad

¿Quién es este grafismo? Un nombre, una versión, un crédito.

Enlace al schema

$schema

Indica a controladores y validadores con qué versión del formato de manifiesto OGraf has trabajado. Siempre es la URL canónica de la EBU — la mayoría de los editores la rellenan por ti.

Ejemplo: https://ograf.ebu.io/v1/specification/json-schemas/graphics/schema.json

Opcional

ID único

id

Un nombre que ningún otro grafismo del mundo debería compartir. Usa un patrón de dominio invertido para que las colisiones sean prácticamente imposibles.

Ejemplo: com.yourstation.lower-third

Opcional

Nombre visible

name

Lo que ven los operadores al elegir este grafismo en una lista. Que sea corto — tiene que caber en la interfaz del controlador.

Ejemplo: News Lower Third

Opcional

Versión

version

Cuando cambies algo importante, súbela. Usa major.minor.patch — sube el número major cuando rompas algo de lo que dependen los operadores.

Ejemplo: 1.0.0

Opcional

Descripción

description

Una frase sobre lo que hace este grafismo. Ayuda a los operadores a elegir el correcto cuando hay decenas de plantillas.

Ejemplo: Two-line name + title overlay with logo

Opcional

Archivo de entrada

main

El archivo que el renderizador carga primero. Normalmente graphic.mjs o index.html. La ruta es relativa al manifiesto.

Ejemplo: graphic.mjs

Opcional

Autor

author

Quién lo ha hecho. Es opcional, pero un nombre + correo electrónico ayuda a los operadores a saber a quién avisar cuando algo no cuadra.

Opcional

Miniaturas

thumbnails

Imágenes de vista previa del grafismo para que los operadores lo reconozcan a simple vista. PNG, JPG, GIF o WebP. Se admiten varios tamaños — los controladores eligen el que mejor encaja.

Opcional

Comportamiento

¿Cómo funciona? Páginas, modos, dónde puede emitirse.

Páginas o fases

stepCount

Cuántas vistas distintas tiene tu grafismo. -1 significa dinámico (el grafismo decide en tiempo de ejecución), 0 es una cortinilla que se reproduce sola hasta el final, 1 es un único estado que se queda en pantalla hasta que se detiene (un rótulo inferior), 2+ es un grafismo de varias páginas que el operador va pasando con clics. El valor por defecto es 1.

Ejemplo: por defecto 1 · mín. -1 · -1 = dinámico

Opcional

¿Emisión en directo?

supportsRealTime

True si tu grafismo puede funcionar en antena en directo — el caso más habitual. Tienes que declararlo explícitamente, aunque sea true.

Ejemplo: true

Opcional

¿Postproducción?

supportsNonRealTime

True si tu grafismo puede ejecutarse más rápido o más lento que el tiempo real — útil para flujos de renderizado offline (fotograma a fotograma, por lotes). Si es true, tienes que implementar goToTime() y setActionsSchedule().

Ejemplo: false

Opcional

Datos del operador

Lo que escribe el operador — como un formulario: nombre, cargo, marcador.

Campos de datos del operador

schema

Lo que escribe el operador. Como un formulario: un campo Nombre, un campo Cargo, un selector de color. El controlador lo lee y construye el formulario automáticamente — nunca tienes que diseñar la interfaz del operador.

Opcional

Botones personalizados

Acciones especiales que el operador puede pulsar durante la emisión.

Botones personalizados

customActions

Acciones especiales que el operador puede lanzar durante la emisión — celebrar un gol, hacer parpadear un aviso, cambiar un color. Cada botón tiene un ID, un nombre y un formulario de datos opcional (pon schema a null si la acción no recibe parámetros).

Opcional

Lo que necesita para renderizarse

El mínimo que el renderizador debe garantizar — tamaño, transparencia, audio.

Requisitos de renderizado

renderRequirements

Una lista de entornos de renderizado aceptables — al menos una entrada debe cumplirse. Cada entrada puede restringir la resolución, la frecuencia de fotogramas, el acceso a internet y el motor de renderizado + versión. Las restricciones usan min/max/exact/ideal para que el renderizador pueda negociar la mejor opción.

Opcional

Tipos de entrada del operador

Dentro del campo schema — es el formulario que el controlador construye para el operador. Estos son los tipos de entrada que puedes usar, cada uno con una maqueta de lo que el operador ve realmente en el controlador. Combínalos para pedir lo que necesite tu grafismo: nombre, marcador, foto, color, posición…

Texto corto

single-line

Un campo de texto de una línea. Nombres, cargos, marcadores, hashtags.

Lo que ve el operador

Nombre

Texto largo

multi-line

Un área de texto de varias líneas. Citas, descripciones, textos más largos.

Lo que ve el operador

Cita

Grafismo abierto, televisión abierta, estándares abiertos. Ese es el futuro.

Ruta de archivo

file-path

Un selector de archivos genérico. Úsalo cuando un grafismo necesite un recurso a partir de una ruta. Restringe las extensiones permitidas con gddOptions.

Lo que ve el operador

Sintonía

Examinar…/audio/intro.mp3

Imagen

file-path/image-path

Un selector de imágenes. El controlador sabe que debe mostrar una miniatura de vista previa. Logotipos, fotos de cara, avatares de redes sociales.

Lo que ve el operador

Logotipo

station-logo.svg

Suelta o examina

Opciones

select

Un desplegable con un conjunto fijo de opciones. Usa enum para enumerar los valores y gddOptions.labels para dar a cada valor una etiqueta visible más clara.

Lo que ve el operador

Posición

Abajo a la derecha

Color (sólido)

color-rrggbb

Un selector de color que devuelve una cadena hexadecimal de 6 caracteres, como #2563eb. Solo hex en minúsculas — los operadores ven una muestra y un campo hex.

Lo que ve el operador

Acento

#2563eb

Color (con transparencia)

color-rrggbbaa

Un selector de color que incluye canal alfa — hex de 8 caracteres, como #2563ebcc. Úsalo para superposiciones, fondos con efecto cristal o donde quieras transparencia parcial.

Lo que ve el operador

Superposición

#0f172accα 0.80

Porcentaje

percentage

Un número que representa un porcentaje. Los operadores suelen ver un control deslizante y un campo numérico de 0 a 100 — ideal para opacidad, progreso, escala, volumen.

Lo que ve el operador

Opacidad

0%72%100%

Duración (milisegundos)

duration-ms

Un entero medido en milisegundos. Duración de una animación, tiempo en pantalla, duración de un fundido de salida. El controlador puede mostrarlo en segundos para que sea más cómodo.

Lo que ve el operador

Duración de la animación

600ms≈ 0.6 s

Dos extras que puede llevar cualquier campo

hidden: true — si está presente, el valor del campo se excluye de la etiqueta visible del grafismo en las interfaces de playout/automatización. Úsalo para campos técnicos o que solo meten ruido.

order: 0 — pista de orden en la interfaz. Los números menores van primero. Te permite controlar dónde aparece cada campo en el formulario del operador.

Asistente de IA

Pide a una IA que revise o redacte tu manifiesto.

Copia el prompt de abajo en cualquier chat de IA. Enseña al modelo las reglas de OGraf a un nivel en el que un diseñador puede confiar — campos obligatorios, los gddTypes canónicos, extensiones de fabricante, todo.

ograf-ai-prompt.txt

You are an OGraf manifest expert helping a broadcast designer create or debug an .ograf.json manifest.

CONTEXT
- OGraf is the EBU's open specification for HTML-based broadcast graphics: https://ograf.ebu.io
- Canonical JSON Schema (root): https://ograf.ebu.io/v1/specification/json-schemas/graphics/schema.json
- Sub-schemas live under /lib (action.json, constraints/{boolean,number}.json) and /gdd (object.json, basic-types.json, gdd-types.json)
- A manifest is plain JSON.

REQUIRED top-level fields
  $schema, id, name, main, supportsRealTime, supportsNonRealTime

OPTIONAL top-level fields
  version, description, stepCount, author, customActions, schema, renderRequirements, thumbnails

CONSTRAINTS (often missed)
- additionalProperties: false at every level. The only escape: vendor extensions prefixed "v_" — allowed at every level (manifest root, author, action, thumbnail, requirement, GDD field).
- stepCount is a NUMBER with minimum -1 and default 1. Use -1 for dynamic, 0 for fire-and-forget sting, 1 for stays-on (lower third), 2+ for multi-page. (Do NOT use the string "dynamic".)
- thumbnails use { "file": "...", "resolution": { "width": N, "height": N } } — NOT { "src", "width", "height" } flat.
- renderRequirements is an ARRAY of requirement objects (any-of). Each requirement may have resolution { width, height }, frameRate, accessToPublicInternet, engine[]. Constraints use the shape { min?, max?, exact?, ideal? } (number) or { exact?, ideal? } (boolean).
- customActions[].schema can be null when the action takes no parameters.

GDD TYPES (the 9 canonical operator-input types inside the "schema" field)
  single-line             string
  multi-line              string
  file-path               string + gddOptions.extensions[]
  file-path/image-path    string + gddOptions.extensions[]
  select                  string|number|integer + enum[] + gddOptions.labels{}
  color-rrggbb            string · pattern ^#[0-9a-f]{6}$
  color-rrggbbaa          string · pattern ^#[0-9a-f]{8}$
  percentage              number
  duration-ms             integer

Every GDD field can also carry:
  hidden: boolean   (skip in display label)
  order: number     (UI sort hint, lower first)

HOW TO HELP ME
1. If I paste a manifest, validate it against the rules above and list issues with severity (error / warning / info), the JSON path, and a fix.
2. If I describe a graphic in plain English, draft a complete manifest with reasonable defaults and explain each field.
3. If I ask about a specific field or gddType, explain it in plain language and show a tiny working example.
4. Don't invent fields. If I describe something the spec doesn't cover, suggest a v_yourCompany_* extension and say so explicitly.
5. After every answer, remind me to run the Package Checker at https://ograf.dev/check (or the embedded validator) before shipping.

Now wait for me to share the manifest or describe what I want to build.

El prompt cita ograf.ebu.io para que los modelos con navegación puedan consultar el schema canónico mientras responden.

Dónde pegarlo

Consejos para obtener mejores respuestas

Pega tu .ograf.json completo junto con el prompt. La IA detecta en segundos campos obligatorios que faltan y erratas.
Describe el grafismo en lenguaje llano y deja que la IA redacte el manifiesto por ti. "Rótulo inferior con nombre, cargo y selector del color del equipo, 1 paso, solo tiempo real."
Pasa siempre el resultado por el verificador de paquetes (ograf.dev/check) antes de publicar. La salida de la IA es un gran borrador, no una respuesta final.
Indica qué gddType quieres para cada campo del operador. Si no, la IA suele recurrir a strings simples de JSON Schema, que los controladores no pueden mostrar igual de bien.
Si usas una función específica de un fabricante, añade un v_tuEmpresa_campo — la especificación rechaza claves desconocidas en el nivel superior, pero permite prefijos v_ en todas partes.
Cuando la IA te devuelva JSON, pídele "validate this against https://ograf.ebu.io/v1/specification/json-schemas/graphics/schema.json" — los modelos con navegación consultarán la versión canónica y revisarán su propio trabajo.

Un aviso: la salida de la IA es un gran borrador, nunca una respuesta final. Pasa siempre lo que obtengas por el verificador de paquetes antes de publicar.

¿Listo para juntar las piezas?

La página de la especificación recorre el manifiesto completo de principio a fin con un ejemplo práctico. Los tutoriales muestran 11 grafismos construidos de principio a fin. El verificador de paquetes valida un paquete terminado con este mismo schema.

Leer la especificación Ver los tutoriales Validar un paquete

Cargando...

Campos del manifiesto

Tipos de entrada del operador

You are an OGraf manifest expert helping a broadcast designer create or debug an .ograf.json manifest. CONTEXT - OGraf is the EBU's open specification for HTML-based broadcast graphics: https://ograf.ebu.io - Canonical JSON Schema (root): https://ograf.ebu.io/v1/specification/json-schemas/graphics/schema.json - Sub-schemas live under /lib (action.json, constraints/{boolean,number}.json) and /gdd (object.json, basic-types.json, gdd-types.json) - A manifest is plain JSON. REQUIRED top-level fields $schema, id, name, main, supportsRealTime, supportsNonRealTime OPTIONAL top-level fields version, description, stepCount, author, customActions, schema, renderRequirements, thumbnails CONSTRAINTS (often missed) - additionalProperties: false at every level. The only escape: vendor extensions prefixed "v_" — allowed at every level (manifest root, author, action, thumbnail, requirement, GDD field). - stepCount is a NUMBER with minimum -1 and default 1. Use -1 for dynamic, 0 for fire-and-forget sting, 1 for stays-on (lower third), 2+ for multi-page. (Do NOT use the string "dynamic".) - thumbnails use { "file": "...", "resolution": { "width": N, "height": N } } — NOT { "src", "width", "height" } flat. - renderRequirements is an ARRAY of requirement objects (any-of). Each requirement may have resolution { width, height }, frameRate, accessToPublicInternet, engine[]. Constraints use the shape { min?, max?, exact?, ideal? } (number) or { exact?, ideal? } (boolean). - customActions[].schema can be null when the action takes no parameters. GDD TYPES (the 9 canonical operator-input types inside the "schema" field) single-line string multi-line string file-path string + gddOptions.extensions[] file-path/image-path string + gddOptions.extensions[] select string|number|integer + enum[] + gddOptions.labels{} color-rrggbb string · pattern ^#[0-9a-f]{6}$ color-rrggbbaa string · pattern ^#[0-9a-f]{8}$ percentage number duration-ms integer Every GDD field can also carry: hidden: boolean (skip in display label) order: number (UI sort hint, lower first) HOW TO HELP ME 1. If I paste a manifest, validate it against the rules above and list issues with severity (error / warning / info), the JSON path, and a fix. 2. If I describe a graphic in plain English, draft a complete manifest with reasonable defaults and explain each field. 3. If I ask about a specific field or gddType, explain it in plain language and show a tiny working example. 4. Don't invent fields. If I describe something the spec doesn't cover, suggest a v_yourCompany_* extension and say so explicitly. 5. After every answer, remind me to run the Package Checker at https://ograf.dev/check (or the embedded validator) before shipping. Now wait for me to share the manifest or describe what I want to build.

¿Listo para juntar las piezas?