---
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/7/content-appearance/index.md"
version: "7"
last_updated: "2025-05-15T02:01:11Z"
tokens: 1323
---
Important This page documents TinyMCE 7. 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/).

## Open source promotion

### `promotion`

The open source version of TinyMCE contains a promotion for paid features. This promotion can be toggled on or off with the `promotion` option.

**Type:** `Boolean`

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

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

Example: using open source `promotion`
```js
tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  promotion: true
});
```

## Cloud promotion

### `onboarding`

The cloud version of TinyMCE contains a promotion for paid features included in the 14-day trial. This promotion can be toggled on or off with the `onboarding` option.

The promotion will automatically disappear when the trial ends.

**Type:** `Boolean`

**Default value:** `true` for cloud instances; otherwise `false`.

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

Example: using cloud `onboarding`
```js
tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  onboarding: false
});
```

## 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.

> **Note:** In TinyMCE 7.0, the default setting for `highlight_on_focus` was changed from `false` to `true`. Any editors using this `highlight_on_focus: true` option in TinyMCE , can remove this option from their TinyMCE init configuration when upgrading to TinyMCE 7.0.
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:** `true`

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

### Example: using `highlight_on_focus`

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

### 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.