---
title: "Content appearance options"
description: "Configure the appearance of content inside TinyMCE's editable area."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/content-appearance/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/content-appearance/index.md"
version: "6"
last_updated: "2023-06-10T08:44:28Z"
tokens: 1231
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/content-appearance/).
# Content appearance options

## Showing for "hidden" elements

### `visual`

This option sets the initial state of the editor visual aids for bookmarks (`anchor`) and tables with a border width of `0`. If the border of a table is set to `0`, then TinyMCE adds a dotted line around the table by default.

When set to `false`, the visual aids will be disabled when the editor loads. The `visualaid` toolbar button and menu item allow users to toggle the visibility of the visual aids.

**Type:** `Boolean`

**Default value:** `true`

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

#### Example: using `visual`

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

### `visual_anchor_class`

This option enables you to configure a custom class to be added to anchors with names since these are invisible by default.

**Type:** `String`

#### Example: using `visual_anchor_class`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  visual_anchor_class: 'my-custom-class'
});
```

### `visual_table_class`

This option enables you to configure a custom class to be added to tables that have a border set to `0`. This class is used to add dotted borders to tables that would otherwise be invisible for the user.

**Type:** `String`

#### Example: using `visual_table_class`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  visual_table_class: 'my-custom-class'
});
```

## Showing "hidden" characters

To enable visual aids for "hidden" characters, see: [The Visual Characters plugin](../visualchars/)

## Outlining block elements

To enable outlines for block elements, see: [The Visual Blocks plugin](../visualblocks/).

## Premium upgrade promotion option

### `promotion`

TinyMCE 6.2 and later includes the `promotion` option. It controls the presentation or otherwise of a Tiny-specific promotion button.

**Type:** `Boolean`

**Default value:** `true` in Community self-hosted instances; otherwise `false`.

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

See [Premium upgrade promotion defaults](../editor-premium-upgrade-promotion/#premium-upgrade-promotion-defaults) for details.

#### Example: using `promotion`

```js
tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  promotion: true
});
```
The **Upgrade** promotion appears in the unused corner of the TinyMCE menu bar. Consequently it does not appear if the menu bar is disabled.

> **Note:** The distribution-specific defaults are not fixed. Someone running TinyMCE as part of a Premium plan can turn this option on. And someone running the Community distribution of TinyMCE as a self-hosted instance can turn this option off.

## Highlighting the content area on focus

To enable highlighting on focus for the editor,

## `highlight_on_focus`

> **Note:** This feature is only available for TinyMCE 6.4 and later.
The `highlight_on_focus` option adds a blue outline to an instantiated TinyMCE editor when that editor is made the input focus. When using the `oxide-dark` skin, the outline is white.

This allows users to clearly see when the editor is in focus, or which editor has focus if more than one TinyMCE instance is available.

**Type:** `Boolean`

**Default value:** `false`

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

### Example: using `highlight_on_focus`

```js
tinymce.init({
  selector: "textarea",
  highlight_on_focus: true
});
```

### Using `highlight_on_focus` with custom skins

If a [custom skin](../creating-a-skin/) is being used, two variables can be updated to match the `highlight_on_focus` option’s appearance with the custom skin.

The two rules and their default values are:

```css
@edit-area-border-color: #2D6ADF;
@edit-area-border-width: 2px;
```

> **Note:** This is entirely optional. If the default values are not changed, the `highlight_on_focus` option works with a custom skin exactly as it does with TinyMCE default skins.

## Reducing initialization flicker

To enable synchronous iframe initialization.

## `init_content_sync`

> **Note:** This feature is only available for TinyMCE 6.5 and later.
This option determines whether the iframe is initialized synchronously or asynchronously.

When disabled, the editor is initialized asynchronously using `srcdoc`. This can, occasionally, cause the editor to flicker during initialization.

When enabled, the editor is initialized synchronously, using `document.write`. This can reduce flickering.

Flickering can still occur during synchronous initialization, however, such as when loading the content css.

> **Note:** using the [`document.write`](https://html.spec.whatwg.org/multipage/dynamic-markup-insertion.html#document.write()) method is [strongly discouraged](https://developer.mozilla.org/en-US/docs/Web/API/Document/write).
**Type:** `Boolean`

**Default value:** `false`

### Example: using `init_content_sync`

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

> **Note:** When TinyMCE is running in [inline mode](../use-tinymce-inline/) (ie, when `inline: true` is set), setting `init_content_sync: true` has no effect.