Markswift 2.0.0 1 · Overview

1How Markswift turns a rendered page into SwiftUI

Markswift opens your HTML and CSS in Chrome, writes down what the browser actually laid out, and turns that record into SwiftUI for iOS 18+ and Swift 6 that looks like the browser’s rendering. Each chapter sets one stage as a spread, its input on the left page and its output on the right; chapters 2 to 6 follow one small card through all of them.

HTML · versowhat you wrote
SwiftUI · rectowhat Markswift wrote
hello.htmlHelloCard.swift<main data-markswift-rootstruct HelloCard: View {style="width:240px;height:80px;font:18px system-ui">@ScaledMetric(relativeTo: .body) private var textSize18: CGFloat = 18.0init() {}var body: some View {Hello MarkswiftText(verbatim: "Hello Markswift").font(.system(size: textSize18, weight: .regular, design: .default)).foregroundStyle(Color.markswift(0.0, 0.0, 0.0)).fixedSize(horizontal: false, vertical: true).frame(minWidth: 0.0, maxWidth: .infinity, minHeight: 80.0, maxHeight: .infinity, alignment: .topLeading)</main>}}#Preview("HelloCard — Light") {HelloCard().frame(width: 240.0, height: 80.0)// …

Apparatus

Point at a line number, or Tab to it and use the arrow keys: the line lights on both pages and here. Every excerpt is verbatim; … marks a cut.

  • data-markswift-root the view; --name HelloCard names it
  • font:18px system-ui @ScaledMetric 18 pt, follows Dynamic Type
  • Hello Markswift Text(verbatim:), words as written, Chrome’s weight and colour
  • height:80px minHeight: 80.0, a floor: the box grows with its text
  • width:240px the preview frame only; the view fills its width (7)
  • Losses approximated, unmapped none in this run; chapter 9 has five
  • Run $ npx markswift convert hello.html --name HelloCard --out ./generated-hello Wrote 3 files for HelloCard to ./generated-hello; checkout 90bba3d, bun src/cli.ts for npx markswift; the README’s quick-start markup on four lines