---
title: "Device Size — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Ali Çorak · Text. Device Size updates automatically as the browser window changes, making it useful for responsive testing, breakpoint previews, development…"
canonical: "https://framer.elliotli.dev/component/device-size"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Device Size

# Device Size

Visitor’s current view dimensions

[View on Framer](https://framer.com/marketplace/components/device-size/?via=elliot-li)

![Device Size preview image 1](https://framer.elliotli.dev/og/component/device-size/38a687cbeaeb1d27/1600x1200.jpg)

## Summary

Device Size updates automatically as the browser window changes, making it useful for responsive testing, breakpoint previews, development tools, and experimental layouts.

## Description

**Unlock entire Depth library for $149. One price. Lifetime.**

[**Get Depth**](https://depth.website/#all-access)

**\--------------------------------------------------------**

Display the visitor’s current viewport dimensions directly on your Framer site. Device Size updates automatically as the browser window changes, making it useful for responsive testing, breakpoint previews, development tools, and experimental layouts.

The component shows the live width and height of the current device or browser viewport in a simple text format.

**How to use**

Drop the component anywhere on your page and position it where the dimensions should appear. Customize the text color and typography directly from the properties panel.

Resize the browser or preview the page on different devices to see the displayed dimensions update in real time.

**Features**

-   Displays the current viewport width and height
    
-   Updates automatically when the browser is resized
    
-   Useful for responsive and breakpoint testing
    
-   Custom text color
    
-   Custom typography
    
-   Works on preview and published websites
    
-   Responsive across desktop, tablet, and mobile
    
-   No setup or coding required
    

**Refund Policy:**

Due to the nature of digital products, all sales are final. Once purchased, this component is non-refundable. Please make sure it fits your needs before completing the checkout.

Support: [hi@alicorak.com](mailto:hi@alicorak.com)

## Rank history [How rankings work →](/terms#rankings)

-   All · #8904

## Details

- **Author**: Ali Çorak
- **Price**: $3.00
- **Published**: 2026-07-11
- **Updated**: 2026-08-16
- **Added**: 2026-07-11
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing