arviahq/arvia

Arvia is a design system compiler for web developers who want their visual styles managed in one place and compiled ahead of time, before the app ever runs in a browser. You write style definitions in a custom file format called .arv, which describes things like color themes, button sizes, and component variants. When you build your project, Arvia reads those files and outputs plain CSS and typed TypeScript code, so your running app never needs to calculate or inject styles on the fly. The core benefit is that the browser does less work and the developer gets fewer surprises. Because styles are compiled at build time, there is no JavaScript running at runtime to apply them. If you make a typo or use a variant that does not exist, TypeScript will warn you before the code ships. That kind of early error detection is the point of the typed API Arvia generates. The tool is built around Vite, a popular JavaScript build tool, and it ships separate plugins for React, Preact, and Vue so you can drop it into whichever project structure you already use. A framework-agnostic plugin is also available for Svelte, Solid, or server-rendered setups. You install the right package for your framework, point it at your theme file, and the compiler handles the rest. Editor support is included for Visual Studio Code, Cursor, Zed, and Neovim, with features like syntax highlighting, code completion, hover documentation, and error checking directly in your .arv files. There is also a local documentation site and an interactive playground you can spin up with one command to experiment before wiring anything into a real project. The project is open source under the MIT license, meaning you can use it freely in personal and commercial work. It is a relatively new project with a small number of stars, so the community and ecosystem are still forming. The README acknowledges that it draws inspiration from vanilla-extract, another build-time CSS library, if you want a reference point for what this kind of tooling offers.