---
title: "Hosting the TinyMCE package with the React framework"
description: "A guide on integrating the TinyMCE package into the React framework by self-hosting it."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/react-pm-host/"
md_url: "https://www.tiny.cloud/docs/tinymce/7/react-pm-host/index.md"
version: "7"
last_updated: "2025-05-14T11:34:04Z"
tokens: 1270
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/react-pm-host/).
# Hosting the TinyMCE package with the React framework

The [Official TinyMCE React component](https://github.com/tinymce/tinymce-react) integrates TinyMCE into React projects. This procedure creates a [basic React application](https://github.com/vitejs/vite-plugin-react-swc) containing a TinyMCE editor.

For examples of the TinyMCE integration, visit [the tinymce-react storybook](https://tinymce.github.io/tinymce-react/).

## Prerequisites

This procedure requires [Node.js (and npm)](https://nodejs.org/).

## Procedure

1. Use the [Vite](https://github.com/vitejs/vite) package and the [React SWC plugin](https://github.com/vitejs/vite-plugin-react-swc) to create a new React project named `tinymce-react-demo`.

```sh
# npm 7+, extra double-dash is needed
npm create vite@5 tinymce-react-demo -- --template react-swc
```
2. Change to the newly created directory.

```sh
cd tinymce-react-demo
```
3. Install the `tinymce`, `@tinymce/tinymce-react` and `fs-extra` packages.

```sh
npm install tinymce @tinymce/tinymce-react fs-extra
```
4. Setup a `postinstall` script to copy TinyMCE to the public directory for hosting

postinstall.js
```js
import fse from 'fs-extra';
import path from 'path';
const topDir = import.meta.dirname;
fse.emptyDirSync(path.join(topDir, 'public', 'tinymce'));
fse.copySync(path.join(topDir, 'node_modules', 'tinymce'), path.join(topDir, 'public', 'tinymce'), { overwrite: true });
```
package.json
```json
{
  // ... other content omitted for brevity ...
  "scripts": {
    // ... other scripts omitted for brevity ...
    "postinstall": "node ./postinstall.js"
  }
}
```
.gitignore
```.gitignore
# ... other rules omitted for brevity ...
/public/tinymce/
```
5. Run the `postinstall` to copy TinyMCE to the `public` directory

```sh
npm run postinstall
```
6. Using a text editor, open `./src/App.jsx` and replace the contents with:

```jsx
import { useRef } from 'react';
import { Editor } from '@tinymce/tinymce-react';
import './App.css';

export default function App() {
  const editorRef = useRef(null);
  const log = () => {
    if (editorRef.current) {
      console.log(editorRef.current.getContent());
    }
  };
  return (
    <>
      <Editor
        tinymceScriptSrc='/tinymce/tinymce.min.js'
        licenseKey='your-license-key'
        onInit={(_evt, editor) => editorRef.current = editor}
        initialValue='<p>This is the initial content of the editor.</p>'
        init={{
          height: 500,
          menubar: false,
          plugins: [
            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
            'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
            'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount'
          ],
          toolbar: 'undo redo | blocks | ' +
            'bold italic forecolor | alignleft aligncenter ' +
            'alignright alignjustify | bullist numlist outdent indent | ' +
            'removeformat | help',
          content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
        }}
      />
      <button onClick={log}>Log editor content</button>
    </>
  );
}
```
7. Update the `licenseKey` option in the editor element and include your [License Key](../license-key/).
8. Test the application using the Node.js development server.

  - To start the development server, navigate to the `tinymce-react-demo` directory and run:

```sh
npm run dev
```
  - To stop the development server, select on the command line or command prompt and press *Ctrl+C*.

## Deploying the application to a HTTP server

The application will require further configuration before it can be deployed to a production environment. For information on configuring the application for deployment, see: [Building for Production](https://vitejs.dev/guide/build) or [Deploying a Static Site](https://vitejs.dev/guide/static-deploy.html).

To deploy the application to a local HTTP Server:

1. Navigate to the `tinymce-react-demo` directory and run:

```sh
npm run build
```
2. You can optionally preview the production build by running:

```sh
npm run preview
```
3. Copy the contents of the `tinymce-react-demo/dist` directory to the root directory of the web server.

The application has now been deployed on the web server.

> **Note:** Additional configuration is required to deploy the application outside the web server root directory, such as http://localhost:<port>/my_react_application.

## Next Steps

- For examples of the TinyMCE integration, see: [the tinymce-react storybook](https://tinymce.github.io/tinymce-react/).
- For information on customizing:

  - TinyMCE integration, see: [TinyMCE React integration technical reference](../react-ref/).
  - TinyMCE, see: [Basic setup](../basic-setup/).
  - The React application, see: [Getting Started with Vite](https://vitejs.dev/guide/#getting-started) or [the React documentation](https://react.dev/learn).