Introducing Fence: A Markdown Editor in Elm

I built Fence, a desktop Markdown editor written in Elm and packaged with Electron. It has a file tree, an editor, a live preview, and a document outline. You can write with the source and preview side by side, or give either pane the whole space.

The files stay ordinary Markdown on disk. Open a repository, a folder of notes, or a single README and start writing.

Fence with Sema's embedding guide open: source, search, rendered code, and outline in one window.

Make Yourself at Home

The same document in a few different themes, plus the settings for fonts, text size, reading width, and layout. Browse the screenshots below, or click one to see it full screen.

Deep Tide: a dark green theme, with source and preview side by side.
JetBrains Islands Light: the same document in a light theme.
Tokyo Night: dark blue surfaces and brighter syntax colors.
Settings: fonts, independent text sizes, preview width, soft wrap, and shortcuts.
The theme picker is searchable; editor and UI fonts have their own pickers too.

An Editor Written in Elm

Fence's editor is its own virtualized implementation in Elm. It renders the visible rows and a little extra around them, rather than creating an element for every line in the file. Cursor movement, selection, undo, find, and soft wrapping live in Elm too; JavaScript connects browser input, clipboard operations, and Electron's filesystem APIs.

The preview takes a different route. It splits Markdown at top-level headings and parses it progressively. Unchanged chunks are cached, so editing one section doesn't require rebuilding every section. The source pane highlights Markdown syntax; the preview highlights the languages inside code blocks.

That distinction keeps typing work small. A Rust example doesn't need a Rust lexer running over it in the source pane every time you press a key. The rendered version gets the language highlighting.

Mermaid Diagrams You Can Read

Version 0.7.0, released on October 12th, improves Mermaid rendering. Supported graph types now use ELK layout, and diagrams follow the document's colors, font, and text size. Nodes get rounded corners, edge labels get pill backgrounds, and ordinary arrows use open chevrons. Authored shapes and colors are preserved.

These examples come from Fence's Mermaid sample document. I put each diagram in its own file and expanded it in the preview, so you can see the whole drawing. The samples cover subgraphs, different node shapes, activations, relationships, scheduling, and state transitions; supported graph types use ELK, while other diagram types use their own layouts.

Class diagram: members, generics, inheritance, composition, and cardinalities in JetBrains Islands Light.
A sample workspace index: entities, field types, keys, and relationship cardinalities in Deep Tide.
Saving a document: participants, activations, a retry loop, alternative paths, and notes in Polar Night.
Release pipeline: subgraphs, decisions, parallel branches, and authored colors, laid out with ELK in Tokyo Night.
Gantt chart: a sample plugin schedule with dependencies, milestones, and task states in JetBrains Islands Light.
Document lifecycle: composite states, fork/join nodes, and a close-prompt decision in JetBrains Islands Light.

Fitting a wide diagram into a narrow preview can turn its labels into tiny text. Fence now starts a diagram at actual size, with horizontal scrolling, when fitting it would shrink it below 70%. You can switch between fitted and actual size yourself, or show the source.

You can also expand a diagram to fill the preview pane and pan and zoom with the mouse, trackpad, or keyboard. Zooming changes the SVG's laid-out size so the browser redraws the vectors at that size. Scaling a composited layer had made the drawing blurry at high zoom levels.

Changing the source or appearance updates the expanded diagram too. If the source becomes invalid, Fence closes the expanded view and shows an error on the affected block. The rest of the document stays readable. Export always includes the drawing, even if you're currently looking at its source, and leaves out the preview controls.

Then There Is the Weird Text

Writing an editor also means dealing with characters that don't occupy one neat monospace cell. Combining accents, wide characters, emoji, and joined sequences all affect where a caret or selection should land. The latest release uses a cell-width model that accounts for these when positioning text and wrapping lines.

The repository has a deliberately unpleasant sample for testing it:

The Zalgo stress sample, with the settings panel open. This is intentionally worse than an ordinary document.

The extreme cases stack 128 or 256 marks on each character. Clipping at that point is acceptable; hanging the editor or losing the document isn't. There are still limits: the architecture notes document some width drift with CJK fallback fonts, and the editor clips tall stacks of combining marks to the row. The screenshot above shows the rendered preview, which has its own text layout.

Try It

On macOS, install it through Homebrew:

brew install --cask helgesverre/tap/fence

The cask also installs a launcher for files and folders:

fence README.md
fence ~/notes

Downloads are on the releases page. Fence is MIT licensed, with builds for macOS, Windows, and Linux. The source, changelog, and rendering architecture notes are all in the repository.