---
title: "How editmd is built"
description: "A desktop shell, a source editor and a renderer around ordinary files."
canonical: https://editmd.app/docs/how-it-is-built/
markdown: https://editmd.app/docs/how-it-is-built.md
status: pre-release, waiting list open
generated: editmd-website
---

# How editmd is built

A desktop shell, a source editor and a renderer around ordinary files.

## The file comes first

editmd treats Markdown source as the document. Editing changes that source; the preview is a rendering of it. Switching views does not create a second proprietary version of your writing.

The app separates the writing interface from native file operations. This keeps the familiar editing surface close to the file tools provided by macOS.

## Inside the Mac app

| Layer               | Built with                      | What it does                                                            |
| ------------------- | ------------------------------- | ----------------------------------------------------------------------- |
| Desktop application | Tauri 2 and Rust                | Connects the interface to native file, dialog and application services. |
| User interface      | React and TypeScript            | Presents documents, preferences and review flows.                       |
| Source editor       | CodeMirror 6                    | Handles Markdown text editing and editor interactions.                  |
| Application state   | Zustand                         | Coordinates the active workspace and interface state.                   |
| Markdown rendering  | markdown-it and DOMPurify       | Converts Markdown to filtered rendered content.                         |
| Rich content        | KaTeX, Mermaid and highlight.js | Renders math, diagrams and highlighted code.                            |

The frontend build uses Vite. Those tools are part of how the application is made; users do not install them to run the packaged Mac app.

## One source, several outputs

The rendered-content pipeline is shared across preview and HTML-based output. Other formats use their own conversions, which is why export guidance distinguishes an exact source file from a practical rich-text conversion.

Native file operations live in the Rust layer. AI requests also pass through app controls for provider choice, exact scope and result review. Model responses do not get direct authority to save a document.

## How this website is built

The website uses **Astro** to generate static HTML. Its guides and navigation remain readable without JavaScript. Small native scripts add the hero example and motion.

The hero example and the AI walkthrough on the homepage keep their text in memory and use authored examples; they are separate from the desktop app's files and provider connections.

## Why these choices matter

- **Portability:** the document remains plain Markdown.
- **Clarity:** the source and its preview are different views of the same writing.
- **Control:** opening, saving and applying a proposed AI edit are explicit actions.
- **Progressive delivery:** you can read this website without loading the editor demo.

This is an explanation of the product's architecture, not a source-build installation guide. For the user workflow, begin with [install editmd](/docs/install/).

Group: Reference. Handbook index: https://editmd.app/docs.md