git404hub

what is reflow fr?

valtors/reflow — explained in plain English

Analysis updated 2026-05-18

7TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

tl;dr

A single TypeScript API for responsive design (breakpoints, fluid text, container queries) that works the same across React, Vue, Svelte, and more.

vibe map

mindmap
  root((reflow))
    What it does
      Breakpoints
      Fluid typography
      Container queries
      Viewport tracking
    Tech stack
      TypeScript
      React
      Vue
      Svelte
    Use cases
      Responsive layouts
      SSR safe apps
      Cross framework UI
    Audience
      Frontend developers
      Design systems teams

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Add responsive breakpoints to a React, Vue, or Svelte app without picking a different library per framework.

VIBE 2

Build fluid text sizing that scales smoothly between screen widths instead of jumping at fixed points.

VIBE 3

Detect a user's reduced motion or contrast preference and adjust the UI accordingly.

VIBE 4

Avoid hydration mismatch warnings when rendering responsive layouts on the server.

what's the stack?

TypeScriptReactVueSvelteSolidAngular

how it stacks up fr

valtors/reflowadguardteam/ruleseditorarkorlab/haru
Stars777
LanguageTypeScriptTypeScriptTypeScript
Last pushed2026-07-01
MaintenanceActive
Setup difficultyeasyeasyhard
Complexity2/52/55/5
Audiencedeveloperdeveloperops devops

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 5min
Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

in plain english

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.

prompts (copy fr)

prompt 1
Show me how to set up reflow's ResponsiveProvider in a Next.js App Router project.
prompt 2
Write a Vue 3 component using reflow's useBreakpoint composable to toggle a mobile menu.
prompt 3
Explain how reflow's fluidClamp function generates CSS clamp values for responsive text.
prompt 4
Help me add reflow's testing utilities to mock matchMedia and ResizeObserver in my test suite.

Frequently asked questions

what is reflow fr?

A single TypeScript API for responsive design (breakpoints, fluid text, container queries) that works the same across React, Vue, Svelte, and more.

What language is reflow written in?

Mainly TypeScript. The stack also includes TypeScript, React, Vue.

What license does reflow use?

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

How hard is reflow to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is reflow for?

Mainly developer.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.