MarkFlowy: Tauri-based Markdown Editor with AI Integration

MarkFlowy is a lightweight, high-performance Markdown editor built with Tauri, designed for developers and writers seeking fast, distraction-free writing experiences. Its HKnative architecture ensures minimal resource consumption while delivering responsive UI interactions. Key features include dual-mode editing (source & live preview), customizable themes, and intelligent AI-powered tools—facilitating one-click summary generation, translation, and chat-based content assistance via ChatGPT integration.

Prerequisites

Before setting up the development environment, ensure the following tools are installed:

  • Node.js ≥ v18 LTS (v20 recommended)
  • Rust ≥ v1.74 (via rustup)
  • Yarn ≥ v4 ( manage workspaces efficiently)
  • Platform-specific dependencies:
    • Linux: webkit2gtk-4.1, libappindicator-gtk3
    • macOS: Xcode Command Line Tools
    • Windows: MSVC toolchain + Windows 10 SDK

Development Setup

Clone the repository and initialize the project:

git clone https://github.com/drl990114/MarkFlowy.git
cd MarkFlowy

# Install dependencies (Node backend + Tauri frontend)
npm install --global yarn@latest
yarn install

Run in Dev Mode

Start both the React frontend and Tauri backend concurrently:

yarn tauri dev

This launches the desktop UI in development mode with hot-reloading enabled for frontend changes and live-rebuild for Rust Tauri commands.

Production Build

Compile an optimized release binary for your target OS:

yarn tauri build

Output binaries will reside in src-tauri/target/release/, signed and ready for distribution.

Integrating AI Workflows

To utilize built-in ChatGPT features, create a .env.local file in the project root with:

VITE_OPENAI_API_KEY=sk-...your-key...
VITE_OPENAI_MODEL=gpt-4o-mini

Once configured, users可 invoke AI actions directly from the editor’s context menu—e.g., "Summarize Selection", "Translate to English", "Rewrite for Clarity".

Architecture Overview

  • Frontend: Built with React 18, Remirror (ProseMirror-based editor), Vite for bundling.
  • Renderer: Pure HTML/CSS/JS using Tailwind-like styling system.
  • Core: Rust Tauri service layer handles file I/O, metadata indexing, and IPC桥梁 to AI APIs.
  • State: Zustand for global UI state + localStorage for persistent user preferences.

Extensibility & Community Plugins

While MarkFlowy does not yet support official plugin APIs, extensions can be added via forked branches using:

  • Custom Mermaid.js integrations by modifying src/plugins/mermaid
  • Export templates via src-tauri/src/exporter/ modules
  • Keybinding overrides through keymap.conf.json in user config directory

For example, adding a LaTeX block renderer only requires injecting a MarkdownIt plugin and hijacking the preview pipeline in the renderer process.

Thẻ: Tauri react prosemirror markdown-editor AI-integration

Đăng vào ngày 2 tháng 9 lúc 14:32