---
title: "Fluent skin demo"
description: "Fluent Demo"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/fluent-demo/"
md_url: "https://www.tiny.cloud/docs/tinymce/5/fluent-demo/index.md"
version: "5"
last_updated: "2024-03-26T08:09:19Z"
tokens: 248
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/fluent-demo/).
# Fluent skin demo

This demo uses the Fluent skin which follows the Microsoft design language. By default it has no border around the editor to make it easier to implement as a fullscreen editor. You can easily create your own border around the editor, look at the demo below for an example.

**Example**

```js
tinymce.init({
  selector: 'textarea#premiumskinsandicons-fluent',
  skin: 'fluent',
  content_css: 'fluent',
  toolbar_mode: 'floating',
  plugins: 'advlist anchor autolink charmap code codesample directionality help hr image imagetools insertdatetime link lists media nonbreaking pagebreak preview print searchreplace table template textpattern toc visualblocks visualchars wordcount',
  toolbar: 'undo redo | formatselect | bold italic strikethrough forecolor backcolor blockquote | link image media | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat',
  height: 400
});
```