Skip to content

Releases: HelioMartin/KeylineKit

Release list

KeylineKit 0.1.0

KeylineKit 0.1.0 Latest
Latest

Choose a tag to compare

View all tags
@HelioMartin HelioMartin released this 20 Oct 12:37
0.1.0
1fad108

The first public release of KeylineKit. It draws measured layout annotations on top of your SwiftUI previews.

import KeylineKit

#Preview {
    #Keyline {
        ProfileView()
    }
}

Features

  • #Keyline names and outlines every layer, shows the padding on each edge and the spacing between stack siblings, all measured in points from the rendered layout.
  • Annotations: .layers, .padding, .spacing, .size, .corners, .safeArea and .none. The default is .layers, .padding and .spacing. Use showContainerLines: false to turn off the layer outlines.
  • Declared values: when the source says something different from the measured value, both are shown: 16 · default, 12 · Theme.spacing.
  • Safe area: device insets and the safe area. On iOS 27.1 it also shows reserved regions that cover content, such as camera housings.
  • @Keylined lets the overlay draw what a custom view's body declares, instead of a single layer.
  • Custom colors: .keylineColors(_:) replaces the palette per element (layers, padding, content, spacing, reserved regions, corners and sizes). Any color you don't set keeps the default.
  • Readable labels: all labels are laid out together so they never overlap, with a palette tuned for light and dark mode.
  • Preview-only: your views render exactly as before everywhere #Keyline isn't used.

Custom colors

Pass your own colors with .keylineColors(_:). Set only the ones you want to change; the rest keep the default palette:

#Preview {
    #Keyline(.padding, .safeArea) {
        AccountScreen()
    }
    .keylineColors(KeylineColors(padding: .red, content: .blue))
}
Color Draws
layers Layer outlines and names
padding Padding bands and their values, and the safe-area insets
content The content outline of each padding band, and the safe area
spacing The gap between siblings of a VStack or HStack
reserved Reserved regions that cover content
corners The arc and value of each corner radius
size Width and height dimension lines

A color draws lines and badges, and a translucent copy fills regions. Badge text stays white, so pick colors dark enough to read it. A dynamic color, such as one from your asset catalog, adapts to light and dark mode. Applied to any parent view, the colors reach every #Keyline inside it, and nested calls combine.

Requirements

  • Xcode 16 or later (Swift 6)
  • iOS 16+, macOS 13+ or watchOS 9+
  • Depends only on swift-syntax 600.0.0..<700.0.0

Installation

.package(url: "https://github.com/HelioMartin/KeylineKit.git", from: "0.1.0")

Documentation

KeylineKit includes DocC documentation: an overview with examples for choosing annotations, looking inside your own views and using your own colors, plus a reference for every public type. In Xcode, choose Product › Build Documentation to open it in the documentation window. You can also read it online on the Swift Package Index.

Known limitations

  • .corners reads the radius from modifiers. It doesn't read it from a root shape used directly as a view, such as RoundedRectangle(cornerRadius:).
  • A custom view with modifiers (ProfileView().padding()) is drawn as a single layer, even with @Keylined.
  • Reserved regions need the iOS 27.1 SDK at build time and iOS 27.1 at runtime.

Website: https://keylinekit.heliomartin.com

Assets 2
Loading