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

The Gallery
1

MockFrame

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

GitHub Repo stars

MockFrame

MockFrame

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.

11 Likes
2

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

3

I love this, it looks so slick!

4 Likes
4

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
5

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

Oh thanks, can you please make a pull request with the proposed changes at GitHub - khalby786/mockframe: A JavaScript plugin that styles the <iframe> elements present in your webpage like a browser mockup!?

1 Like
6

this is god in disguise.

1 Like
7

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

1 Like
8

Please explain with examples.

9

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
10

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

1 Like
11

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.