{"id":13469634,"url":"https://github.com/artsy/fresnel","last_synced_at":"2025-10-03T21:46:46.729Z","repository":{"id":37335940,"uuid":"147749596","full_name":"artsy/fresnel","owner":"artsy","description":"An SSR compatible approach to CSS media query based responsive layouts for React.","archived":false,"fork":false,"pushed_at":"2025-04-04T05:11:50.000Z","size":2749,"stargazers_count":1275,"open_issues_count":17,"forks_count":67,"subscribers_count":38,"default_branch":"main","last_synced_at":"2025-04-27T20:07:36.981Z","etag":null,"topics":["media-queries","nextjs","react","react-18","responsive","ssr"],"latest_commit_sha":null,"homepage":"https://artsy.github.io/blog/2019/05/24/server-rendering-responsively","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/artsy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-09-07T00:39:14.000Z","updated_at":"2025-04-24T08:44:16.000Z","dependencies_parsed_at":"2023-10-20T17:47:15.269Z","dependency_job_id":"d617ad40-9177-4640-86ed-aeac417a7570","html_url":"https://github.com/artsy/fresnel","commit_stats":{"total_commits":425,"total_committers":33,"mean_commits":"12.878787878787879","dds":0.7317647058823529,"last_synced_commit":"29aa38a01bde6ba36157bb82b009bf9c36863172"},"previous_names":["artsy/react-responsive-media"],"tags_count":83,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artsy%2Ffresnel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artsy%2Ffresnel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artsy%2Ffresnel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artsy%2Ffresnel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/artsy","download_url":"https://codeload.github.com/artsy/fresnel/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254010826,"owners_count":21999004,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["media-queries","nextjs","react","react-18","responsive","ssr"],"created_at":"2024-07-31T15:01:47.917Z","updated_at":"2025-10-03T21:46:41.700Z","avatar_url":"https://github.com/artsy.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# @artsy/fresnel\n\n[![CircleCI][ci-icon]][ci] [![npm version][npm-icon]][npm]\n\n\u003e The Fresnel equations describe the reflection of light when incident on an\n\u003e interface between different optical media.\n\n– https://en.wikipedia.org/wiki/Fresnel_equations\n\n## Installation\n\n```sh\n  # React 18+\n  yarn add @artsy/fresnel\n\n  # React 17\n  yarn add @artsy/fresnel@6\n```\n\n**Table of Contents**\n\n- [Overview](#overview)\n- [Basic Example](#basic-example)\n- [Server-side Rendering (SSR)](#server-side-rendering-ssr-usage)\n- [Usage with Next](#usage-with-gatsby-or-next)\n- [Example Apps](#example-apps)\n- [Why not conditionally render?](#why-not-conditionally-render)\n- [API](#api)\n- [Pros vs Cons](#pros-vs-cons)\n- [Development](#development)\n\n## Overview\n\nWhen writing responsive components it's common to use media queries to adjust\nthe display when certain conditions are met. Historically this has taken place\ndirectly in CSS/HTML:\n\n```css\n@media screen and (max-width: 767px) {\n  .my-container {\n    width: 100%;\n  }\n}\n@media screen and (min-width: 768px) {\n  .my-container {\n    width: 50%;\n  }\n}\n```\n\n```html\n\u003cdiv class=\"my-container\" /\u003e\n```\n\nBy hooking into a breakpoint definition, `@artsy/fresnel` takes this declarative\napproach and brings it into the React world.\n\n## Basic Example\n\n```tsx\nimport React from \"react\"\nimport ReactDOM from \"react-dom\"\nimport { createMedia } from \"@artsy/fresnel\"\n\nconst { MediaContextProvider, Media } = createMedia({\n  // breakpoints values can be either strings or integers\n  breakpoints: {\n    sm: 0,\n    md: 768,\n    lg: 1024,\n    xl: 1192,\n  },\n})\n\nconst App = () =\u003e (\n  \u003cMediaContextProvider\u003e\n    \u003cMedia at=\"sm\"\u003e\n      \u003cMobileApp /\u003e\n    \u003c/Media\u003e\n    \u003cMedia at=\"md\"\u003e\n      \u003cTabletApp /\u003e\n    \u003c/Media\u003e\n    \u003cMedia greaterThanOrEqual=\"lg\"\u003e\n      \u003cDesktopApp /\u003e\n    \u003c/Media\u003e\n  \u003c/MediaContextProvider\u003e\n)\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById(\"react\"))\n```\n\n## Server-side Rendering (SSR) Usage\n\nThe first important thing to note is that when server-rendering with\n`@artsy/fresnel`, all breakpoints get rendered by the server. Each `Media`\ncomponent is wrapped by plain CSS that will only show that breakpoint if it\nmatches the user's current browser size. This means that the client can\naccurately start rendering the HTML/CSS while it receives the markup, which is\nlong before the React application has booted. This improves perceived\nperformance for end-users.\n\nWhy not just render the one that the current device needs? We can't accurately\nidentify which breakpoint your device needs on the server. We could use a\nlibrary to sniff the browser user-agent, but those aren't always accurate, and\nthey wouldn't give us all the information we need to know when we are\nserver-rendering. Once client-side JS boots and React attaches, it simply washes\nover the DOM and removes markup that is unneeded, via a `matchMedia` call.\n\n### SSR Example\n\nFirst, configure `@artsy/fresnel` in a `Media` file that can be shared across\nthe app:\n\n```tsx\n// Media.tsx\n\nimport { createMedia } from \"@artsy/fresnel\"\n\nconst ExampleAppMedia = createMedia({\n  breakpoints: {\n    sm: 0,\n    md: 768,\n    lg: 1024,\n    xl: 1192,\n  },\n})\n\n// Generate CSS to be injected into the head\nexport const mediaStyle = ExampleAppMedia.createMediaStyle()\nexport const { Media, MediaContextProvider } = ExampleAppMedia\n```\n\nCreate a new `App` file which will be the launching point for our application:\n\n```tsx\n// App.tsx\n\nimport React from \"react\"\nimport { Media, MediaContextProvider } from \"./Media\"\n\nexport const App = () =\u003e {\n  return (\n    \u003cMediaContextProvider\u003e\n      \u003cMedia at=\"sm\"\u003eHello mobile!\u003c/Media\u003e\n      \u003cMedia greaterThan=\"sm\"\u003eHello desktop!\u003c/Media\u003e\n    \u003c/MediaContextProvider\u003e\n  )\n}\n```\n\nMount `\u003cApp /\u003e` on the client:\n\n```tsx\n// client.tsx\n\nimport React from \"react\"\nimport ReactDOM from \"react-dom\"\nimport { App } from \"./App\"\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById(\"react\"))\n```\n\nThen on the server, setup SSR rendering and pass `mediaStyle` into a `\u003cstyle\u003e`\ntag in the header:\n\n```tsx\n// server.tsx\n\nimport React from \"react\"\nimport ReactDOMServer from \"react-dom/server\"\nimport express from \"express\"\n\nimport { App } from \"./App\"\nimport { mediaStyle } from \"./Media\"\n\nconst app = express()\n\napp.get(\"/\", (_req, res) =\u003e {\n  const html = ReactDOMServer.renderToString(\u003cApp /\u003e)\n\n  res.send(`\n    \u003chtml\u003e\n      \u003chead\u003e\n        \u003ctitle\u003e@artsy/fresnel - SSR Example\u003c/title\u003e\n\n        \u003c!–– Inject the generated styles into the page head --\u003e\n        \u003cstyle type=\"text/css\"\u003e${mediaStyle}\u003c/style\u003e\n      \u003c/head\u003e\n      \u003cbody\u003e\n        \u003cdiv id=\"react\"\u003e${html}\u003c/div\u003e\n\n        \u003cscript src='/assets/app.js'\u003e\u003c/script\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  `)\n})\n\napp.listen(3000, () =\u003e {\n  console.warn(\"\\nApp started at http://localhost:3000 \\n\")\n})\n```\n\nAnd that's it! To test, disable JS and scale your browser window down to a\nmobile size and reload; it will correctly render the mobile layout without the\nneed to use a user-agent or other server-side \"hints\".\n\n## Usage with Gatsby or Next\n\n`@artsy/fresnel` works great with Gatsby or Next.js's static hybrid approach to\nrendering. See the examples below for a simple implementation.\n\n## Example Apps\n\nThere are four examples one can explore in the `/examples` folder:\n\n- [Basic](examples/basic)\n- [Server-side Rendering](examples/ssr-rendering)\n- [Next](examples/nextjs)\n- [Kitchen Sink](examples/kitchen-sink)\n\nWhile the `Basic` and `SSR` examples will get one pretty far, `@artsy/fresnel`\ncan do a lot more. For an exhaustive deep-dive into its features, check out the\n[Kitchen Sink](examples/kitchen-sink) app.\n\nIf you're using Gatsby, you can also try\n[gatsby-plugin-fresnel](https://github.com/chrissantamaria/gatsby-plugin-fresnel)\nfor easy configuration.\n\n## Why not conditionally render?\n\nOther existing solutions take a conditionally rendered approach, such as\n[`react-responsive`][react-responsive] or [`react-media`][react-media], so where\ndoes this approach differ?\n\nServer side rendering!\n\nBut first, what is conditional rendering?\n\nIn the React ecosystem a common approach to writing declarative responsive\ncomponents is to use the browser’s [`matchMedia` api][match-media-api]:\n\n```tsx\n\u003cResponsive\u003e\n  {({ sm }) =\u003e {\n    if (sm) {\n      return \u003cMobileApp /\u003e\n    } else {\n      return \u003cDesktopApp /\u003e\n    }\n  }}\n\u003c/Responsive\u003e\n```\n\nOn the client, when a given breakpoint is matched React conditionally renders a\ntree.\n\nHowever, this approach has some limitations for what we wanted to achieve with\nour server-side rendering setup:\n\n- It's impossible to reliably know the user's current breakpoint during the\n  server render phase since that requires a browser.\n\n- Setting breakpoint sizes based on user-agent sniffing is prone to errors due\n  the inability to precisely match device capabilities to size. One mobile\n  device might have greater pixel density than another, a mobile device may fit\n  multiple breakpoints when taking device orientation into consideration, and on\n  desktop clients there is no way to know at all. The best devs can do is guess\n  the current breakpoint and populate `\u003cResponsive\u003e` with assumed state.\n\nArtsy settled on what we think makes the best trade-offs. We approach this\nproblem in the following way:\n\n1. Render markup for all breakpoints on the server and send it down the wire.\n\n1. The browser receives markup with proper media query styling and will\n   immediately start rendering the expected **visual** result for whatever\n   viewport width the browser is at.\n\n1. When all JS has loaded and React starts the rehydration phase, we query the\n   browser for what breakpoint it’s currently at and then limit the rendered\n   components to the matching media queries. This prevents life-cycle methods\n   from firing in hidden components and unused html being re-written to the DOM.\n\n1. Additionally, we register event listeners with the browser to notify the\n   `MediaContextProvider` when a different breakpoint is matched and then\n   re-render the tree using the new value for the `onlyMatch` prop.\n\nLet’s compare what a component tree using `matchMedia` would look like with our\napproach:\n\n\u003ctable\u003e\n\u003ctr\u003e\u003cth\u003eBefore\u003c/th\u003e\u003cth\u003eAfter\u003c/th\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\n\n```tsx\n\u003cResponsive\u003e\n  {({ sm }) =\u003e {\n    if (sm) return \u003cSmallArticleItem {...props} /\u003e\n    else return \u003cLargeArticleItem {...props} /\u003e\n  }}\n\u003c/Responsive\u003e\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```tsx\n\u003c\u003e\n  \u003cMedia at=\"sm\"\u003e\n    \u003cSmallArticleItem {...props} /\u003e\n  \u003c/Media\u003e\n  \u003cMedia greaterThan=\"sm\"\u003e\n    \u003cLargeArticleItem {...props} /\u003e\n  \u003c/Media\u003e\n\u003c/\u003e\n```\n\n\u003c/td\u003e\u003c/tr\u003e\n\u003c/table\u003e\n\nSee the [server-side rendering](examples/ssr-rendering) app for a working\nexample.\n\n## API\n\n### createMedia\n\nFirst things first. You’ll need to define the breakpoints and interaction needed\nfor your design to produce the set of media components you can use throughout\nyour application.\n\nFor example, consider an application that has the following breakpoints:\n\n- A viewport width between 0 and 768 (768 not included) points, named `sm`.\n- A viewport width between 768 and 1024 (1024 not included) points, named `md`.\n- A viewport width between 1024 and 1192 (1192 not included) points, named `lg`.\n- A viewport width from 1192 points and above, named `xl`.\n\nAnd the following interactions:\n\n- A device that supports hovering a pointer device, named `hover`.\n- A device that does not support hovering a pointer device, named `notHover`.\n\nYou would then produce the set of media components like so:\n\n```tsx\n// Media.tsx\n\nconst ExampleAppMedia = createMedia({\n  breakpoints: {\n    sm: 0,\n    md: 768,\n    lg: 1024,\n    xl: 1192,\n  },\n  interactions: {\n    hover: \"(hover: hover)\",\n    notHover: \"(hover: none)\",\n    landscape: \"not all and (orientation: landscape)\",\n    portrait: \"not all and (orientation: portrait)\",\n  },\n})\n\nexport const { Media, MediaContextProvider, createMediaStyle } = ExampleAppMedia\n```\n\nAs you can see, breakpoints are defined by their _start_ offset, where the first\none is expected to start at 0.\n\n### MediaContextProvider\n\nThe `MediaContextProvider` component influences how `Media` components will be\nrendered. Mount it at the root of your component tree:\n\n```tsx\nimport React from \"react\"\nimport { MediaContextProvider } from \"./Media\"\n\nexport const App = () =\u003e {\n  return \u003cMediaContextProvider\u003e...\u003c/MediaContextProvider\u003e\n}\n```\n\n### Media\n\nThe `Media` component created for your application has a few mutually exclusive\nprops that make up the API you’ll use to declare your responsive layouts. These\nprops all operate based on the named breakpoints that were provided when you\ncreated the media components.\n\n```tsx\nimport React from \"react\"\nimport { Media } from \"./Media\"\n\nexport const HomePage = () =\u003e {\n  return (\n    \u003c\u003e\n      \u003cMedia at=\"sm\"\u003eHello mobile!\u003c/Media\u003e\n      \u003cMedia greaterThan=\"sm\"\u003eHello desktop!\u003c/Media\u003e\n    \u003c/\u003e\n  )\n}\n```\n\nThe examples given for each prop use breakpoint definitions as defined in the\nabove ‘Setup’ section.\n\nIf you would like to avoid the underlying div that is generated by `\u003cMedia\u003e` and\ninstead use your own element, use the render-props form but be sure to **not**\nrender any children when not necessary:\n\n```tsx\nexport const HomePage = () =\u003e {\n  return (\n    \u003c\u003e\n      \u003cMedia at=\"sm\"\u003eHello mobile!\u003c/Media\u003e\n      \u003cMedia greaterThan=\"sm\"\u003e\n        {(className, renderChildren) =\u003e {\n          return (\n            \u003cMySpecialComponent className={className}\u003e\n              {renderChildren ? \"Hello desktop!\" : null}\n            \u003c/MySpecialComponent\u003e\n          )\n        }}\n      \u003c/Media\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n#### createMediaStyle\n\n\u003e Note: This is only used when SSR rendering\n\nBesides the `Media` and `MediaContextProvider` components, there's a\n`createMediaStyle` function that produces the CSS styling for all possible media\nqueries that the `Media` instance can make use of while markup is being passed\nfrom the server to the client during hydration. If only a subset of breakpoint\nkeys is used those can be optional specified as a parameter to minimize the\noutput. Be sure to insert this within a `\u003cstyle\u003e` tag\n[in your document’s `\u003chead\u003e`](https://github.com/artsy/fresnel/blob/main/examples/ssr-rendering/src/server.tsx#L28).\n\nIt’s advisable to do this setup in its own module so that it can be easily\nimported throughout your application:\n\n```tsx\nimport { createMedia } from \"@artsy/fresnel\"\n\nconst ExampleAppMedia = createMedia({\n  breakpoints: {\n    sm: 0,\n    md: 768,\n    lg: 1024,\n    xl: 1192,\n  },\n})\n\n// Generate CSS to be injected into the head\nexport const mediaStyle = ExampleAppMedia.createMediaStyle() // optional: .createMediaStyle(['at'])\nexport const { Media, MediaContextProvider } = ExampleAppMedia\n```\n\n#### onlyMatch\n\nRendering can be constrained to specific breakpoints/interactions by specifying\na list of media queries to match. By default _all_ will be rendered.\n\n#### disableDynamicMediaQueries\n\nBy default, when rendered client-side, the browser’s [`matchMedia`\napi][match-media-api] will be used to _further_ constrain the `onlyMatch` list\nto only the currently matching media queries. This is done to avoid triggering\nmount related life-cycle hooks of hidden components.\n\nDisabling this behaviour is mostly intended for debugging purposes.\n\n#### at\n\nUse this to declare that children should only be visible at a specific\nbreakpoint, meaning that the viewport width is greater than or equal to the\nstart offset of the breakpoint, but less than the next breakpoint, if one\nexists.\n\nFor example, children of this `Media` declaration will only be visible if the\nviewport width is between 0 and 768 (768 not included) points:\n\n```tsx\n\u003cMedia at=\"sm\"\u003e...\u003c/Media\u003e\n```\n\nThe corresponding css rule:\n\n```css\n@media not all and (min-width: 0px) and (max-width: 767px) {\n  .fresnel-at-sm {\n    display: none !important;\n  }\n}\n```\n\n#### lessThan\n\nUse this to declare that children should only be visible while the viewport\nwidth is less than the start offset of the specified breakpoint.\n\nFor example, children of this `Media` declaration will only be visible if the\nviewport width is between 0 and 1024 (1024 not included) points:\n\n```tsx\n\u003cMedia lessThan=\"lg\"\u003e...\u003c/Media\u003e\n```\n\nThe corresponding css rule:\n\n```css\n@media not all and (max-width: 1023px) {\n  .fresnel-lessThan-lg {\n    display: none !important;\n  }\n}\n```\n\n#### greaterThan\n\nUse this to declare that children should only be visible while the viewport\nwidth is equal or greater than the start offset of the _next_ breakpoint.\n\nFor example, children of this `Media` declaration will only be visible if the\nviewport width is equal or greater than 1024 points:\n\n```tsx\n\u003cMedia greaterThan=\"md\"\u003e...\u003c/Media\u003e\n```\n\nThe corresponding css rule:\n\n```css\n@media not all and (min-width: 1024px) {\n  .fresnel-greaterThan-md {\n    display: none !important;\n  }\n}\n```\n\n#### greaterThanOrEqual\n\nUse this to declare that children should only be visible while the viewport\nwidth is equal to the start offset of the specified breakpoint _or_ greater.\n\nFor example, children of this `Media` declaration will only be visible if the\nviewport width is 768 points or up:\n\n```tsx\n\u003cMedia greaterThanOrEqual=\"md\"\u003e...\u003c/Media\u003e\n```\n\nThe corresponding css rule:\n\n```css\n@media not all and (min-width: 768px) {\n  .fresnel-greaterThanOrEqual-md {\n    display: none !important;\n  }\n}\n```\n\n#### between\n\nUse this to declare that children should only be visible while the viewport\nwidth is equal to the start offset of the first specified breakpoint but less\nthan the start offset of the second specified breakpoint.\n\nFor example, children of this `Media` declaration will only be visible if the\nviewport width is between 768 and 1192 (1192 not included) points:\n\n```tsx\n\u003cMedia between={[\"md\", \"xl\"]}\u003e...\u003c/Media\u003e\n```\n\nThe corresponding css rule:\n\n```css\n@media not all and (min-width: 768px) and (max-width: 1191px) {\n  .fresnel-between-md-xl {\n    display: none !important;\n  }\n}\n```\n\n## Pros vs Cons\n\nPros:\n\n- Built on top of simple, proven technology: HTML and CSS media queries.\n- Users see rendered markup at the correct breakpoint for their device, even\n  before React has been loaded.\n\nCons:\n\n- If utilizing SSR rendering features, when the markup is passed down from the\n  server to the client it includes _all_ breakpoints, which increases the page\n  size. (However, once the client mounts, the unused breakpoint markup is\n  cleared from the DOM.)\n- The current media query is no longer something components can access; it is\n  determined only by the props of the `\u003cMedia\u003e` component they find themselves\n  in.\n\nThat last point presents an interesting problem. How might we represent a\ncomponent that gets styled differently at different breakpoints? (Let’s imagine\na `matchMedia` example.)\n\n```tsx\n\u003cSans size={sm ? 2 : 3}\u003e\n```\n\n```tsx\n\u003c\u003e\n  \u003cMedia at=\"sm\"\u003e{this.getComponent(\"sm\")}\u003c/Media\u003e\n  \u003cMedia greaterThan=\"sm\"\u003e{this.getComponent()}\u003c/Media\u003e\n\u003c/\u003e\n```\n\n```tsx\ngetComponent(breakpoint?: string) {\n  const sm = breakpoint === 'sm'\n  return \u003cSans size={sm ? 2 : 3} /\u003e\n}\n```\n\nWe're still figuring out patterns for this, so please [let us know][new-issue]\nif you have suggestions.\n\n## Development\n\n\u003cdetails\u003e\n\nThis project uses [auto-release](https://github.com/intuit/auto-release#readme)\nto automatically release on every PR. Every PR should have a label that matches\none of the following\n\n- Version: Trivial\n- Version: Patch\n- Version: Minor\n- Version: Major\n\nMajor, minor, and patch will cause a new release to be generated. Use major for\nbreaking changes, minor for new non-breaking features, and patch for bug fixes.\nTrivial will not cause a release and should be used when updating documentation\nor non-project code.\n\nIf you don't want to release on a particular PR but the changes aren't trivial\nthen use the `Skip Release` tag along side the appropriate version tag.\n\n\u003c/details\u003e\n\n[ci]: https://circleci.com/gh/artsy/fresnel\n[ci-icon]: https://circleci.com/gh/artsy/fresnel.svg?style=shield\n[npm]: https://www.npmjs.com/package/@artsy/fresnel\n[npm-icon]: https://badge.fury.io/js/%40artsy%2Ffresnel.svg\n[react-responsive]: https://github.com/contra/react-responsive\n[react-media]: https://github.com/ReactTraining/react-media\n[match-media-api]:\n  https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia\n[new-issue]: https://github.com/artsy/fresnel/issues/new\n[release-tags]: https://github.com/artsy/fresnel/blob/main/package.json\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartsy%2Ffresnel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fartsy%2Ffresnel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartsy%2Ffresnel/lists"}