M2H
By
@vedasm
- 4 Devlogs
- 6 Total hours
A distraction-free Markdown editor that converts your writing to clean HTML in real-time.
Ship #1
Pending review
I had built M2H (Markdown to HTML), a full-stack markdown editor and blog converter app. It enables users to write in Markdown with all the formatting available on the toolbar and view a clean HTML rendered in real time.
Features: -
- Instant HTML Rendering as users type in.
- Server-side XSS prevention by using bleach.
- API protection using Flask-Limiter
- Secure JWT Based authentication
- Clean Split-view panel, dark/light modes, along with standard keyboard shortcuts
The main challenge for me was setting up seamless sync btw the markdown and the live preview panel in the server-side without causing any lag or errors. Also implementing safe authentication.
How to Use:
- Go to the live website
- Register an account and log in to explore
- Use the toolbar and keyboard shortcuts
- Change btw light and dark themes
- Test by export your markdown into a live html
Authentication, Security, and Editor Enhancements
Authentication & Session Management
- A new interface allows user to securely register and login to M2H.
- Authentication is handled via JSON Web Tokens (JWT) stored at local-storage, making sure user sessions are secure.
- The Nav Bar have been updated with interaction based on whether the user is logged in or not.
Enhanced Security & Backend
-
HTMLscrubbing viableachto prevent XSS attacks - Added
flask-limiterand CSP/HSTS for API protection
Deployment
- The app is now deployed and accessible live on vercel. Check the App
UI & Markdown Upgrades
UI Refinement and Alignment Fixes
- Fixed padding and margin inconsistencies between the editor and toolbar.
- Changed the layout to be balanced and more comfortable for dual writing and previewing.
- Improved spacing to make the editor look good in light and dark modes, reducing eyestrain.
New Formating Toolbar
- Bold, italicise, or strike-through text without the hassle of syntax typing.
- Now you can create document hierarchy and quickly highlight snippets with new Heading, quotes, etc.
- Organize ur throughts with the new bulleted and numbered list option all with one click.
Building Live Preview
- Added a synchronized real-time preview rendering so
MDFormats immediately get a previewHTMLContent - Automatic ID Assignment for headings such as
# This is HIwhich render with anchor tags like{#17}automatically. - Implemented real-time line, word, character and counts alongside an estimated reading time.
- The Document progress automatically store in localStorage to prevent data loss.
Building M2H UI
- Developed a clean split view layout with line numbering, a real-time input canvas for MD, and a synchronized live preview panel, which will be implemented in a feature.
- Added quick buttons to copy HTML code, download the code, clean this MD, and finally switch between themes.
- Added a line, word, character counter and estimated reading time (future backend implementation is required)
