Nested Parenthetical Madness


    3.2.5 • Public • Published

    Gitter GitHub release Bower npm License: MIT

    HTML5 device mockups v3 📱💻

    Demo page is under construction


    Name Status
    create react components 🔨

    Use on...

    • Your website / splash screen


    • Displaying photos
    • Displaying screenshots of your app(s)
    • Displaying reference works / illustrations
    • Displaying a content rotator / slideshow
    • Embedding a JavaScript app inside the device
    • Embedding a YouTube video


    • Looks cool
    • Attracts customers
    • Makes your site look professional
    • Give people the idea that your app/site works on mobile
    • Give the impression that your illustrations are meant for web/mobile
    • Lots of screenshots in just one "device"


    • Maintains the device's aspect ratio when scaled
    • Perfectly aligned screen content containers
    • Some devices have "home button" layer defined for possible click event bindings
    • Multiple color schemes
    • Multiple orientations
    • 86 different device images


    Name Filename Orientations Colors
    Chromebook Chromebook portrait black
    Galaxy S3 galaxyS3 portrait, landscape black, white
    Galaxy S5 galaxyS5 portrait, landscape black, white, gold
    Galaxy Tab 4 galaxyTab4 portrait black, white
    HTC One M8 HtcOneM8 portrait, landscape black
    Huawei P8 HuaweiP8 portrait, landscape gold
    iMac iMac portrait black
    iPad iPad portrait, landscape black, white
    iPad Air 2 iPadAir2 portrait, landscape black, white, gold
    iPad Pro iPadPro portrait, landscape black, white, gold
    iPhone 6 iPhone6 portrait, landscape black, white, gold
    iPhone 6 Plus iPhone6Plus portrait, landscape black, white, gold
    iPhone SE iPhoneSE portrait, landscape black, white, gold, pink
    iPhone 5 iPhone5 portrait, landscape black, white
    iPhone 6 Hand iPhone6Hand portrait black, white
    iPhone 7 Hand iPhone7Hand portrait black
    iPhone 7 Hand 2 iPhone7Hand_2 portrait black
    iPhone 7 iPhone7 portrait, landscape black, white, gold, pink, red
    iPhone X iPhoneX portrait, landscape black
    Lumia 930 Lumia930 portrait, landscape black, white
    Macbook Macbook portrait black, white, gold
    Macbook 2015 Macbook2015 portrait black, white, gold
    MacbookPro Macbook2015 portrait black
    Pixel Pixel portrait black, white
    Samsung TV SamsungTV portrait black
    Surface Pro 3 SurfacePro3 landscape black
    Surface Studio SurfaceStudio portrait black

    Integrating to your website:


    bower install html5-device-mockups


    npm i html5-device-mockups

    Old traditional way

    <link rel="stylesheet" type="text/css" href="dist/device-mockups.min.css">


    Use this example or grap the code from the HTML generator on our demo site:

    <div class="device-wrapper">
      <div class="device" data-device="iPhone5" data-orientation="portrait" data-color="black">
        <div class="screen">
          <!-- PUT CONTENTS HERE -->
        <div class="button">
          <!-- You can hook the "home button" to some JavaScript events or just remove it -->


    "I can not control the height of the device"

    Created by:

    This is a forked repository of pixelsign. due to it seems abandoned, and I took it up, willing to continue.


    Richard Zilahi


    Tomi Hiltunen

    Angelos Arnis

    Benjamin Bortels

    Credits for the original graphical renderings of the devices used in this package are found in a separate file which is provided with this package.




    npm i @zilahir/html5-device-mockups

    DownloadsWeekly Downloads






    Unpacked Size

    17 MB

    Total Files


    Last publish


    • zilahir