MockFrame - A JavaScript plugin that styles the <iframe> elements present in your webpage like a browser mockup!

MockFrame

A JavaScript plugin that styles the <iframe> elements present in your webpage like a browser mockup!

GitHub Repo stars
Buy Me A Coffee

Installation

CDN

<!-- non-minified -->
<script src="https://cdn.jsdelivr.net/gh/khalby786/mockframe@main/script.js"></script>

<!-- minified -->
<script src="https://cdn.jsdelivr.net/gh/khalby786/mockframe@main/script.min.js"></script>

Download file

Donwload the file here.

<script src="/path/to/mockframe.js"></script>

Usage

<script src="https://cdn.jsdelivr.net/gh/khalby786/mockframe@main/script.js"></script>
<script>
  newMockFrame(); // and tada, it'll convert all your iframes to mockups
</script>

Configuration

You can customize certain settings of the iframe mockup style.

  • Dark Mode (default: false, required: false)

    newMockFrame({
      dark: true
    })
    

    Dark Theme

  • Window Styles (default: "regular", required: false)

    • Regular (regular)

      newMockFrame({
        style: "regular"
      })
      

      MockFrame Regular Preview

    • Darken (darken)

      newMockFrame({
        style: "darken"
      })
      

      MockFrame Darken Preview

Based on my browser mockup generator.

License

This project is licensed under the MIT License.

10 Likes

Pretty simple, I’ll make my own version with the web URL with X-Frame bypassing and more maybe

I love this, it looks so slick!

4 Likes

There’s a bug where the whole iframe doesnt show - i fixed this by adding height:100%; after width:100%; in the js file.

Full minified file:

function newMockFrame(n={dark:!1,style:"regular"}){var e=document.querySelectorAll("iframe");for(let r of e){let e=r.parentNode,o=document.createElement("div");o.setAttribute("class","window");let t=document.createElement("div");t.setAttribute("class","header"),t.innerHTML='<div class="mockup-button red">&nbsp;&nbsp;</div>\n          <div class="mockup-button yellow">&nbsp;&nbsp;</div>\n          <div class="mockup-button green">&nbsp;&nbsp;</div>',e.replaceChild(o,r),o.appendChild(t),o.appendChild(r);let d=document.createElement("style");if(d.innerText="\n\n      iframe {\n        width: 100%;height:100%;\n        border: none;\n        border-bottom-left-radius: 9px;\n        border-bottom-right-radius: 9px;\n        display: block;\n      }\n\n      .window {\n        border-radius: 9px;\n        background-color: white;\n        width: 100%;\n        min-height: 100%;\n        box-shadow: 0 0px 1.2px rgba(0, 0, 0, 0.021), 0 0px 2.7px rgba(0, 0, 0, 0.031),\n          0 0px 4.6px rgba(0, 0, 0, 0.038), 0 0px 6.9px rgba(0, 0, 0, 0.044),\n          0 0px 10px rgba(0, 0, 0, 0.05), 0 0px 14.2px rgba(0, 0, 0, 0.056),\n          0 0px 20.1px rgba(0, 0, 0, 0.062), 0 0px 29.2px rgba(0, 0, 0, 0.069),\n          0 0px 45px rgba(0, 0, 0, 0.079), 0 0px 80px rgba(0, 0, 0, 0.1);\n      }\n\n      .header {\n        margin: 0px;\n        background: #e8e8e8;\n        border-top-left-radius: 9px;\n        border-top-right-radius: 9px;\n        height: 12px;\n        padding: 12px;\n      }\n\n      .mockup-button {\n        width: 12px;\n        height: 12px;\n        border-radius: 50%;\n        display: inline-block;\n      }\n\n      .red {\n        background-color: #ff5f56;\n      }\n\n      .yellow {\n        background-color: #ffc343;\n        margin-left: 3px;\n      }\n\n      .green {\n        background-color: #32a852;\n        margin-left: 3px;\n      }\n    ",document.body.appendChild(d),!0===n.dark){let n=document.querySelectorAll(".header");for(let e of n)e.style.backgroundColor="rgb(54, 56, 58)"}if("darken"===n.style){let n=document.querySelectorAll(".mockup-button");for(let e of n)e.style.backgroundColor="#979799"}}}
1 Like

Thanks! It means a lot to me coming from you!


Oh thanks, can you please make a pull request with the proposed changes at https://github.com/khalby786/mockframe?

1 Like

this is god in disguise.

1 Like

Quite nice for product markups! Is there an API for this?

1 Like

Please explain with examples.

Lets say that I want to have a dynamic mockup of my site for GitHub.

I would link the image mockupapiwebsite/api/image?url=https://riverside.rocks and it would give me the photo of my site.

2 Likes

I did a pull request it just need width:100%;height:100%; to .iframe

1 Like