diff --git a/package.json b/package.json
index 1f94c49de8..ec6715c92a 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "@typescript-eslint/parser": "4.22.0",
     "abcjs": "6.0.0-beta.32",
     "bootstrap": "4.6.0",
+
     "codemirror": "5.60.0",
     "copy-webpack-plugin": "6.4.1",
     "d3-graphviz": "3.2.0",
@@ -56,6 +57,7 @@
     "i18next": "20.2.1",
     "i18next-browser-languagedetector": "6.1.0",
     "i18next-http-backend": "1.2.1",
+    "iso-639-1": "2.1.8",
     "js-yaml": "4.0.0",
     "katex": "0.13.2",
     "luxon": "1.26.0",
diff --git a/public/locales/en.json b/public/locales/en.json
index 808582e2e4..b2a7f5d788 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -339,26 +339,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 7bc4c254d1..9c132bd065 100644
--- a/src/components/editor-page/document-bar/share/share-modal.tsx
+++ b/src/components/editor-page/document-bar/share/share-modal.tsx
@@ -45,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..d8d996a2b9
--- /dev/null
+++ b/src/components/editor-page/metadata-editor/breaks-metadata-input.tsx
@@ -0,0 +1,46 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { useCallback } from 'react'
+import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import { MetadataInputFieldProps } from './metadata-editor'
+
+enum ButtonState {
+  ON = 1,
+  OFF = 0
+}
+
+export const BreaksMetadataInput: React.FC<MetadataInputFieldProps<boolean>> = ({ frontmatterKey, content, onContentChange }) => {
+  const { t } = useTranslation()
+
+  const toggleButtonClick = useCallback((value: ButtonState) => {
+    onContentChange({ breaks: value === ButtonState.ON })
+  }, [onContentChange])
+
+  return (
+    <ToggleButtonGroup
+      type="radio"
+      name={ frontmatterKey }
+      id={ frontmatterKey }
+      value={ content ? ButtonState.ON : ButtonState.OFF }
+      className={ 'd-block' }
+      onChange={ toggleButtonClick }>
+      <ToggleButton
+        value={ ButtonState.ON }
+        variant="outline-secondary"
+        title={ t('editor.modal.metadataEditor.labels.breaksOn') }>
+        <Trans i18nKey={ 'editor.modal.metadataEditor.labels.breaksOn' }/>
+      </ToggleButton>
+      <ToggleButton
+        value={ ButtonState.OFF }
+        variant="outline-secondary"
+        title={ t('editor.modal.metadataEditor.labels.breaksOff') }>
+        <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..968d81dd3b
--- /dev/null
+++ b/src/components/editor-page/metadata-editor/datalist-metadata-input.tsx
@@ -0,0 +1,39 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { useCallback } from 'react'
+import { MetadataInputFieldProps, SelectMetadataOptions } from './metadata-editor'
+import { Dropdown, DropdownButton } from 'react-bootstrap'
+
+export const DatalistMetadataInput: React.FC<MetadataInputFieldProps<string> & SelectMetadataOptions<string>> = ({ frontmatterKey, content, onContentChange, options }) => {
+  const onSelect = useCallback((eventKey: string | null) => {
+    if (eventKey === null) {
+      return
+    }
+    onContentChange({ [frontmatterKey]: eventKey })
+  }, [frontmatterKey, onContentChange])
+
+  return (
+    <DropdownButton onSelect={ onSelect } id={ frontmatterKey } title={ content }>
+      {
+        options.map((option) => <Dropdown.Item eventKey={ option } key={ option }>{ option }</Dropdown.Item>)
+      }
+    </DropdownButton>
+  )
+}
+/*
+
+ <!--<Fragment>
+ <input list={ frontmatterKey } onChange={ onChange } value={ content } className={ 'form-control' }/>
+ <datalist id={ frontmatterKey }>
+ { options.map(option => (
+ <option key={ 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..e25e84be21
--- /dev/null
+++ b/src/components/editor-page/metadata-editor/metadata-editor.tsx
@@ -0,0 +1,119 @@
+/*
+ * 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 { replaceFrontmatterInMarkdownContentAction } from '../../../redux/note-details/methods'
+import { CommonModal } from '../../common/modals/common-modal'
+import { NoteType, RawNoteFrontmatter } 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> {
+  content: T
+  frontmatterKey: keyof RawNoteFrontmatter
+  onContentChange: (frontmatter: RawNoteFrontmatter) => 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 [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 updateFrontmatter = useCallback((frontmatter: RawNoteFrontmatter): void => {
+    replaceFrontmatterInMarkdownContentAction(frontmatter)
+  }, [])
+
+  return (
+    <CommonModal
+      size='lg'
+      show={ show }
+      onHide={ onHide }
+      closeButton={ true }
+      titleI18nKey={ 'editor.modal.metadataEditor.title' }>
+      <Modal.Body>
+        <Row>
+          <Col lg={ 6 }>
+            <InputLabel id={ 'title' } label={ t('editor.modal.metadataEditor.labels.title') }>
+              <StringMetadataInput frontmatterKey={ 'title' } content={ yamlMetadata.title }
+                                   onContentChange={ updateFrontmatter }/>
+            </InputLabel>
+            <InputLabel id={ 'type' } label={ t('editor.modal.metadataEditor.labels.type') }>
+              <DatalistMetadataInput frontmatterKey={ 'type' } options={ Object.values(NoteType) }
+                                     content={ yamlMetadata.type }
+                                     onContentChange={ updateFrontmatter }/>
+            </InputLabel>
+            <InputLabel id={ 'dir' } label={ t('editor.modal.metadataEditor.labels.dir') }>
+              <TextDirectionMetadataInput frontmatterKey={ 'dir' } content={ yamlMetadata.dir }
+                                          onContentChange={ updateFrontmatter }/>
+            </InputLabel>
+            <InputLabel id={ 'description' } label={ t('editor.modal.metadataEditor.labels.description') }>
+              <StringMetadataTextarea frontmatterKey={ 'description' } content={ yamlMetadata.description }
+                                      onContentChange={ updateFrontmatter }/>
+            </InputLabel>
+            <InputLabel id={ 'disqus' } label={ t('editor.modal.metadataEditor.labels.disqus') }>
+              <StringMetadataInput frontmatterKey={ 'disqus' } content={ yamlMetadata.disqus }
+                                   onContentChange={ updateFrontmatter }/>
+            </InputLabel>
+          </Col>
+          <Col lg={ 6 }>
+            <InputLabel id={ 'lang' } label={ t('editor.modal.metadataEditor.labels.lang') }>
+              <DatalistMetadataInput frontmatterKey={ 'lang' } options={ ISO.getAllCodes() }
+                                     content={ yamlMetadata.lang }
+                                     onContentChange={ updateFrontmatter }/>
+            </InputLabel>
+            <InputLabel id={ 'robots' } label={ t('editor.modal.metadataEditor.labels.robots') }>
+              <StringMetadataInput frontmatterKey={ 'robots' } content={ yamlMetadata.robots }
+                                   onContentChange={ updateFrontmatter }/>
+            </InputLabel>
+            <InputLabel id={ 'breaks' } label={ t('editor.modal.metadataEditor.labels.breaks') }>
+              <BreaksMetadataInput frontmatterKey={ 'breaks' } content={ yamlMetadata.breaks }
+                                   onContentChange={ updateFrontmatter }/>
+            </InputLabel>
+            <InputLabel id={ 'tags' } label={ t('editor.modal.metadataEditor.labels.tags') }>
+              <TagsMetadataInput frontmatterKey={ 'tags' } content={ yamlMetadata.tags }
+                                 onContentChange={ updateFrontmatter }/>
+            </InputLabel>
+            <InputLabel id={ 'GA' } label={ t('editor.modal.metadataEditor.labels.GA') }>
+              <StringMetadataInput frontmatterKey={ 'GA' } content={ yamlMetadata.GA }
+                                   onContentChange={ updateFrontmatter }/>
+            </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..aa684a472d
--- /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>> = ({ content, onContentChange, frontmatterKey }) => {
+  const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    onContentChange({ [frontmatterKey]: event.currentTarget.value })
+  }, [frontmatterKey, onContentChange])
+
+  return (
+    <input
+      id={ frontmatterKey }
+      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..7a661e9812
--- /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>> = ({ frontmatterKey, content, onContentChange }) => {
+  const onChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    onContentChange({ [frontmatterKey]: event.currentTarget.value })
+  }, [frontmatterKey, onContentChange])
+
+  return (
+    <textarea
+      id={ frontmatterKey }
+      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..737d7eb181
--- /dev/null
+++ b/src/components/editor-page/metadata-editor/tags-metadata-input.tsx
@@ -0,0 +1,62 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { Fragment, useCallback, useMemo, 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[]>> = ({ frontmatterKey, content, onContentChange }) => {
+
+  const [newTag, setNewTag] = useState<string>('')
+
+  const addTag = useCallback(() => {
+    if (!/^\s*$/.test(newTag)) {
+      onContentChange({ tags: [...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({ 'tags': content.filter(tag => tag !== clickedTag) })
+  }, [content, onContentChange])
+
+  const tags = useMemo(() => {
+    return content.map((tag, index) => {
+      return (
+        <div className='rounded-pill mr-1 px-2 bg-primary tag-bubble' key={ index }>
+          <span className={ 'user-select-none' }>{ tag }</span>
+          <ForkAwesomeIcon icon={ 'times' } className='pl-1 cursor-pointer' onClick={ () => dismissTag(tag) }/>
+        </div>
+      )
+    })
+  }, [content, dismissTag])
+
+  return (
+    <Fragment>
+      <div className='d-flex flex-row mb-2 mt-1 overflow-x-scroll'>
+        { tags }
+      </div>
+      <input
+        type="text"
+        id={ frontmatterKey }
+        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..bf078a3d7f
--- /dev/null
+++ b/src/components/editor-page/metadata-editor/text-direction-metadata-input.tsx
@@ -0,0 +1,48 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { useCallback } from 'react'
+import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
+import { MetadataInputFieldProps } from './metadata-editor'
+import { NoteTextDirection } from '../note-frontmatter/note-frontmatter'
+
+
+export const TextDirectionMetadataInput: React.FC<MetadataInputFieldProps<NoteTextDirection>> = ({ frontmatterKey, content, onContentChange }) => {
+  const { t } = useTranslation()
+
+  const toggleButtonSelect = useCallback((value: NoteTextDirection) => {
+    onContentChange({ dir: value })
+  }, [onContentChange])
+
+  return (
+    <ToggleButtonGroup
+      className={ 'd-block' }
+      type="radio"
+      name={ frontmatterKey }
+      id={ frontmatterKey }
+      value={ content }
+      onChange={ toggleButtonSelect }>
+      <ToggleButton
+        value={ NoteTextDirection.LTR }
+        variant="outline-secondary"
+        title={ t('editor.modal.metadataEditor.labels.LTR') }>
+        <ForkAwesomeIcon icon={ 'align-left' }/>
+        &nbsp;
+        <Trans i18nKey={ 'editor.modal.metadataEditor.labels.LTR' }/>
+      </ToggleButton>
+      <ToggleButton
+        value={ NoteTextDirection.RTL }
+        variant="outline-secondary"
+        title={ t('editor.modal.metadataEditor.labels.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 9c1bc80c18..bd27680f4f 100644
--- a/src/components/editor-page/note-frontmatter/note-frontmatter.ts
+++ b/src/components/editor-page/note-frontmatter/note-frontmatter.ts
@@ -7,18 +7,18 @@
 // import { RevealOptions } from 'reveal.js'
 
 export interface RawNoteFrontmatter {
-  title: string | undefined
-  description: string | undefined
-  tags: string | string[] | undefined
-  robots: string | undefined
-  lang: string | undefined
-  dir: string | undefined
-  breaks: boolean | undefined
-  GA: string | undefined
-  disqus: string | undefined
-  type: string | undefined
-  slideOptions: unknown
-  opengraph: { [key: string]: string } | null
+  title?: string
+  description?: string
+  tags?: string | string[]
+  robots?: string
+  lang?: string
+  dir?: string
+  breaks?: boolean
+  GA?: string
+  disqus?: string
+  type?: string
+  slideOptions?: unknown
+  opengraph?: { [key: string]: string }
 }
 
 export const ISO6391 = ['aa', 'ab', 'af', 'am', 'ar', 'ar-ae', 'ar-bh', 'ar-dz', 'ar-eg', 'ar-iq', 'ar-jo', 'ar-kw',
@@ -58,7 +58,7 @@ export class NoteFrontmatter {
   disqus: string
   type: NoteType
   // slideOptions: RevealOptions
-  opengraph: Map<string, string>
+  opengraph: { [key: string]: string }
 
   constructor(rawData: RawNoteFrontmatter) {
     this.title = rawData.title ?? ''
@@ -88,6 +88,6 @@ export class NoteFrontmatter {
       this.tags = []
       this.deprecatedTagsSyntax = false
     }
-    this.opengraph = rawData?.opengraph ? new Map<string, string>(Object.entries(rawData.opengraph)) : new Map<string, string>()
+    this.opengraph = rawData?.opengraph ? rawData.opengraph : {}
   }
 }
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/methods.ts b/src/redux/note-details/methods.ts
index ec42f8b618..c91a632d42 100644
--- a/src/redux/note-details/methods.ts
+++ b/src/redux/note-details/methods.ts
@@ -6,10 +6,11 @@
 
 import { store } from '..'
 import { Note } from '../../api/notes'
-import { NoteFrontmatter } from '../../components/editor-page/note-frontmatter/note-frontmatter'
+import { NoteFrontmatter, RawNoteFrontmatter } from '../../components/editor-page/note-frontmatter/note-frontmatter'
 import { initialState } from './reducers'
 import {
   NoteDetailsActionType,
+  ReplaceFrontmatterInMarkdownContentAction,
   SetCheckboxInMarkdownContentAction,
   SetNoteDetailsAction,
   SetNoteDetailsFromServerAction,
@@ -24,6 +25,13 @@ export const setNoteMarkdownContent = (content: string): void => {
   } as SetNoteDetailsAction)
 }
 
+export const replaceFrontmatterInMarkdownContentAction = (frontmatter: RawNoteFrontmatter): void => {
+  store.dispatch({
+    type: NoteDetailsActionType.REPLACE_FRONTMATTER_IN_MARKDOWN_CONTENT,
+    frontmatter
+  } as ReplaceFrontmatterInMarkdownContentAction)
+}
+
 export const setNoteDataFromServer = (apiResponse: Note): void => {
   store.dispatch({
     type: NoteDetailsActionType.SET_NOTE_DATA_FROM_SERVER,
diff --git a/src/redux/note-details/reducers.ts b/src/redux/note-details/reducers.ts
index 6b75fa21d8..f4d09e2ba2 100644
--- a/src/redux/note-details/reducers.ts
+++ b/src/redux/note-details/reducers.ts
@@ -10,18 +10,21 @@ import { Note } from '../../api/notes'
 import {
   NoteFrontmatter,
   NoteTextDirection,
-  NoteType
+  NoteType,
+  RawNoteFrontmatter
 } from '../../components/editor-page/note-frontmatter/note-frontmatter'
 import {
   NoteDetails,
   NoteDetailsAction,
   NoteDetailsActionType,
+  ReplaceFrontmatterInMarkdownContentAction,
   SetCheckboxInMarkdownContentAction,
   SetNoteDetailsAction,
   SetNoteDetailsFromServerAction,
   SetNoteFrontmatterFromRenderingAction,
   UpdateNoteTitleByFirstHeadingAction
 } from './types'
+import yaml from 'js-yaml'
 
 export const initialState: NoteDetails = {
   markdownContent: '',
@@ -49,7 +52,7 @@ export const initialState: NoteDetails = {
     GA: '',
     disqus: '',
     type: NoteType.DOCUMENT,
-    opengraph: new Map<string, string>()
+    opengraph: {}
   }
 }
 
@@ -60,6 +63,11 @@ export const NoteDetailsReducer: Reducer<NoteDetails, NoteDetailsAction> = (stat
         ...state,
         markdownContent: (action as SetNoteDetailsAction).content
       }
+    case NoteDetailsActionType.REPLACE_FRONTMATTER_IN_MARKDOWN_CONTENT:
+      return {
+        ...state,
+        markdownContent: replaceFrontmatterInMarkdownContent(state.markdownContent, (action as ReplaceFrontmatterInMarkdownContentAction).frontmatter)
+      }
     case NoteDetailsActionType.UPDATE_NOTE_TITLE_BY_FIRST_HEADING:
       return {
         ...state,
@@ -88,6 +96,34 @@ export const NoteDetailsReducer: Reducer<NoteDetails, NoteDetailsAction> = (stat
   }
 }
 
+const replaceFrontmatterInMarkdownContent = (markdownContent: string, newFrontmatterValues: RawNoteFrontmatter): string => {
+  const lines = markdownContent.split('\n')
+  let frontMatterEndIndex: number | undefined = undefined
+
+  if (lines[0] === '---') {
+    for (let lineIndex = 1; lineIndex < lines.length; lineIndex += 1) {
+      if (lines[lineIndex] === '---') {
+        frontMatterEndIndex = lineIndex
+        break
+      }
+    }
+  }
+
+  let oldFrontmatter: RawNoteFrontmatter | undefined
+  if (frontMatterEndIndex === undefined) {
+    oldFrontmatter = {}
+  } else {
+    const oldFrontmatterLines = lines.filter((value, index) => index > 0 && index < (frontMatterEndIndex as number))
+    oldFrontmatter = yaml.load(oldFrontmatterLines.join('\n')) as RawNoteFrontmatter
+  }
+
+  const newFrontmatter = Object.assign(oldFrontmatter, newFrontmatterValues)
+  const markdownContentWithoutFrontmatter = lines.filter((value, index) => index > (frontMatterEndIndex as number))
+  console.log(newFrontmatter)
+
+  return `---\n${ yaml.dump(newFrontmatter) }---\n${ markdownContentWithoutFrontmatter.join('\n') }`
+}
+
 const TASK_REGEX = /(\s*[-*] )(\[[ xX]])( .*)/
 const setCheckboxInMarkdownContent = (markdownContent: string, lineInMarkdown: number, checked: boolean): string => {
   const lines = markdownContent.split('\n')
@@ -104,8 +140,8 @@ const setCheckboxInMarkdownContent = (markdownContent: string, lineInMarkdown: n
 const generateNoteTitle = (frontmatter: NoteFrontmatter, firstHeading?: string) => {
   if (frontmatter?.title && frontmatter?.title !== '') {
     return frontmatter.title.trim()
-  } else if (frontmatter?.opengraph && frontmatter?.opengraph.get('title') && frontmatter?.opengraph.get('title') !== '') {
-    return (frontmatter?.opengraph.get('title') ?? firstHeading ?? '').trim()
+  } else if (frontmatter?.opengraph['title'] !== '') {
+    return (frontmatter?.opengraph['title'] ?? firstHeading ?? '').trim()
   } else {
     return (firstHeading ?? firstHeading ?? '').trim()
   }
diff --git a/src/redux/note-details/types.ts b/src/redux/note-details/types.ts
index 313c50202c..1a85574f8b 100644
--- a/src/redux/note-details/types.ts
+++ b/src/redux/note-details/types.ts
@@ -7,14 +7,15 @@
 import { DateTime } from 'luxon'
 import { Action } from 'redux'
 import { Note } from '../../api/notes'
-import { NoteFrontmatter } from '../../components/editor-page/note-frontmatter/note-frontmatter'
+import { NoteFrontmatter, RawNoteFrontmatter } from '../../components/editor-page/note-frontmatter/note-frontmatter'
 
 export enum NoteDetailsActionType {
   SET_DOCUMENT_CONTENT = 'note-details/set',
   SET_NOTE_DATA_FROM_SERVER = 'note-details/data/server/set',
   SET_NOTE_FRONTMATTER = 'note-details/frontmatter/set',
   UPDATE_NOTE_TITLE_BY_FIRST_HEADING = 'note-details/update-note-title-by-first-heading',
-  SET_CHECKBOX_IN_MARKDOWN_CONTENT = 'note-details/toggle-checkbox-in-markdown-content'
+  SET_CHECKBOX_IN_MARKDOWN_CONTENT = 'note-details/toggle-checkbox-in-markdown-content',
+  REPLACE_FRONTMATTER_IN_MARKDOWN_CONTENT = 'note-details/replace-frontmatter-in-markdown-content'
 }
 
 interface LastChange {
@@ -45,6 +46,11 @@ export interface SetNoteDetailsAction extends NoteDetailsAction {
   content: string
 }
 
+export interface ReplaceFrontmatterInMarkdownContentAction extends NoteDetailsAction {
+  type: NoteDetailsActionType.REPLACE_FRONTMATTER_IN_MARKDOWN_CONTENT
+  frontmatter: RawNoteFrontmatter
+}
+
 export interface SetNoteDetailsFromServerAction extends NoteDetailsAction {
   type: NoteDetailsActionType.SET_NOTE_DATA_FROM_SERVER
   note: Note
diff --git a/yarn.lock b/yarn.lock
index 142d97ba9d..9e619a1532 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8384,6 +8384,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"