---
title: "Editor size and resize options"
description: "Options for setting the size of the editor and controling editor resizing"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/editor-size-options/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/editor-size-options/index.md"
version: "latest"
last_updated: "2025-09-01T23:15:51Z"
tokens: 1517
---
# Editor size and resize options

## Initial dimensions

### `height`

`height` sets the height of the entire editor, including the menu bar, toolbars, and status bar.

> **Note:**
> - If a number is provided, TinyMCE sets the height in pixels by defult.
> - If a string is provided, TinyMCE assumes the value is valid CSS and sets the editor’s height as the string value such as `300px`, `50pt`, or `10em`.
> Note: that values such as `100%`, `10vh` and `auto` are not currently supported.
**Type:** `Number` or `String`

**Default value:** `400` or the size of the target element if larger than 400 pixels

#### Example: using `height`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  height: 300
});
```

### `width`

Set the width of the editor.

> **Note:** TinyMCE sets the width in pixels if a number is provided. However, if TinyMCE is provided a string it assumes the value is valid CSS and simply sets the editor’s width as the string value. This allows for alternate units such as `%`, `em` and `vh`.
**Type:** `Number` or `String`

#### Example: using `width`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  width: 300
});
```

## Controlling user editor resizing

### `resize`

This option allows the resize handle to be disabled or to set the resize handler to resize both horizontally and vertically. The option can be `true`, `false` or the string `'both'`. `False` disables resizing, `true` enables vertical resizing only, `'both'` makes it possible to resize in both directions horizontal and vertical.

When resizing is enabled, the editor can be resized by either:

- Clicking and dragging the resize handle in the bottom right-hand corner of the editor.
- Focusing the resize handle, and using the arrow keys. The **Up Arrow** and **Left Arrow** keys will make the editor smaller, and the **Down Arrow** and **Right Arrow** keys will make the editor larger.

**Type:** `Boolean` or `String`

**Default value:** `true`

**Possible values:** `true`, `false`, `'both'`

> **Note:** The default value for this option is different for mobile devices. For information on the default mobile option, see: [TinyMCE Mobile — Configuration options with mobile defaults](../tinymce-for-mobile/#mobile-defaults-for-selected-options).

#### Example: disabling editor resizing

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  resize: false
});
```

#### Example: enabling vertical and horizontal editor resizing

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  resize: 'both'
});
```

### `min_height`

The `min_height` option has different behaviors depending on whether the [`autoresize`](../autoresize/) plugin is enabled:

- **Without `autoresize` plugin**: Sets the minimum height that users can manually shrink the entire TinyMCE interface by dragging the resize handle in the bottom-right corner.
- **With `autoresize` plugin**: Sets the minimum height the editor can automatically shrink to when content is removed.

**Type:** `Number`

**Default value:** `100`

#### Example: using `min_height`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  min_height: 200
});
```

> **Note:**
> - If the [`resize`](#resize) option is set to `false`, the resize handle will be disabled and users cannot manually resize the editor.
> - The `resize` option defaults to `false` when the `autoresize` plugin is enabled.
> - Values are specified in pixels without units.
> - Setting `min_height` too low may cause usability issues on mobile devices.
> - If `min_height` is not set when using the `autoresize` plugin, the editor will default to the standard `min_height` value of `100` pixels.

### `max_height`

The `max_height` option has different behaviors depending on whether the [`autoresize`](../autoresize/) plugin is enabled:

- **Without `autoresize` plugin**: Sets the maximum height that users can manually resize the entire TinyMCE interface by dragging the resize handle in the bottom-right corner.
- **With `autoresize` plugin**: Sets the maximum height the editor can automatically expand to when content is added.

**Type:** `Number`

#### Example: using `max_height`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  max_height: 500
});
```

> **Note:**
> - If the [`resize`](#resize) option is set to `false`, the resize handle will be disabled and users cannot manually resize the editor.
> - The `resize` option defaults to `false` when the `autoresize` plugin is enabled.
> - Values are specified in pixels without units.
> - If `max_height` is not set when using the `autoresize` plugin, the editor will default to the standard `max_height` behavior (unlimited height expansion).

### `min_width`

This option sets the minimum width that a user can stretch the entire TinyMCE interface (by grabbing the draggable area in the bottom right of the editor interface).

> **Note:** This behavior is different from the [`autoresize`](../autoresize/) plugin, which controls the resizing of the editable area only, not the entire editor.
**Type:** `Number`

#### Example: using `min_width`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  min_width: 400
});
```

> **Note:** By default the [`resize`](#resize) handle does not allow horizontal dragging and giving this key a value will not result in an observable behavior.

### `max_width`

This option sets the maximum width that a user can stretch the entire TinyMCE interface (by grabbing the draggable area in the bottom right of the editor interface).

> **Note:** This behavior is different than the [`autoresize`](../autoresize/) plugin, which controls the resizing of the editable area only, not the entire editor.
**Type:** `Number`

#### Example: using `max_width`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  max_width: 500
});
```

> **Note:** by default the [`resize`](#resize) handle does not allow horizontal dragging and giving this key a value will not result in an observable behavior.

## Auto-resizing the editor

TinyMCE can be configured to automatically resize based on the editor content. For information on configuring the automatic resizing, see: [The Autoresize plugin](../autoresize/).