When your iOS app uses Markdown documents, why can’t we just transform them into natives view? What if instead of writing Swift UI code, we build a custom viewer app, which can even be run from Xcode Live Preview Canvas?

Just look at what you can do with it:

Demo showing live Markdown to SwiftUI teasing this article

In this story we are going to cover the following topics:

  1. Parsing Markdown into an AST
  2. The Resolver/Strategy Pattern
  3. Building an UI from resolved nodes
  4. Conclusion

In case you want to see the full library, checkout the GitHub repository CoolDown, our own Markdown parser at techprimate, which also includes a work-in-progress library CDSwiftUIMapper.

Parsing Markdown into a AST Node Tree

It’s highly recommended that you read my previous article “Creating your own Markdown Parser from Scratch in Swift” as we will reuse concepts from there.

Anyway here is a short recap of the explained concepts:

  1. Markdown documents consist out of blocks (separated by empty lines), which further consist out of fragments (separated by newline characters), which are made up of inline elements (such as text or bold words).
  2. After parsing, the document can be represented as an abstract syntax tree (AST). The tree elements are from now one considered as nodes.
  3. When converting a document from Markdown to SwiftUI, it goes through four stages: Styled Markdown (only for visual help) → Raw Markdown → AST/Node Tree → SwiftUI Views

Usually an example is easier to understand, so please take a look at the following one: