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.