Developer source

Build and brand your own presentation

The slide content, layouts and branding are separate. Edit the shared source once, then generate the presentation formats your audience needs.

Download source kit (ZIP, 5.2 MB)Browse source on GitHub

1. Build a deck

Extract the ZIP, open its apiops-presentations folder in a terminal and use Node.js 22 or later.

npm install
npm run check
npm run build -- --edition apiops-overview --name my-overview

The output/ folder contains an editable PowerPoint, a Typst entry point, resolved JSON and speaker notes.

2. Apply your branding

Copy brands/partner-example.json, add your logo under assets/ and change the font, footer and colours. Settings inherit from theme.json.

npm run build -- --edition apiops-overview --brand brands/your-company.json --name your-overview

Install your chosen fonts on the build and presentation machines. Branding changes apply to slide text and shared elements; colours and logos already inside illustrations or canvas images remain in those assets.

Use or create images and scenes

The visual creation and reuse guide covers downloading standalone SVG assets, composing new scenes with the Character Grammar, briefing AI image generation and adding PNG images to the shared slide source.

For an existing scene, start with the downloadable character scenes. For a new reusable SVG, edit the design system’s JSON recipes and regenerate the scene sheet. Keep labels as editable slide text, and retain the original SVG or image brief alongside exported images.

3. Export PDF with Typst

Install the Typst CLI and add it to PATH.

npm run build:pdf -- --edition apiops-overview --brand brands/your-company.json --name your-overview

You can also generate the Typst entry point and upload the entire source folder to the Typst web app. Select the generated output/*.typ file as the main file.

PowerPoint and Typst/PDF render the same structured content independently. Editing a generated Typst or PowerPoint file does not update the JSON source. Review wrapping after changing fonts or expanding content.

Export a Reveal.js presentation

npm run build -- --edition apiops-overview --brand brands/your-company.json --name your-overview --format reveal

This produces a portable output/your-overview-reveal/ folder and ZIP. Serve the folder with a static HTTP server and open index.html. The Reveal.js library and notes plugin are bundled locally. Text, lists and tables are HTML; diagrams and illustrations are image assets.

Use arrow keys or swipe to navigate, Esc for overview and S for speaker view. The downloaded HTML can be adapted to another Reveal.js template; editing the shared JSON and brand settings keeps all formats aligned.

Choose what to edit

Source	What it controls
`slides/*.json`	Text, native lists, table content, image references and notes
`editions/*.json`	Slide selection and order for each talk
`brands/*.json`	Partner branding overrides
`layouts.json`	Geometry and typography on a 1280 × 720 slide
`canvases/*.json`	Editable illustrative canvas data; regenerate the image after editing
`typst/template.typ`	Typst rendering, adaptable to your organisation’s template
`scripts/reveal-markup.mjs`	Shared HTML slide rendering for the website and Reveal.js export

Edition IDs: apiops-overview, financial-services-case-study and strategy-to-technical-delivery.

Keep releases consistent

Each published release contains matching PowerPoint, PDF, slide previews and source, with SHA-256 checksums in its manifest. The site serves these prepared files; visitors do not need to run a build.

Current release: 1.2.0. Method-data: 4.2.1. Scaffold reference: 1.1.4.

Preserve method and canvas attribution, and retain the APIsFirst and Osaango engagement credits when using the case study.