Introducing Ymery - Declarative YAML-based UI for Dear ImGui Bundle

[zokrezyl]

Hi everyone!

** NOTE **: for naming/branding reasons the project has new name: Ymery instead of Imery. Thus the project lives now under: https://github.com/zokrezyl/ymery
I wanted to share a project we've been working on that builds on top of Dear ImGui Bundle.

What is Imery?

Imery lets you build ImGui applications using declarative YAML files instead of writing code. It emerged from
our experience building an audio analysis tool where we kept rewriting similar UI patterns and realized we
needed a more declarative approach.

Simple example:
app:
window_title: "Hello Ymery"
widget: builtin.text
data: greeting

data:
greeting:
metadata:
label: "Welcome to Ymery!"

Run with: ymery --main app

Why we built it:

• Separate UI structure from logic (MVC-like approach)
• Enable rapid iteration without recompiling
• Create a live data tree that UI components observe/manipulate
• Make ImGui accessible to non-programmers through YAML

Current state:
Early alpha - experimental, expect breaking changes. We're actively seeking feedback and ideas from the
community.

Links:

• GitHub: https://github.com/zokrezyl/ymery
• PyPI: pip install ymery

We'd love to hear your thoughts, suggestions, or use cases where this might (or might not!) be useful. Thank you
to Pascal Thomet for Dear ImGui Bundle - it's been a joy to build on top of! Not to forget the authors of Dear ImGui (Omar (@ocornut).

[zokrezyl]

Update: Under the link: https://zokrezyl.github.io/ymery/demo/index.html , you can find pyodide based examples. Have fun! your feedback would be appreciated

[pthom]

Thanks for sharing your project and I wish it will be successful!
I am away from my computer at the moment so that I cannot test it.

By looking at the examples, which consist only of yaml files, I could not figure out how to communicate between python and yaml. They seem to focus more on the widgets rather than on the interactions.
I would have liked to have a very simple example such as how can I build an application that displays an image from a camera with a simple slider to rotate this image : this would highlight how values are transferred between Python and yaml.

[zokrezyl]

The interaction happens through the live editing of the DataTree, precisely any custom implementation of the TreeLike interface. In your case both the slider and the image viewer would "live work" on the same DataTree (Defined under the "data" section of your apps layout). The slider would live update the angle, and in the render loop the Image widget would "see" the live updated value. Am working on cleaning up the examples and maybe add such an example.

Just some more details about the TreeLike: If the Kernel and DataTree implementation of the TreeLike are not sufficient, you can implement your own custom logic for the exposed methods "get_children_names", "get_metadata", "get" methods.

We are planning to add also the possibility to inject Python code, but as this is intended to run also in the browser, for security reasons such an interpreter will have limitations.

[zokrezyl]

@pthom , while the demos and other code is finished up, have a look at the matplotlib demo on https://zokrezyl.github.io/ymery/demo/index.html, select "Hello ImgGui Full" then "Demo Apps" then "Matplotlib". That is a good example where you change the parameters of the plot and the plot is updated real time. More to come. Lot of refactoring is happening constantly to enable both flexibility, clarity and other "itties" :)