diff --git a/package.json b/package.json
index 2170835287..16e97ba1fd 100644
--- a/package.json
+++ b/package.json
@@ -48,26 +48,27 @@
         "eslint-plugin-flowtype": "5.2.0",
         "eslint-plugin-import": "2.22.1",
         "eslint-plugin-jsx-a11y": "6.4.1",
-        "eslint-plugin-node": "11.1.0",
-        "eslint-plugin-promise": "4.2.1",
-        "fast-deep-equal": "3.1.3",
-        "firacode": "5.2.0",
-        "flowchart.js": "1.15.0",
-        "fork-awesome": "1.1.7",
-        "highlight.js": "10.5.0",
-        "i18next": "19.8.7",
-        "i18next-browser-languagedetector": "6.0.1",
-        "i18next-http-backend": "1.1.0",
-        "js-yaml": "4.0.0",
-        "katex": "0.12.0",
-        "luxon": "1.25.0",
-        "markdown-it": "12.0.4",
-        "markdown-it-abbr": "1.0.4",
-        "markdown-it-anchor": "7.0.2",
-        "markdown-it-container": "3.0.0",
-        "markdown-it-deflist": "2.1.0",
-        "markdown-it-emoji": "2.0.0",
-        "markdown-it-footnote": "3.0.2",
+      "eslint-plugin-node": "11.1.0",
+      "eslint-plugin-promise": "4.2.1",
+      "fast-deep-equal": "3.1.3",
+      "firacode": "5.2.0",
+      "flowchart.js": "1.15.0",
+      "fork-awesome": "1.1.7",
+      "highlight.js": "10.5.0",
+      "i18next": "19.8.7",
+      "i18next-browser-languagedetector": "6.0.1",
+      "i18next-http-backend": "1.1.0",
+      "iso-639-1": "2.1.8",
+      "js-yaml": "4.0.0",
+      "katex": "0.12.0",
+      "luxon": "1.25.0",
+      "markdown-it": "12.0.4",
+      "markdown-it-abbr": "1.0.4",
+      "markdown-it-anchor": "7.0.2",
+      "markdown-it-container": "3.0.0",
+      "markdown-it-deflist": "2.1.0",
+      "markdown-it-emoji": "2.0.0",
+      "markdown-it-footnote": "3.0.2",
         "markdown-it-front-matter": "0.2.3",
         "markdown-it-imsize": "2.0.1",
         "markdown-it-ins": "3.0.1",
