Created a Markdown Desktop App with Tauri

Introduction

Hello everyone.

Last year, I developed a WeChat formatting editor called MDX Editor. It allows customization of components, styles, generates QR codes, provides code diff highlighting, and supports exporting to Markdown and PDF, among other functionalities. However, as a WeChat formatting editor, its audience is relatively limited and not suitable for everyone. Therefore, based on this editor, I developed the MDX Editor desktop version, which supports Mac, Windows, and Linux. It is lightweight, with the entire application being only 7MB in size. Now, the MDX Editor desktop version has become my primary tool for writing. If you're interested in it, you can find it at the end of the document.

Demo screenshot

Subtle Green Card	Early Summer Style
Resume Template	Exquisite Code Diff Highlights
Generate Captivating QR Codes	Travel Itinerary

Technology Stack

For developing the MDX Editor desktop app, I utilized the following core technology stack:

• React (Next.js)
• Tauri — A framework for building cross-platform desktop applications
• Tailwind CSS — An atomic class-based styling framework that supports dark mode
• Ant Design v5 — Utilized the "Tree" component for managing the document tree

Features and Implementation

1. MDX Custom Components

MDX combines the advantages of Markdown and JSX, allowing you to directly use React components in Markdown documents to build complex interactive content. If you're familiar with React, you can customize your components in the "Config" tab. If you're not a programmer, you can also create content based on existing templates. For example, the "Gallery" component in the template is essentially a "flex" layout.

Code

function Gallery({ children }) {
    return <div className="flex gallery">{children}</div>;
}

2. Dark Mode

Dark mode has become an essential part of note-taking software. MDX Editor implements dark mode using Tailwind CSS.

3. Multiple Themes

The editor comes with 10+ document and code themes. You can switch between them by clicking the settings button in the upper right corner.

4. Local File Management

The desktop app also supports local file management. You can choose a directory or drag your document workspace into the editor to manage documents in real time.

Before implementing this feature, I was concerned about not being familiar with Rust and not being able to complete it. However, after becoming acquainted with the Tauri documentation, I found it to be quite simple. Tauri provides file operation APIs, eliminating the need to write Rust code. Instead, we can achieve file management by calling Tauri APIs.

import { readTextFile, BaseDirectory } from '@tauri-apps/api/fs';
// Read the text file at the path `$APPCONFIG/app.conf`
const contents = await readTextFile('app.conf', { dir: BaseDirectory.AppConfig });

The document tree uses Ant Design's Tree component, with custom styling to maintain consistency with the overall theme, greatly reducing the coding workload.

5. Document Formatting

During the document writing process, formatting can often interrupt your creative flow. Although Markdown has done away with formatting operations, sometimes you still need to pay attention to details like spaces between Chinese and English, and blank lines between paragraphs. MDX Editor uses prettier to format documents. Just press command+s to automatically format the document.

Conclusion

If you're interested in this editor, you can download the desktop version from Github to try it out. If you're curious about the implementation process, you can also directly view the source code. If you have any suggestions, feel free to raise issues on the repository.