graphics-i18n
Localized graphics as data. Author a graphic once, ship it as a single .lpkg package, and render it in any language on the web or in React Native — with real text instead of baked-in pixels.
How it works
- 1
Author
Design a graphic once in the editor: images, shapes and text nodes with fitting rules, then add locale packs for each language.
- 2
Package
Export a single .lpkg file (or pack a spec directory with the lpkg CLI). Strings, fonts and assets ship together, chunked per locale.
- 3
Render
Drop <LocalizedGraphic /> into your app. The runtime negotiates the locale, applies overrides and fits text — no per-language image exports.
Packages
@graphics-i18n/core
Platform-agnostic pipeline: container reading, manifest validation, locale negotiation, text fitting and the effective scene renderers consume.
@graphics-i18n/react
Web renderer producing a self-contained inline SVG that works in the browser and in server-rendered output.
@graphics-i18n/react-native
React Native renderer drawing with @shopify/react-native-skia, with platform-accurate text measurement.
Why not just export images?
Text baked into images has to be re-exported for every language, and translations rarely fit the original layout. An LPKG package keeps strings, fonts and artwork separate: text is fitted deterministically at render time (shrink, wrap or resize within authored bounds), right-to-left locales mirror automatically, and missing strings fall back gracefully with diagnostics instead of blank space. The full format and runtime behavior are specified in spec.md.