# Getting Started

## Installation

Add the Wysimark NPM package to your Node project.

{% hint style="info" %}
The current version of Wysimark supports React. Future versions will support Angular, Vue and plain JavaScript.
{% endhint %}

If you're using npm:

```
npm install wysimark
```

If you're using yarn:

```bash
yarn add wysimark
```

If this is a new project, make sure React is installed.

For npm:

```bash
npm install react react-dom
```

For yarn:

```bash
yarn add react react-dom
```

Once you've installed Wysimark, import it.

```javascript
import { Editor, useEditor } from 'wysimark'
```

Starting with an empty React App that returns nothing.

```javascript
const App = () => {
  return null
}
```

Add the Wysimark editor to it:

```javascript
const App = () => {
  const editor = useEditor()
  return <Editor editor={editor} />
}
```

To make the editor useful, you need a way to get and set the markdown in the editor.

Set the initial markdown by providing an argument to the `useEditor` hook.

```javascript
const App = () => {
  const editor = useEditor("# Heading\n\nSome text.")
  return <Editor editor={editor} />
}
```

You can now get existing content into the editor.

To get the markdown out of the editor, call the `getMarkdown` method from the `editor` object. In this example, we add a `Submit` button that logs markdown to the console.

```javascript
const App = () => {
  const editor = useEditor("# Heading\n\nSome text.")
  
  // log markdown to the console
  const save = () => {
    const markdown = editor.getMarkdown()
    console.log(markdown)
  }
  
  return <div>
    <Editor editor={editor} />
    <button onClick={save}>Submit</button>
  </div>
}
```

In a real app, this is where you save the markdown text to the database.

{% hint style="success" %}
Congratulations, you can now add a WYSIWYG Markdown Editor to any React app. Your editor supports [GitHub Flavored Markdown extensions](https://github.github.com/gfm/) such as tables and task lists and has built-in hosted image and file uploads.
{% endhint %}

{% hint style="info" %}
Important: Image and file uploads are temporary until you set up an upload folder. Before going to production, sign up for a free account and get 1GB of image and file upload space. Alternatively, if you don't need image uploads, you can disable them.
{% endhint %}