valtors/reflow

Reflow is a TypeScript toolkit that helps developers build websites and apps that adjust smoothly to different screen sizes. Instead of writing separate responsive code for every framework, you get one API that works the same way across React, Vue, Svelte, Solid, Qwik, Preact, Angular, and Lit, plus plain JavaScript. The library covers the pieces developers usually cobble together from multiple smaller packages: breakpoints (rules for when a layout should change based on screen width), container queries (checking the size of a specific element rather than the whole screen), fluid typography (text that scales smoothly between a minimum and maximum size instead of jumping between fixed sizes), and viewport tracking. It also detects user preferences such as reduced motion, reduced data use, and higher contrast, so an app can adapt to how someone has set up their device. A key focus is server rendering. Reflow is built so pages rendered on the server and then handed off to the browser do not flash or shift unexpectedly, a common annoyance called a hydration mismatch. It works with tools like Next.js, Express, and Hono by reading hints sent by the browser to guess the right layout before the page even loads. Installation is a single npm command, and each framework gets its own dedicated entry point so the core library has no dependency on React or any other framework. The project also ships testing helpers so developers can simulate different screen sizes and media preferences in automated tests without a real browser. Bundle size is small, with the core library under 3 kilobytes after compression, and the project enforces this limit automatically so future changes cannot make it heavier without notice. The project is released under the MIT license, meaning it can be used freely, including in commercial projects, as long as the copyright notice is kept.