Markditor

Yet another WYSIWYG Markdown editor written in TypeScript and Tauri. Aims to be an open-source alternative to Typora.

[Markditor] = [Mark] down + e [ditor]. Supports Windows 10 / 11 by now.

WIP. Be careful when editing your important documents.

light	dark

Technology Stack

Markditor is heavily based on Vditor, and we used a modified version of it. (Check out repo). In addition, we also built on top of the following technology stack:

• React
• Tauri (preferred) / Electron
• Zustand
• Radix-UI
• Tailwind CSS
• Vite

Features

• Instant-render for Markdown typing
• User-friendly table editor
• Auto-save within internal seconds
• Dark mode support

Download

Go to releases page.

TODOs

• Internationalization (i18n)
• Insert images by: dropping, pasting (automatically copy to asset folder)
• Drag & drop to: open files, or insert images
• Enhance file management: drag and drop to move files, watch file changes from outside, automatically save when switching windows.
• Source code mode
• Export to: PDF or HTML
• Support macOS, Linux (technically available, but lack of testing devices to confirm)

Project Architecture

build           // Build assets used by electron-builder
dist            // Web contents build output
dist-electron   // Electron prebuilt files
electron        // Electron main process
public          // Public files to be used in HTML
release         // Electron build output
shared          // Shared types definitions between renderer and main processes
src             // Front-end sources
  assets       // Static assets, i.e., fonts
  components   // Global components
  feat         // Feature modules
  ipc          // IPC communication
  store        // Zustand stores and business logics
  types        // Global type definitions
  utils        // Utility functions
src-tauri       // Tauri backend process and build output

Development

Note: Markditor is initially made with Electron, but currently Tauri is preferred. So far Electron is still in development but has some unimplemented Platform API. See electron/main/handler. Electron backend may be deprecated in the future.

By encapsulating IPC communication (see shared/platform_api.d.ts and src/ipc), Markditor can be easily migrated to other backends such as Tauri.

Install dependencies:

npm install

Run in dev mode:

# Run with Tauri (preferred)
npm run dev:tauri

# Run with Electron
npm run dev:electron

Build product:

# Build with Tauri (preferred)
npm run build:tauri

# Build with Electron
npm run build:electron