Hello Nuklear

[TomJGooding]

I want to learn Nuklear and thought a simple project to get started would be to try to recreate the Hello World app from GTK:

I might be missing something obvious, but I'm still struggling to create this simple app after spending a good amount of time reading the docs and source code. I think I've finally managed a create a shrink-to-fit button in a full-size window, but centering things is apparently always hard!

if (nk_begin(ctx, "Hello", nk_rect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT), NK_WINDOW_NO_SCROLLBAR))
{
    const char *btn_label = "Hello Nuklear";
    const struct nk_user_font *font = ctx->style.font;
    float btn_width = font->width(font->userdata, font->height, btn_label, nk_strlen(btn_label));
    float padding_x = ctx->style.window.padding.x;
    btn_width += 8 * padding_x; /* TODO: Correct padding? */

    nk_layout_row_static(ctx, 0, btn_width, 1);
    if (nk_button_label(ctx, btn_label))
        fprintf(stdout, "Hello Nuklear\n");
}
nk_end(ctx);

[rswinkle]

You really know how to pick one of the more awkward things to do in Nuklear don't you? Sorry for the slow reply, as you can see we don't use discussions much.

What you have is definitely more complicated than necessary. Centering things vertically is always a bit of a pain in Nuklear, but since Nuklear is row based, you centering things horizontally is easier.

Also you should rarely have to call font->width() manually, especially for something simple like this. Usually you just pick a pixel width that works, or possibly a fraction if you're doing one of the nk_layout_row_xxx or nk_layout_row() methods.

I can think of a couple ways to do this. One is to use nk_layout_space*():

    const int win_dim = 300;
    const int font_size = 13;
    int win_flags = NK_WINDOW_MOVABLE|NK_WINDOW_SCALABLE|NK_WINDOW_BORDER|NK_WINDOW_NO_SCROLLBAR;
    if (nk_begin(ctx, "Centered Button", nk_rect(600, 100, win_dim, win_dim), win_flags)) {
        struct nk_rect win_content_rect = nk_window_get_content_region(ctx);
        float win_w = win_content_rect.w;
        float win_h = win_content_rect.h;

        nk_layout_space_begin(ctx, NK_STATIC, win_content_rect.h, 1);
        float button_h = font_size + 20;
        float x = (win_w-100)*0.5f;
        float y = (win_h-button_h)*0.5f;
        nk_layout_space_push(ctx, nk_rect(x, y, 100, button_h));
        nk_button_label(ctx, "Hello World");
        nk_layout_space_end(ctx);
    }

As you can see, I just picked 100 pixels wide and didn't bother with font->width(). That code gets you this:

Screencast.from.2026-04-16.01-09-04.mp4

The other way you could do it is just inserting an "empty" row above the button (use nk_spacer()). You'd still need to do some height calculation to know how tall it should be but you could get the same result as above, but also have more flexibility with your button layout. Honestly, the easiest thing to do is always just nk_layout_dynamic(ctx, 0, 1) and let it take up the whole row but
you can also do something simple like:

nk_layout_dynamic(ctx, 0, 3);
nk_spacer(ctx);
nk_button_label(ctx, "Hello World");
nk_spacer(ctx);

To make it fill the center third horizontally. Change 3 to whatever you want, or use nk_layout_row() to do the same thing with more flexibility (ie you can use exact pixel sizes if you want).

Another idea I just had is you could also temporarily increase the window x padding which could also center it. I've never done that but you could theoretically just temporarily change window padding for both x and y to center the button in horizontally and vertically at the same time, even just using a single nk_layout_dynamic(ctx, 0, 1) layout for the entire window.

I'll have to try that sometime. But I would recommend the 2 earlier methods.

[TomJGooding]

Thanks @rswinkle for your reply! Haha yes, I realised pretty quickly that this wasn't the easiest project to get started with Nuklear, but it was actually a good learning exercise to dig a bit deeper into how the layouting works!

It looks like the nk_layout_space_xxx API is probably the best solution if I want control over the width of the button?

I was trying to achieve a 'shrink-to-fit' button which is why I used font->width. For example, suppose later I wanted to change the button text (or even the font size), I didn't want to have to keep adjusting a hard-coded value until I found a width that worked.

Similarly for the button height, I would like this to match the 'default' size of other buttons. But that should be easier if I've understood correctly this is the minimum row height which presumably is a property somewhere (I haven't checked yet)...

Thanks again for your help!

[TomJGooding]

Updated example below for posterity:

struct nk_rect win_size = nk_window_get_content_region(ctx);
float win_w = win_size.w;
float win_h = win_size.h;

const struct nk_user_font *font = ctx->style.font;
const struct nk_style_button *btn_style = &ctx->style.button;

