Mawy

About this project

Mawy is a Markdown editor and a Markdown viewer built as one library, for React and for Flutter. An editor and a separately maintained renderer eventually disagree about something — a table, a nested list, a fenced block — and at that moment the document the writer approved stops being the document the reader gets. Here the two halves share the same parser and the same renderer, so what was typed is what is read.

The editor is two views of one document rather than two editors. The Markdown source with its syntax coloured and the composed page are one click apart, every command on the formatting toolbar is also a keyboard shortcut, and switching loses nothing the other view could not express. Under the colouring is a real textarea, which is what keeps the browser’s own undo history, input method composition and the mobile keyboard working. The viewer is a finished reader: typeface, text size, line height, letter spacing, column width, light or dark, and an outline of the headings — none of which touches the document. Given no document at all it is a file picker, so dropping a .md file on it is what its empty state is for.

Setup is the package and one line of CSS. Everything the library draws goes through --mawy-* custom properties, so theming is redeclaring a token on a wrapping element rather than out-specifying a rule, and dark mode is one of those tokens. Nothing is fetched from anywhere: the typeface menu offers what the reader’s machine already has, and the thirteen open-licensed families that ship with it are used only when the application passes them in. Markdown becomes elements rather than a string of HTML, so there is no innerHTML between the document and the page. The React package is ESM with TypeScript declarations and a single runtime dependency, for the toolbar’s icons.

Features

• Documentation site

• TypeScript types

• Multiple languages

• Verified by tests

• Cross-platform

• Accessibility built in

• Dark mode

• Tree-shakeable