---
title: "TinyMCE 7 examples"
description: "TinyMCE 7 Examples"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/examples/"
md_url: "https://www.tiny.cloud/docs/tinymce/7/examples/index.md"
version: "7"
last_updated: "2024-01-17T22:23:53Z"
tokens: 613
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/examples/).
# TinyMCE 7 examples

## General examples

This table sets out the TinyMCE general working examples included in the TinyMCE documentation.

- **[Basic example](../basic-example/)** — Basic working editor example.
- **[Full-featured demo including Open Source features](../full-featured-open-source-demo/)** — Fully-featured editor example including all Open Source plugins.
- **[Full-featured demo Including Open Source and Premium features](../full-featured-premium-demo/)** — Fully-featured editor example, including all Open Source plugins and almost all Premium plugins.
- **[Classic editor mode](../classic-demo/)** — Working TinyMCE editor in Classic editor mode.
- **[Inline editor](../inline-demo/)** — Working TinyMCE editor in Inline mode.
- **[Distraction-free editor](../distraction-free-demo/)** — Working TinyMCE editor in Distraction-free mode.

## Integration examples

This table sets out TinyMCE use-case–specific basic working examples included in the TinyMCE documentation.

- **[Template creation](../ie-template-creation/)** — Using TinyMCE to create re-usable and partially-editable templates.

## Skins and Icons examples

This table sets out TinyMCE’s range of pre-made skins and icon packs included in the TinyMCE documentation.

- **[Bootstrap Demo](../bootstrap-demo/)** — Example form with colors, forms, and buttons to closely match the default Bootstrap framework UI.
- **[Borderless Demo](../borderless-demo/)** — Default TinyMCE skin without an outer border, ideal for "fullscreen" editing.
- **[Fabric Demo](../fabric-demo/)** — Microsoft design language-inspired Fabric skin with optional custom borders.
- **[Fluent Demo](../fluent-demo/)** — Microsoft design language-inspired Fluent skin with optional custom borders.
- **[Jam Icons Demo](../jam-demo/)** — Icons from JAM icon library used with the Small skin.
- **[Material Classic Demo](../material-classic-demo/)** — Example form with classical Material Design components and Material Classic skin.
- **[Material Outline Demo](../material-outline-demo/)** — Example form with outlined Material Design components and Material Outline skin.
- **[Naked Demo](../naked-demo/)** — Clean and simple text input experience with Naked skin, no outer or toolbar borders.
- **[Outside Demo](../outside-demo/)** — Clean text input with Outside skin, border around editable area, small icon pack.
- **[Small Icons Demo](../small-demo/)** — Smaller buttons using Small skin with smaller default icons.
- **[Snow Demo](../snow-demo/)** — Modern, lightweight editor with Snow skin, looks great with Thin icon pack.