Experimental renderer — this preview and its API are not final and may change.

Try it

Edit an OCF document, validate it, and render the result on a WebGL canvas. Validation uses ocf-validator(@opencoachingformat/validator@0.2.0). Rendering usesocf-renderer(@opencoachingformat/renderer@0.4.0). Everything runs locally in your browser.

Example:

{
  "$schema": "https://opencoachingformat.org/schema/v1.json",
  "meta": {
    "id": "b1e2d3c4-5f6a-4b7c-8d9e-0f1a2b3c4d5e",
    "title": "Quick Sketch — Give and Go",
    "description": "Minimal example: a coach sketches a give-and-go without any detail annotations.",
    "author": "OCF Examples",
    "tags": [
      "quick-mode",
      "give-and-go"
    ],
    "source_format": "open"
  },
  "court": {
    "ruleset": "fiba",
    "type": "half_court"
  },
  "entities": [
    {
      "type": "offense",
      "nr": 1,
      "x": -3,
      "y": 6
    },
    {
      "type": "offense",
      "nr": 2,
      "x": 3,
      "y": 6
    }
  ],
  "balls": [
    {
      "id": "ball_1",
      "carried_by": "offense_1"
    }
  ],
  "frames": [
    {
      "id": "frame_1",
      "actions": [
        {
          "player": "offense_1",
          "type": "pass",
          "to_player": "offense_2"
        },
        {
          "player": "offense_1",
          "type": "cut",
          "moves": [
            {
              "to": {
                "named": "basket"
              }
            }
          ]
        }
      ],
      "end_state": {
        "offense_1": {
          "named": "basket"
        },
        "balls": {
          "ball_1": {
            "carried_by": "offense_2"
          }
        }
      }
    },
    {
      "id": "frame_2",
      "actions": [
        {
          "player": "offense_2",
          "type": "pass",
          "to_player": "offense_1"
        },
        {
          "player": "offense_1",
          "type": "shoot"
        }
      ],
      "end_state": {
        "balls": {
          "ball_1": {
            "dead": true
          }
        }
      }
    }
  ]
}

Click Validate to check the document.