DEV Community

Cover image for Building Your Own DSL with @resultBuilder in Swift: HTML Builder
Karan Pal
Karan Pal

Posted on • Originally published at Medium

Building Your Own DSL with @resultBuilder in Swift: HTML Builder

#swift #ios #mobile #programming

Building Your Own DSL with @resultBuilder in Swift: HTML Builder

🚀 Ready to transform messy HTML string concatenation into beautiful, type-safe Swift code?

In Part 1 of this series, we demystified the magic behind SwiftUI's declarative syntax. Now it's time to build something real - a complete HTML DSL that you can actually use in production!

🎯 What We're Building

By the end of this tutorial, you'll transform this nightmare:

var html = "<html>" html += "<head><title>" + title + "</title></head>" html += "<body>" html += "<div class=\"container\">" html += "<h1>" + heading + "</h1>" if showContent { html += "<p>" + content + "</p>" } html += "</div></body></html>"
Enter fullscreen mode Exit fullscreen mode

Into this beauty:

let webpage = html { head { title("My Awesome Site") } body { div(class: "container") { h1("Welcome!") if showContent { p("Amazing content here") } } } }
Enter fullscreen mode Exit fullscreen mode

✨ What You'll Master

🛠️ Complete HTML DSL implementation - Every element you need, properly structured

🔒 Automatic XSS protection - Built-in HTML escaping for security

🎯 Type-safe markup - Catch structural errors at compile time

🧪 Production testing strategies - Comprehensive test suites for DSLs

⚡ Modern Swift integration - Variables, loops, and conditionals that just work

🏗️ Why DSLs Matter Beyond SwiftUI

Every Swift developer knows SwiftUI uses @resultBuilder, but the real power comes when you solve your own domain problems:

Server-side Swift developers → Generate HTML responses without templating engines

Email automation → Create dynamic email templates with type safety

Static site generation → Build documentation sites with Swift

Configuration management → Declare complex app settings declaratively

💻 Core Architecture Revealed

The magic starts with a solid foundation:

protocol HTMLElement { func render() -> String } struct Element: HTMLElement { let tag: String let attributes: [String: String] let children: [HTMLElement] let isSelfClosing: Bool func render() -> String { // Automatic HTML generation with proper escaping } }
Enter fullscreen mode Exit fullscreen mode

Then we add the @resultBuilder that makes the beautiful syntax possible:

@resultBuilder struct HTMLBuilder { static func buildBlock(_ components: HTMLElement...) -> HTMLElement { ElementGroup(Array(components)) } static func buildOptional(_ component: HTMLElement?) -> HTMLElement { component ?? ElementGroup([]) } // Automatic string-to-HTML conversion static func buildExpression(_ expression: String) -> HTMLElement { TextNode(expression) // With XSS protection built-in! } }
Enter fullscreen mode Exit fullscreen mode

🔧 Production-Ready Patterns

Complete element support for all your HTML needs:

func div(class: String? = nil, @HTMLBuilder content: () -> HTMLElement) -> HTMLElement func p(@HTMLBuilder content: () -> HTMLElement) -> HTMLElement func img(src: String, alt: String) -> HTMLElement // Plus 20+ more elements...
Enter fullscreen mode Exit fullscreen mode

Smart conditional rendering that feels natural:

let userProfile = div { h1(user.name) if user.isVerified { span(class: "verified") { "✓ Verified" } } for skill in user.skills { span(class: "skill") { skill } } }
Enter fullscreen mode Exit fullscreen mode

Automatic security through HTML escaping:

p { "<script>alert('xss')</script>" } // Safely renders: <p>&lt;script&gt;alert('xss')&lt;/script&gt;</p>
Enter fullscreen mode Exit fullscreen mode

🧪 Testing Like a Pro

DSLs need robust testing. Here's how we ensure reliability:

func testConditionalContent() { let element = div { p("Always visible") if true { span("Sometimes visible") } } let html = element.render() XCTAssertTrue(html.contains("Always visible")) XCTAssertTrue(html.contains("Sometimes visible")) }
Enter fullscreen mode Exit fullscreen mode

🎯 Real-World Benefits

For teams:

  • Reduced bugs - No more missing closing tags
  • Better readability - Code that looks like what it produces
  • Easier maintenance - Refactor HTML structure with Swift tools

For projects:

  • Type safety - Catch errors at compile time
  • Security - XSS protection built-in
  • Performance - Efficient string generation
  • Flexibility - Easy to extend and customize

🚀 What's Next?

This complete tutorial covers:

  • Foundation architecture and design decisions
  • Complete @resultBuilder implementation
  • Full HTML element library
  • Production testing strategies
  • Integration with modern Swift features
  • Real-world usage examples

Part 3 of this series will cover advanced patterns, performance optimization, and production deployment strategies.

📖 Read the Complete Guide

Ready to master DSL creation? The full tutorial includes complete working code, detailed explanations, and production-ready patterns:

Building Your Own DSL with @resultBuilder in Swift: HTML Builder

💬 Join the Discussion

What would you build with a custom DSL? Share your ideas in the comments!

  • Configuration management for complex apps?
  • API response builders for server-side Swift?
  • Test data generation for your test suites?
  • Custom markup languages for your domain?

🔗 Stay Connected

Follow me for more Swift deep dives and iOS development insights:

Enjoyed this? Buy me a coffee ☕ to fuel more comprehensive Swift tutorials!

Top comments (0)