# artsy/fresnel

An SSR compatible approach to CSS media query based responsive layouts for React.

Repository: https://github.com/artsy/fresnel
Canonical: https://ross.abutalabs.com/products/fresnel
Homepage: https://artsy.github.io/blog/2019/05/24/server-rendering-responsively
Language: TypeScript
License: NOASSERTION
License Family: other
Topics: react, responsive, media-queries, ssr, nextjs, react-18
Last push: 2026-06-11T03:39:49+00:00

## Health v2 (maintenance only)
Score: 79/100 (v2, computed 2026-09-03T02:20:16.233290+00:00)
- activity 87, release rhythm 57, longevity 100
- inputs: {"age_days": 2918, "days_push": 83, "days_rel": 208, "gap_med": 48.5, "n_releases_24m": 7}
- flags: no_license
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 1297, forks 67 (observed 2026-08-28T04:04:17.095003+00:00)

## What it is
@artsy/fresnel is a React library for building responsive layouts using CSS media queries in a way that is compatible with server-side rendering. It renders all breakpoints on the server wrapped in CSS that shows only the matching one, then cleans up unneeded markup on the client via matchMedia.

## Use cases
- server-render responsive React components
- show different components per breakpoint without layout flash
- combine SSR with responsive design in Next.js
- avoid rendering only one breakpoint variant on the server
- improve perceived performance of responsive SSR pages

## When to choose
- you server-render a React app and need media-query-based responsiveness
- you want all breakpoints present in initial HTML for fast first paint
- you use Next.js or Gatsby with responsive components

## When to avoid
- your app is fully client-rendered and simple matchMedia hooks suffice
- you only need responsive styling of properties rather than swapping components
- you don't use React

## Facets
- artifact type: library
- maturity: active
- function: ui-components, ssr, frontend-framework
- domain: frontend, web-development, web-design
- platform: browser
- tags: react, responsive-design, media-queries, breakpoints, nextjs, typescript, nodejs, web-server

## Member repositories
- artsy/fresnel (main) score 79

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:04:17.095003+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-30T04:53:52.644842+00:00, confidence not recorded.
  - readme: https://github.com/artsy/fresnel (fetched 2026-08-28T04:04:17.095003+00:00, sha 7c51496acd0e)
  - homepage: https://artsy.github.io/blog/2019/05/24/server-rendering-responsively (fetched 2026-08-29T12:10:33.045624+00:00, sha d7bd2de25f8c)
- Data as of 2026-08-30T08:39:29.467469+00:00.