home projects speaker
buy me a coffee? sponsor me!
Viewports on the fly

Frameport enables you to showcase your responsive components in real-life media queries!

Get Started GitHub npm

About Frameport

Frameport was created with the goal of simplifying the display of responsive components in style guides and documentation. It empowers you to create iframes with your component's HTML, CSS, and JavaScript, making them act as natural viewports. It's a zero-dependency package, making it easy to integrate into your projects.

With frameport, you can create any viewport you want on a web page. This can be useful for a variety of purposes, such as:

  • Showcasing the different responsive modes of your components
  • Sandbox content

Frameport is incredibly easy to use. Simply add the add the required attributes or use the import with options, and frameport will do the rest. You can also wrap the viewports with the style of your choosing.

See It in Action

See frameport in action with our interactive demo on CodePen:

View Demo

Key Features

Display responsive components effortlessly.

Create iframes that act as natural viewports.

Showcase your components in real-life media queries.

Zero dependency, making the carbon footprint as small as possible.

Get Started

Frameport makes showcasing responsive components a breeze. Start using Frameport to enhance your content and documentation today!

Get started with frameport by installing it with npm:

  1. Install frameport via npm:
    2. npm i @phun-ky/frameport
  2. Choose your preferred integration method, whether it's Typescript, ESM, Script, or React.

It is always up to date

Speccer is always up to date, ensured to you by the author!

Used by

API Documentation

For a detailed understanding of frameport's API, refer to the API Documentation.

About the author

Hi! My name is Alexander, and I am a creative frontender, specializing in UX, accessibility, universal design, frontend-architecture, node and design systems. I am passionate with open source projects and love to dabble with new emerging technologies related to frontend. With over 26 years of frontend experience, I have earned the right to be called a veteran. I am a lover of life, technologist at heart. If I am not coding, I am cooking and I love whisky and cigars. Oh, and coffee, I LOVE coffee!

If you want to know more about me, here is some links you might want to check out: GitHub, Instagram, Twitter, LinkedIn, CodePen, Slides.com, npm,

Speaker

I am also an avid speaker on several topics! Check out some of the things I speak about, and contact me if you are interested in having me at your next event!