FreeComponents

Markdown Text

Lightweight Markdown renderer for LLM output — supports headings, fenced code blocks, lists, dividers, and inline formatting (bold, italic, inline code)

Free
Free with a ShipSwift account.

Copies a short instruction with your private download link. Paste it into your agent: it downloads the whole skill (the source code, the setup steps and the mistakes we already made for you) and builds the screen.

Works with

+70

What it does

A self-contained Markdown rendering view designed for common LLM output formats. Parses raw Markdown strings into native SwiftUI views — no WebView or third-party dependencies required. Works on both iOS and macOS.

Supported syntax:

  • Headings — # through #### (h1–h4)
  • Fenced code blocks — triple backticks with optional language label
  • Unordered lists — -, *, or + prefix
  • Ordered lists — 1., 2., etc.
  • Horizontal dividers — ---, ***, or ___
  • Inline formatting — **bold**, *italic*, ` inline code

What you get

  • ✓286 lines of source code, ready to paste
  • ✓Source Code
  • ✓Parameters
  • ✓Usage
  • ✓Integration Checklist
componentdisplaymarkdowntextcode-blockSwiftUI

Parameters

ParameterTypeDefaultDescription
textString(required)Raw Markdown string to render
codeBackgroundColor.gray.opacity(0.12)Background color for fenced code blocks
codeBorderColorColor.secondaryBorder color for fenced code blocks
codeCornerRadiusCGFloat8Corner radius for code blocks
blockSpacingCGFloat6Vertical spacing between blocks

Usage

// Basic usage — pass any Markdown string
SWMarkdownText("# Hello\n\nThis is **bold** and *italic* text.")

// Display LLM streaming output
SWMarkdownText(viewModel.streamingResponse)

// Code block with language label
SWMarkdownText("```swift\nfunc greet() {\n    print(\"Hello, world!\")\n}\n```")

// Custom styling for code blocks
SWMarkdownText(
    markdownString,
    codeBackground: .black.opacity(0.8),
    codeBorderColor: .green,
    codeCornerRadius: 12,
    blockSpacing: 10
)

// Inside a ScrollView for long content
ScrollView {
    SWMarkdownText(longMarkdownString)
        .padding()
}

Integration Checklist

  • Add SWMarkdownText.swift to your project (single file, no dependencies)
  • Verify deployment target is iOS 18+ / macOS 15+ (uses AttributedString with inlineOnlyPreservingWhitespace)
  • For LLM chat UIs, wrap in ScrollView and feed the streaming response string directly
  • Customize codeBackground and codeBorderColor to match your app's theme

More in Components

All 21 skills in Components