Inspiration

I write blog posts often, but most editors need internet to work, or they need you to set up a database and a bunch of extra tools just to see how your markdown looks. I wanted something simple. Open a text box, type and see the result right there, on my own computer, no internet needed.

What it does

Rendered Markdown is a small blog editor. You write on the left side and the right side shows you the live preview as you type. Posts are saved by themselves, you don't have to click save every time. Every post can be a draft or published. Only published posts show up on the public blog page. You can also import a .md file you already have, or export any post back out as a clean markdown file.

How I built it

I used Node.js with Express for the backend, and plain JavaScript for the frontend, no framework. For turning markdown into HTML, I used the marked.js library and highlight.js for coloring code blocks in the preview.

The biggest decision was how to store posts. I did not want a database. A database means setup, means something can break, means it's harder to just look at your own data. So I made every post a plain .md file, saved inside a posts/ folder. Each file has two parts: a small block of JSON at the top with the title, status and last updated time, then a line with ===, then the actual markdown text after that. This way, the app can read the metadata fast without loading the whole post, but the file is still basically just a normal markdown file if you open it in any text editor.

Challenges I ran into

Not using a database was the main challenge, not just a design choice. A database gives you things for free, searching, sorting, checking if something already exists. Without it, I had to write that myself. For example, when you import a file, I had to check if a post with that name already exists in the folder before saving, and if it does, add a timestamp so it does not overwrite anything.

Another problem was the file format itself. I needed something that keeps metadata and content together in one file, but still lets someone open the file directly and get real markdown, not some weird custom format. That is why I split it with the === line, it was the simplest way I found to keep both things true at once.

Auto-save was also tricky. I did not want to save the file on every single keystroke, that would be too many writes. So I made it wait until you stop typing for a couple seconds, then save. This took some testing to get the timing right.

What I learned

I learned that skipping a database is not really "easier," it just moves the work somewhere else, from database queries to your own file handling code. I also got a lot more comfortable with how Express handles routes and middleware, and how file uploads work with multer.

What's next for Rendered Markdown

I want to add search that looks through post content too, not just titles. Also tags for organizing posts, and maybe drag and drop for adding images into the attachments folder instead of doing it manually.

Built With

Share this project:

Updates

Submission history