nk_layout_space_begin(ctx, NK_STATIC, win_h, 1);
const char *btn_label = "Hello Nuklear";
float btn_w = font->width(font->userdata, font->height, btn_label, nk_strlen(btn_label));
btn_w += 2 * (btn_style->padding.x + btn_style->border + btn_style->rounding);
float btn_h = ctx->current->layout->row.min_height;
float x = (win_w - btn_w) / 2;
float y = (win_h - btn_h) / 2;
nk_layout_space_push(ctx, nk_rect(x, y, btn_w, btn_h));
if (nk_button_label(ctx, btn_label)) {
    fprintf(stdout, "Hello Nuklear\n");
}
nk_layout_space_end(ctx);

[rswinkle]

Thanks @rswinkle for your reply! Haha yes, I realised pretty quickly that this wasn't the easiest project to get started with Nuklear, but it was actually a good learning exercise to dig a bit deeper into how the layouting works!

Definitely a good idea. I went down the rabbit hole years ago, ended up building the style configurator to help me understand it and I still don't feel like I understand it completely, but enough to use it.

It looks like the nk_layout_space_xxx API is probably the best solution if I want control over the width of the button?

Not necessarily. You can control the exact width of the button with any of the static layouting methods. There are minor behavioral differences.

I was trying to achieve a 'shrink-to-fit' button which is why I used font->width. For example, suppose later I wanted to change the button text (or even the font size), I didn't want to have to keep adjusting a hard-coded value until I found a width that worked.

You can handle font resizes without font->width too. Just multiply your default width by the ratio font_size / DFLT_FONT_SIZE, assuming the latter is a constant/macro. I handle live font and font size changes in sdl_img like this. Sure there might be small width differences between monospace and non-monospace fonts, but not enough to matter compared to the actual size of the font.

Similarly for the button height, I would like this to match the 'default' size of other buttons. But that should be easier if I've understood correctly this is the minimum row height which presumably is a property somewhere (I haven't checked yet)...

So this is sort of what led to my own deep dive years ago for sdl_img. I didn't pull that +20 out of nowhere. This is what I came up with when looking for the minimal window height for a single row of buttons and have used since then:

// win.padding.y = 4
// text.padding.y = 0
// min_row_height_padding = 8
// win.spacing.y = 4
//
// row height = height + win.spacing.y;
//
// if height is 0 use min height which is:
// font_height + 2*min_row_height_padding + 2*text.padding.y;
//
// so automatic row height is
// font_size + 16 + 4
//
// so total window height needed for that row
// row_height + 2 * win.padding.y
//
// (font_size + 16 + 4) + 8 = font_size + 28
//
// plus extra for borders?

Since we don't care about the window height, just the button height it would be font_size + 20 by default. If you modify the window padding and/or spacing then obviously the calculation would change but you would probably just pass your hard coded font_size + 20 rather than 0 in those cases where you want the default height but want the widgets packed closer together.

Thanks again for your help!

You're welcome. It was a good excuse to test myself and my understanding of the layouting methods.

Here are two more equivalent methods that only differ from the space layout slightly:

    if (nk_begin(ctx, "Centered Button2", nk_rect(600, 450, win_dim, win_dim), win_flags)) {
        /*could also manually save/restore but this makes the calculations simpler */
        nk_style_push_vec2(ctx, &ctx->style.window.spacing, nk_vec2(0,0));
        nk_style_push_vec2(ctx, &ctx->style.window.padding, nk_vec2(0,0));

        struct nk_rect win_content_rect = nk_window_get_content_region(ctx);
        float win_w = win_content_rect.w;
        float win_h = win_content_rect.h;


        /*this is the correct default height*/
        float button_h = font_size + 20;
        float button_w = 100 * (font_size / DFLT_FONT_SIZE);
        float spacer_w = (win_w >= button_w) ? (win_w-button_w)*0.5f : 0;

        float x = (win_w-100)*0.5f;
        float y = (win_h-button_h)*0.5f;
        nk_layout_row_dynamic(ctx, y, 1);
        nk_spacer(ctx);

        /* Two equivalent ways of centering a widget with an exact width */
#if 1
        const float ratio[] = { spacer_w, button_w, spacer_w };
        nk_layout_row(ctx, NK_STATIC, button_h, 3, ratio);
#else

        nk_layout_row_template_begin(ctx, button_h);
        nk_layout_row_template_push_static(ctx, spacer_w);
        nk_layout_row_template_push_static(ctx, button_w);
        nk_layout_row_template_push_static(ctx, spacer_w);
        nk_layout_row_template_end(ctx);
#endif
        nk_spacer(ctx);
        nk_button_label(ctx, "Hello World");
        nk_spacer(ctx);

        /* not strictly necessary but for symmetry */
        nk_layout_row_dynamic(ctx, y, 1);
        nk_spacer(ctx);

        /* restore default styling */
        nk_style_pop_vec2(ctx);
        nk_style_pop_vec2(ctx);
    }
    nk_end(ctx);

And here's what that looks like compared to the original method:

Screencast.from.2026-04-17.13-58-53.mp4

You can see the difference when the window becomes too narrow. It would actually bounce back a bit right rather than settle against the side if I didn't explicitly prevent spacer_w from becoming negative, but most of the time I wouldn't even bother since that's an extreme edge case.