wml - widget markup language (not jsx)

wml.jsx

<ui::window maximize(true) title(&app_title + ": New Blog Post")>
    <ui::toolbar on_action(&handle_toolbar_action)>
        <ui::icon context("toolbar") variant("edit")/>
        <ui::toolbar::separator grow(true) invisible(true)/>
        <ui::button context("toolbar") emit("cancel")>
            "Cancel"
        </ui::button>
    </ui::toolbar>
    <ui::form on_error(&handle_form_error) on_submit(&handle_form_submit) on_success(&handle_form_success)>
        <ui::layout::flex direction("vertical") grow(true)>
            <ui::form::field key("title") label("Title") type("string") variant("input")/>
            <ui::form::field key("content") label("Content") type("string") variant("editor")/>
            <ui::layout::flex direction("horizontal") justify("end")>
                <ui::button context("form") emit("submit")>
                    "Submit"
                </ui::button>
            </ui::layout::flex>
        </ui::layout::flex>
    </ui::form>
</ui::window>

wml_compiled.cpp

wtk::render<ui::window>({ { "maximize", true }, { "title", &app_title + ": New Blog Post" }, {
    wtk::render<ui::toolbar>({ { "on_action", &handle_toolbar_action } }, {
        wtk::render<ui::icon>({ { "context", "toolbar" }, { "variant", "edit" } }),
        wtk::render<ui::toolbar::separator>({ { "grow", true }, { "invisible", true } }),
        wtk::render<ui::button>({ { "context", "toolbar" }, { "emit", "cancel" } }, {
            "Cancel"
        })
    }),
    wtk::render<ui::form>({ { "on_error", &handle_form_error }, { "on_submit", &handle_form_submit }, { "on_success", &handle_form_success } }, {
        wtk::render<ui::layout::flex>({ { "direction", "vertical" }, { "grow", true } }, {
            wtk::render<ui::form::field>({ { "key", "title" }, { "label", "Title" }, { "type", "string" }, { "variant", "input" } }),
            wtk::render<ui::form::field>({ { "key", "content" }, { "label", "Content" }, { "type", "string" }, { "variant", "editor" } }),
            wtk::render<ui::layout::flex>({ { "direction", "horizontal" }, { "justify", "end" } }, {
                wtk::render<ui::button>({ { "context", "form" }, { "emit", "submit" } }, {
                    "Submit"
                })
            })
        })
    })
})

wml_rust.jsx

<qwil::App(title: appTitle + ": New Blog Post")>
    <qwil::Toolbar(onAction: handleToolbarAction)>
        <qwil::Icon(context: "toolbar", variant: "edit")/>
        <qwil::ToolbarSeparator(grow: true, invisible: true)/>
        <qwil::Button(context: "toolbar", emit: "cancel")>
            "Cancel"
        </qwil::Button>
    </qwil::Toolbar>
    <qwil::Form(onError: handleFormError, onSubmit: handleFormSubmit, onSuccess: handleFormSuccess)>
        <qwil::Layout(direction: "vertical", grow: true, variant: "flex")>
            <qwil::FormField(key: "title", label: "Title", type: "string", variant: "input")/>
            <qwil::FormField(key: "content", label: "Content", type: "string", variant: "advanced")/>
            <qwil::Layout(direction: "horizontal", justify: "end")>
                <qwil::Button(context: "form", emit: "submit")>
                    "Submit"
                </qwil::Button>
            </qwil::Layout>
        </qwil::Layout>
    </qwil::Form>
</qwil::App>