---
title: "Integrating TinyMCE into an Express JS App"
description: "A quick start guide on integrating TinyMCE into an Express JS Application"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/expressjs-pm/"
md_url: "https://www.tiny.cloud/docs/tinymce/5/expressjs-pm/index.md"
version: "5"
last_updated: "2024-04-09T09:35:32Z"
tokens: 1087
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/expressjs-pm/).
# Integrating TinyMCE into an Express JS App

This quick start guide walks through creating a [basic Express JS application](https://expressjs.com/en/starter/generator.html) containing a TinyMCE editor based on our [Basic example](../basic-example/).

> **Note:** Tiny Cloud users should use the [Tiny Cloud quick start guide](../quick-start/).

## Prerequisites

This procedure requires:

- [Node.js (and npm)](https://nodejs.org/).

## Procedure

1. On a command line or command prompt, create a basic Express JS application:

```sh
$ npx express-generator --git --no-view my_tinymce_app
```
2. Change into the newly created directory.

```sh
$ cd my_tinymce_app
```
3. Add the `tinymce` package to your `package.json` with `--save`.

```sh
$ npm install --save tinymce
```
4. Download and install the TinyMCE and Express JS Node modules (and their dependencies):

```sh
$ npm install
```
5. Using a text editor, open `/path/to/my_tinymce_app/app.js` and add the following route:

```js
app.use('/tinymce', express.static(path.join(__dirname, 'node_modules', 'tinymce')));
```
For example:

```js
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

/* New Route to the TinyMCE Node module */
app.use('/tinymce', express.static(path.join(__dirname, 'node_modules', 'tinymce')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

module.exports = app;
```
6. Create a new javascript file containing the TinyMCE configuration (`tinymce.init`), such as:

Linux/macOS/Unix:

```sh
$ touch public/javascripts/my-tinymce-config.js
```
Windows:

```sh
> type nul >public/javascripts/my-tinymce-config.js
```
7. Add the TinyMCE configuration to the newly created javascript file (`my-tinymce-config.js`):

```js
tinymce.init({
  selector: 'textarea#my-expressjs-tinymce-app',
  height: 500,
  menubar: false,
  plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table paste code help wordcount'
  ],
  toolbar: 'undo redo | formatselect | ' +
  'bold italic backcolor | alignleft aligncenter ' +
  'alignright alignjustify | bullist numlist outdent indent | ' +
  'removeformat | help'
});
```
8. Update `public/index.html` to include:

  - The document type declaration, `<!DOCTYPE html>`.
  - A `<script>` element sourcing `tinymce.min.js`.
  - A `<script>` element sourcing the TinyMCE configuration (`my-tinymce-config.js`).
  - A `<textarea>` element with an `id` attribute matching the `selector` option in the TinyMCE configuration (`my-expressjs-tinymce-app`).

For example:

```html
<!DOCTYPE html><!-- Required for TinyMCE to function as intended -->
<html>

  <head>
    <title>TinyMCE Demo</title>
    <link rel="stylesheet" href="/stylesheets/style.css"></link>
  </head>

  <body>
    <!-- Text area matching the selector specified in the TinyMCE configuration -->
    <textarea id="my-expressjs-tinymce-app">Hello, World!</textarea>
  </body>

  <!-- Script element sourcing TinyMCE -->
  <script type="application/javascript" src="/tinymce/tinymce.min.js"></script>
  <!-- Script element sourcing the TinyMCE configuration -->
  <script type="application/javascript" src="/javascripts/my-tinymce-config.js"></script>
</html>
```
9. Test the application using the Node.js development server.

  - To start the development server, navigate to the `my_tinymce_app` directory and run:

```sh
$ npm start
```
  - Visit http://localhost:3000 to view the application.
  - To stop the development server, select on the command line or command prompt and press *Ctrl+C*.

## Next Steps

- For information on customizing:

  - TinyMCE, see: [Basic setup](../basic-setup/).
  - The Express JS application, see: [the Express JS Documentation](https://expressjs.com/).
