logo
Kurashizu Blogwhere ideas flow
  • Home
  • News
  • Blog
  • About
  • Home
  • News
  • Blog
  • About

© 2026 Kurashizu. All rights reserved.

Admin·New Post·Service Status
Powered by Cloudflare·31.10.26
← Back to news

How Dactyl Works

Original article
dactyl.dev|49 points|8 comments|by anorak27|Aug 28, 2026

Understanding the Mechanics of Dactyl

By Divy Srivastava | August 26, 2026

For Large Language Models (LLMs), crafting native applications has historically been a far more grueling task than generating web content.

The primary hurdle is that apps are governed by strict platform-specific aesthetics and behavioral norms. Users possess an intuitive sense of whether an app feels "native" or if it was haphazardly ported. Furthermore, because app stores are walled gardens—unlike the open nature of the web—LLMs have significantly less training data to draw from.

The Problem with "Vibe-Coding"

Many modern platforms attempt to bypass these hurdles by accepting compromises. They often rely on:

  • Expo/React Native
  • Flutter
  • Webviews

While these tools are functional, they inevitably sacrifice something—be it performance, native widget fidelity, feature depth, or cross-platform fluidity. Dactyl was engineered to eliminate these trade-offs, allowing for the creation of truly native apps.

The Architecture: A Cross-Platform SwiftUI Renderer

Dactyl utilizes a Wasm port of the iOS simulator to bring the Apple ecosystem to the web and Android. We selected Swift as our foundation due to its elegant simplicity and precise layout semantics.

🌐 iOS Previews on the Web

Traditionally, previewing iOS apps without owning a Mac required streaming a remote simulator—a slow process involving booting, installing, and launching, all while paying for metered cloud hardware.

Dactyl replaces this with a custom reimplementation of SwiftUI and its supporting frameworks. The engine supports a massive array of modules:

CategorySupported Frameworks
Visuals & GraphicsCoreGraphics, Metal, Vision, SpriteKit, SceneKit
UI & LayoutUIKit, WidgetKit, PencilKit
Specialized APIsCharts, RealityKit, ARKit, MapKit
Commerce & MediaStoreKit, MusicKit

The Rendering Pipeline

The process follows a specific data flow:

The engine resolves the layout entirely before writing commands to linear memory. A reconciler manages the view tree, ensuring only "dirty" views (like those with active animations or scrolling) are updated. To optimize performance, the host rasterizes layers onto offscreen canvases using a content-based hash, compositing them only when necessary.

⚡ Dynamic Linking and Memory

Standard SwiftWasm uses static linking, which is inefficient for rapid iteration. If the engine is ≈100 MB\approx 100\text{ MB}≈100 MB, static linking would force the browser to download hundreds of megabytes per edit.

Dactyl solves this via a split-module approach:

  1. Base Module: The engine and standard library are linked once and cached via content-addressing.
  2. Side Module: Your specific app compiles as a position-independent module, ranging from 8 KB8\text{ KB}8 KB to 300 KB300\text{ KB}300 KB.

At runtime, the side module is placed at a specific memory offset, and its imports are bound to the base module's exports. To maintain a seamless developer experience, @State is snapshotted and restored, preserving text field inputs and scroll positions across hot-reloads.

// Example: weather/ContentView.swift
// Size: 36 KB | Compile Time: 0.28 s
Color(red: 0.42, green: 0.69, blue: 0.95)

🤖 Android: Integration via Jetpack Compose

On Android, Dactyl doesn't use Wasm; instead, it compiles natively for aarch64-unknown-linux-android24 using the Swift Android SDK into a shared library.

The command stream is read directly from native memory (zero-copy). While the web host uses a canvas, the Compose host maps those coordinates to actual Material Design components.

  • Native Fidelity: A SwiftUI segmented control becomes a Material segmented button.
  • Iconography: A mapping table translates SF Symbols ↔\leftrightarrow↔ Material Symbols.
  • Precision: Compose's density is locked to the engine's layout scale, ensuring elements land exactly where the engine intended.

Because the engine handles the adaptive layout logic, the same 71 lines of SwiftUI code can render perfectly on both an iPhone simulator and an Android APK.


🛠️ Automated Engine Evolution

Developing a renderer of this scale is too complex for manual coding. Dactyl is built by a fleet of autonomous agents.

The Workflow:

  1. Agents analyze Apple's SDK artifacts to create an API reference.
  2. The system renders scenes in a real iOS simulator (the "Source of Truth").
  3. The engine's output is compared against the simulator pixel-by-pixel.

Handling Dynamic Content: Since static screenshots cannot capture motion, Dactyl uses a filmstrip runner. This virtual clock ticks the engine in fixed increments, sampling frames and injecting synthetic user inputs (taps/keys) at precise timestamps. For gaming, the agents diff the internal state (e.g., the exact coordinates of a character at frame NNN).

Current Agent Queue:

  • UIKit/GestureScrollControl.swift
  • SwiftUI/Core/ShapeStyle.swift
  • SwiftUI/Modifiers/TextLayoutModifiers.swift
  • Charts/ChartRender.swift
  • CoreGraphics/CGPath.swift

The cycle continues: render, diff, adjust, and repeat until the engine and the real simulator are indistinguishable.