DEV Community

MD Taseen Khan
MD Taseen Khan

Posted on • Originally published at reactjsexample.com on

React Markdown Editor with real-time preview

Markdown Editor with React and Tailwind CSS

React Markdown Editor with real-time preview

This Markdown editor built with React and Tailwind CSS allows users to write, edit, and preview markdown in real-time. It features a split view with an editor and a previewer.

Project Structure

The project consists of the following main components:

1. App Component (App.tsx)

  • Manages the state for the current tab (Editor/Previewer) and the markdown code.
  • Uses the Editor, Head, and Previewer components.

2. Editor Component (Editor.tsx)

  • Renders a textarea for markdown editing.
  • Communicates with the parent App component to update the markdown code.

3. Head Component (Head.tsx)

  • Provides the header with tab-switching functionality between Editor and Previewer.
  • Manages the current active tab and communicates with the parent App component.

4. Previewer Component (Previewer.tsx)

  • Renders a preview of the markdown using ReactMarkdown and remark-gfm for GitHub-flavored markdown.

Getting Started

  1. Clone the repository.
  2. Install dependencies with npm install.
  3. Run the app with npm run start.

Technologies Used

  • React
  • Tailwind CSS
  • ReactMarkdown
  • remark-gfm (GitHub-flavored markdown)

Preview

React Markdown Editor with real-time preview React Markdown Editor with real-time preview React Markdown Editor with real-time preview React Markdown Editor with real-time preview

GitHub

View Github

Top comments (0)