2.1.0 • Public • Published

    Foldable Device Configurator

    Foldable Device Configurator is a little Web Component which you can drop in your application to test the CSS Spanning Polyfill located here

    How to use the foldable configurator in your project?

    $ npm install --save-dev foldable-device-configurator

    You then need to import the ESM module into your project (which depends on how you import ES modules), here is an example :

        <script type='module' src="../node_modules/foldable-device-configurator/src/foldable-device-configurator.js"></script>

    When imported, in your HTML file just add the following lines:


    Adapting your web application to foldable/dual screen devices

    This web component will let you emulate various foldable configurations and will set the foldable polyfills accordingly. Currently there are two polyfills you can use to design or adapt web contents for foldable devices :

    • A JavaScript API called Window Segments located here
    • CSS Properties called Spanning located here

    Both are proposals from Microsoft. At this time the configurator will only set the spanning media-queries.

    ⚠️ The two aforementioned APIs are early work in progress and are subject to change anytime.


    • Go here

    • You can also try a more advanced demo here

    Working on the foldable configurator component

    This project makes use of ECMAScript Modules (ESM) and runs them directly in the browser using Snowpack. If you install new dependencies using npm like npm install --save @material/mwc-button, then please run npx snowpack afterwards to generate the new modules in web_modules folder. Also, the web_modules folder should be committed. Make sure to update the package.json file accordingly.

    To install app dependencies and but any further steps, run

    $ npm install

    ESM compatible modules can be found using Material design web components can be found by searching for @material/mwc-. You can try out the demo page here: Material Web Components demo

    Then run

    $ npm run build

    To test in the browser, run

    $ npm run start

    To build, run

    $ npm run build

    The build is then ready to publish to npm (inside the dist/ directory)

    This demo is being developed by :





    npm i foldable-device-configurator

    DownloadsWeekly Downloads






    Unpacked Size

    121 kB

    Total Files


    Last publish


    • darktears