---
title: How to Set Up Document View
description: Configure Jodit PRO document display mode for a page-like editing experience.
keywords: document view, page mode, jodit pro, document editing
---

# How to set up document view

The main page of Jodit PRO has a Document display mode.

![Document view 600x500](../images/document-view.png)

How to set up a similar look on your website?

This is not a special mode, but simply a series of settings that can be made in Jodit.

- Enable iframe in the editor
- Turn off placeholder. Usually the editor shows the text "Enter text", but in Document mode it is not needed

```javascript
Jodit.make('#editor', {
	iframe: true,
	showPlaceholder: false
});
```

This allows you to set styles inside the iframe that will only apply to the content of the editor.
The difficulty is that Jodit styles that are applied inside the document to service objects, for example, to page break, also need to be connected manually.

```javascript
Jodit.make('#editor', {
	iframe: true,
	iframeStyle: `
    body {
      font-family: Arial, sans-serif;
      font-size: 16px;
    }
  `,
	iframeCSSLinks: [
		'https://cdn.jsdelivr.net/npm/jodit-pro@4.2.24/es2021.en/jodit.fat.min.css'
	]
});
```

To make the editing area look like word, you can add styles to the `body`:

```css
body {
	color: #333;
	line-height: 1.6;
	font-family:
		sans-serif, Arial, Verdana, 'Trebuchet MS', 'Apple Color Emoji',
		'Segoe UI Emoji', 'Segoe UI Symbol';
	width: 15.8cm !important;
	min-height: 21cm !important;
	box-sizing: content-box !important;
	padding: 1cm 1cm 2cm !important;
	border: 1px #d3d3d3 solid !important;
	margin: 0.5cm auto !important;
	background: white !important;
	border-radius: 5px !important;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) !important;
	font-size: 12pt !important;
}
p {
	margin-top: 0;
	margin-bottom: 6px;
	line-height: 1.4;
}
```

Let's turn off unnecessary buttons and panels:

```javascript
Jodit.make('#editor', {
	iframe: true,
	iframeStyle: `
    body {
      font-family: Arial, sans-serif;
      font-size: 16px;
    }
  `,
	iframeCSSLinks: [],
	buttons: [
		'source',
		'|',
		{
			group: 'font-style',
			buttons: []
		},
		{
			group: 'list',
			buttons: []
		},
		{
			group: 'font',
			buttons: []
		},
		'|',
		'brush',
		'image',
		'align',
		'|',
		'pageBreak',
		'exportDocs'
	],
	removeButtons: ['changeCase', 'classSpan', 'lineHeight']
});
```

We can also give the font, font size and insert block buttons a drop-down list style, as it usually looks like in word:

```javascript
Jodit.make('#ediror', {
	controls: {
		paragraph: {
			component: 'select'
		},
		font: {
			component: 'select'
		},
		fontsize: {
			component: 'select'
		}
	}
});
```

Let's set the width and minimum height of the editor:

```javascript
Jodit.make('#editor', {
	iframe: true,
	iframeStyle: '',
	iframeCSSLinks: [],
	buttons: [],
	removeButtons: [],
	width: 762,
	minHeight: '21px'
});
```

Let's put it all together:

```javascript
Jodit.make('#editor', {
	iframe: true,
	iframeStyle: `
    body {
      font-family: Arial, sans-serif;
      font-size: 16px;
      color: #333;
      line-height: 1.6;
      width: 15.8cm !important;
      min-height: 21cm !important;
      box-sizing: content-box !important;
      padding: 1cm 1cm 2cm !important;
      border: 1px #d3d3d3 solid !important;
      margin: 0.5cm auto !important;
      background: white !important;
      border-radius: 5px !important;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) !important;
      font-size: 12pt !important;
    }
    p {
      margin-top: 0;
      margin-bottom: 6px;
      line-height: 1.4;
    }
  `,
	iframeCSSLinks: [
		'https://cdn.jsdelivr.net/npm/jodit-pro@4.2.24/es2021.en/jodit.fat.min.css'
	],
	buttons: [
		'source',
		'|',
		{
			group: 'font-style',
			buttons: []
		},
		{
			group: 'list',
			buttons: []
		},
		{
			group: 'font',
			buttons: []
		},
		'|',
		'brush',
		'image',
		'align',
		'|',
		'pageBreak',
		'exportDocs'
	],
	removeButtons: ['changeCase', 'classSpan', 'lineHeight'],
	controls: {
		paragraph: {
			component: 'select'
		},
		font: {
			component: 'select'
		},
		fontsize: {
			component: 'select'
		}
	},
	width: 762,
	minHeight: '21px',
	showPlaceholder: false
});
```

Let's look at the result:

`{example DocumentView}`