Publishing markdown and csv editor tool called “You’ve got a friend in md”

Publishing editor tool

I’ve been building a small tool called You’ve got a friend in md — a local WYSIWYG editor for browsing and editing folders of Markdown and CSV files. Files default to locked (read-only) and you explicitly unlock one before editing.

This week I finally got around to publishing it
properly, and the process surfaced a few lessons worth writing down.

Here is the Git link: https://github.com/appare9999/friend-in-md

Why I created this tool

Markdown is an excellent format for AI to read and generate. Because of this, I created a tool that makes it possible to edit and view Markdown files directly in the browser, while keeping the original Markdown files as the source of truth.

The name “You’ve Got a Friend in md” was inspired by the ending song from Toy Story, “You’ve Got a Friend in Me.” I chose the name with the hope that this tool would help people become friends with Markdown.

What you can do with it

The features of this tool are as follows:

• WYSIWYG editing
  • powered by Milkdown/Crepe
• CSV editing
  • CSV files show up in the same folder tree as an editable spreadsheet grid.
• Full-text search
  • searches file names and contents across every markdown and CSV file under the folder, however deeply nested. Click a result to jump straight to that file.
• Live diagrams
  • fenced ```mermaid and ```plantuml blocks render as diagrams inline, each with its own fullscreen, download PNG, and (for Mermaid) download SVG controls.
• Insert image from folder
  • a picker scoped to your notes folder lets you browse into subfolders and insert an image at the cursor, keeping a normal relative path in the markdown source.

Getting started

Running the following command will start the tool and open it in your browser.

$ npx friend-in-md

Once the browser opens, you will see a screen like the one shown below. Clicking the area marked in red allows you to select a folder.

After selecting a folder, you will see a screen like the one below where you can browse your Markdown files. Click the “Unlock” button highlighted with a red circle to edit the Markdown files directly in your browser.

What I Learned from Building This Tool

Through building this tool, I learned several things: how to publish a project on Git, how to explain my work in English as a Japanese developer, and how to design a tool that is both simple and easy to use.

Most importantly, I was able to create a tool that I genuinely enjoy using myself.

A little side note

By the way, these characters are original characters I created. The one wearing a spacesuit is Spicy Lemon, and the one dressed as a cowboy is Reston. This image was created with Gemini.

And here’s an original illustration I made myself.