<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Kazuhiro Kotsutsumi</title>
    <description>The latest articles on DEV Community by Kazuhiro Kotsutsumi (@kotsutsumi_50).</description>
    <link>https://dev.to/kotsutsumi_50</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1379386%2F639a6280-855f-4374-bdce-40a2b7759251.jpeg</url>
      <title>DEV Community: Kazuhiro Kotsutsumi</title>
      <link>https://dev.to/kotsutsumi_50</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/kotsutsumi_50"/>
    <language>en</language>
    <item>
      <title>Zylix — a Zig‑based UI framework for 7 platforms</title>
      <dc:creator>Kazuhiro Kotsutsumi</dc:creator>
      <pubDate>Thu, 25 Dec 2025 03:16:29 +0000</pubDate>
      <link>https://dev.to/kotsutsumi_50/zylix-a-zig-based-ui-framework-for-7-platforms-4a</link>
      <guid>https://dev.to/kotsutsumi_50/zylix-a-zig-based-ui-framework-for-7-platforms-4a</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;“Could we build everything with just Zig?”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That simple question started &lt;a href="https://zylix.dev" rel="noopener noreferrer"&gt;Zylix&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Zylix is a cross‑platform UI framework built around Zig. From a single codebase, you can build native applications for Web&lt;br&gt;
(WASM), iOS, Android, macOS, Linux, and Windows — and the supported targets have now grown to 7 in total.&lt;/p&gt;

&lt;p&gt;We just released v0.19.0, which marks the end of the PoC stage. The project is still young, but I want to share the idea and&lt;br&gt;
design behind it.&lt;/p&gt;
&lt;h2&gt;
  
  
  The name
&lt;/h2&gt;

&lt;p&gt;If you’re a long‑time Delphi user, the name Zylix might feel familiar.&lt;/p&gt;

&lt;p&gt;Yes — it’s inspired by Kylix, Borland’s early 2000s attempt to bring Delphi to Linux. Kylix didn’t last, but the idea of&lt;br&gt;
“one language, many platforms” still feels powerful.&lt;/p&gt;

&lt;p&gt;Zylix is a modern attempt to revive that spirit with Zig.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Zig + Kylix = Zylix.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;
  
  
  Why Zig?
&lt;/h2&gt;

&lt;p&gt;Cross‑platform development already has a lot of options. Each comes with trade‑offs:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Framework&lt;/th&gt;
&lt;th&gt;Trade‑off&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Flutter&lt;/td&gt;
&lt;td&gt;Custom Skia rendering → less native feel&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;React Native&lt;/td&gt;
&lt;td&gt;JS bridge → performance overhead&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Electron&lt;/td&gt;
&lt;td&gt;Chromium bundle → huge binary size&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Tauri&lt;/td&gt;
&lt;td&gt;WebView → limited native integration&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Zig feels like a promising way to push past those limits:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Zero‑cost abstractions: no runtime overhead&lt;/li&gt;
&lt;li&gt;Predictable performance: no GC, deterministic memory&lt;/li&gt;
&lt;li&gt;Cross‑compile ready: one toolchain for all targets&lt;/li&gt;
&lt;li&gt;Full C ABI compatibility: easy to integrate with Swift/Kotlin/C#&lt;/li&gt;
&lt;li&gt;Compile‑time safety: null safety, bounds checks&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  The Zylix approach
&lt;/h2&gt;

&lt;p&gt;The core idea is simple:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Don’t unify the UI. Unify the meaning and decisions.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Frameworks like Flutter and React Native aim to unify the UI itself.&lt;br&gt;
Zylix keeps native UI frameworks (SwiftUI, Jetpack Compose, GTK4, WinUI 3, etc.) and only shares the logic layer.&lt;/p&gt;

&lt;p&gt;What’s shared in Zig:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;application state&lt;/li&gt;
&lt;li&gt;business logic&lt;/li&gt;
&lt;li&gt;data validation&lt;/li&gt;
&lt;li&gt;event handling&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;What stays platform‑native:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;UI components&lt;/li&gt;
&lt;li&gt;animations&lt;/li&gt;
&lt;li&gt;OS APIs&lt;/li&gt;
&lt;li&gt;native gestures&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Architecture
&lt;/h2&gt;

&lt;p&gt;Zylix uses a Central Brain architecture:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;┌──────────────────────────────────────────────┐
│                 Your Application             │
├──────────┬──────────┬──────────┬─────────────┤
│ SwiftUI  │ Compose  │  GTK4    │  WinUI 3    │  HTML/JS
├──────────┴──────────┴──────────┴─────────────┤
│                C ABI Layer                   │
├──────────────────────────────────────────────┤
│               Zylix Core (Zig)               │
│   Virtual DOM | State | Events | Diff | ...  │
└──────────────────────────────────────────────┘
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This gives you:&lt;/p&gt;

