Skip to main content

Introduction

This document provides an overview of the Markdown editor project. It is a web-based application built with React, Vite, and Tailwind CSS that allows users to write and preview Markdown-formatted text.

Key Technologies​

  • React: A JavaScript library for building user interfaces.
  • Vite: A fast build tool and development server for modern web projects.
  • Tailwind CSS: A utility-first CSS framework for creating custom designs.
  • TypeScript: A typed superset of JavaScript that compiles to plain JavaScript.
  • Monaco Editor: The code editor that powers VS Code, used here for Markdown editing.
  • React Markdown: A component to render Markdown as HTML.
  • Shadcn/ui: A collection of re-usable UI components.

Project Structure​

The project is organized as follows:

  • public/: Contains static assets that are served directly to the browser.
  • src/: Contains the main application source code.
    • components/: Contains reusable UI components.
      • ui/: Contains the base UI components from Shadcn/ui.
      • Editor.tsx: The main Markdown editor component.
      • Preview.tsx: The component that renders the Markdown preview.
      • ThemeToggle.tsx: A button to toggle between light and dark themes.
      • Toolbar.tsx: The toolbar for the editor.
    • lib/: Contains utility functions.
    • App.tsx: The main application component.
    • main.tsx: The entry point of the application.

Available Scripts​

The following scripts are available in the package.json file:

  • dev: Starts the development server.
  • build: Builds the application for production.
  • lint: Lints the code using Biome and TypeScript.
  • format: Formats the code using Biome.
  • preview: Starts a local server to preview the production build.