> ## Documentation Index
> Fetch the complete documentation index at: https://docs.daily.co/llms.txt
> Use this file to discover all available pages before exploring further.

# VCS: useViewportSize()

> Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

`useViewportSize(): Object`

Returns an object describing the viewport size, i.e. the video output resolution.

## Return type

| Property | Type     | Description                               |
| :------- | :------- | :---------------------------------------- |
| `w`      | `Number` | Width of viewport. Values are in pixels.  |
| `h`      | `Number` | Height of viewport. Values are in pixels. |

## Sample code

<Tip>
  Additional examples of usage for this custom hook can be found in the [source code for the VCS SDK](https://github.com/daily-co/daily-vcs).
</Tip>

```javascript theme={null}
import * as React from 'react';
import { Text } from '#vcs-react/components';
import { useViewportSize, useGrid } from '#vcs-react/hooks';

  const viewportSize = useViewportSize();
  const pxPerGu = useGrid().pixelsPerGridUnit;
  const guPerVh = viewportSize.h / pxPerGu;
  const guPerVw = viewportSize.w / pxPerGu;

  return (
    <Text>
      Number of grid units relative to the viewport: height = {guPerVh}, width ={' '}
      {guPerVw}
    </Text>
  );
}
```