Template Generator

Scaffold a new OGraf package from a preset.

Pick a base, give it a name and your colours, watch it run live, and download a spec-valid package with manifest, module, stylesheet and local fonts already wired up. Every download is checked against the Package Checker first.

Choose a base

Each preset is one of the hand-made tutorial templates: a Web Component with the full lifecycle, local fonts and a 1080p thumbnail. Your choices are applied to its real files.

Tutorial →

Package identity

What a renderer and an operator see when they browse for this graphic.

Loading the base template…

Look

Colours, body font and position become CSS custom properties at the top of style.css, so the download is a themed package you can keep re-skinning by hand.

Loading the base template…

Default data

What the operator form is pre-filled with. Written into the manifest schema as each field's default, so controllers and the preview start from the same values.

Loading the base template…

Live preview

The generated graphic.mjs runs at 1920 × 1080 in a sandboxed iframe, served by an in-browser service worker exactly as a renderer would.

Preparing the preview…

1920 × 1080 · 30%

Package check

The same rules as the Package Checker, run on the exact zip you will download.

The check runs once the package is built.

Download

Next steps

Unzip and point an OGraf renderer at the manifest, or drop the zip on the Package Checker.
Edit the theme tokens at the top of style.css to keep re-skinning by hand.
Change the markup in graphic.mjs and the data schema in the manifest together: load() and updateAction() read the same fields.

The generated package is MIT licensed, like the tutorial templates it is built from.

Everything runs in your browser — nothing is uploaded.