---
title: "Visual Blocks plugin"
description: "Allows a user to see block level elements such as paragraphs."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/visualblocks/"
md_url: "https://www.tiny.cloud/docs/tinymce/7/visualblocks/index.md"
version: "7"
last_updated: "2022-11-30T01:26:11Z"
tokens: 556
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/visualblocks/).
# Visual Blocks plugin

This plugin allows a user to see block level elements in the editable area. It is similar to WYSIWYG hidden character functionality, but at block level. It also adds a toolbar button and a menu item `Show blocks` under the `View` menu dropdown.

## Basic setup

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

## Options

This setting affects the execution of the `visualblocks` plugin. You may specify whether blocks are visible by default here.

### `visualblocks_default_state`

This option enables you to specify the default state of the Visual Blocks plugin.

**Type:** `Boolean`

**Default value:** `false`

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

#### Example: using `visualblocks_default_state`

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

## Toolbar buttons

The Visual Blocks plugin provides the following toolbar buttons:

| Toolbar button identifier | Description |
| --- | --- |
| `visualblocks` | Toggles the visibility of block elements. |
These toolbar buttons can be added to the editor using:

- The [`toolbar`](../toolbar-configuration-options/#toolbar) configuration option.
- The [`quickbars_insert_toolbar`](../quickbars/#quickbars_insert_toolbar) configuration option.
- [Custom Context toolbars](../contexttoolbar/).

## Menu items

The Visual Blocks plugin provides the following menu items:

| Menu item identifier | [Default Menu Location](../menus-configuration-options/#example-the-tinymce-default-menu-items) | Description |
| --- | --- | --- |
| `visualblocks` | View | Toggles block visibility on/off. |
These menu items can be added to the editor using:

- The [`menu`](../menus-configuration-options/#menu) configuration option.
- The [`contextmenu`](../menus-configuration-options/#contextmenu) configuration option.
- [Custom Menu toolbar buttons](../custom-menu-toolbar-button/).

## Commands

The Visual Blocks plugin provides the following TinyMCE command.

| Command | Description |
| --- | --- |
| mceVisualBlocks | Toggles visual blocks on/off. |
Example
```js
tinymce.activeEditor.execCommand('mceVisualBlocks');
```