&lt;p&gt;For users&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;native look &amp;amp; feel&lt;/li&gt;
&lt;li&gt;full accessibility support&lt;/li&gt;
&lt;li&gt;small app size&lt;/li&gt;
&lt;li&gt;better battery life&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For developers&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;single source of logic&lt;/li&gt;
&lt;li&gt;compile‑time type safety&lt;/li&gt;
&lt;li&gt;cross‑compile from one toolchain&lt;/li&gt;
&lt;li&gt;predictable memory behavior&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Supported platforms
&lt;/h2&gt;

&lt;p&gt;Zylix currently targets 7 platforms.&lt;br&gt;
The stable ones today are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Web / WASM&lt;/li&gt;
&lt;li&gt;iOS&lt;/li&gt;
&lt;li&gt;Android&lt;/li&gt;
&lt;li&gt;macOS&lt;/li&gt;
&lt;li&gt;Linux&lt;/li&gt;
&lt;li&gt;Windows&lt;/li&gt;
&lt;li&gt;watchOS&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Implementation example
&lt;/h2&gt;

&lt;p&gt;A minimal counter shared across platforms:&lt;/p&gt;

&lt;p&gt;Zig core (shared logic)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight zig"&gt;&lt;code&gt;&lt;span class="k"&gt;pub&lt;/span&gt; &lt;span class="k"&gt;const&lt;/span&gt; &lt;span class="n"&gt;State&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;struct&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kt"&gt;i64&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="k"&gt;pub&lt;/span&gt; &lt;span class="k"&gt;fn&lt;/span&gt; &lt;span class="n"&gt;increment&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;state&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;State&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;state&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="py"&gt;counter&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;SwiftUI (iOS/macOS)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight swift"&gt;&lt;code&gt;&lt;span class="kt"&gt;Text&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="se"&gt;\(&lt;/span&gt;&lt;span class="n"&gt;zylixState&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;counter&lt;/span&gt;&lt;span class="se"&gt;)&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="kt"&gt;Button&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Increment"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;zylix_dispatch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;increment&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Jetpack Compose (Android)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight kotlin"&gt;&lt;code&gt;&lt;span class="nc"&gt;Text&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"${zylixState.counter}"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="nc"&gt;Button&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;onClick&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nf"&gt;zylixDispatch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nc"&gt;INCREMENT&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nc"&gt;Text&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Increment"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Same logic, fully native UI.&lt;/p&gt;

&lt;h2&gt;
  
  
  Project layout
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;zylix/
├── core/           # Zig core library
├── platforms/      # Platform implementations
│   ├── android/    # Kotlin/Jetpack Compose
│   ├── ios/        # Swift/SwiftUI
│   ├── linux/      # GTK4
│   ├── macos/      # SwiftUI
│   ├── web/        # WASM
│   └── windows/    # WinUI 3
├── site/           # Docs site
└── examples/       # Sample projects
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Current status &amp;amp; what’s next
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Zylix v0.19.0&lt;/strong&gt; is now beyond PoC. Since the Zenn article (&lt;a href="https://zenn.dev/kotsutsumi/articles/bd4607160de5be):" rel="noopener noreferrer"&gt;https://zenn.dev/kotsutsumi/articles/bd4607160de5be):&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Supported targets have grown to 7&lt;/li&gt;
&lt;li&gt;Core feature implementation is complete&lt;/li&gt;
&lt;li&gt;Automated tests are in place&lt;/li&gt;
&lt;li&gt;I’m now in the phase of building real apps with it and validating the experience&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is the most important phase: not just “it works,” but how it feels when you build something real with it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Contributions welcome
&lt;/h2&gt;

&lt;p&gt;Zylix is open source (Apache License 2.0).&lt;/p&gt;

&lt;p&gt;All contributions are welcome:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🐛 bug reports&lt;/li&gt;
&lt;li&gt;💡 feature ideas&lt;/li&gt;
&lt;li&gt;📝 docs improvements&lt;/li&gt;
&lt;li&gt;🔧 pull requests&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;GitHub: &lt;a href="https://github.com/kotsutsumi/zylix" rel="noopener noreferrer"&gt;https://github.com/kotsutsumi/zylix&lt;/a&gt;&lt;br&gt;
Docs: &lt;a href="https://zylix.dev" rel="noopener noreferrer"&gt;https://zylix.dev&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you’re into Zig or you want a new approach to cross‑platform native apps, come take a look.&lt;/p&gt;

&lt;h2&gt;
  
  
  Closing
&lt;/h2&gt;

&lt;p&gt;“Doing everything in Zig” might sound reckless, but I wanted to see what’s possible.&lt;/p&gt;

&lt;p&gt;Can we share logic without losing native UX?&lt;br&gt;
Can we keep performance and still target multiple platforms?&lt;/p&gt;

&lt;p&gt;Zylix is still early, but if this resonates with you, I’d love to build it together.&lt;/p&gt;

&lt;p&gt;Thanks for reading.&lt;/p&gt;

</description>
      <category>zig</category>
      <category>programming</category>
      <category>webdev</category>
      <category>ios</category>
    </item>
  </channel>
</rss>
