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


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

GitHub Repo stars
Buy Me A Coffee



<!-- non-minified -->
<script src=""></script>

<!-- minified -->
<script src=""></script>

Download file

Donwload the file here.

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


<script src=""></script>
  newMockFrame(); // and tada, it'll convert all your iframes to mockups


You can customize certain settings of the iframe mockup style.

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

      dark: true

    Dark Theme

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

    • Regular (regular)

        style: "regular"

      MockFrame Regular Preview

    • Darken (darken)

        style: "darken"

      MockFrame Darken Preview

Based on my browser mockup generator.


This project is licensed under the MIT License.


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!


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)"rgb(54, 56, 58)"}if("darken"{let n=document.querySelectorAll(".mockup-button");for(let e of n)"#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

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= and it would give me the photo of my site.


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

1 Like