# Width of the preview browser in Elements

**URL:** <https://forums.realmacsoftware.com/t/width-of-the-preview-browser-in-elements/51051>\
**Category:** Elements API\
**Created:** [September 16, 2025, 1:09pm UTC](https://forums.realmacsoftware.com/t/width-of-the-preview-browser-in-elements/51051 "2025-09-16T13:09:55Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Massimo](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/massimo/32/25456_2.png) [@Massimo](https://forums.realmacsoftware.com/u/Massimo)\
**Post date:** [September 16, 2025, 1:09pm UTC](https://forums.realmacsoftware.com/t/width-of-the-preview-browser-in-elements/51051/1 "2025-09-16T13:09:55Z")

</div>

For a custom component, I need to retrieve the viewport width of the preview browser in Elements. Is there a way to retrieve this data?

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [September 16, 2025, 1:52pm UTC](https://forums.realmacsoftware.com/t/width-of-the-preview-browser-in-elements/51051/2 "2025-09-16T13:52:11Z")

</div>

No, you can’t get that info, and you shouldn’t need it.

Can you explain a little more on what you’re trying to do and perhaps we can give you a working solution or guide you on the best way forward 🙂

---

<div class="post-metadata">

**Author:** ![Massimo](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/massimo/32/25456_2.png) [@Massimo](https://forums.realmacsoftware.com/u/Massimo)\
**Post date:** [September 16, 2025, 2:08pm UTC](https://forums.realmacsoftware.com/t/width-of-the-preview-browser-in-elements/51051/3 "2025-09-16T14:08:00Z")

</div>

In the editor, I was trying to make a certain thing happen at a specific width.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [September 16, 2025, 2:50pm UTC](https://forums.realmacsoftware.com/t/width-of-the-preview-browser-in-elements/51051/4 "2025-09-16T14:50:12Z")

</div>

You just need to use the Tailwind CSS breakpoint system, this is what Elements natively supports and uses. Don’t try and write your own CSS to work out the editor width. Use Tailwind. Let me try and explain in a little more detail.

Here’s some sample HTML that changes the size of the fonts to give you an idea:

```auto
<p class="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl">
  Resize the window to see this text grow at each breakpoint.
</p>

```

And here’s some handy references:

> **[Responsive design - Core concepts](https://tailwindcss.com/docs/responsive-design)**
>
> Using responsive utility variants to build adaptive user interfaces.

> **[Responsive Breakpoints | RapidWeaver Elements Docs](https://docs.realmacsoftware.com/elements-docs/elements-app/editor/responsive-breakpoints)**

Let me know if you have any questions 🙂

---

<div class="post-metadata">

**Author:** ![Massimo](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/massimo/32/25456_2.png) [@Massimo](https://forums.realmacsoftware.com/u/Massimo)\
**Post date:** [September 16, 2025, 3:07pm UTC](https://forums.realmacsoftware.com/t/width-of-the-preview-browser-in-elements/51051/5 "2025-09-16T15:07:22Z")

</div>

Thanks for the video, yes, everything was already clear to me.  
So I’ll ask you another question. I think there’s a function called rw.getBreakpoints. Is there a way, with Hooks, to retrieve the values ​​of the various breakpoints the user has set in the Screens section of Theme Settings?

I’m asking because I need the numeric value; in what I’m doing, I can’t simply use the predefined classes (such as xs:, md:, lg:, xl:, 2xl:).

---

<div class="post-metadata">

**Author:** ![tpbradley](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tpbradley/32/25503_2.png) [@tpbradley](https://forums.realmacsoftware.com/u/tpbradley)\
**Post date:** [September 16, 2025, 3:51pm UTC](https://forums.realmacsoftware.com/t/width-of-the-preview-browser-in-elements/51051/6 "2025-09-16T15:51:30Z")

</div>

Hi @Massimo,

You can access the breakpoints in a hooks file from the `rw.theme` object. The following is taken from the “Properties” example custom component.

```auto
const transformHook = (rw) => {
    // Get properties from rw
    const { theme = {}, pages } = rw

    // Get the breakpoints
    const { breakpoints } = theme

    // Set properties in our template data
    rw.setProps({
        // Create a string representation of the ordered breakpoint names array
        strBreakpoints: JSON.stringify(breakpoints.names),

        // Create a string representation of the breakpoint screens dictionary
        strBreakpointNames: JSON.stringify(breakpoints.screens)
    })
}

exports.transformHook = transformHook;

```

You should be able to create a new project, add a custom component using “Properties”, add it to the page and see the result at the bottom of the list.

Hope it helps

---

<div class="post-metadata">

**Author:** ![Massimo](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/massimo/32/25456_2.png) [@Massimo](https://forums.realmacsoftware.com/u/Massimo)\
**Post date:** [September 17, 2025, 7:49am UTC](https://forums.realmacsoftware.com/t/width-of-the-preview-browser-in-elements/51051/7 "2025-09-17T07:49:56Z")

</div>

Thanks, that’s what I needed.