Nació de una necesidad real: quería poner gráficos bonitos en los README de GitHub, con soporte de modo oscuro y claro, pero GitHub no deja usar CSS real en sus páginas. Lo que sí permite es embeber SVG. Y los SVG, si los construyes bien, soportan @media (prefers-color-scheme) de forma nativa.

frame-svg es un framework que te permite escribir esos SVG como si fueran componentes React. Defines archivos .frame en TypeScript con una sintaxis JSX familiar, y el motor los compila a SVG estáticos que cambian de tema automáticamente según las preferencias del sistema, sin una línea de JavaScript en runtime.

El núcleo incluye un motor de layout basado en Flexbox implementado desde cero en TypeScript: calcula posiciones, resuelve anchos flexibles y gestiona el spacing sin tocar el DOM. Por encima hay diez componentes primitivos (Stack, Box, Text, Circle, Grid…) y nueve componentes compuestos listos para usar: Card, Avatar, Callout, FileTree, FeatureList, Stat, KeyCombo. También incluye un servidor de preview con hot reload, una extensión para VS Code con resaltado de sintaxis y autocompletado, y un sistema de variables temáticas que genera el CSS de dark/light mode de forma automática. El resultado es siempre un SVG autónomo, sin dependencias. Si quieres ver en detalle cómo funciona por dentro, hay un artículo en el blog donde cuento el proceso completo.