Markdown Builder

A dynamic web application for creating Markdown documents with ease. Live demo here.

---

Table of Contents

• General Information
• Technologies Used
• Features
• Screenshots
• Setup
• Usage
• Project Status
• Room for Improvement
• Acknowledgements
• Contact

---

General Information

Markdown Builder is designed to simplify the process of creating, organizing, and exporting Markdown documents. It aims to make Markdown accessible to users of all technical backgrounds by providing:

• A clean and interactive UI.
• Drag-and-drop section reordering.
• Live Markdown previews and quick export options.

Purpose: This project was undertaken to fill the gap between manual Markdown creation and automated tools, allowing for both flexibility and ease of use.

Problem Solved: Markdown Builder removes the need to manually write and debug Markdown syntax, offering a user-friendly interface to speed up content creation.

---

Technologies Used

• HTML5
• CSS3
• JavaScript (ES6+)

---

Features

• Dynamic Section Management: Add headers, text blocks, lists, code blocks, line breaks, and more with a single click.
• Drag-and-Drop Functionality: Reorder sections effortlessly by dragging and dropping them.
• Live Preview: See your Markdown document update in real time.
• Navigation Builder: Automatically generate a table of contents for H2 headers.
• Markdown Export Options: Copy to clipboard or download as a .md file.
• Responsive Design: Fully functional across desktop and tablet devices.

---

Screenshots

Toolbar and Builder Pane

Live Preview Pane

---

Setup

Requirements

• A modern web browser (e.g., Chrome, Firefox, Edge, or Safari).
• Internet connection for live demo, or clone the project locally.

Installation

1. Clone the repository:

   git clone https://github.com/RyanVerWey/Markdown-Builder

2. Open index.html in your preferred browser to launch the application.

Usage

1. Open the application in a web browser.
2. Use the toolbar on the left to add various Markdown sections:
   • Headers (H1-H6)
   • Text blocks
   • Ordered and unordered lists
   • Code blocks with syntax highlighting
   • Line breaks and horizontal rules
3. Edit the content of each section directly in the builder pane.
4. Rearrange sections using drag-and-drop functionality.
5. Click the "Generate Markdown" button to view the final Markdown in the preview pane.
6. Export the Markdown:
   • Copy Markdown: Click the "Copy Markdown" button to copy it to your clipboard.
   • Download Markdown: Click the "Download Markdown" button to save the file as markdown.md.

---

Project Status

The project is currently in progress. While it is fully functional for basic Markdown creation, further enhancements are planned to improve the user experience and add new features.

---

Room for Improvement

Areas for Improvement:

• Expand support for additional Markdown elements such as tables and footnotes.
• Improve mobile responsiveness to accommodate smaller screens.
• Add an undo/redo functionality for easier content management.

TODO:

• Feature to be added: Markdown tables.
• Feature to be added: User authentication to save projects for future editing.
• Improvement to be done: Implement dark mode for better accessibility.

---

Acknowledgements

This project was inspired by the need for an intuitive and accessible Markdown creation tool to aide non developers to help create and refine documentation.

---

Contact

Created by Ryan VerWey. Feel free to reach out with questions, feedback, or collaboration ideas:

• GitHub: Ryan VerWey
• Email: ryan.w.verwey@gmail.com
• For any questions or suggestions, please visit: https://dot.cards/ryanverwey