Getting Started

Adding Wysimark, the WYSIWYG Markdown Editor, to your React project. Estimated time: 10 minutes

Installation

Add the Wysimark NPM package to your Node project.

The current version of Wysimark supports React. Future versions will support Angular, Vue and plain JavaScript.

If you're using npm:

npm install wysimark

If you're using yarn:

yarn add wysimark

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

For npm:

npm install react react-dom

For yarn:

yarn add react react-dom

Once you've installed Wysimark, import it.

import { Editor, useEditor } from 'wysimark'

Starting with an empty React App that returns nothing.

const App = () => {
  return null
}

Add the Wysimark editor to it:

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.

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.

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.

Congratulations, you can now add a WYSIWYG Markdown Editor to any React app. Your editor supports GitHub Flavored Markdown extensions such as tables and task lists and has built-in hosted image and file uploads.

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.