To all who write CSS,
We are bringing your 
to 
iOS and 
Android too.
Dragon turns your CSS into real native apps. No web view.
Every rule is checked against 
Chrome and clearly marked: exact, caveat or unsupported. Nothing is hidden.
The web is done. The phones are next. Tap any place on the map to see how far we have come.
Drag the map sideways to explore. Tap a place.
← your CSS sets out here
Sea of Devices
the M2 goal
won
← the host marches here
Touch a place to unroll its account.
exact
Done. Dragon's own layout engine puts every element exactly where Chrome does, down to a fraction of a pixel.
Nothing is marked supported without a passing test.
in progress
The native engine for iOS is generated from the one TypeScript engine, not written again by hand. Its device lane is checked against Chrome, as the web was.
No numbers are posted yet. They will be, when the lane passes.
This isle and the Android Marches are reached together, at parity, or not at all.
in progress
Android's native engine is generated from the same TypeScript engine as iOS's. Its device lane is checked against Chrome, number by number.
No numbers are posted yet. They will be, when the lane passes.
Neither phone is claimed alone: both meet at the Parity Ford.
unsupported
Custom properties (CSS variables), the road that utility styles such as Tailwind travel by. It lies beyond milestone 2.
Until a test passes here, it stays marked unsupported.
not yet
Version 1.0: when every place on this map is proven against Chrome.
Install: npm install dragon (coming soon; not yet published)
Three steps. Your tools do most of it for you.
Plain CSS, the kind you already write. Nothing new to learn.
.card { padding: 16px; border-radius: 12px;}
One check covers all of them. Old or unsupported CSS gives you the file, the line and a fix.
app.css:4:3: error clip: rect(0 0 0 0) deprecated, not supported fix: Remove the declaration
Real native views. No web view, and no CSS read on the phone.
// iOS, from .cardlayer.cornerRadius = 12// padding: placed by// Dragon's layout engine
The package and its API are below.
npm install dragonA small API. Most people never call it: your framework or build tool does.
import { createProject, formatDiagnostics, querySupport,} from 'dragon'// One project for every platform you ship toconst project = createProject({ projectId: 'my-app', targets: { web: {}, ios: { minimum: '15.0' } },})// Check: errors name the file, the line and a fixconst report = project.check(input)if (!report.ok) { const { diagnostics, sources } = report console.log(formatDiagnostics(diagnostics, sources))}// Compile: native output for each platformconst result = project.compile(input)result.outputs.ios// Ask before you writequerySupport({ kind: 'possibilities', target: { kind: 'ios', minimum: '15.0' }, css: 'gap: 7px',})
Targets today: web and iOS. Android is being added now. Early design; the package is not published yet.
Write regular CSS once. Dragon compiles it at build time into native view properties, and proves the result against Chrome, number by number, never by screenshots.
Native engines are generated from the one TypeScript engine, and each device lane is checked against Chrome.
Custom properties (for utility CSS such as Tailwind), then 1.0.
exact, 
caveat, unsupported. Nothing is marked supported without a passing test.
Install: npm install dragon (coming soon; not yet published).