---
title: "Autoresize plugin"
description: "Automatically resize TinyMCE to fit content."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/autoresize/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/autoresize/index.md"
version: "latest"
last_updated: "2026-03-09T01:59:33Z"
tokens: 1366
---
# Autoresize plugin

The Autoresize plugin automatically adjusts the editor height to match its content. This creates a more intuitive editing experience where the editor grows and shrinks naturally with content. Setting the `max_height` option would allow you to still control when the content would become scrollable.

## Interactive demo

**Example**

```js
tinymce.init({
    selector: 'textarea#autoresize',
    plugins: "autoresize lists code",
    toolbar: 'undo redo | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent',
    // Autoresize options
    min_height: 100,
    max_height: 400,
    autoresize_bottom_margin: 20,
    autoresize_overflow_padding: 10,
  });
```

## Basic setup

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

> **Note:** For information on bundling this plugin with module bundlers, see [Bundling TinyMCE - Overview](../bundling-guide/).

## How it works

The Autoresize plugin monitors content changes and automatically adjusts the editor height to accommodate the content. When enabled:

- The editor initializes and renders based on the minimum height specified by `min_height` option.
- As content is added, the editor expands vertically
- The editor stops expanding when it reaches the `max_height` limit
- The `resize` handle is removed from the editor.

## Options

These settings control the autoresize behavior, including height limits, padding, and margins.

### `autoresize_bottom_margin`

This option allows you to specify the size of the `padding` at the bottom of the editor’s `body` set on initialization.

**Type:** `Number`

**Default value:** `50`

#### Example: adding bottom margin for better content spacing

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'autoresize',
  autoresize_bottom_margin: 60 // 50px is the default value
});
```

#### Example: setting bottom margin to zero

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'autoresize',
  autoresize_bottom_margin: 0
});
```

### `autoresize_overflow_padding`

This option allows you to specify the size of the `padding` at the sides of the editor’s `body` set on initialization.

**Type:** `Number`

**Default value:** `1`

#### Example: adding horizontal padding for better content spacing

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'autoresize',
  autoresize_overflow_padding: 50
});
```

#### Example: setting horizontal padding to zero

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'autoresize',
  autoresize_overflow_padding: 0
});
```

### `max_height`

The `max_height` option has different behaviors depending on whether the [`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
  plugins: 'autoresize',
  max_height: 600
});
```

> **Note:**
> - If the [`resize`](../editor-size-options/#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_height`

The `min_height` option has different behaviors depending on whether the [`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
  plugins: 'autoresize',
  min_height: 100
});
```

> **Note:**
> - If the [`resize`](../editor-size-options/#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.

## Commands

The Autoresize plugin provides the following TinyMCE command.

| Command | Description |
| --- | --- |
| mceAutoResize | Automatically resizes the editor to fit its current content. |

### Manual autoresize trigger

The `mceAutoResize` command can be used to manually trigger the autoresize functionality. This is useful when:

- Content is dynamically added or removed programmatically
- The editor needs to be resized after external changes
- You want to ensure the editor size matches its content at a specific moment
Example: triggering autoresize manually
```js
// Resize the active editor
tinymce.activeEditor.execCommand('mceAutoResize');

// Resize a specific editor by ID
tinymce.get('my-editor-id').execCommand('mceAutoResize');
```