fold.js: foldable phone support for React, Vue, Svelte and the web

fold.js is an open-source JavaScript library that makes web apps work properly on foldable phones such as the Samsung Galaxy Z Fold, Google Pixel Fold, Honor Magic V or Microsoft Surface Duo. It detects the hinge and the device posture (flat, book, tabletop) and provides two-pane layouts that never put content under the hinge. It works with React, Vue, Svelte, Solid, Angular, Astro or plain HTML, weighs about 2 kB and includes a built-in foldable simulator.

Features

• Two-pane layouts: each pane on its own side of the hinge, stacked on regular phones
• Posture detection: flat, book (vertical hinge), tabletop (horizontal hinge), folded
• Hinge geometry in JavaScript and as CSS variables
• Built-in foldable simulator for desktop browsers (Alt+Shift+F) with live outlines of elements under the hinge
• Audit CLI: npx foldjs audit https://your-site.com gives a foldable-ready score out of 100 and an HTML report
• foldjs/auto: one script tag retrofits an existing mobile site (modals, tab bars, videos, text columns)
• Adapters for React, Vue, Svelte and Solid, Web Components and a CSS-only layer
• About 2 kB min+gzip, zero dependencies, SSR-safe, TypeScript

Install

npm i foldjs @foldjs/react

import { TwoPane, useFold } from "@foldjs/react";

<TwoPane primary={<MailList />} secondary={<MailDetail />} />

FAQ

How do I detect a foldable phone in JavaScript?

Use getFold() from foldjs, or useFold() in React and Vue. It returns whether the screen is split, the posture and the hinge rectangle, based on the Viewport Segments and Device Posture web APIs.

Can I test foldable layouts without a device?

Yes. The built-in simulator fakes book and tabletop postures with a visible hinge on any desktop browser.

What is the difference between book and tabletop posture?

Book: vertical hinge, two screens side by side, ideal for list and detail. Tabletop: horizontal hinge like a half-open laptop, ideal for video on top and controls at the bottom.

Study: 94% of popular websites split a button across a foldable's hinge · Source code on GitHub · foldjs on npm · llms.txt