Build a Markdown Editor With SwiftUI in iOS 15

43 lines of code is all it takes

Photo by Anton Maksimov juvnsky on Unsplash

Markdown is probably the easiest way to edit and format rich text. It’s also extremely popular, and pretty much everyone knows how to use it.

So, want to implement Markdown in your app? It used to be… complicated. You’d need to use a third-party Markdown parser, then display the result in a web view. If you wanted to use it with SwiftUI, well, good luck working with UIViewRepresentable.

Good news, though: At WWDC21, Apple released SwiftUI 3 with Markdown support! It’s one of the features that have kind of flown under the radar, but it’s also one of the most interesting. In this article, we’ll build a Markdown editor in just 43 lines of code.

Let’s start with a basic interface:

Result

Currently, we can type in the Markdown field, and the text is stored in markdownText. However, the output doesn’t change. That’s expected because we’re just showing Text(“Output goes here!”).

So how do we render markdownText in the output text field? It’s simple using the newly-released AttributedString API. You can find more details on that in this article.

We’ll use AttributedString’s init(markdown:options:baseURL:) method to create an attributed string from Markdown. Add this at the bottom of ContentView:

This method takes in a String of Markdown, then converts it to an AttributedString.

Now all that’s left is to call it!