<?xml version="1.0" encoding="utf-8"?><?xml-stylesheet type="text/xsl" href="rss.xsl"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/">
    <channel>
        <title>SVision3 Blog</title>
        <link>https://diegoiast.github.io/get-svision3/blog</link>
        <description>SVision3 Blog</description>
        <lastBuildDate>Wed, 12 Aug 2026 00:00:00 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <language>en</language>
        <item>
            <title><![CDATA[Declartive UI]]></title>
            <link>https://diegoiast.github.io/get-svision3/blog/declarative-ui</link>
            <guid>https://diegoiast.github.io/get-svision3/blog/declarative-ui</guid>
            <pubDate>Wed, 12 Aug 2026 00:00:00 GMT</pubDate>
            <description><![CDATA[SVision3 is very conservative. Its a retained, imperiveite C++ toolkit. It means]]></description>
            <content:encoded><![CDATA[<p>SVision3 is very conservative. Its a retained, imperiveite C++ toolkit. It means
that you build your UI, using objects. You do not "define how it will be built"
like declarative APIs (see QML or Slint).</p>
<p>I did a test - what id we would have a declaraive API? (not a reactive one,
meaning - data would not modify the UI). I started experimenting.</p>
<p><img decoding="async" loading="lazy" alt="Declarative" src="https://diegoiast.github.io/get-svision3/assets/images/declarative-api-a022fdc9634e39ce242026137ad6f2f5.png" width="2337" height="1461" class="img_ev3q">.</p>
<!-- -->
<p>I was impressed - this UI looked cooler and easier to read. On the minimap of
my IDE - I could actually see the the UI tree. The chaining API got a new life
here, being the center of the stage. Everything is chainable.</p>
<p>See how easy is to define a menu/toolbar and center of window (here the root
widget is constructed elsewhere in the code):</p>
<div class="language-cpp codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-cpp codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><div class="token-line" style="color:#393A34"><span class="token plain">window</span><span class="token operator" style="color:#393A34">-&gt;</span><span class="token function" style="color:#d73a49">set_root</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">    ui</span><span class="token double-colon punctuation" style="color:#393A34">::</span><span class="token function" style="color:#d73a49">vbox</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">margins</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">ui</span><span class="token double-colon punctuation" style="color:#393A34">::</span><span class="token function" style="color:#d73a49">no_margins</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">spacing</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">ui</span><span class="token double-colon punctuation" style="color:#393A34">::</span><span class="token plain">no_spacing</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">add</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">ui</span><span class="token double-colon punctuation" style="color:#393A34">::</span><span class="token function" style="color:#d73a49">menubar</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                    </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">add_menu</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                        ui</span><span class="token double-colon punctuation" style="color:#393A34">::</span><span class="token function" style="color:#d73a49">menu</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"&amp;File"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                            </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">action</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">new_cmd</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                            </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">action</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">open_cmd</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                            </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">action</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">save_cmd</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                            </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">action</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">export_cmd</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                            </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">separator</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                            </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">submenu</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                                </span><span class="token string" style="color:#e3116c">"Recent &amp;Files"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                                ui</span><span class="token double-colon punctuation" style="color:#393A34">::</span><span class="token function" style="color:#d73a49">menu</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                                    </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">action</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"&amp;File1.txt"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> spdlog</span><span class="token double-colon punctuation" style="color:#393A34">::</span><span class="token function" style="color:#d73a49">info</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"Opening File1"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                                    </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">action</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"&amp;File2.txt"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> spdlog</span><span class="token double-colon punctuation" style="color:#393A34">::</span><span class="token function" style="color:#d73a49">info</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"Opening File2"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                            </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">separator</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                            </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">action</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">exit_cmd</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                    </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">add_menu</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">ui</span><span class="token double-colon punctuation" style="color:#393A34">::</span><span class="token function" style="color:#d73a49">menu</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"&amp;Edit"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                                </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">action</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">undo_cmd</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                                </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">action</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">redo_cmd</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                                </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">separator</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                                </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">action</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"Cut"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> spdlog</span><span class="token double-colon punctuation" style="color:#393A34">::</span><span class="token function" style="color:#d73a49">info</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"Menu: Cut"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                                </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">action</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"Copy"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> spdlog</span><span class="token double-colon punctuation" style="color:#393A34">::</span><span class="token function" style="color:#d73a49">info</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"Menu: Copy"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                                </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">action</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"Paste"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> spdlog</span><span class="token double-colon punctuation" style="color:#393A34">::</span><span class="token function" style="color:#d73a49">info</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"Menu: Paste"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                    </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">add_menu</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">ui</span><span class="token double-colon punctuation" style="color:#393A34">::</span><span class="token function" style="color:#d73a49">menu</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"&amp;Help"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                                </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">action</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"About"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                                        </span><span class="token punctuation" style="color:#393A34">[</span><span class="token operator" style="color:#393A34">&amp;</span><span class="token plain">window</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                                            toolkit</span><span class="token double-colon punctuation" style="color:#393A34">::</span><span class="token function" style="color:#d73a49">MessageBox</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">window</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                                                </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">title</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"About SVision3"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                                                </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">markdown</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                                                </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">message</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"## SVision3\n\n"</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                                                        </span><span class="token string" style="color:#e3116c">"Declarative API demo application.\n\n"</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                                                        </span><span class="token string" style="color:#e3116c">"Demo of a C++ **cross-platform** UI "</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                                                        </span><span class="token string" style="color:#e3116c">"toolkit."</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                                                </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">show</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                                        </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">add</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">ui</span><span class="token double-colon punctuation" style="color:#393A34">::</span><span class="token function" style="color:#d73a49">toolbar</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                    </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">command</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"OK"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> spdlog</span><span class="token double-colon punctuation" style="color:#393A34">::</span><span class="token function" style="color:#d73a49">info</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"Toolbar: OK"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                    </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">command</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">exit_cmd</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                    </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">separator</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                    </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">command</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"Disabled"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"This command is disabled"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                    </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">disable</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                    </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">command</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"Increase count"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"Increase the counter"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> repeat_action</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                    </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">add</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">ui</span><span class="token double-colon punctuation" style="color:#393A34">::</span><span class="token function" style="color:#d73a49">spacer</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> ui</span><span class="token double-colon punctuation" style="color:#393A34">::</span><span class="token plain">expand</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                    </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">add</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">toolbar_theme_toggle</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">                    </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">add</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">toolbar_theme_combo</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">add</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">rootWidget</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> ui</span><span class="token double-colon punctuation" style="color:#393A34">::</span><span class="token plain">expand</span><span class="token punctuation" style="color:#393A34">)</span><br></div></code></pre></div></div>
<p>Then I ported the main demo app into the new declarative API, and the same UI
was written in 200 lines less! Binary size was the same (as this is just
syntactic sugar on top of the imperative API).</p>
<p>Not unlike <a href="https://developer.android.com/compose" target="_blank" rel="noopener noreferrer" class="">Android's Compose API</a>.</p>]]></content:encoded>
            <category>Announcement</category>
        </item>
        <item>
            <title><![CDATA[Another toolkit?]]></title>
            <link>https://diegoiast.github.io/get-svision3/blog/another-toolkit</link>
            <guid>https://diegoiast.github.io/get-svision3/blog/another-toolkit</guid>
            <pubDate>Tue, 11 Aug 2026 00:00:00 GMT</pubDate>
            <description><![CDATA[If you are trying to build a desktop GUI application you have several options.]]></description>
            <content:encoded><![CDATA[<p>If you are trying to build a <em>desktop</em> GUI application you have several options.
Each one has its own strenghs.</p>
<p>However - you will get a non native solution, or a limited GUI, or a very large
installer. In some cases, things like utilities to modify a small hardware you
provide (the Logiteck mouse utilities, Rapoo has a similar utility or maybe
a program to flush the firmware of your new USB adget) - using available
solutions just do not scale, or are non optimal.</p>
<p>Other solutions are great (specially Qt, DearImgui and Slint, which are my
recommendations). But I think SVision3 can provide a valid alternative to existing
toolkit libraries,in a very small codebase withtout compromising on features.
This list does not aim to "trash" competitions - but to praise them. They all have
a their place.</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="electron-with-javascripttypescript">Electron with JavaScript/Typescript.<a href="https://diegoiast.github.io/get-svision3/blog/another-toolkit#electron-with-javascripttypescript" class="hash-link" aria-label="Direct link to Electron with JavaScript/Typescript." title="Direct link to Electron with JavaScript/Typescript." translate="no">​</a></h2>
<p><a href="https://www.electronjs.org/" target="_blank" rel="noopener noreferrer" class="">Electron</a> based application seem to be the prefered method in the industry. This is
what <a href="https://code.visualstudio.com/" target="_blank" rel="noopener noreferrer" class="">VSCode</a>, <a href="https://slack.com/downloads/windows" target="_blank" rel="noopener noreferrer" class="">Slack</a> and lots of other use.</p>
<p>You get the very large
ecosystem of <code>nodejs</code> - and an easy way to target the major platforms. Another
huge benefit - is that you can share code with your web site, and provide a very
similar experience.</p>
<p>The problem this solution cannot solve - is that you are still writing a portable
website into a window. Integration with the user's desktop/platform is not ideal.
You are locked in JavaScript (wasting d-ccache, and fearing the underterministic
heap cleanup) and any interaction with the OS needs to be marshalled.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="tauri---rustjavascripttypescript">Tauri - Rust+JavaScript/TypeScript<a href="https://diegoiast.github.io/get-svision3/blog/another-toolkit#tauri---rustjavascripttypescript" class="hash-link" aria-label="Direct link to Tauri - Rust+JavaScript/TypeScript" title="Direct link to Tauri - Rust+JavaScript/TypeScript" translate="no">​</a></h2>
<p>Use <a href="https://github.com/tauri-apps/tauri" target="_blank" rel="noopener noreferrer" class="">Tauri</a> with  JavaScript/Typescript
for front end, and backend (?) in Rust. This is becoming an alternative to Electron
using the system webview. But again, you are in Javascript land - not running directly
on the OS. This is another abstraction.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="dear-imgui">Dear Imgui<a href="https://diegoiast.github.io/get-svision3/blog/another-toolkit#dear-imgui" class="hash-link" aria-label="Direct link to Dear Imgui" title="Direct link to Dear Imgui" translate="no">​</a></h2>
<p>You can use <a href="https://github.com/ocornut/imgui" target="_blank" rel="noopener noreferrer" class="">Dear Imgui</a> for immediate C++ GUI.
This is a very simple UI to integrate into an existing system. It is native,
and very performant - but the toolkit is limited, and making a proper desktop
app is not trivial (BUT! There are some very impressive applications written in
it!).</p>
<p>The toolkit provided is very limited, and does not look native. Doing layouts
or using docks is not standard (the docks branch is stable, but not the default).</p>
<p>Localization, and internazionalisation is not trivial.</p>
<p>Complex text layout? Screen readers? Input methods? This is not something
this library can fix at this moment.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="use-qt-with-widgets-or-qml">Use Qt with Widgets or QML.<a href="https://diegoiast.github.io/get-svision3/blog/another-toolkit#use-qt-with-widgets-or-qml" class="hash-link" aria-label="Direct link to Use Qt with Widgets or QML." title="Direct link to Use Qt with Widgets or QML." translate="no">​</a></h2>
<p>If you want "the best" C++ toolkit available - that would be <a href="https://www.qt.io/" target="_blank" rel="noopener noreferrer" class="">Qt</a>.
Period. It is everything you need and can be used in other languages as
well (lots of Python code uses Qt). The disadvantage is a very large distribution
binary. It is difficult to properly deploy in an installer
(<a href="https://github.com/codepointerapp/codepointer/blob/95c46522c05f0a08badd87f7c5062e6eec18018f/.github/workflows/build.yml#L121" target="_blank" rel="noopener noreferrer" class="">I know, I have experience with it</a>).</p>
<p>Another problem with Qt - is that the "widgets" part is considered "done". No real
development is going there. The vast majority of the development effort is on the
QML site. Also, as a very "experienced" library, it started when STL was not a thing
and it contains another container library.</p>
<p>This is one of my personal peeves with it: it tries to do everything for its own.
You want an INI file loader? we got an implementation. Painters? Cool, we got
our own. QRichTextWidget for exmaple uses its own rendering engine for its
minimal HTML (and you have WebView as well).</p>
<p>I also found myself writing very basic widgets, which I assume they should provide
in 2026. And I am still have bugs related to DPI, and look inside GNome or Windows11
is not ideal.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="slintui">SlintUI<a href="https://diegoiast.github.io/get-svision3/blog/another-toolkit#slintui" class="hash-link" aria-label="Direct link to SlintUI" title="Direct link to SlintUI" translate="no">​</a></h2>
<p>A new alternative I see - is <a href="https://slint.dev/" target="_blank" rel="noopener noreferrer" class="">slint</a>. It seems to be Qt, without
QWidget, purely QML. A good rust support, and C++ native. UI code is written
in a DSL, not in C++.</p>
<p>I am not a fan of another language for the UI. Also, this still uses JavaScript
which is another huge dependency. Might be OK for you - but not what I consider
native.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="svision-3">SVision 3<a href="https://diegoiast.github.io/get-svision3/blog/another-toolkit#svision-3" class="hash-link" aria-label="Direct link to SVision 3" title="Direct link to SVision 3" translate="no">​</a></h2>
<p>This new toolkit is trying to think: "what if QtWidgets was done from scratch using
modern C++". We could re-use a lot of 3rd parties instead of re-writing all from
scratch (see <a href="https://en.wikipedia.org/wiki/Not_invented_here" target="_blank" rel="noopener noreferrer" class="">https://en.wikipedia.org/wiki/Not_invented_here</a>).</p>
<p>Some of the ideas that are in the design of SVision3:</p>
<ul>
<li class="">Do not abuse inheritance. Qt has QWidget -&gt; QPushButton -&gt; QCheckbox/QButton.
In SVision3 snstead, functionality needed by several classes is moved to a
new class (see ButtonState). This re-uses behaviour in several widgets. See also
<a href="https://en.wikipedia.org/wiki/Composition_over_inheritance" target="_blank" rel="noopener noreferrer" class="">https://en.wikipedia.org/wiki/Composition_over_inheritance</a> .</li>
<li class="">We have a large ecosystem of 3rd parties. We can use <a href="https://marzer.github.io/tomlplusplus/" target="_blank" rel="noopener noreferrer" class="">toml++</a>
for parsing INI/Toml files, or use <a href="https://github.com/litehtml/litehtml/" target="_blank" rel="noopener noreferrer" class="">litehtml</a>
and <a href="https://github.com/mity/md4c" target="_blank" rel="noopener noreferrer" class="">md4c</a> to display markdown in a widget. For logging
we can use <a href="https://github.com/gabime/spdlog" target="_blank" rel="noopener noreferrer" class="">spdlog</a> which gives us for free
also <a href="https://github.com/fmtlib/fmt" target="_blank" rel="noopener noreferrer" class="">fmt</a>.</li>
<li class="">Unlike Qt, which uses its painter, SVision3 abstract the platfomr's native painter
(GDI+, Cocoa or Cairo) in a very thin way, so in generated code actually uses
the platform's drawing routines.</li>
<li class="">We can use <a href="https://github.com/catchorg/Catch2" target="_blank" rel="noopener noreferrer" class="">catch2</a> as internal unit test
framework.</li>
</ul>
<p>All these ideas free the toolkit's developers from doing anything not related to
the toolkit itself (no unit test framwork, build system).</p>
<p>Some other things that make this toolkit better:</p>
<ul>
<li class="">We use UTF-8 everywhere. We have an iterator for reading it, as just iteragin over
the char vectos will fail.</li>
<li class="">We have themes that emulate the look and feel of the host platform. Ideally - a
user of this library, will not know how its built - it will look "in home".</li>
<li class="">CSD as first class citizen. Window decorations are normal widgets and layouts
you can just hook into them - and inject a normal widget.</li>
<li class="">We do use the platform's image loaders. On Windows and macOS - the platform provide
very good APIs. No need to re-bundle libpng or libjpeg.</li>
<li class="">We do learn from Qt experience - and subsystems are abstracted. Platform windowing
is chosen on runtime (Windows and macOS have a single one, but Linux has X11 and Wayland)
each providing its own painter, and rasterizer. (not unlike <a href="https://www.fltk.org/" target="_blank" rel="noopener noreferrer" class="">fltk</a>).</li>
<li class="">We also let developers choose the painter, or rasterizer at compile time - so you
can provide your own backend for creating windows, painting or load images.</li>
<li class="">We have i18n. The difference from Qt/GTK is that our translation system
creates classes containing the translation, which are compiled into the binary
itseld, instead of data parsed at runtime (but still - PO reading at runtime
is supported).</li>
<li class="">The MVC system Qt uses was the inspiration for the system used in SVision3.</li>
<li class=""><strong>0FPS</strong>. Unlike toolkits like <a href="https://slint.dev/" target="_blank" rel="noopener noreferrer" class="">slint</a> which has a moto of "we can
draw 60 frames per second" - we aim at the exact oposite. We don't draw if possible.
In static UIs (lets be honest, applications sit idle in ideal mode). No drawing
is done at all. Same for Dear Imgui - which redraws constantly.</li>
<li class="">We use conan for distributing the library.</li>
<li class="">We also provide a demo git repo,
which you can clone and continue working on your own repo. This already
contians github/gitlab actions to build your application - reducing fraction,
so you can focus on develping software, not on packaging for 3-4 platforms.</li>
</ul>
<p>So yes. Another toolkit. I think I can do better, with less code and smaller footprint.</p>]]></content:encoded>
            <category>Announcement</category>
        </item>
        <item>
            <title><![CDATA[Welcome to the SVision3 site]]></title>
            <link>https://diegoiast.github.io/get-svision3/blog/welcome</link>
            <guid>https://diegoiast.github.io/get-svision3/blog/welcome</guid>
            <pubDate>Mon, 10 Aug 2026 00:00:00 GMT</pubDate>
            <description><![CDATA[I am not new to GUI toolkits. My first one (svision) - was written in TP7,]]></description>
            <content:encoded><![CDATA[<p>I am not new to GUI toolkits. My first one (svision) - was written in TP7,
emulating the API of TurboVision, but in a graphical system. I wrote the 2nd one
a few years later - called <a href="https://github.com/diegoiast/svision2" target="_blank" rel="noopener noreferrer" class="">svision2</a>.</p>
<p>This is the 3rd iteration. It is much more mature try to build a production
ready cross platform GUI in pure C++.</p>
<p>This is a very exciting time to be writing C++ code, with C++26 comming to life
and bringing exciting featuress like compile time reflection. We have the best
tools for helping develop (thinkgs like <code>clang-format</code> or <code>clang-tidy</code>). Sites
like <a href="https://github.com/" target="_blank" rel="noopener noreferrer" class="">https://github.com</a> or https:://gitlab.com that help spread code. New build
sysetems like <a href="https://vcpkg.io/en/" target="_blank" rel="noopener noreferrer" class="">vcpkg</a> or <a href="https://conan.io/" target="_blank" rel="noopener noreferrer" class="">connan</a>.</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="whats-here-today">What's here today<a href="https://diegoiast.github.io/get-svision3/blog/welcome#whats-here-today" class="hash-link" aria-label="Direct link to What's here today" title="Direct link to What's here today" translate="no">​</a></h2>
<ul>
<li class=""><strong><a class="" href="https://diegoiast.github.io/get-svision3/docs/tutorial">Tutorial</a></strong> — build the toolkit and get a window with
a label and a button on screen.</li>
<li class=""><strong><a class="" href="https://diegoiast.github.io/get-svision3/docs/demos">Demos</a></strong> —  demos of the available code.</li>
<li class=""><strong><a class="" href="https://diegoiast.github.io/get-svision3/docs/declarative">Declarative API</a></strong> — the <code>ui::</code> fluent wrapper used
throughout <code>demo_declarative.cpp</code>.</li>
<li class=""><strong><a class="" href="https://diegoiast.github.io/get-svision3/docs/widgets">Widgets &amp; Modules</a></strong> — every widget class, grouped by
category, each with its constructor, API table, callbacks, and a themed
screenshot gallery.</li>
</ul>
<p>This blog will track notable changes to the toolkit and to the docs
themselves as both evolve.</p>]]></content:encoded>
            <category>Announcement</category>
        </item>
    </channel>
</rss>