---
title: "Using TinyMCE from the Tiny Cloud CDN with the Web Component"
description: "A guide on integrating TinyMCE from the Tiny Cloud into the Web Component."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/webcomponent-cloud/"
md_url: "https://www.tiny.cloud/docs/tinymce/7/webcomponent-cloud/index.md"
version: "7"
last_updated: "2025-05-14T11:33:07Z"
tokens: 493
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/webcomponent-cloud/).
# Using TinyMCE from the Tiny Cloud CDN with the Web Component

The [Official TinyMCE Web Component](https://github.com/tinymce/tinymce-webcomponent) integrates TinyMCE into Web Component projects. This procedure creates an HTML page containing a TinyMCE editor.

## Procedure

To add a TinyMCE editor to a web page using the TinyMCE Web Component:

1. Add the following meta tags to the head section of the page:

```html
<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
```
The second `meta` element is required for the editor to function correctly on mobile devices. For information on the viewport `meta` element, see: [MDN Web Docs - Using the viewport meta tag to control layout on mobile browsers](https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#viewport_basics).
2. Add a `script` element sourcing the TinyMCE Web Component (`tinymce-webcomponent.js`), such as:

```html
<script src="https://cdn.jsdelivr.net/npm/@tinymce/tinymce-webcomponent/dist/tinymce-webcomponent.min.js"></script>
```
The `tinymce-webcomponent` can also be sourced from [npmjs](https://www.npmjs.com/package/@tinymce/tinymce-webcomponent).
3. Add a `tinymce-editor` element where the editor should appear and include your Tiny Cloud API key from [Tiny Account](/my-account/).

```html
<tinymce-editor
  api-key="no-api-key"
></tinymce-editor>
```

## Example: adding the TinyMCE Web Component to an HTML page

The following example shows the TinyMCE Web Component in an HTML page, with:

- Various TinyMCE configuration options set using attributes.
- TinyMCE sourced from the Tiny Cloud.
**Example**

## Next Steps

- For information on customizing, see:

  - The TinyMCE Web Component, see: [The TinyMCE Web Component Technical Reference](../webcomponent-ref/).
  - [TinyMCE basic setup](../basic-setup/).