---
title: "TinyMCE Skin options"
description: "Configure the editor's overall appearance."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/editor-skin/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/editor-skin/index.md"
version: "latest"
last_updated: "2025-12-10T03:38:03Z"
tokens: 1178
---
# TinyMCE Skin options

TinyMCE comes with several premium skins which change the look of the editor. These skins are an easy way to restyle TinyMCE to better suit applications.

> **Note:** **Skins vs Content CSS:**
> 
> Skins change the look of both TinyMCE’s UI and the editable area (when the skin includes both `skin.css` and `content.css` files). The `content_css` option only styles the editable area. If both `skin` and `content_css` are used, `content_css` will override the skin’s content styles, allowing mixing and matching of UI and content styles.
The default skin does not require any configuration, though it must be imported when bundling for deployment: For example:

```js
import 'tinymce/skins/ui/oxide/skin';
```
Replacing the default skin uses the `skin` and `skin_url` settings.

## Available skins

See [Enhanced Skins & Icon Packs](../enhanced-skins-and-icon-packs/) for a list of available skins and the icon packs which look best with each skin.

## Custom skins

Integrators can create and use their own skin files. For information on creating custom skins, see: [Create a skin for TinyMCE](../creating-a-skin/).

## Replacing the default skin

There are two options for replacing the default TinyMCE skin:

- Use the `skin` option when the skin files are in the default location (for Tiny Cloud deployments, ZIP bundles, or when using NPM packages with bundling or file layering).
- Use the `skin_url` option to specify a custom path to skin files, which is useful for custom skins or when using NPM packages without bundling. When using `skin_url`, the `skin` option is not required.

The default location TinyMCE tries to load skin files from is `TINYMCE_BASE/skins/ui/${skinName}`; where:

- `TINYMCE_BASE` is the TinyMCE root directory (the directory containing `tinymce.min.js`).
- `${skinName}` is the name of the skin.

To load skins from another location, integrators must specify that location using `skin_url`.

- When using TinyMCE from Tiny Cloud, ZIP bundles, or NPM packages with bundling or file layering, use `skin`.
- When using custom skins or using NPM packages without bundling, use `skin_url`.

> **Important:** **Understanding the skins folder structure:**
> 
> The **skins** folder in the `tinymce-premium` NPM package and ZIP bundles contains both a **ui** folder and a **content** folder. Skins in the **ui** folder can include both `skin.css` (for UI styling) and `content.css` (for editable area styling). When a skin includes both files, using the `skin` option will apply both UI and content styles. The files in the **content** folder can also be used independently with the [`content_css`](../add-css-options/#content_css) option to style only the editable area.

> **Note:** **Using skins and content_css together:**
> 
> Skins that include both `skin.css` and `content.css` files will style both the UI and the editable area. The `content_css` option is not required when using such skins. However, if both `skin` and `content_css` are specified, `content_css` will override the skin’s content styles, allowing mixing and matching of UI and content styles.

## `skin`

This option specifies the skin that TinyMCE should use, or `false` to not load a skin. The default skin included with TinyMCE is named "oxide".

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

**Default value:** `'oxide'`

**Possible values:** the name of a skin or `false`

The name of the skin should match the name of the folder within the `skins/ui` directory of TinyMCE. If the specified skin is not found, TinyMCE will not load.

### Example: using `skin`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to the HTML
  skin: 'fabric'
});
```
For information on creating custom skins, see: [Create a skin for TinyMCE](../creating-a-skin/).

## `skin_url`

This option specifies the location of the skin directory. This is useful when loading TinyMCE and the skin files from different locations.

When using `skin_url`, the `skin` option is not required. The `skin_url` option points directly to the skin directory location.

**Type:** `String`

### Example: using `skin_url`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to the HTML
  skin_url: '/css/mytinymceskin' // change this to point to the folder of skin files
});
```

### Example: loading premium skins from `tinymce-premium` (NPM)

Configure the `skin_url` to point at the appropriate location. For example:

```js
tinymce.init({
  selector: 'textarea',
  skin_url: '/<path_to_premium_skins>/ui/fabric'
});
```

> **Note:**
> - Ensure the skin directory is accessible to the application. Many projects copy the required skin into a static assets folder (such as `/public/skins/ui/oxide`) during their build step.
> - Combine this with the approaches listed in [Premium skins from `tinymce-premium`](../bundling-skins/#premium-skins-npm) to match the deployment strategy.