Markdown Editor Application in React Using Context APIs and Hooks

In this project, we will create a markdown editor with React that will allow the user to type a plain markdown text as input and convert it to HTML output. We’ll build a single-page application that is divided into two sections, one for markdown input and the other for input converted into HTML.

Our application will have the following main features:

• Formatting that is displayed at a runtime side by side, which means as the user types something, its output is displayed alongside in the output section.

• A toggle button on top lets the users decide whether they want the UI layout in a left-right or top-down fashion.

• A cheat sheet section that helps users write markdown text.

We’ll use React’s markdown-it library to convert markdown text to HTML and render it to the DOM. Also, we’ll use the Context API to share data between components to avoid using props and Hooks to fetch and reuse stateful logic from other components.