# Markdown editor

In this tutorial, you will learn how to build **a text editor that stores its data on the SAFE Network**.

The **SAFE Markdown Editor** lets you create and edit Markdown files. The files are encrypted using a symmetric key, which means that only you can read them. Each time you save a file, a new version is stored on the SAFE Network. You can browse through previous versions of your files and compare the difference across versions. This example app demonstrates the usage of [versioned structured data](https://api.safedev.org/low-level-api/structured-data/).

#### Contents

![SAFE Markdown Editor](https://3287240797-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M2iQcySPVDTOOrtj1Mi%2F-M2iQd_zdonbfes7H0XS%2F-M2iQeGrIMravEPzLDwV%2Fsafe-markdown-editor.png?generation=1584548197069325\&alt=media)

## Overview

This tutorial will showcase how to:

* [Fetch file index](https://safenetwork.gitbook.io/safe-dev-tutorials/markdown-editor/fetch-file-index)
* [Create a file](https://safenetwork.gitbook.io/safe-dev-tutorials/markdown-editor/create-a-file)
* [Edit a file](https://safenetwork.gitbook.io/safe-dev-tutorials/markdown-editor/edit-a-file)
* [Save a new version](https://safenetwork.gitbook.io/safe-dev-tutorials/markdown-editor/save-a-new-version)
* [Fetch all versions](https://safenetwork.gitbook.io/safe-dev-tutorials/markdown-editor/fetch-all-versions)

### SAFE APIs

You will learn about the following APIs:

* [Authorization](https://api.safedev.org/auth/)
* [NFS](https://api.safedev.org/nfs/)
* [Structured Data](https://api.safedev.org/low-level-api/structured-data/)
* [Data ID](https://api.safedev.org/low-level-api/data-id/)
* [Cipher Options](https://api.safedev.org/low-level-api/cipher-options/)

#### External libraries

* [React](https://facebook.github.io/react/)
* [React Markdown Editor](https://github.com/JedWatson/react-md-editor)
* [react-diff](https://github.com/cezary/react-diff)

## Source code

[Browse **the source code of the SAFE Markdown Editor** on GitHub](https://github.com/maidsafe/safe_examples/tree/master/markdown_editor)

[create-react-app](https://github.com/facebookincubator/create-react-app) was used as a starting point.

### Live version

You can access the **SAFE Markdown Editor** at [**safe://editor.safedev**](safe://editor.safedev) using [SAFE Browser v0.4.2](https://github.com/joshuef/beaker/releases/tag/v0.4.2).

### Development mode

#### Requirements

**1. SAFE Launcher**

Start [SAFE Launcher v0.10.0](https://github.com/maidsafe/safe_launcher/releases/tag/0.10.0) and log in.

**2. SAFE Browser**

Start [SAFE Browser v0.4.2](https://github.com/joshuef/beaker/releases/tag/v0.4.2).

**3. Node.js**

Make sure you have Node.js v6 (LTS).

```
node --version
```

There are many ways to install Node.js. See [nodejs.org](https://nodejs.org/en/download/) for more info.

#### Setup

**1. Clone this GitHub repository**

```
git clone https://github.com/maidsafe/safe_examples.git
```

If you don't have Git installed, you can download it from [git-scm.com](https://git-scm.com/downloads).

**2. Install the dependencies**

```
cd safe_examples/markdown_editor && npm install
```

**3. Start the app**

```
npm run start
```