Codex - Real-Time Markdown Previewer

Codex is a lightweight, real-time web-based Markdown previewer and editor. As you type in the editor, it automatically converts your Markdown into rendered HTML on the fly. It features line numbers, debounced input handling, and syntax highlighting.

Features

• Real-Time Preview: Instantly see your rendered Markdown as you type.
• Dynamic Line Numbering: The editor includes synchronized line numbers that track your cursor position and scrolling.
• Debounced Updates: Optimized rendering performance through debounced input actions to prevent unnecessary rendering.
• Keyboard Shortcuts: Tab support for smooth writing.
• Standard Markdown Support: Powered by marked, supporting standard Markdown and GitHub Flavored Markdown (GFM).

Tech Stack

• Frontend: Vanilla JavaScript (ES6+), HTML5, CSS3, DOM API, fetch.
• Backend: Node.js, Express.js.
• Markdown Parser: marked library.

Getting Started

Prerequisites

• Node.js installed on your machine.
• pnpm or npm package manager.

Installation

1. Clone the repository and navigate into the project directory:

   cd Codex

2. Install the necessary dependencies:

   npm run install:pnpm
   # or simply `npm install`

3. Start the application:

   • For development (using nodemon for hot-reloading):

     npm run dev

   • For production:

     npm start

4. Open your browser and navigate to:

   http://localhost:5000
   

Project Structure

• index.html: The main markup structure.
• client.js: Frontend logic, handling the editor, fetch requests, line numbering, and preview updates.
• style.css: Application styling.
• server.js: Express backend that serves static files and provides the /api/convert endpoint.
• package.json: Project metadata and dependencies.