I am releasing the first developer preview of Clay Board Style System, a
CSS-inspired primitive engine for native GUI toolkits written in Nim.
For brevity, this article refers to Clay Board Style System as CBSS after
this point. CBSS is only an abbreviation used in writing; the project's
official name is Clay Board Style System.
Clay Board Style System starts from a simple observation: Web frontend work is
productive partly because CSS gives many frameworks a shared vocabulary for
layout and visual design. Native GUI development often has to rebuild that
foundation separately for every toolkit.
The project is an attempt to provide that primitive layer for native
applications without embedding a browser or recreating the Web platform.
Repository: https://github.com/puffball1567/clay-board-style-system
What Clay Board Style System is
Clay Board Style System provides a tree of primitive Box, Text, and Image
nodes, along with typed styles, layout, paint commands, hit testing, focus,
input dispatch, retained scrolling, and accessibility semantics.
The authoring model intentionally uses familiar CSS ideas:
- spacing, borders, radii, colors, and typography;
- row and column layout, alignment, sizing, clipping, and scrolling;
- absolute and overlay positioning;
- state styling for hover, active, focus, and disabled states.
The aim is that someone who can read a Web design article or a CSS example can
bring much of its layout and visual reasoning to a native application.
ui.box(uiStyle([
decl("padding", px(24)),
decl("gap", px(12)),
decl("background-color", colorValue(rgb(0.10, 0.12, 0.16))),
decl("border-radius", px(16))
])):
ui.text("A native UI, styled with familiar ideas")
What it is not
Clay Board Style System is not a browser, a WebView, an HTML renderer, or a
full CSS implementation. It does not aim for DOM compatibility, JavaScript,
browser quirks, or bug-for-bug CSS behavior.
It is also not a finished component library. Buttons, dialogs, menus, inputs,
and editors should be built as compositions on top of the primitive layer.
This boundary matters. The goal is to reuse the useful language of Web UI
design while keeping a native rendering, input, and application model.
Why Nim
The first implementation target is Nim because it can produce small native
applications while remaining expressive enough for UI composition. Clay Board
Style System also exposes a versioned C ABI with opaque handles and fixed-size
value structs. That lets an existing C, C++, Rust, Zig, or Swift core be paired
with a Nim frontend, rather than requiring a rewrite before the UI can be
explored.
My hope is that this creates a practical entry point to Nim: keep the existing
engine or product core, build the frontend in Nim, and adopt Nim more broadly
only where it proves useful.
Current developer preview
Version 0.2 targets Linux x86_64 with SDL3. It includes the primitive
style/layout pipeline, text shaping through cosmic-text, event routing, focus,
text input and IME integration, retained scrolling, navigation state, a
semantic accessibility model, and the C ABI.
The project is still early. Windows and macOS require contributor validation;
platform accessibility transports, animation timelines, full rich-text layout,
and some windowing behavior are not complete. Public APIs may change before
1.0.
This is therefore a release for people who want to evaluate the approach,
build experiments, and help shape the primitive layer—not a claim that every
desktop application should use it today.
Try it
Clay Board Style System requires Nim 2.2 or newer, Rust/Cargo for the native
text and image bridges, and SDL3 development files on the current Linux target.
git clone https://github.com/puffball1567/clay-board-style-system.git
cd clay-board-style-system
nimble setupBundled
nimble test
nimble sdl3Demo
The next work is to make the project's visual promise easier to judge: richer
design demos, practical composite controls, and broader platform validation.
Issues, experiments, and feedback are welcome in the repository.
Top comments (0)