MiaoYan - A Note Application More Suitable for Engineers

Categories: Creation

TL;DR

Github:https://github.com/tw93/MiaoYan

MiaoYan was first introduced to the public on V2EX 3 months ago. I have been slowly developing it since 2020. In June this year, I felt it was ready for everyone to use, so I released it. During this period, a total of 20 versions were released, 138 Issues were resolved, 2.2K Stars were gained, 1.7K Twitter followers were gained, and I made many pure technical friends. Now there are about 7K users, and 33 “Miao friends” actively feed the cat.

This article mainly wants to introduce the feature list of MiaoYan to everyone, why it is more suitable for engineers, and also includes some personal thoughts on the product itself. For the effect display, see the section at the end of the article.

Feature List

Editor Aspect

  1. Native code editor experience, fine-tuned more than a dozen markdown syntax highlight colors, including spacing between text, light/dark mode.
  2. VSCode level document formatting, using prettier to automatically format markdown documents, spaces/empty lines/serial numbers are handled with one click.
  3. Native Swift5 development, compared to most web-shell note applications on the market, the performance is much lighter and faster, and the installation package is only 23M.
  4. Text file saving: All document products are saved locally in pure text, which can be easily imported or exported.
  5. Focus, Presentation, Single Mode: You can use command+2 for focus mode, command+4 for presentation mode, and command+o for single file mode.
  6. Fully compatible with macOS Ventura, also supports M1 version of the universal architecture mode, various system compatibility is not a problem.

Function Aspect

  1. Quickly write PPT: Use markdown separator for pagination, allowing you to finish a sharing PPT in half an hour, no longer struggling with formatting.
  2. Multi-class plugin display: In addition to various syntaxes supported in GFM, it also supports Markmap, LaTeX, Mermaid, PlantUML display, and can also embed various iframe blocks such as codepen, codeSandbox, youtube, etc.
  3. Image hosting function: You can configure uPic, PicGo, Picsee image hosting in the settings, support drag and drop, copy and automatically upload and replace the address.
  4. Easy-to-use TodoList: Directly use [ ], [x] to easily write todlist, and modify the status in the preview interface.
  5. Export pdf and images: Right-click on the selected document to easily export neat pdf and images to share with friends you want to share.
  6. Inline documents: You can use [[Article Title]] to achieve inline jumps between MiaoYan documents, increasing the relevance of document organization.

Usability Aspect

  1. Classic 3-column layout: Supports shortcut keys, gestures to quickly collapse and show, and you can also set your accustomed sorting method.
  2. Default easy-to-use settings: Default settings are easy to use, can be opened with command+,, supporting setting appearance, language, font, storage location, image hosting, preview mode, line wrap and other styles.
  3. Minimalist effect display: You can go to settings to set unused operation buttons to show only when mouse hovers, so that MiaoYan looks purer.
  4. Design ideas: An editor is not better with more functions. Here, a lot of invisible restraint is done, and it is not complicated as long as the functions are satisfied.
  5. Default good-looking: I believe that an engineer with OCD will not like to use an ugly application as a daily tool. MiaoYan follows my own design concept to make like-minded friends feel it looks good as much as possible.

Why is it suitable for engineers?

My definition of engineers is a group of people with ideas who “can solve problems through technology”. They like to use various tools that can improve efficiency and convenience for themselves, are willing to toss, and also like beautiful things.

So what functions do I think a good note-taking software should include?

  1. Secure, purely local, not dependent on cloud services, and capable of good import and export.
  2. Beautiful, easy to use, overall not a rough Demo, but a beautiful and handy tool.
  3. Markdown source code first, not rich text editing first, which is also the reason for prioritizing edit/preview mode. This is also a coding experience.
  4. Fast. Fast here is not only good performance, but also convenient operation. Almost all operations support shortcut keys, saving time moving the mouse.

Before making MiaoYan, I always used Quiver. It wasn’t beautiful but very easy to use. However, after the author abandoned it for a few years, compatibility was not good. Later I tried Bear, MWeb, Typora, obsidian, etc. For personal reasons, I was not used to them, so I created MiaoYan.

I also look forward to expressing some of my thoughts through the product MiaoYan. It feels a bit like an independent creator. From design, coding, promotion, I do it all independently in my spare time. It is a learning process, and I can also meet many like-minded friends. It is actually a very interesting process.

Future Plan

  1. Launch on AppStore soon, so that more friends can download and install it more easily.
  2. Continuously optimize the note experience itself, including occasional small issues, and suggestions from Miao friends, to make a notebook that engineers like together.
  3. Instant editing capability, current progress looks like 60%, it is harder to optimize than imagined, will be released when it is easy to use.
  4. MiaoYan iPhone version. After 1, 2, 3 are done, I will start to work on it. It will not be complicated in editing, more on reading experience.
  5. Currently no plan for Windows and other non-Apple systems.

Effect Display

Overall Effect

Quickly write PPT

One-click formatting

Instant editing in progress


Expect you to fall in love with MiaoYan, and expect you to give more suggestions that you think are better for MiaoYan, let’s make a note application that engineers love to use.

Read More

How to be a Product Engineer?

【2022-07-29】A recent sharing with the team, from the perspective of a front-end engineer, how to become a product development engineer.