@shotlingo/aspect-ratio-calc

App Store, Google Play, and social screenshot aspect ratios as a typed lookup table, grouped by shared design canvas — so you know which device classes can reuse one template without cropping or letterboxing. Zero dependencies, no network calls.

Full interactive reference (searchable table + JSON/CSV export + copy-paste CSS): shotlingo.com/tools/screenshot-aspect-ratios

Install

npm install @shotlingo/aspect-ratio-calc

Usage

import { getById, getByGroup, sharesCanvas, RATIOS } from '@shotlingo/aspect-ratio-calc';

getById('iphone-6.9-ratio');
// => { id: 'iphone-6.9-ratio', label: 'iPhone 6.9"', ratio: '19.5:9', cssValue: '1320 / 2868', group: 'tall-19.5-9', required: true, ... }

sharesCanvas('iphone-6.9-ratio', 'iphone-6.1-ratio');
// => true — both are in the 'tall-19.5-9' group, one template covers both

sharesCanvas('iphone-6.9-ratio', 'ipad-13-ratio');
// => false — iPhone is ~19.5:9, iPad is 4:3, they need separate canvases

getByGroup('tall-19.5-9').map((r) => r.label);
// => ['iPhone 6.9"', 'iPhone 6.5"', 'iPhone 6.3"', 'iPhone 6.1"']

RATIOS.length;
// => 27

API

• RATIOS: AspectRatioEntry[] — the full list.
• CATEGORIES: RatioCategory[] — 'iphone' | 'ipad' | 'watch' | 'mac' | 'tv' | 'vision' | 'play' | 'social'.
• getById(id: string): AspectRatioEntry | undefined
• getByCategory(category: RatioCategory): AspectRatioEntry[]
• getByGroup(group: string): AspectRatioEntry[] — entries that share one design canvas.
• getRequired(): AspectRatioEntry[] — the canvases each platform actually requires (the rest auto-scale from these).
• sharesCanvas(idA: string, idB: string): boolean — can these two device classes reuse one template?

Each AspectRatioEntry includes ratio (human-friendly, e.g. "19.5:9"), decimal, pxW/pxH, cssValue (copy-pasteable CSS aspect-ratio value), group, devices, and required.

License

MIT