---
title: "Bundling the TinyMCE package with the React framework"
description: "A guide on integrating the TinyMCE package into the React framework by bundling it."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/react-pm-bundle/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/react-pm-bundle/index.md"
version: "6"
last_updated: "2022-04-27T02:15:26Z"
tokens: 1539
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/react-pm-bundle/).
# Bundling the TinyMCE package with the React framework

> **Important:** Tiny does not recommend bundling the `tinymce` package. Bundling TinyMCE can be complex and error prone.
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/facebook/create-react-app) 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 [Create React App](https://github.com/facebook/create-react-app) package to create a new React project named `tinymce-react-demo`.

```sh
npx create-react-app tinymce-react-demo
```
2. Change to the newly created directory.

```sh
cd tinymce-react-demo
```
3. Install the `tinymce`, `tinymce-react` and `raw-loader` packages and save them to your `package.json` with `--save`.

```sh
npm install --save tinymce @tinymce/tinymce-react raw-loader
```
4. Using a text editor, create `./src/BundledEditor.js` and set the contents to:

```jsx
import { Editor } from '@tinymce/tinymce-react';

// TinyMCE so the global var exists
// eslint-disable-next-line no-unused-vars
import tinymce from 'tinymce/tinymce';
// DOM model
import 'tinymce/models/dom/model'
// Theme
import 'tinymce/themes/silver';
// Toolbar icons
import 'tinymce/icons/default';
// Editor styles
import 'tinymce/skins/ui/oxide/skin.min.css';

// importing the plugin js.
// if you use a plugin that is not listed here the editor will fail to load
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/anchor';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/autoresize';
import 'tinymce/plugins/autosave';
import 'tinymce/plugins/charmap';
import 'tinymce/plugins/code';
import 'tinymce/plugins/codesample';
import 'tinymce/plugins/directionality';
import 'tinymce/plugins/emoticons';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/help';
import 'tinymce/plugins/image';
import 'tinymce/plugins/importcss';
import 'tinymce/plugins/insertdatetime';
import 'tinymce/plugins/link';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/media';
import 'tinymce/plugins/nonbreaking';
import 'tinymce/plugins/pagebreak';
import 'tinymce/plugins/preview';
import 'tinymce/plugins/quickbars';
import 'tinymce/plugins/save';
import 'tinymce/plugins/searchreplace';
import 'tinymce/plugins/table';
import 'tinymce/plugins/template';
import 'tinymce/plugins/visualblocks';
import 'tinymce/plugins/visualchars';
import 'tinymce/plugins/wordcount';

// importing plugin resources
import 'tinymce/plugins/emoticons/js/emojis';

// Content styles, including inline UI like fake cursors
/* eslint import/no-webpack-loader-syntax: off */
import contentCss from '!!raw-loader!tinymce/skins/content/default/content.min.css';
import contentUiCss from '!!raw-loader!tinymce/skins/ui/oxide/content.min.css';

export default function BundledEditor(props) {
  const {init, ...rest} = props;
  // note that skin and content_css is disabled to avoid the normal
  // loading process and is instead loaded as a string via content_style
  return (
    <Editor
      init={{
        ...init,
        skin: false,
        content_css: false,
        content_style: [contentCss, contentUiCss, init.content_style || ''].join('\n'),
      }}
      {...rest}
    />
  );
}
```
5. Using a text editor, open `./src/App.js` and replace the contents with:

```jsx
import React, { useRef } from 'react';
import BundledEditor from './BundledEditor'

export default function App() {
  const editorRef = useRef(null);
  const log = () => {
    if (editorRef.current) {
      console.log(editorRef.current.getContent());
    }
  };
  return (
    <>
      <BundledEditor
        onInit={(evt, editor) => editorRef.current = editor}
        initialValue='<p>This is the initial content of the editor.</p>'
        init={{
          height: 500,
          menubar: false,
          plugins: [
            'advlist', 'anchor', 'autolink', 'help', 'image', 'link', 'lists',
            'searchreplace', 'table', '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>
    </>
  );
}
```
6. 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 start
```
  - 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: [Create React App - Deployment](https://create-react-app.dev/docs/deployment).

To deploy the application to a local HTTP Server:

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

```sh
npm run build
```
2. Copy the contents of the `tinymce-react-demo/build` 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 information on bundling, see: [Introduction to bundling TinyMCE](../introduction-to-bundling-tinymce/)
- 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: [Create React App](https://create-react-app.dev/docs/getting-started) or [the React documentation](https://reactjs.org/docs/getting-started.html).