--- title: "Quick start: TinyMCE from NPM or Yarn" description: "Learn how to install TinyMCE from NPM using NPM and Yarn, including premium plugins for commercial customers." canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/npm-projects/" md_url: "https://www.tiny.cloud/docs/tinymce/latest/npm-projects/index.md" version: "latest" last_updated: "2026-09-11T04:39:13Z" tokens: 1588 --- # Quick start: TinyMCE from NPM or Yarn ## Install TinyMCE using NPM or Yarn TinyMCE 8 is a powerful and flexible rich text editor that can be embedded in web applications. This quick start covers how to add a TinyMCE editor to a web page using NPM or Yarn. ## Prerequisites This procedure requires [Node.js (and npm)](https://nodejs.org/) to be installed. Ensure you have a project directory with a `package.json` file. If you don’t have a project yet, initialize one by running `npm init` or `yarn init` in your project directory. ## Install TinyMCE To add TinyMCE to your project, navigate to your project directory and run one of the following commands: - **NPM:** ```sh npm install tinymce@^8 ``` - **Yarn:** ```sh yarn add tinymce@^8 ``` The location of the main TinyMCE script will be: `node_modules/tinymce/tinymce.min.js`. Ensure the `tinymce` directory containing the `tinymce.min.js` file is accessible for the target page or application by either: - Using a webserver route, or - Copying the `tinymce` directory to a public folder using a build tool such as Gulp or Webpack. ## Install premium plugins The `tinymce-premium` NPM package provides all premium plugins, skins, themes, icons, and language packs for commercial TinyMCE customers. > **Important:** The `tinymce-premium` package requires a commercial license. Ensure you have a valid license key before using premium plugins. For information on obtaining a license key, see: [License Key](../license-key/). ### Prerequisites Before installing premium plugins, ensure you have: - The core `tinymce` package installed (see above) - A valid license key - Node.js and npm installed ### Install the premium plugins package Install the `tinymce-premium` package using npm: ```sh npm install tinymce-premium@^8.3 ``` > **Note:** The `tinymce-premium` package is available for TinyMCE 8.3 onwards and is currently only published to the NPM registry. The package version must align with the `tinymce` package version—always use compatible versions of both packages (e.g., both at 8.3.0 or later). ### Package contents The `tinymce-premium` package includes: - All premium plugins - License key manager plugin - Premium skins, icons and language packs > **Note:** Dictionaries are **not** included in the `tinymce-premium` package and remain a separate download. ### Using premium plugins After installing the `tinymce-premium` package, configure the plugins in your editor. For complete instructions on bundling premium plugins or using the `external_plugins` option, see: [Using premium plugins](../bundling-plugins/#using-premium-plugins). ### Framework integration For framework-specific integration guides, see: - [React (Bundling)](../react-pm-bundle/) - [React (Hosting)](../react-pm-host/) - [Angular](../angular-pm/) - [Vue.js](../vue-pm/) - [Blazor](../blazor-pm/) - [Svelte](../svelte-pm/) - [Web Component](../webcomponent-pm/) ## Include the TinyMCE script Include the following line of code in the `` of a HTML page: ```html ``` ## Initialize TinyMCE as part of a web form Initialize TinyMCE 8 on any element (or elements) on the web page by passing an object containing a `selector` value to `tinymce.init()`. The `selector` value can be any valid [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors). For example, to replace ` ``` Adding this content to an HTML file and opening it in a web browser will load a TinyMCE editor, such as: **Example** ```js tinymce.init({ selector: 'textarea#default' }); ``` ## Save the content from the editor To retrieve content from the editor, either process the content with a form handler or use the [getContent API](../apis/tinymce.editor/#getContent). If you use a form handler, once the `

` is submitted, TinyMCE 8 will `POST` the content in the same way as a normal HTML `

`, including the HTML elements and inline CSS of the editor content. The host’s form handler can process the submitted content in the same way as content from a regular `<textarea>`.

### Get and set content programmatically

Use the [`getContent`](../apis/tinymce.editor/#getContent) and [`setContent`](../apis/tinymce.editor/#setContent) APIs to read and write editor content from JavaScript.

#### Example: retrieve editor content as HTML

```js
const editor = tinymce.activeEditor;
const html = editor.getContent();
console.log(html);
```
To retrieve the content as plain text instead of HTML:

```js
const editor = tinymce.activeEditor;
const text = editor.getContent({ format: 'text' });
console.log(text);
```

#### Example: set editor content

```js
const editor = tinymce.activeEditor;
editor.setContent('<p>New content</p>');
```

## Next Steps

For information on:

- Setting the license, see: [Setting the license](../license-key/#setting-the-license).
- Customizing TinyMCE, see: [Basic Setup](../basic-setup/).
- The three editor modes, see:

- [TinyMCE classic editing mode](../use-tinymce-classic/).
  - [TinyMCE inline editing mode](../use-tinymce-inline/).
  - [TinyMCE distraction-free editing mode](../use-tinymce-distraction-free/).
- Adding TinyMCE plugins, see: [Work with plugins to extend TinyMCE](../work-with-plugins/).
- Localizing the TinyMCE editor, see: [Localize TinyMCE](../localize-your-language/).
- For information on the CSS required to render some TinyMCE elements outside of the editor, see: [CSS for rendering TinyMCE content outside the editor](../editor-content-css/).