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

# Resize Browser Window

> Learn how to set and resize the dimensions of the browser window dynamically.

<a href="https://github.com/hyperbeam/examples/tree/master/resize" target="_blank">
  <video src="https://i.imgur.com/0E0qKNn.mp4" autoplay="true" muted="true" crossorigin="true" loop="true" />
</a>

<Note>
  Want to jump into the code? See our [resize
  example.](https://github.com/hyperbeam/examples/tree/master/resize)
</Note>

## Server

For a resizable browser window, you need to specify the following properties when [creating a new browser instance](/rest-api/dispatch/start-chromium-session).

<ParamField body="width" type="number" default="1280">
  The initial width of the browser window in pixels.
</ParamField>

<ParamField body="height" type="number" default="720">
  The initial height of the browser window in pixels.
</ParamField>

<ParamField body="max_area" type="number" default="1280*720">
  The maximum browser window area in pixels. <br /> This limits the browser
  window size when resizing the window.
</ParamField>

## Client

To resize the browser window, call the [resize](#hb-resize-width-height) function with the desired width and height.

<Warning>
  Instead of calling the [resize](#hb-resize-width-height) function on a
  [drag](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drag_event)
  event, call it on the
  [dragend](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragend_event),
  [mouseup](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseup_event),
  or
  [touchend](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchend_event)
  events. <br />
  This will prevent unnecessary calls to the server and improve performance.
</Warning>

### hb.resize(width, height)

The `resize` method on the [Hyperbeam client](/client-sdk/javascript/reference#the-hyperbeamclient-object) allows you to resize and reposition the browser window dynamically. This can be useful for creating a custom sized browser window for your app or adapting to different screen sizes.

<ParamField body="width" type="number" required>
  The width of the browser window in pixels.
</ParamField>

<ParamField body="height" type="number" required>
  The height of the browser window in pixels.
</ParamField>

### hb.maxArea

The `maxArea` property on the [Hyperbeam client](/client-sdk/javascript/reference#the-hyperbeamclient-object) stores the maximum browser window area in pixels. This is the maximum area that the browser window can be resized to, and is set by the `max_area` property when creating a new browser instance.

```js theme={null}
console.log(hb.maxArea); // 921600 (1280 * 720)
```

#### What if I want to resize the browser window to a larger size?

Though you cannot change the maximum browser window area once set, you can still achieve a closer approximation to the desired dimensions by resizing the browser window to the closest allowed dimensions and then scaling the browser window to the desired dimensions while maintaining the same aspect ratio.

```js theme={null}
// Desired dimensions (4:3 aspect ratio)
const desiredWidth = 1600;
const desiredHeight = 1200;

// Get the maximum area that the browser window can be resized to
// min(1600 * 1200, 1280 * 720)
const pixels = Math.min(desiredWidth * desiredHeight, hb.maxArea);

// Calculate the new dimensions with the same aspect ratio
const aspectRatio = desiredWidth / desiredHeight; // 4:3
const height = Math.floor(Math.sqrt(pixels / aspectRatio)); // 831
const width = Math.floor(height * aspectRatio); // 1108

// Resize the browser window to closest allowed dimensions
hb.resize(width, height); // 1108 * 831

// Scale the browser window to the desired dimensions
target.style.width = desiredWidth; // 1600
target.style.height = desiredHeight; // 1200
```

<Note>
  Want to jump into the code? See our [resize
  example.](https://github.com/hyperbeam/examples/tree/master/resize)
</Note>