Regular CSS for native apps, tested against the browser.
You write the CSS you already know. Dragon compiles it into native view properties (UIKit first, Android Views next) and then makes Chrome the judge: every box and every value is compared, number by number.
No runtime CSS parser. No selector matching on the device. No style quietly dropped. If a platform can't do something, you get a build error with the file, the line and a fix.
.card {
border-radius: 12px; /* layer.cornerRadius = 12 */
color: light-dark(#222, #eee); /* a dynamic UIColor */
font-size: 1.125rem; /* scales with UIFontMetrics */
padding-top: env(safe-area-inset-top); /* the real safe-area insets */
}Where a platform already has the right tool, Dragon uses it instead of reinventing it. The only library that ships to the device is Dragon's layout engine, because positions depend on real content and real screens.
Every feature carries one of three seals, and each seal is earned by a passing comparison against Chrome:
 | exact | Matches Chrome. |
 | caveat | Works, with a measured, documented difference. |
 | unsupported | A build error that tells you what to do instead. |
No test, no seal. Missing data means unsupported.
🥚 Still in the egg. Nothing is released yet. The npm package dragon will hatch as 1.0.0-alpha.x (the old 0.x versions are an unrelated drag-and-drop library).
Markless is the first rider. Dragon takes plain CSS plus a description of the element tree, so any tool that compiles templates can saddle up.
Dragon CSS is supported by:
- Macroscope, through the Macroscope Open Source program. It reviews every pull request, using semantic analysis of the code's syntax trees (ASTs) rather than the diff alone.
- Anthropic, through the Claude Open Source program. Claude does the agentic engineering and validation of this project.
- OpenAI, through the Codex for OSS program. Codex is an additional validator.