Skip to main content


This website is based on the docusaurus framework, that uses Markdown with JavaScript (JSX). Therefore the content is stored as a mixture mainly containing Markdwon with elements from HTML and from the JavaScript Framework React. The most important and used components are explained below. More information about Markdown in docusaurus can be found here.


For changing the documentation you need a GitHub Account and then you can use the Edit this page Button at the left bottom of every page. This will leads you to an Editor on GitHub, where you can directly edit the page and make a Pull Request afterwards or commit your changes directly, if you have write access.
For advanced usage of chemotion_saurus, you can also clone the repository and push to it, if you have write access. Therefore follow the instructions in the README.
Succesfull changes are directly deployed and went online. You can check GitHub Actions, to see if your changes are succesfully merged in the web page.

New Page#

  • use .mdx as filename ending in GitHub
  • Insert at the top of every page:
id: videos_eln
sidebar_label: Videos
slug: videos_eln
title: Introduction Videos

id: The unique document id. By default, a document id is the name of the document (without the extension) relative to the root docs directory. It can be used in the left TOC.
sidebar_label: Name displayed in the table of content (TOC).
slug: Optional. Defines the last part of the URL.
title: Optional. Prompted on the page.

  • After you have inserted a new page, add its id from the metadata section at the top of the file to the TOC (table of contents) so that it will be visible on the page.



regular buttons with text and icon content#

For creating buttons use a button function and import it in the page. Every button gets a color and can have multiple text elements and icons mixed in its content.
For icon buttons the library Font Awesome is used. Get icons from here: and import them in the page, too. The color palette is from the Infima library.
For example following code snippet...

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faChartBar, faCheck } from '@fortawesome/free-solid-svg-icons'
import {Btn} from '@site/docs/btn.js'
<Btn mixed={[faChartBar, " 1", faCheck]} color={"secondary"}/>


special buttons#

To create a button diffrent from the regular one, e. g. with a different size, you need to use a React button with <button></button> tags.
You can change the size of a button in its style attribute with values in %, pixel (px), rem or em. Common icon sizes inside buttons are xs, sm and lg.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPlus, faShareAlt } from '@fortawesome/free-solid-svg-icons'
<button className={"button button--sm button--success"} style={{padding:"2px", height: "50%", width: "50%"}}>
<FontAwesomeIcon icon={faPlus} size="lg"/>
<button className={"button button--sm button--success"} style={{padding:"2px", height: "40px", width: "40px"}}>
<FontAwesomeIcon icon={faPlus} size="sm"/>

Downloadable Files#

If you want to provide one or multiple file(s) to download directly form the manual, then upload them to the files folder in GitHub and insert a Downlaod Button with the filepath(s) - separated by comma - in files and the button text in text :

import { DownloadBtn } from '@site/docs/download_files.js'
<p><DownloadBtn files={['/chemotionsaurus/files/template%20_sample_import.xlsx, docker-compose.yml']} text={"Download XLSX Template here "}/></p>


To create a heading, add number signs # in front of a word or phrase. The number of # you use should correspond to the heading level. A lot of # indicates a low level.


Images can be inserted as Markdown or as HTML for special configurations (resizing etc.) or if the image is inside an HTML tag:

![Management Level Button](/img/mgmt_level_btn.png)
<img src={"/chemotionsaurus/img/mgmt_level_btn.png"} width={"20px"} alt={"Management Level Button"}/>

There should be no /static in src.

Info Boxes#

Highlighted info boxes (like in the eln intro page) with further informations are called "Admonitions" in docusaurus. See here.

Line Breaks#

Insert two white spaces at the end of the line.


[alt tag](link)




link to another page in the docu with the slug or if not available the id as anchor:


link to another chapter in the same page with the last segement of the URL:
e. g. URL: #toc

[link to TOC](#toc)



random number with a dot

1. text
1. text1
1. text2
  1. text
  2. text1
  3. text2


* text
- text1
  • text
  • text1


| header 1 | header 2 |
| field 1 | field 2 |

Text Formatting#


highlight elements, e. g. UI elements

`Collection Bar`


The TOC on the left of every documentation page must be manually updated via sidebars.js on GitHub. If you have inserted a new page or want to change the order, change it here.


Currently versioning is not enabled for the ELN part of the documentation, but this could be quickly changed in the future. To create a new documentation version based on the latest content in the docs/eln directory follow these steps:

  1. Pull the GitHub repo of chemotion_saurus locally. This is necessary, because a lot of files and folders through npm will be added.
  2. In docusaurus.config.js: Change the current version to the new version and add the former current version to the other versions below.
  3. in sidebarsELN.js: Add the new version to the Versions category.
  4. After the first three steps, you can create a new version with npm run docusaurus docs:version:elnID <former version number>, e. g. npm run docusaurus docs:version:elnID 0.9 The version number should be the last version, but not the latest/current. The latest version will be stored in docs/eln folder and should be the version, that is currently under construction. The npm run docusaurus docs:version ... creates a new folder with the version number, that should not be edited anymore. Nevertheless it is possible to edit it.
    For example: you are planning a new version 0.10, that is already the current version of the code. Then you probably have a version 0.8 and a current version with the label 0.9 (but not with a versioned folder 0.9) in docusaurus. Now you create a version 0.9 through the npm command. Your current version gets 0.10 and is stored in docs/eln and you will have one more versioned folders: 0.9 and 0.8.
    If you want to version the repository part of the documenation, then add the lastVersion and versions keys to the "@docusaurus/plugin-content-docs" plugin with the id: "repoID" in docusaurus.config.js and follow the steps above.
  5. If versioning is enabled, you have to use two different TOCs for each part of the documenation, instead of one TOC. Use sidebarsELN.js for the ELN part and sidebarsREPO.js for the Repository part instead of sidebars.js for all parts. Before that, the different TOCs needs probably been updated.