diff --git a/public/locales/en.json b/public/locales/en.json
index c7a726851d..5bf88bf46e 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -338,26 +338,45 @@
         "modal": {
             "snippetImport": {
                 "title": "Import from Snippet",
-                "selectProject": "Select From Available Projects",
-                "selectSnippet": "Select From Available Snippets"
+              "selectProject": "Select From Available Projects",
+              "selectSnippet": "Select From Available Snippets"
             },
-            "documentInfo": {
-                "title": "Document info",
-                "created": "<0></0> created this note <1></1>",
-                "edited": "<0></0> was the last editor <1></1>",
-                "usersContributed": "<0></0> users contributed to this document",
-                "revisions": "<0></0> revisions are saved"
-            },
-            "gistImport": {
-                "title": "Import from Gist",
-                "insertGistUrl": "Paste your gist url here…"
-            },
-            "snippetExport": {
-                "title": "Export to Snippet",
-                "visibilityLevel": "Select Visibility Level"
-            },
-            "revision": {
-                "title": "Revisions",
+          "documentInfo": {
+            "title": "Document info",
+            "created": "<0></0> created this note <1></1>",
+            "edited": "<0></0> was the last editor <1></1>",
+            "usersContributed": "<0></0> users contributed to this document",
+            "revisions": "<0></0> revisions are saved"
+          },
+          "metadataEditor": {
+            "title": "Edit Metadata",
+            "labels": {
+              "title": "Title",
+              "type": "Document type",
+              "description": "Description",
+              "tags": "Tags",
+              "lang": "Language",
+              "dir": "Text direction",
+              "breaks": "New line style",
+              "robots": "Robots",
+              "GA": "Google Analytics",
+              "disqus": "Disqus",
+              "LTR": "left to right",
+              "RTL": "right to left",
+              "breaksOn": "hedgedoc style",
+              "breaksOff": "markdown style"
+            }
+          },
+          "gistImport": {
+            "title": "Import from Gist",
+            "insertGistUrl": "Paste your gist url here…"
+          },
+          "snippetExport": {
+            "title": "Export to Snippet",
+            "visibilityLevel": "Select Visibility Level"
+          },
+          "revision": {
+            "title": "Revisions",
                 "revertButton": "Revert",
                 "error": "An error occurred while fetching the revisions of this note.",
                 "length": "Length",
diff --git a/src/components/common/fork-awesome/fork-awesome-icon.tsx b/src/components/common/fork-awesome/fork-awesome-icon.tsx
index 4b7c5ab7dd..9c4a306aa6 100644
--- a/src/components/common/fork-awesome/fork-awesome-icon.tsx
+++ b/src/components/common/fork-awesome/fork-awesome-icon.tsx
@@ -1,10 +1,10 @@
 /*
- SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
- SPDX-License-Identifier: AGPL-3.0-only
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React from 'react'
+import React, { MouseEventHandler } from 'react'
 import { IconName, IconSize } from './types'
 
 export interface ForkAwesomeIconProps {
@@ -13,14 +13,15 @@ export interface ForkAwesomeIconProps {
   fixedWidth?: boolean
   size?: IconSize
   stacked?: boolean
+  onClick?: MouseEventHandler<HTMLElement>
 }
 
-export const ForkAwesomeIcon: React.FC<ForkAwesomeIconProps> = ({ icon, fixedWidth = false, size, className, stacked = false }) => {
+export const ForkAwesomeIcon: React.FC<ForkAwesomeIconProps> = ({ icon, fixedWidth = false, size, className, stacked = false, onClick }) => {
   const fixedWithClass = fixedWidth ? 'fa-fw' : ''
   const sizeClass = size ? `-${ size }` : (stacked ? '-1x' : '')
   const stackClass = stacked ? '-stack' : ''
   const extraClasses = `${ className ?? '' } ${ sizeClass || stackClass ? `fa${ stackClass }${ sizeClass }` : '' }`
   return (
-    <i className={ `fa ${ fixedWithClass } fa-${ icon } ${ extraClasses }` }/>
+    <i className={ `fa ${ fixedWithClass } fa-${ icon } ${ extraClasses }` } onClick={ onClick }/>
   )
 }
diff --git a/src/components/editor-page/document-bar/share/share-modal.tsx b/src/components/editor-page/document-bar/share/share-modal.tsx
index 043376d65f..8c8f647a65 100644
--- a/src/components/editor-page/document-bar/share/share-modal.tsx
+++ b/src/components/editor-page/document-bar/share/share-modal.tsx
@@ -16,6 +16,7 @@ import { CopyableField } from '../../../common/copyable/copyable-field/copyable-
 import { CommonModal } from '../../../common/modals/common-modal'
 import { ShowIf } from '../../../common/show-if/show-if'
 import { EditorPagePathParams } from '../../editor-page'
+import { NoteType } from '../../note-frontmatter/note-frontmatter'
 
 export interface ShareModalProps {
   show: boolean,
@@ -44,7 +45,7 @@ export const ShareModal: React.FC<ShareModalProps> = ({ show, onHide }) => {
           <CopyableField content={ `${ baseUrl }/p/${ id }` } nativeShareButton={ true }
                          url={ `${ baseUrl }/p/${ id }` }/>
         </ShowIf>
-        <ShowIf condition={ noteFrontmatter.type === '' }>
+        <ShowIf condition={ noteFrontmatter.type === NoteType.DOCUMENT }>
           <Trans i18nKey={ 'editor.modal.shareLink.viewOnlyDescription' }/>
           <CopyableField content={ `${ baseUrl }/s/${ id }` } nativeShareButton={ true }
                          url={ `${ baseUrl }/s/${ id }` }/>
diff --git a/src/components/editor-page/metadata-editor/breaks-metadata-input.tsx b/src/components/editor-page/metadata-editor/breaks-metadata-input.tsx
new file mode 100644
index 0000000000..d8fb206786
--- /dev/null
+++ b/src/components/editor-page/metadata-editor/breaks-metadata-input.tsx
@@ -0,0 +1,43 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React from 'react'
+import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import { MetadataInputFieldProps } from './metadata-editor'
+
+enum ButtonState {
+  ON,
+  OFF
+}
+
+export const BreaksMetadataInput: React.FC<MetadataInputFieldProps<boolean>> = ({ id, content, onContentChange }) => {
+  const { t } = useTranslation()
+
+  return (
+    <ToggleButtonGroup
+      type="radio"
+      name={ id }
+      id={ id }
+      value={ content ? ButtonState.ON : ButtonState.OFF }
+      className={ 'd-block' }>
+      <ToggleButton
+        value={ ButtonState.ON }
+        variant="outline-secondary"
+        title={ t('editor.modal.metadataEditor.labels.breaksOn') }
+        onChange={ () => onContentChange(true) }>
+        <Trans i18nKey={ 'editor.modal.metadataEditor.labels.breaksOn' }/>
+      </ToggleButton>
+      <ToggleButton
+        value={ ButtonState.OFF }
+        variant="outline-secondary"
+        title={ t('editor.modal.metadataEditor.labels.breaksOff') }
+        onChange={ () => onContentChange(false) }>
+        <Trans i18nKey={ 'editor.modal.metadataEditor.labels.breaksOff' }/>
+      </ToggleButton>
+    </ToggleButtonGroup>
+  )
+}
diff --git a/src/components/editor-page/metadata-editor/datalist-metadata-input.tsx b/src/components/editor-page/metadata-editor/datalist-metadata-input.tsx
new file mode 100644
index 0000000000..b1a89b9e98
--- /dev/null
+++ b/src/components/editor-page/metadata-editor/datalist-metadata-input.tsx
@@ -0,0 +1,29 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { Fragment, useCallback } from 'react'
+import { MetadataInputFieldProps, SelectMetadataOptions } from './metadata-editor'
+
+export const DatalistMetadataInput: React.FC<MetadataInputFieldProps<string> & SelectMetadataOptions<string>> = ({ id, content, onContentChange, options }) => {
+  const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    onContentChange(event.currentTarget.value)
+  }, [onContentChange])
+
+  return (
+    <Fragment>
+      <input list={ id } onChange={ onChange } value={ content } className={ 'form-control' }/>
+      <datalist id={ id }>
+        { options.map(option => {
+          return (
+            <option value={ option }>
+              { option }
+            </option>
+          )
+        }) }
+      </datalist>
+    </Fragment>
+  )
+}
diff --git a/src/components/editor-page/metadata-editor/input-label.scss b/src/components/editor-page/metadata-editor/input-label.scss
new file mode 100644
index 0000000000..3e087ae3a7
--- /dev/null
+++ b/src/components/editor-page/metadata-editor/input-label.scss
@@ -0,0 +1,9 @@
+/*!
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+.tighter {
+  margin-bottom: -0.5px !important;
+}
diff --git a/src/components/editor-page/metadata-editor/input-label.tsx b/src/components/editor-page/metadata-editor/input-label.tsx
new file mode 100644
index 0000000000..0ba42acb8f
--- /dev/null
+++ b/src/components/editor-page/metadata-editor/input-label.tsx
@@ -0,0 +1,23 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React from 'react'
+import './input-label.scss'
+import { Form } from 'react-bootstrap'
+
+export interface InputLabelProps {
+  id: string
+  label: string
+}
+
+export const InputLabel: React.FC<InputLabelProps> = ({ id, label, children }) => {
+  return (
+    <Form.Group className={ 'pb-3' }>
+      <label className='small font-weight-lighter tighter' htmlFor={ id }>{ label }</label>
+      { children }
+    </Form.Group>
+  )
+}
diff --git a/src/components/editor-page/metadata-editor/metadata-editor.tsx b/src/components/editor-page/metadata-editor/metadata-editor.tsx
new file mode 100644
index 0000000000..9d4756d12b
--- /dev/null
+++ b/src/components/editor-page/metadata-editor/metadata-editor.tsx
@@ -0,0 +1,120 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import ISO from 'iso-639-1'
+import React, { useCallback } from 'react'
+import { Col, Modal, Row } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux'
+import { ApplicationState } from '../../../redux'
+import { setNoteFrontmatter } from '../../../redux/note-details/methods'
+import { CommonModal } from '../../common/modals/common-modal'
+import { NoteFrontmatter, NoteType } from '../note-frontmatter/note-frontmatter'
+import { BreaksMetadataInput } from './breaks-metadata-input'
+import { DatalistMetadataInput } from './datalist-metadata-input'
+import { InputLabel } from './input-label'
+import { StringMetadataInput } from './string-metadata-input'
+import { StringMetadataTextarea } from './string-metadata-textarea'
+import { TagsMetadataInput } from './tags-metadata-input'
+import { TextDirectionMetadataInput } from './text-direction-metadata-input'
+
+export interface MetadataEditorProps {
+  show: boolean,
+  onHide: () => void
+}
+
+export interface MetadataInputFieldProps<T> {
+  id: string
+  content: T
+  onContentChange: (newContent: T) => void
+}
+
+export interface SelectMetadataOptions<T> {
+  options: T[]
+}
+
+export const MetadataEditor: React.FC<MetadataEditorProps> = ({ show, onHide }) => {
+  const { t } = useTranslation()
+  const yamlMetadata = useSelector((state: ApplicationState) => state.noteDetails.frontmatter)
+  const noteDetails = useSelector((state: ApplicationState) => state.noteDetails.markdownContent)
+  /*const [yamlMetadata, setNoteFrontmatter] = useState<Omit<YAMLMetaData, 'opengraph'>>({
+   title: "Test Title",
+   description: "Test Description\nwith two lines",
+   tags: ["tag1", "tag2"],
+   robots: "",
+   lang: "de-at",
+   dir: TextDirection.LTR,
+   breaks: false,
+   GA: "test GA string",
+   disqus: "test disqus string",
+   type: '',
+   deprecatedTagsSyntax: false
+   })*/
+
+  const setMarkdown = useCallback((changes: Partial<NoteFrontmatter>) => {
+    const newMetadata = Object.assign(yamlMetadata, changes)
+
+//    setnoteDetails(noteDetails)
+  }, [noteDetails])
+
+  return (
+    <CommonModal
+      size='lg'
+      show={ show }
+      onHide={ onHide }
+      closeButton={ true }
+      titleI18nKey={ 'editor.modal.metadataEditor.title' }>
+      <Modal.Body>
+        <Row>
+          <Col xs={ 6 }>
+            <InputLabel id={ 'title' } label={ t('editor.modal.metadataEditor.labels.title') }>
+              <StringMetadataInput id={ 'title' } content={ yamlMetadata.title }
+                                   onContentChange={ title => setNoteFrontmatter({ ...yamlMetadata, title }) }/>
+            </InputLabel>
+            <InputLabel id={ 'type' } label={ t('editor.modal.metadataEditor.labels.type') }>
+              <DatalistMetadataInput id={ 'type' } options={ Object.values(NoteType) } content={ yamlMetadata.type }
+                                     onContentChange={ type => setNoteFrontmatter({ ...yamlMetadata, type: (type as NoteType) }) }/>
+            </InputLabel>
+            <InputLabel id={ 'dir' } label={ t('editor.modal.metadataEditor.labels.dir') }>
+              <TextDirectionMetadataInput id={ 'dir' } content={ yamlMetadata.dir }
+                                          onContentChange={ dir => setNoteFrontmatter({ ...yamlMetadata, dir }) }/>
+            </InputLabel>
+            <InputLabel id={ 'description' } label={ t('editor.modal.metadataEditor.labels.description') }>
+              <StringMetadataTextarea id={ 'description' } content={ yamlMetadata.description }
+                                      onContentChange={ description => setNoteFrontmatter({ ...yamlMetadata, description }) }/>
+            </InputLabel>
+            <InputLabel id={ 'disqus' } label={ t('editor.modal.metadataEditor.labels.disqus') }>
+              <StringMetadataInput id={ 'disqus' } content={ yamlMetadata.disqus }
+                                   onContentChange={ disqus => setNoteFrontmatter({ ...yamlMetadata, disqus }) }/>
+            </InputLabel>
+          </Col>
+          <Col xs={ 6 }>
+            <InputLabel id={ 'lang' } label={ t('editor.modal.metadataEditor.labels.lang') }>
+              <DatalistMetadataInput id={ 'lang' } options={ ISO.getAllCodes() } content={ yamlMetadata.lang }
+                                     onContentChange={ lang => setNoteFrontmatter({ ...yamlMetadata, lang }) }/>
+            </InputLabel>
+            <InputLabel id={ 'robots' } label={ t('editor.modal.metadataEditor.labels.robots') }>
+              <StringMetadataInput id={ 'robots' } content={ yamlMetadata.robots }
+                                   onContentChange={ robots => setNoteFrontmatter({ ...yamlMetadata, robots }) }/>
+            </InputLabel>
+            <InputLabel id={ 'breaks' } label={ t('editor.modal.metadataEditor.labels.breaks') }>
+              <BreaksMetadataInput id={ 'breaks' } content={ yamlMetadata.breaks }
+                                   onContentChange={ breaks => setNoteFrontmatter({ ...yamlMetadata, breaks }) }/>
+            </InputLabel>
+            <InputLabel id={ 'tags' } label={ t('editor.modal.metadataEditor.labels.tags') }>
+              <TagsMetadataInput id={ 'tags' } content={ yamlMetadata.tags }
+                                 onContentChange={ tags => setNoteFrontmatter({ ...yamlMetadata, tags }) }/>
+            </InputLabel>
+            <InputLabel id={ 'GA' } label={ t('editor.modal.metadataEditor.labels.GA') }>
+              <StringMetadataInput id={ 'GA' } content={ yamlMetadata.GA }
+                                   onContentChange={ GA => setNoteFrontmatter({ ...yamlMetadata, GA }) }/>
+            </InputLabel>
+          </Col>
+        </Row>
+      </Modal.Body>
+    </CommonModal>
+  )
+}
diff --git a/src/components/editor-page/metadata-editor/string-metadata-input.tsx b/src/components/editor-page/metadata-editor/string-metadata-input.tsx
new file mode 100644
index 0000000000..5d556c9505
--- /dev/null
+++ b/src/components/editor-page/metadata-editor/string-metadata-input.tsx
@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { useCallback } from 'react'
+import { MetadataInputFieldProps } from './metadata-editor'
+
+export const StringMetadataInput: React.FC<MetadataInputFieldProps<string>> = ({ id, content, onContentChange }) => {
+  const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    onContentChange(event.currentTarget.value)
+  }, [onContentChange])
+
+  return (
+    <input
+      id={ id }
+      type="text"
+      className={ 'form-control' }
+      value={ content }
+      onChange={ onChange }
+    />
+  )
+}
diff --git a/src/components/editor-page/metadata-editor/string-metadata-textarea.tsx b/src/components/editor-page/metadata-editor/string-metadata-textarea.tsx
new file mode 100644
index 0000000000..5e7f2268a6
--- /dev/null
+++ b/src/components/editor-page/metadata-editor/string-metadata-textarea.tsx
@@ -0,0 +1,23 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { useCallback } from 'react'
+import { MetadataInputFieldProps } from './metadata-editor'
+
+export const StringMetadataTextarea: React.FC<MetadataInputFieldProps<string>> = ({ id, content, onContentChange }) => {
+  const onChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    onContentChange(event.currentTarget.value)
+  }, [onContentChange])
+
+  return (
+    <textarea
+      id={ id }
+      className={ 'form-control' }
+      value={ content }
+      onChange={ onChange }
+    />
+  )
+}
diff --git a/src/components/editor-page/metadata-editor/tags-metadata-input.scss b/src/components/editor-page/metadata-editor/tags-metadata-input.scss
new file mode 100644
index 0000000000..3b41c7537b
--- /dev/null
+++ b/src/components/editor-page/metadata-editor/tags-metadata-input.scss
@@ -0,0 +1,9 @@
+/*!
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+.tag-bubble {
+  white-space: nowrap;
+}
diff --git a/src/components/editor-page/metadata-editor/tags-metadata-input.tsx b/src/components/editor-page/metadata-editor/tags-metadata-input.tsx
new file mode 100644
index 0000000000..e876f96221
--- /dev/null
+++ b/src/components/editor-page/metadata-editor/tags-metadata-input.tsx
@@ -0,0 +1,60 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { Fragment, useCallback, useState } from 'react'
+import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
+import { MetadataInputFieldProps } from './metadata-editor'
+import './tags-metadata-input.scss'
+
+export const TagsMetadataInput: React.FC<MetadataInputFieldProps<string[]>> = ({ id, content, onContentChange }) => {
+
+  const [newTag, setNewTag] = useState<string>('')
+
+  const addTag = useCallback(() => {
+    if (!/^\s*$/.test(newTag)) {
+      onContentChange([...content, newTag])
+      setNewTag('')
+    }
+  }, [content, newTag, onContentChange])
+
+  const onKeyDown = useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.code === 'Enter') {
+      addTag()
+    }
+  }, [addTag])
+
+  const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setNewTag(event.currentTarget.value)
+  }, [])
+
+  const dismissTag = useCallback((clickedTag: string) => {
+    onContentChange(content.filter(tag => tag !== clickedTag))
+  }, [content, onContentChange])
+
+  return (
+    <Fragment>
+      <div className='d-flex flex-row mb-2 mt-1 overflow-x-scroll'>
+        {
+          content.map(tag => {
+            return (
+              <div className='rounded-pill mr-1 px-2 bg-primary tag-bubble' key={ tag }>
+                <span className={ 'user-select-none' }>{ tag }</span>
+                <ForkAwesomeIcon icon={ 'times' } className='pl-1 cursor-pointer' onClick={ () => dismissTag(tag) }/>
+              </div>
+            )
+          })
+        }
+      </div>
+      <input
+        type="text"
+        id={ id }
+        className='form-control'
+        value={ newTag }
+        onKeyDown={ onKeyDown }
+        onChange={ onChange }/>
+    </Fragment>
+  )
+}
diff --git a/src/components/editor-page/metadata-editor/text-direction-metadata-input.tsx b/src/components/editor-page/metadata-editor/text-direction-metadata-input.tsx
new file mode 100644
index 0000000000..f25003dc66
--- /dev/null
+++ b/src/components/editor-page/metadata-editor/text-direction-metadata-input.tsx
@@ -0,0 +1,45 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React from 'react'
+import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
+import { TextDirection } from '../note-frontmatter/note-frontmatter'
+import { MetadataInputFieldProps } from './metadata-editor'
+
+
+export const TextDirectionMetadataInput: React.FC<MetadataInputFieldProps<TextDirection>> = ({ id, content, onContentChange }) => {
+  const { t } = useTranslation()
+
+  return (
+    <ToggleButtonGroup
+      className={ 'd-block' }
+      type="radio"
+      name={ id }
+      id={ id }
+      value={ content }>
+      <ToggleButton
+        value={ TextDirection.LTR }
+        variant="outline-secondary"
+        title={ t('editor.modal.metadataEditor.labels.LTR') }
+        onChange={ () => onContentChange(TextDirection.LTR) }>
+        <ForkAwesomeIcon icon={ 'align-left' }/>
+        &nbsp;
+        <Trans i18nKey={ 'editor.modal.metadataEditor.labels.LTR' }/>
+      </ToggleButton>
+      <ToggleButton
+        value={ TextDirection.RTL }
+        variant="outline-secondary"
+        title={ t('editor.modal.metadataEditor.labels.RTL') }
+        onChange={ () => onContentChange(TextDirection.RTL) }>
+        <ForkAwesomeIcon icon={ 'align-right' }/>
+        &nbsp;
+        <Trans i18nKey={ 'editor.modal.metadataEditor.labels.RTL' }/>
+      </ToggleButton>
+    </ToggleButtonGroup>
+  )
+}
diff --git a/src/components/editor-page/note-frontmatter/note-frontmatter.ts b/src/components/editor-page/note-frontmatter/note-frontmatter.ts
index e6d7914610..66f786f42a 100644
--- a/src/components/editor-page/note-frontmatter/note-frontmatter.ts
+++ b/src/components/editor-page/note-frontmatter/note-frontmatter.ts
@@ -6,209 +6,15 @@
 
 // import { RevealOptions } from 'reveal.js'
 
-type iso6391 =
-  'aa'
-  | 'ab'
-  | 'af'
-  | 'am'
-  | 'ar'
-  | 'ar-ae'
-  | 'ar-bh'
-  | 'ar-dz'
-  | 'ar-eg'
-  | 'ar-iq'
-  | 'ar-jo'
-  | 'ar-kw'
-  | 'ar-lb'
-  | 'ar-ly'
-  | 'ar-ma'
-  | 'ar-om'
-  | 'ar-qa'
-  | 'ar-sa'
-  | 'ar-sy'
-  | 'ar-tn'
-  | 'ar-ye'
-  | 'as'
-  | 'ay'
-  | 'de-at'
-  | 'de-ch'
-  | 'de-li'
-  | 'de-lu'
-  | 'div'
-  | 'dz'
-  | 'el'
-  | 'en'
-  | 'en-au'
-  | 'en-bz'
-  | 'en-ca'
-  | 'en-gb'
-  | 'en-ie'
-  | 'en-jm'
-  | 'en-nz'
-  | 'en-ph'
-  | 'en-tt'
-  | 'en-us'
-  | 'en-za'
-  | 'en-zw'
-  | 'eo'
-  | 'es'
-  | 'es-ar'
-  | 'es-bo'
-  | 'es-cl'
-  | 'es-co'
-  | 'es-cr'
-  | 'es-do'
-  | 'es-ec'
-  | 'es-es'
-  | 'es-gt'
-  | 'es-hn'
-  | 'es-mx'
-  | 'es-ni'
-  | 'es-pa'
-  | 'es-pe'
-  | 'es-pr'
-  | 'es-py'
-  | 'es-sv'
-  | 'es-us'
-  | 'es-uy'
-  | 'es-ve'
-  | 'et'
-  | 'eu'
-  | 'fa'
-  | 'fi'
-  | 'fj'
-  | 'fo'
-  | 'fr'
-  | 'fr-be'
-  | 'fr-ca'
-  | 'fr-ch'
-  | 'fr-lu'
-  | 'fr-mc'
-  | 'fy'
-  | 'ga'
-  | 'gd'
-  | 'gl'
-  | 'gn'
-  | 'gu'
-  | 'ha'
-  | 'he'
-  | 'hi'
-  | 'hr'
-  | 'hu'
-  | 'hy'
-  | 'ia'
-  | 'id'
-  | 'ie'
-  | 'ik'
-  | 'in'
-  | 'is'
-  | 'it'
-  | 'it-ch'
-  | 'iw'
-  | 'ja'
-  | 'ji'
-  | 'jw'
-  | 'ka'
-  | 'kk'
-  | 'kl'
-  | 'km'
-  | 'kn'
-  | 'ko'
-  | 'kok'
-  | 'ks'
-  | 'ku'
-  | 'ky'
-  | 'kz'
-  | 'la'
-  | 'ln'
-  | 'lo'
-  | 'ls'
-  | 'lt'
-  | 'lv'
-  | 'mg'
-  | 'mi'
-  | 'mk'
-  | 'ml'
-  | 'mn'
-  | 'mo'
-  | 'mr'
-  | 'ms'
-  | 'mt'
-  | 'my'
-  | 'na'
-  | 'nb-no'
-  | 'ne'
-  | 'nl'
-  | 'nl-be'
-  | 'nn-no'
-  | 'no'
-  | 'oc'
-  | 'om'
-  | 'or'
-  | 'pa'
-  | 'pl'
-  | 'ps'
-  | 'pt'
-  | 'pt-br'
-  | 'qu'
-  | 'rm'
-  | 'rn'
-  | 'ro'
-  | 'ro-md'
-  | 'ru'
-  | 'ru-md'
-  | 'rw'
-  | 'sa'
-  | 'sb'
-  | 'sd'
-  | 'sg'
-  | 'sh'
-  | 'si'
-  | 'sk'
-  | 'sl'
-  | 'sm'
-  | 'sn'
-  | 'so'
-  | 'sq'
-  | 'sr'
-  | 'ss'
-  | 'st'
-  | 'su'
-  | 'sv'
-  | 'sv-fi'
-  | 'sw'
-  | 'sx'
-  | 'syr'
-  | 'ta'
-  | 'te'
-  | 'tg'
-  | 'th'
-  | 'ti'
-  | 'tk'
-  | 'tl'
-  | 'tn'
-  | 'to'
-  | 'tr'
-  | 'ts'
-  | 'tt'
-  | 'tw'
-  | 'uk'
-  | 'ur'
-  | 'us'
-  | 'uz'
-  | 'vi'
-  | 'vo'
-  | 'wo'
-  | 'xh'
-  | 'yi'
-  | 'yo'
-  | 'zh'
-  | 'zh-cn'
-  | 'zh-hk'
-  | 'zh-mo'
-  | 'zh-sg'
-  | 'zh-tw'
-  | 'zu'
+export enum TextDirection {
+  LTR = 'ltr',
+  RTL = 'rtl'
+}
+
+export enum NoteType {
+  SLIDE = 'slide',
+  DOCUMENT = 'document'
+}
 
 export interface RawNoteFrontmatter {
   title: string | undefined
@@ -231,12 +37,12 @@ export class NoteFrontmatter {
   tags: string[]
   deprecatedTagsSyntax: boolean
   robots: string
-  lang: iso6391
-  dir: 'ltr' | 'rtl'
+  lang: string
+  dir: TextDirection
   breaks: boolean
   GA: string
   disqus: string
-  type: 'slide' | ''
+  type: NoteType
   // slideOptions: RevealOptions
   opengraph: Map<string, string>
 
@@ -248,8 +54,8 @@ export class NoteFrontmatter {
     this.GA = rawData?.GA ?? ''
     this.disqus = rawData?.disqus ?? ''
 
-    this.type = (rawData?.type as NoteFrontmatter['type']) ?? ''
-    this.lang = (rawData?.lang as iso6391) ?? 'en'
+    this.type = (rawData?.type as NoteFrontmatter['type']) ?? NoteType.DOCUMENT
+    this.lang = rawData?.lang ?? 'en'
     this.dir = (rawData?.dir as NoteFrontmatter['dir']) ?? 'ltr'
 
     /* this.slideOptions = (rawData?.slideOptions as RevealOptions) ?? {
diff --git a/src/components/editor-page/sidebar/metadata-editor-sidebar-entry.tsx b/src/components/editor-page/sidebar/metadata-editor-sidebar-entry.tsx
new file mode 100644
index 0000000000..4bd71b7927
--- /dev/null
+++ b/src/components/editor-page/sidebar/metadata-editor-sidebar-entry.tsx
@@ -0,0 +1,25 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { Fragment, useState } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import { MetadataEditor } from '../metadata-editor/metadata-editor'
+import { SidebarButton } from './sidebar-button'
+import { SpecificSidebarEntryProps } from './types'
+
+export const MetadataEditorSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ className, hide }) => {
+  const [showModal, setShowModal] = useState(false)
+  useTranslation()
+
+  return (
+    <Fragment>
+      <SidebarButton hide={ hide } className={ className } icon={ 'tags' } onClick={ () => setShowModal(true) }>
+        <Trans i18nKey={ 'editor.modal.metadataEditor.title' }/>
+      </SidebarButton>
+      <MetadataEditor show={ showModal } onHide={ () => setShowModal(false) }/>
+    </Fragment>
+  )
+}
diff --git a/src/components/editor-page/sidebar/sidebar.tsx b/src/components/editor-page/sidebar/sidebar.tsx
index 80893bc5d9..c113d47ac7 100644
--- a/src/components/editor-page/sidebar/sidebar.tsx
+++ b/src/components/editor-page/sidebar/sidebar.tsx
@@ -10,6 +10,7 @@ import { DeleteNoteSidebarEntry } from './delete-note-sidebar-entry'
 import { DocumentInfoSidebarEntry } from './document-info-sidebar-entry'
 import { ExportMenuSidebarMenu } from './export-menu-sidebar-menu'
 import { ImportMenuSidebarMenu } from './import-menu-sidebar-menu'
+import { MetadataEditorSidebarEntry } from './metadata-editor-sidebar-entry'
 import { PermissionsSidebarEntry } from './permissions-sidebar-entry'
 import { PinNoteSidebarEntry } from './pin-note-sidebar-entry'
 import { RevisionSidebarEntry } from './revision-sidebar-entry'
@@ -40,6 +41,7 @@ export const Sidebar: React.FC = () => {
         <UsersOnlineSidebarMenu menuId={ DocumentSidebarMenuSelection.USERS_ONLINE }
                                 selectedMenuId={ selectedMenu } onClick={ toggleValue }/>
         <DocumentInfoSidebarEntry hide={ selectionIsNotNone }/>
+        <MetadataEditorSidebarEntry hide={ selectionIsNotNone }/>
         <RevisionSidebarEntry hide={ selectionIsNotNone }/>
         <PermissionsSidebarEntry hide={ selectionIsNotNone }/>
         <ImportMenuSidebarMenu menuId={ DocumentSidebarMenuSelection.IMPORT }
diff --git a/src/redux/note-details/reducers.ts b/src/redux/note-details/reducers.ts
index a2a6a0aab5..b976d72192 100644
--- a/src/redux/note-details/reducers.ts
+++ b/src/redux/note-details/reducers.ts
@@ -7,7 +7,11 @@
 import { DateTime } from 'luxon'
 import { Reducer } from 'redux'
 import { Note } from '../../api/notes'
-import { NoteFrontmatter } from '../../components/editor-page/note-frontmatter/note-frontmatter'
+import {
+  NoteFrontmatter,
+  NoteType,
+  TextDirection
+} from '../../components/editor-page/note-frontmatter/note-frontmatter'
 import {
   NoteDetails,
   NoteDetailsAction,
@@ -40,11 +44,11 @@ export const initialState: NoteDetails = {
     deprecatedTagsSyntax: false,
     robots: '',
     lang: 'en',
-    dir: 'ltr',
+    dir: TextDirection.LTR,
     breaks: true,
     GA: '',
     disqus: '',
-    type: '',
+    type: NoteType.DOCUMENT,
     opengraph: new Map<string, string>()
   }
 }
diff --git a/yarn.lock b/yarn.lock
index fbef477993..593aa2b86b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8354,6 +8354,11 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
 
+iso-639-1@2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/iso-639-1/-/iso-639-1-2.1.8.tgz#98fae683960db44cd14cf4ed2a37427e997d8c89"
+  integrity sha512-Ol0R5oepQmWTMrlzSx8giSQ4hQsh2SZI/fsAy+nYc5O+RsYeixy2tsGUYJNadqqoOcbanSbFTqK17PRKpuNCAw==
+
 isobject@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"