<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
  <title>github.com/ppmpreetham</title>
  <subtitle>Browse aymeric&#39;s, an independent, searchable archive of readable snapshots from followed feeds, preserved in Git with aggr.</subtitle>
  <id>https://aggr.aymericbeaumet.com/sources/github.com/ppmpreetham/</id>
  <link rel="alternate" type="text/html" href="https://aggr.aymericbeaumet.com/sources/github.com/ppmpreetham/"/>
  <link rel="self" type="application/atom+xml" href="https://aggr.aymericbeaumet.com/sources/github.com/ppmpreetham/atom.xml"/>
  <updated>2026-11-06T07:40:35+00:00</updated>
  <author>
    <name>aymeric&#39;s</name>
  </author>
  <generator version="2.0.0" uri="https://github.com/aymericbeaumet/aggr">aggr</generator>
  <entry>
    <id>urn:aggr:item:b6ecd3367553b5d717dc967e01cbbe1f622a2b1b</id>
    <title type="text">Blender&#39;s UI and Runtime: Much Faster Than GPUI</title>
    <link rel="alternate" type="text/html" href="https://aggr.aymericbeaumet.com/items/hnrss-org/2026-11-06-blender-s-ui-and-runtime-much-faster-than-gpui/"/>
    <link rel="via" type="text/html" href="https://github.com/ppmpreetham/BUI"/>
    <published>2026-11-06T07:40:35+00:00</published>
    <updated>2026-11-06T07:40:35+00:00</updated>
    <author>
      <name>ppmpreetham</name>
    </author>
    <category term="news"/>
    <source>
      <title>Hacker News: Front Page</title>
    </source>
    <summary type="text">Blender&#39;s user interface, as a library you can use from Python, Rust, JavaScript (React, Svelte), C, C++ and Dear ImGui. People spent decades building and optimizing Blender&#39;s GUI. It&#39;s battery and memory efficient, and super duper fast.…</summary>
    <content type="html">&lt;figure class=&quot;article-figure&quot;&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/public/Logo.png&quot; alt=&quot;BUI Logo&quot; loading=&quot;eager&quot; decoding=&quot;async&quot; fetchpriority=&quot;high&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Blender&#39;s user interface, as a library you can use from Python, Rust, JavaScript (React, Svelte), C, C++ and Dear ImGui.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;People spent decades building and optimizing Blender&#39;s GUI. It&#39;s battery and memory efficient, and super duper fast. We decoupled it, to give everyone a chance to build their own products with it. It supports multiple languages and frameworks, so you won&#39;t miss a beat!&lt;/p&gt;
&lt;p&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://pypi.org/project/blenderui/&quot;&gt;&lt;picture class=&quot;article-picture article-badge&quot; style=&quot;--image-width:160px;--image-ratio:160 / 24&quot;&gt;&lt;img src=&quot;https://camo.githubusercontent.com/908fdc08319d3b69122931ba4639590e193b497e023917e9622191f2071ba4ad/68747470733a2f2f696d672e736869656c64732e696f2f707970692f762f626c656e64657275693f6c6162656c3d70797069253230626c656e6465727569&quot; width=&quot;160&quot; height=&quot;24&quot; alt=&quot;PyPI&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://pypi.org/project/blenderui/&quot;&gt;&lt;picture class=&quot;article-picture article-badge&quot; style=&quot;--image-width:160px;--image-ratio:160 / 24&quot;&gt;&lt;img src=&quot;https://camo.githubusercontent.com/128768a4f09ec073ab7df23dd275907aa43a2f415714a59ca10c22a58aa3c93d/68747470733a2f2f696d672e736869656c64732e696f2f707970692f707976657273696f6e732f626c656e6465727569&quot; width=&quot;160&quot; height=&quot;24&quot; alt=&quot;Python&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://crates.io/crates/blenderui&quot;&gt;&lt;picture class=&quot;article-picture article-badge&quot; style=&quot;--image-width:160px;--image-ratio:160 / 24&quot;&gt;&lt;img src=&quot;https://camo.githubusercontent.com/a3a1be0ad3323a1dc977961d5bc59155d93d6885b155a292c384b22096c00496/68747470733a2f2f696d672e736869656c64732e696f2f6372617465732f762f626c656e64657275693f6c6162656c3d6372617465732e696f253230626c656e6465727569&quot; width=&quot;160&quot; height=&quot;24&quot; alt=&quot;crates.io&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://www.npmjs.com/package/@blender-ui/react&quot;&gt;&lt;picture class=&quot;article-picture article-badge&quot; style=&quot;--image-width:160px;--image-ratio:160 / 24&quot;&gt;&lt;img src=&quot;https://camo.githubusercontent.com/1a9c735a548a2f39ecde5210fda6bffb8a90c9f4db75fa859769a6c6adec9064/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f40626c656e6465722d75692f72656163743f6c6162656c3d253430626c656e6465722d75692532467265616374&quot; width=&quot;160&quot; height=&quot;24&quot; alt=&quot;@blender-ui/react&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/actions/workflows/wheels.yml&quot;&gt;&lt;picture class=&quot;article-picture article-badge&quot; style=&quot;--image-width:160px;--image-ratio:160 / 24&quot;&gt;&lt;img src=&quot;https://github.com/ppmpreetham/BUI/actions/workflows/wheels.yml/badge.svg&quot; width=&quot;160&quot; height=&quot;24&quot; alt=&quot;Wheels&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#43-license-and-credits&quot;&gt;&lt;picture class=&quot;article-picture article-badge&quot; style=&quot;--image-width:160px;--image-ratio:160 / 24&quot;&gt;&lt;img src=&quot;https://camo.githubusercontent.com/cd781d0568c328bdea35f284d33e2b1e96675ef60910926c1dd75d5a4d46de66/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d47504c2d2d322e302d2d6f722d2d6c617465722d626c7565&quot; width=&quot;160&quot; height=&quot;24&quot; alt=&quot;License: GPL-2.0-or-later&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://camo.githubusercontent.com/8d97c48292430107ef43a7c3cd20c4cea0d683c37f67ba8e30d37994ef10be88/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f706c6174666f726d732d57696e646f77732532302537432532304c696e75782532302537432532306d61634f532d6c6967687467726579&quot;&gt;&lt;picture class=&quot;article-picture article-badge&quot; style=&quot;--image-width:160px;--image-ratio:160 / 24&quot;&gt;&lt;img src=&quot;https://camo.githubusercontent.com/8d97c48292430107ef43a7c3cd20c4cea0d683c37f67ba8e30d37994ef10be88/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f706c6174666f726d732d57696e646f77732532302537432532304c696e75782532302537432532306d61634f532d6c6967687467726579&quot; width=&quot;160&quot; height=&quot;24&quot; alt=&quot;Platforms&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://discord.gg/MWXZfdyM3D&quot;&gt;&lt;picture class=&quot;article-picture article-badge&quot; style=&quot;--image-width:160px;--image-ratio:160 / 24&quot;&gt;&lt;img src=&quot;https://camo.githubusercontent.com/85a0af93c0f1006e0d11ac9fe29ed37b57cf27812f7a3027b5902d6e6cf4f328/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f636861742d446973636f72642d3538363546323f6c6f676f3d646973636f7264266c6f676f436f6c6f723d7768697465&quot; width=&quot;160&quot; height=&quot;24&quot; alt=&quot;Discord&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Website and full documentation: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top&quot;&gt;bui.preetham.top&lt;/a&gt;&lt;/strong&gt; · &lt;strong&gt;Chat: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://discord.gg/MWXZfdyM3D&quot;&gt;Discord&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/docs/images/components.png&quot;&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/docs/images/components.png&quot; alt=&quot;BUI&amp;#39;s Blender components: panels, number sliders, vector fields, checkboxes and a color swatch&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/docs/images/tkinter_items.png&quot;&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/docs/images/tkinter_items.png&quot; alt=&quot;An unmodified tkinter program running on BUI&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;This README is a small book. Read it front to back for the whole story, or jump to the chapter you need. Every chapter links to a longer guide in &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs&quot;&gt;&lt;code&gt;docs/&lt;/code&gt;&lt;/a&gt; or on the &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top&quot;&gt;website&lt;/a&gt; when there&#39;s more to say.&lt;/p&gt;
&lt;h2&gt;Contents&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#part-i-welcome&quot;&gt;Part I: Welcome&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#1-what-bui-is&quot;&gt;What BUI is&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#2-why-bui-exists&quot;&gt;Why BUI exists&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#3-who-its-for&quot;&gt;Who it&#39;s for&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#4-the-many-ways-in&quot;&gt;The many ways in&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#5-features-at-a-glance&quot;&gt;Features at a glance&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#6-a-gallery&quot;&gt;A gallery&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;strong&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#part-ii-getting-started&quot;&gt;Part II: Getting started&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;ol start=&quot;7&quot;&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#7-install&quot;&gt;Install&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#8-first-app-tkinter&quot;&gt;First app: tkinter&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#9-first-app-blender-components&quot;&gt;First app: Blender components&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#10-first-app-qt-syntax&quot;&gt;First app: Qt syntax&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#11-first-app-rust-in-rsx-and-gpui-builders&quot;&gt;First app: Rust, in rsx and gpui builders&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#12-first-app-javascript-and-react&quot;&gt;First app: JavaScript and React&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#13-first-app-dear-imgui&quot;&gt;First app: Dear ImGui&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#14-first-app-c&quot;&gt;First app: C&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;strong&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#part-iii-concepts&quot;&gt;Part III: Concepts&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;ol start=&quot;15&quot;&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#15-how-it-works&quot;&gt;How it works&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#16-blenders-widgets-and-interactions&quot;&gt;Blender&#39;s widgets and interactions&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#17-three-looks-html-styled-and-blender-components&quot;&gt;Three looks: HTML, styled and Blender components&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#18-rendering-on-the-cpu-and-the-gpu&quot;&gt;Rendering on the CPU and the GPU&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#19-damage-rendering&quot;&gt;Damage rendering&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#20-window-hosts&quot;&gt;Window hosts&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#21-text-and-fonts&quot;&gt;Text and fonts&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#22-themes-dark-and-light&quot;&gt;Themes: dark and light&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;strong&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#part-iv-guides-by-language&quot;&gt;Part IV: Guides by language&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;ol start=&quot;23&quot;&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#23-python&quot;&gt;Python&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#24-rust&quot;&gt;Rust&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#25-javascript-and-react&quot;&gt;JavaScript and React&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#26-dear-imgui&quot;&gt;Dear ImGui&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#27-c-and-embedding&quot;&gt;C and embedding&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#28-where-the-docs-live&quot;&gt;Where the docs live&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;strong&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#part-v-performance&quot;&gt;Part V: Performance&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;ol start=&quot;29&quot;&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#29-before-you-read-the-numbers&quot;&gt;Before you read the numbers&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#30-start-time-and-battery&quot;&gt;Start time and battery&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#31-frame-times&quot;&gt;Frame times&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#32-javascript-and-react-startup-and-animation&quot;&gt;JavaScript and React: startup and animation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#33-run-the-benchmarks-yourself&quot;&gt;Run the benchmarks yourself&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;strong&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#part-vi-reference&quot;&gt;Part VI: Reference&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;ol start=&quot;34&quot;&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#34-platforms&quot;&gt;Platforms&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#35-environment-variables&quot;&gt;Environment variables&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#36-building-from-source-and-cmake-options&quot;&gt;Building from source and CMake options&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#37-coverage&quot;&gt;Coverage&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#38-repository-layout&quot;&gt;Repository layout&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#39-examples&quot;&gt;Examples&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;strong&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#part-vii-the-project&quot;&gt;Part VII: The project&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;ol start=&quot;40&quot;&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#40-status-and-roadmap&quot;&gt;Status and roadmap&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#41-faq&quot;&gt;FAQ&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#42-contributing-and-publishing&quot;&gt;Contributing and publishing&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#43-license-and-credits&quot;&gt;License and credits&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;hr /&gt;
&lt;h2&gt;Part I: Welcome&lt;/h2&gt;
&lt;h2&gt;1. What BUI is&lt;/h2&gt;
&lt;p&gt;BUI takes the user interface of &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://www.blender.org&quot;&gt;Blender&lt;/a&gt; (its widget drawing, its interaction rules and its look) and turns it into a standalone UI library with a small C core. Your code builds the widget tree and handles callbacks. Layout, input, drawing and presenting all happen in fast native code, on the CPU or the GPU.&lt;/p&gt;
&lt;p&gt;At the heart of BUI is the &lt;strong&gt;kit&lt;/strong&gt;: a small runtime written in C. The kit holds every widget in one tree, lays them out, handles the mouse and keyboard, and draws them the way Blender does. The drawing code is a C port of Blender&#39;s own widget code, and the interaction follows Blender&#39;s rules. On top of the kit sit &lt;strong&gt;bindings&lt;/strong&gt;: thin layers that let Python, Rust, JavaScript, C++ and Dear ImGui talk to it.&lt;/p&gt;
&lt;p&gt;What BUI is not:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Not Blender.&lt;/strong&gt; It contains the parts of Blender&#39;s UI code it needs and builds on its own. You don&#39;t need Blender installed, and you don&#39;t need to know Blender to use it.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Not a browser.&lt;/strong&gt; The Rust and JavaScript sides use HTML and CSS as a &lt;em&gt;UI language&lt;/em&gt;, but there&#39;s no browser engine, no webview and no network.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Not a re-imagining.&lt;/strong&gt; The widget drawing is ported from Blender&#39;s &lt;code&gt;interface_widgets.cc&lt;/code&gt;, and the Dear ImGui support runs the real Dear ImGui.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;2. Why BUI exists&lt;/h2&gt;
&lt;p&gt;Blender&#39;s interface is famous for how it &lt;em&gt;feels&lt;/em&gt;. You press a number field and drag: the cursor vanishes, the value glides under your hand, and you never hit the edge of the screen. You type &lt;code&gt;2*pi&lt;/code&gt; into a field and it just works. You type &amp;quot;ad cu&amp;quot; into a menu and it finds &amp;quot;Add Cube&amp;quot;. Millions of artists have these habits in their hands.&lt;/p&gt;
&lt;p&gt;That interface is also fast and frugal. It redraws only what changed, sleeps when nothing does, and starts in milliseconds. BUI exists so that any app, in any language, can have both: Blender&#39;s feel, and Blender&#39;s efficiency.&lt;/p&gt;
&lt;h2&gt;3. Who it&#39;s for&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;You have a tkinter app&lt;/strong&gt; and wish it looked less like 1998. Run it on BUI, unchanged.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;You&#39;re building a tool for artists&lt;/strong&gt; who already know Blender. Give them the panels, sliders and shortcuts their hands expect.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;You write Rust or React&lt;/strong&gt; and want a native desktop UI without shipping a browser.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;You use Dear ImGui&lt;/strong&gt; and want it to look and feel like Blender, with one build flag.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;You&#39;re curious&lt;/strong&gt; how a UI toolkit works. The source is readable, and the &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#part-iii-concepts&quot;&gt;concepts&lt;/a&gt; are explained in plain words.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;4. The many ways in&lt;/h2&gt;
&lt;p&gt;You can drive BUI many ways, and all of them share the same C runtime, so they all get the same widgets and interactions:&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;You write&lt;/th&gt;
&lt;th&gt;You get&lt;/th&gt;
&lt;th&gt;Status&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;tkinter&lt;/strong&gt; code, even existing programs, unchanged&lt;/td&gt;
&lt;td&gt;Blender-styled apps; every tkinter and ttk API&lt;/td&gt;
&lt;td&gt;Complete&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Qt-style&lt;/strong&gt; Python (&lt;code&gt;QWidget&lt;/code&gt;, layouts, &lt;code&gt;clicked.connect&lt;/code&gt;)&lt;/td&gt;
&lt;td&gt;The common subset of Qt widgets&lt;/td&gt;
&lt;td&gt;Partial&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Blender components&lt;/strong&gt; (&lt;code&gt;Panel&lt;/code&gt;, &lt;code&gt;NumberSlider&lt;/code&gt;, &lt;code&gt;PieMenu&lt;/code&gt;, the node editor ...)&lt;/td&gt;
&lt;td&gt;45 native Blender widgets and editors, from Python; ten of them also from Rust and JavaScript&lt;/td&gt;
&lt;td&gt;Complete&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Rust&lt;/strong&gt;: HTML + CSS + Tailwind, HTML-like markup (&lt;code&gt;rsx!&lt;/code&gt; / &lt;code&gt;view!&lt;/code&gt;), hooks, or &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://www.gpui.rs&quot;&gt;gpui&lt;/a&gt; / &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://zopra.preetham.top&quot;&gt;zopra&lt;/a&gt; syntax&lt;/td&gt;
&lt;td&gt;A web-like framework: HTML that looks like a browser&#39;s, Blender&#39;s look with &lt;code&gt;styled&lt;/code&gt;, and Blender components (&lt;code&gt;&amp;lt;NumberSlider&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;Button&amp;gt;&lt;/code&gt; ...)&lt;/td&gt;
&lt;td&gt;Working&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;JavaScript / React / Svelte&lt;/strong&gt; on Node.js or Bun: a DOM-like API, JSX or Svelte components&lt;/td&gt;
&lt;td&gt;The same engine and components in native windows, over napi-rs; React&#39;s hooks backed by signals; Svelte 5 components&lt;/td&gt;
&lt;td&gt;Working&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Dear ImGui&lt;/strong&gt; from C++, C, Python or Rust&lt;/td&gt;
&lt;td&gt;The real Dear ImGui on BUI windows in Blender&#39;s theme, or a build where ImGui&#39;s widgets &lt;em&gt;are&lt;/em&gt; Blender&#39;s widgets&lt;/td&gt;
&lt;td&gt;Working&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;C&lt;/strong&gt; (&lt;code&gt;BUI_kit.h&lt;/code&gt;)&lt;/td&gt;
&lt;td&gt;The kit itself: nodes, widgets, windows&lt;/td&gt;
&lt;td&gt;Working&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;MyGo&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;MyGo&lt;/td&gt;
&lt;td&gt;Not yet (coming soon)&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;Not sure which to pick? If you already have code, use the row that matches it. If you&#39;re starting fresh in Python, the Blender components are the friendliest.&lt;/p&gt;
&lt;h2&gt;5. Features at a glance&lt;/h2&gt;
&lt;h3&gt;Blender&#39;s widgets and interactions&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Number fields you &lt;strong&gt;drag with a hidden, continuous cursor&lt;/strong&gt;: Shift for precision, Ctrl to snap.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Math in number fields&lt;/strong&gt;, with Blender&#39;s own expression evaluator: &lt;code&gt;2*pi&lt;/code&gt;, &lt;code&gt;min(4, 3)&lt;/code&gt;, &lt;code&gt;round(1.7)&lt;/code&gt;, &lt;code&gt;x if c else y&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Ctrl+Wheel steps values, Ctrl+C / Ctrl+V copy values, Backspace resets.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Drag across checkboxes&lt;/strong&gt; to set them all.&lt;/li&gt;
&lt;li&gt;Press-drag-release menus, pie menus, and &lt;strong&gt;Blender&#39;s fuzzy menu search&lt;/strong&gt;: &amp;quot;ad cu&amp;quot; finds &amp;quot;Add Cube&amp;quot;, typos are forgiven, recent picks rank first.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Ctrl+Z / Ctrl+Shift+Z&lt;/strong&gt; on every UI edit, and inside a text field while you type; Tab between fields.&lt;/li&gt;
&lt;li&gt;Blender&#39;s float display precision, multi-field vertical drags, and panels that collapse with Blender&#39;s animation.&lt;/li&gt;
&lt;li&gt;The HSV color wheel, color ramps, curves, trees, lists, text areas, canvases, a node editor and Blender&#39;s File Browser.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Blender&#39;s Dark and Light themes&lt;/strong&gt;, switchable at run time.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;Python, four ways&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;tkinter&lt;/strong&gt;: all 7,846 public names of tkinter and ttk. Nine real programs behave identically on the standard library and on BUI.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Qt syntax&lt;/strong&gt;: widgets, layouts, signals, &lt;code&gt;QPainter&lt;/code&gt;, menus and timers.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Components&lt;/strong&gt;: 45 Blender widgets, editors and templates.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Dear ImGui&lt;/strong&gt;: &lt;code&gt;from blenderui import imgui&lt;/code&gt;, pyimgui-style.&lt;/li&gt;
&lt;li&gt;One &lt;code&gt;pip install&lt;/code&gt;, no Qt or Tk widgets drawing anything.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;Rust: the web platform, natively&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;All 113 HTML elements&lt;/strong&gt;, drawn like a browser draws them; &lt;code&gt;styled&lt;/code&gt; gives any subtree Blender&#39;s look, and &lt;strong&gt;Blender components&lt;/strong&gt; (&lt;code&gt;&amp;lt;NumberSlider&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;Button&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;ColorSwatch&amp;gt;&lt;/code&gt; ...) are real Blender widgets.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Modern CSS&lt;/strong&gt;: flexbox, grid with named areas, tables, &lt;code&gt;calc()&lt;/code&gt; and every math function, &lt;code&gt;var()&lt;/code&gt;, &lt;code&gt;oklch()&lt;/code&gt; and &lt;code&gt;color-mix()&lt;/code&gt;, &lt;code&gt;:has()&lt;/code&gt;, nesting, &lt;code&gt;@layer&lt;/code&gt;, &lt;code&gt;@media&lt;/code&gt; ranges, &lt;code&gt;@container&lt;/code&gt;, &lt;code&gt;::before&lt;/code&gt;/&lt;code&gt;::after&lt;/code&gt;, counters.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Effects and motion&lt;/strong&gt;: &lt;code&gt;@keyframes&lt;/code&gt; animations and transitions, filters, &lt;code&gt;backdrop-filter&lt;/code&gt;, blend modes, &lt;code&gt;clip-path&lt;/code&gt;, masks, 2D transforms, &lt;code&gt;border-image&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Tailwind CSS v4&lt;/strong&gt;: &lt;code&gt;class=&amp;quot;md:hover:bg-sky-500/50&amp;quot;&lt;/code&gt; or bare attributes (&lt;code&gt;&amp;lt;div p-4 bg-[#4772b3]&amp;gt;&lt;/code&gt;), with &lt;strong&gt;&amp;quot;did you mean&amp;quot; compile errors&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;&lt;code&gt;rsx!&lt;/code&gt; / &lt;code&gt;view!&lt;/code&gt;&lt;/strong&gt; HTML-like markup, &lt;strong&gt;&lt;code&gt;#[component]&lt;/code&gt;&lt;/strong&gt;, and &lt;strong&gt;hooks&lt;/strong&gt; in zopra, React or Leptos style (&lt;code&gt;use_state&lt;/code&gt;, &lt;code&gt;signal&lt;/code&gt;, &lt;code&gt;Memo&lt;/code&gt;, &lt;code&gt;Effect&lt;/code&gt;, context).&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;gpui-compatible syntax&lt;/strong&gt; too: &lt;code&gt;div().flex().gap_2()&lt;/code&gt;, &lt;code&gt;Render&lt;/code&gt;, &lt;code&gt;cx.listener&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;On &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://crates.io/crates/blenderui&quot;&gt;crates.io&lt;/a&gt;: &lt;code&gt;cargo add blenderui&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;Fast by design&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Damage rendering&lt;/strong&gt;: an idle UI costs 0% CPU, and a hover redraws only the widget it touches.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Opt-in GPU renderer&lt;/strong&gt; (Direct3D 11 on Windows, OpenGL 3.3 on Linux), modeled on Blender&#39;s instanced widget drawing. It draws the same pixels as the CPU raster.&lt;/li&gt;
&lt;li&gt;In the benchmark, &lt;strong&gt;2–4× less CPU per frame than gpui-fast&lt;/strong&gt;, with &lt;strong&gt;less RAM&lt;/strong&gt; and a &lt;strong&gt;~5 ms first frame&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Blender&#39;s text&lt;/strong&gt;: Inter (Blender&#39;s UI font) is embedded and rendered with FreeType the way Blender renders it, so text looks the same on every platform. On the GPU, glyphs are drawn from their outlines with &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/EricLengyel/Slug&quot;&gt;Slug&lt;/a&gt;, falling back to a per-glyph atlas like Blender&#39;s.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;Images&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;One decoder set for every language&lt;/strong&gt;, in C: PNG, GIF, BMP, TGA, QOI (&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/google/wuffs&quot;&gt;Wuffs&lt;/a&gt;, memory-safe), JPEG (libjpeg-turbo), WebP including animated (libwebp), Radiance HDR, PNM and SVG. The design is Blender&#39;s imbuf: one image type and a format table.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Decoded at the size it is drawn, off the UI thread&lt;/strong&gt;: JPEG thumbnails use DCT scaling (a 4K photo becomes a 256 px thumbnail in ~12 ms), visible images first, scrolled-away requests cancelled, and only the image&#39;s rectangle redraws when it arrives. The page never jumps: sizes come from the file header.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;One memory-budgeted cache&lt;/strong&gt; (256 MiB by default). Scrolling 1,000 photo thumbnails: &lt;strong&gt;2.9 ms p99 frames and 100 MB&lt;/strong&gt;, against 96 ms and 2.5 GB when decoding on the UI thread; &lt;strong&gt;0 allocations&lt;/strong&gt; in a settled frame, every block freed at exit. &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/concepts/images/&quot;&gt;Images&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Animated GIF and WebP play&lt;/strong&gt; everywhere an image shows, decoded one frame at a time at the size drawn (two frames held per animation), each frame for its own delay, only the image&#39;s rectangle repainting. Off screen, scrolled away or in a hidden window they pause: 200 animations at once take &lt;strong&gt;0.76 ms p50 / 1.5 ms p99&lt;/strong&gt; render frames, and &lt;strong&gt;nothing at all&lt;/strong&gt; once off screen. &lt;code&gt;frame&lt;/code&gt; holds one frame; reduced motion holds them all.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Large images on the GPU&lt;/strong&gt;: images over 2047 px get a texture of their own on Direct3D 11 and OpenGL (tiled only past the device limit), freed with the image.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Video&lt;/strong&gt;: &lt;code&gt;&amp;lt;video&amp;gt;&lt;/code&gt; in every language, decoded by the OS (Media Foundation with DXVA, GStreamer, AVFoundation; loaded at run time) at the size drawn, frames in one GPU texture per player updated in place, YCbCr converted in the shader, and &lt;strong&gt;nothing decoded off screen&lt;/strong&gt;. 1080p plays at &lt;strong&gt;0.99 ms&lt;/strong&gt; render frames and &lt;strong&gt;9 %&lt;/strong&gt; of a core on the GPU renderer, five at once at 28 %, with &lt;strong&gt;0 allocations per frame&lt;/strong&gt;. Play, pause, seek, rate, loop, poster, state events, and Blender-style controls. &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/concepts/video/&quot;&gt;Video&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt;, CSS &lt;code&gt;background-image&lt;/code&gt;, &lt;code&gt;object-fit&lt;/code&gt;, Blender &lt;code&gt;Image&lt;/code&gt; components, tkinter &lt;code&gt;PhotoImage&lt;/code&gt; (now also JPEG, WebP, BMP, TGA, QOI, HDR, SVG), canvas items, data-table image columns, chat-list media and Dear ImGui textures (animated ones too).&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;JavaScript and React&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;React 19.3&lt;/strong&gt; renders to BUI: HTML host components, CSS and Tailwind, events, Suspense, transitions, actions, and Blender components (&lt;code&gt;&amp;lt;NumberSlider&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;Button&amp;gt;&lt;/code&gt; ...). BUI draws them, on the CPU or the GPU; there&#39;s no browser and no webview.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React&#39;s hooks, by React&#39;s names&lt;/strong&gt;, holding signals: pass one into JSX (&lt;code&gt;{count}&lt;/code&gt;) and a change updates that one node without re-rendering; read it while rendering (&lt;code&gt;count.value&lt;/code&gt;) and the component re-renders, as with React. A conformance suite checks each hook against React&#39;s own.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Svelte 5&lt;/strong&gt; (&lt;code&gt;@blender-ui/svelte&lt;/code&gt;): components with runes, snippets, bindings and scoped styles, mounted into native windows; Svelte&#39;s compiled code runs on BUI&#39;s DOM, so a &lt;code&gt;$state&lt;/code&gt; change updates the one node that shows it.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;&lt;code&gt;@blender-ui/native&lt;/code&gt;&lt;/strong&gt;: a DOM-like API (&lt;code&gt;createElement&lt;/code&gt;, &lt;code&gt;appendChild&lt;/code&gt;, &lt;code&gt;addEventListener&lt;/code&gt;) with the same signals, for apps without a framework, and the shared layer the React and Svelte bindings are thin adapters over.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Node.js and Bun&lt;/strong&gt;, through a napi-rs addon, with headless mode for tests.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;Small standalone apps&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;&lt;code&gt;bui build app.jsx&lt;/code&gt;&lt;/strong&gt; produces one executable of &lt;strong&gt;6.3 to 6.9 MB&lt;/strong&gt; (by the features it uses): BUI with an embedded QuickJS engine.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;First frame in ~70 ms&lt;/strong&gt;, at &lt;strong&gt;19 MB&lt;/strong&gt; of RAM, with nothing to install. There&#39;s no browser and no webview.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;&lt;code&gt;--bun&lt;/code&gt;&lt;/strong&gt; builds a Bun executable instead, with Node&#39;s APIs and a JIT.&lt;/li&gt;
&lt;li&gt;Builds take under a second: the app&#39;s bundle is appended to a prebuilt runtime.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Pay for what you use&lt;/strong&gt;: one feature table (&lt;code&gt;features.json&lt;/code&gt;) drives CMake options, cargo features and &lt;code&gt;bui build&lt;/code&gt;, which links the smallest runtime an app needs: &lt;strong&gt;6.3 MB&lt;/strong&gt; for hello world, 6.9 MB with images or video. &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/reference/binary-size/&quot;&gt;Binary size&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;Dear ImGui&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;The real Dear ImGui 1.93&lt;/strong&gt;: every function of &lt;code&gt;imgui.h&lt;/code&gt; works, including &lt;code&gt;ShowDemoWindow()&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Four languages&lt;/strong&gt;: C++ (drop-in &lt;code&gt;imgui.h&lt;/code&gt;), C (&lt;code&gt;cimgui.h&lt;/code&gt;, all 399 functions), Python and Rust (generated from &lt;code&gt;imgui.h&lt;/code&gt;).&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Blender&#39;s look&lt;/strong&gt;: Blender&#39;s theme colors and metrics with Inter; or, with &lt;code&gt;BUI_IMGUI_BLENDER_WIDGETS=ON&lt;/code&gt;, Blender&#39;s actual widgets and interaction, pixel-identical to BUI&#39;s own.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Idle costs nothing&lt;/strong&gt;: frames run only on input and while something animates.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;Native everywhere&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Native windows&lt;/strong&gt; on Windows (Win32) and Linux (X11, Wayland through XWayland), and an experimental Cocoa host for macOS ported from Blender&#39;s GHOST.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;HiDPI&lt;/strong&gt;: per-monitor DPI on Windows, &lt;code&gt;Xft.dpi&lt;/code&gt; on Linux, Retina on macOS.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Headless mode&lt;/strong&gt; for tests and screenshots, with a virtual clock that steps animations exactly.&lt;/li&gt;
&lt;li&gt;On Linux, libX11 and libGL are loaded at run time, so BUI imports on servers without them.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;6. A gallery&lt;/h2&gt;
&lt;p&gt;Every screenshot here is a real BUI window, rendered off-screen. Where an image comes in a dark and a light version, GitHub shows the one that matches your theme.&lt;/p&gt;
&lt;p&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/website/public/images/shots/feature-node-editor-dark.png&quot; alt=&quot;A Geometry Nodes editor in BUI: seven nodes with typed sockets, colored links and header menus&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;figcaption&gt;The node editor, from Python (&lt;code&gt;examples/site/geometry_nodes.py&lt;/code&gt;)&lt;/figcaption&gt;&lt;/figure&gt;
&lt;figure class=&quot;article-figure&quot;&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/website/public/images/shots/feature-pie-menu-dark.png&quot; alt=&quot;A Shading pie menu open over a node editor&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt; &lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/website/public/images/shots/feature-menu-search-dark.png&quot; alt=&quot;The File menu with exp typed: Blender&amp;#39;s fuzzy search through submenus&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;figcaption&gt;A pie menu, and Blender&#39;s menu search (type in any open menu)&lt;/figcaption&gt;&lt;/figure&gt;
&lt;figure class=&quot;article-figure&quot;&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/website/public/images/shots/feature-color-picker-dark.png&quot; alt=&quot;Blender&amp;#39;s color picker: HSV wheel, value strip, HSV sliders, hex field and eyedropper&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt; &lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/website/public/images/shots/feature-tooltip-dark.png&quot; alt=&quot;A tooltip on a Denoise dropdown&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;figcaption&gt;The color picker, and a tooltip&lt;/figcaption&gt;&lt;/figure&gt;
&lt;figure class=&quot;article-figure&quot;&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/website/public/images/shots/feature-html-effects-dark.png&quot; alt=&quot;CSS effects: filters, clip-path shapes, transforms, blend modes and backdrop-filter on a gradient landscape&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;figcaption&gt;CSS effects in Rust: filters, &lt;code&gt;clip-path&lt;/code&gt;, transforms, blend modes, &lt;code&gt;backdrop-filter&lt;/code&gt; (&lt;code&gt;site_effects.rs&lt;/code&gt;)&lt;/figcaption&gt;&lt;/figure&gt;
&lt;figure class=&quot;article-figure&quot;&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/website/public/images/shots/feature-css-grid-dark.png&quot; alt=&quot;A material library laid out with CSS grid: auto-fill columns, spans and dense packing&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;figcaption&gt;CSS grid with &lt;code&gt;repeat(auto-fill, minmax())&lt;/code&gt;, spans and &lt;code&gt;grid-auto-flow: dense&lt;/code&gt; (&lt;code&gt;site_grid.rs&lt;/code&gt;)&lt;/figcaption&gt;&lt;/figure&gt;
&lt;figure class=&quot;article-figure&quot;&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/website/public/images/shots/feature-animation-dark.png&quot; alt=&quot;Three moments of CSS keyframe animations: a spinner, a progress sweep, a bouncing ball and a fading toast&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;figcaption&gt;CSS &lt;code&gt;@keyframes&lt;/code&gt; at 0.25 s, 0.6 s and 1.0 s (&lt;code&gt;site_animation.rs&lt;/code&gt;)&lt;/figcaption&gt;&lt;/figure&gt;
&lt;p&gt;&lt;strong&gt;More screenshots&lt;/strong&gt;&lt;/p&gt;
&lt;figure class=&quot;article-figure&quot;&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/docs/images/rust-showcase.png&quot;&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/docs/images/rust-showcase.png&quot; alt=&quot;The Rust showcase: a stylesheet, grid cards, Blender form widgets, a table and lists&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;/a&gt;&lt;figcaption&gt;&lt;code&gt;examples/showcase.rs&lt;/code&gt;: HTML + CSS in Rust&lt;/figcaption&gt;&lt;/figure&gt;
&lt;figure class=&quot;article-figure&quot;&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/docs/images/imgui-stock.png&quot;&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/docs/images/imgui-stock.png&quot; alt=&quot;Dear ImGui&amp;#39;s demo in Blender&amp;#39;s theme, with ImGui&amp;#39;s own widgets&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;/a&gt;&lt;figcaption&gt;Dear ImGui&#39;s demo with its own widgets, in Blender&#39;s theme&lt;/figcaption&gt;&lt;/figure&gt;
&lt;figure class=&quot;article-figure&quot;&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/docs/images/qt.png&quot;&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/docs/images/qt.png&quot; alt=&quot;Qt syntax on BUI&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;/a&gt;&lt;figcaption&gt;Qt syntax&lt;/figcaption&gt;&lt;/figure&gt;
&lt;figure class=&quot;article-figure&quot;&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/docs/images/tkinter_notes.png&quot;&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/docs/images/tkinter_notes.png&quot; alt=&quot;tkinter Text with tags&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/docs/images/tkinter_canvas.png&quot;&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/docs/images/tkinter_canvas.png&quot; alt=&quot;tkinter Canvas&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/docs/images/tkinter_messagebox.png&quot;&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/docs/images/tkinter_messagebox.png&quot; alt=&quot;tkinter messagebox&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;/a&gt;&lt;figcaption&gt;tkinter programs: text with tags, canvas, dialogs&lt;/figcaption&gt;&lt;/figure&gt;
&lt;hr /&gt;
&lt;h2&gt;Part II: Getting started&lt;/h2&gt;
&lt;h2&gt;7. Install&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;Python.&lt;/strong&gt; You need CPython 3.11 or newer. Wheels are published for Windows, Linux and macOS, so there&#39;s nothing to compile. One package gives you all four Python APIs (tkinter syntax, Qt syntax, the Blender components and Dear ImGui):&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-shell&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;Shell&quot;&gt;&lt;span class=&quot;syntax-source syntax-shell syntax-bash&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;pip&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; install blenderui&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;python&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; -&lt;/span&gt;c&lt;/span&gt; &lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-shell&quot;&gt;&amp;quot;&lt;/span&gt;import blenderui; print(blenderui.__version__)&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-shell&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Import it as &lt;code&gt;blenderui&lt;/code&gt;. You&#39;ll also see &lt;code&gt;import bui&lt;/code&gt; in older examples: it&#39;s the same code under its original name, but an unrelated project owns &lt;code&gt;bui&lt;/code&gt; on PyPI, so prefer &lt;code&gt;blenderui&lt;/code&gt; in anything you publish.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Rust.&lt;/strong&gt; The crate is &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://crates.io/crates/blenderui&quot;&gt;&lt;code&gt;blenderui&lt;/code&gt; on crates.io&lt;/a&gt;:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-shell&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;Shell&quot;&gt;&lt;span class=&quot;syntax-source syntax-shell syntax-bash&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;cargo&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; add blenderui&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;The first build compiles BUI&#39;s C kit for you, so you need Rust 1.88 or newer, CMake and a C compiler (on Windows, the Visual Studio Build Tools for the default MSVC target), and on Linux the X11 headers (&lt;code&gt;libx11-dev&lt;/code&gt; or &lt;code&gt;libX11-devel&lt;/code&gt;; no GL headers are needed).&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;JavaScript.&lt;/strong&gt; You need Node.js 18 or newer, or Bun:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-shell&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;Shell&quot;&gt;&lt;span class=&quot;syntax-source syntax-shell syntax-bash&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;npm&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; install @blender-ui/react react     &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; or: bun add @blender-ui/react react&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;npm&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; install @blender-ui/svelte svelte   &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; Svelte 5&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;npm&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; install @blender-ui/native          &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; the DOM-like API, without React&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;figure class=&quot;article-figure&quot;&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://www.npmjs.com/package/@blender-ui/react&quot;&gt;&lt;picture class=&quot;article-picture article-badge&quot; style=&quot;--image-width:160px;--image-ratio:160 / 24&quot;&gt;&lt;img src=&quot;https://camo.githubusercontent.com/1a9c735a548a2f39ecde5210fda6bffb8a90c9f4db75fa859769a6c6adec9064/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f40626c656e6465722d75692f72656163743f6c6162656c3d253430626c656e6465722d75692532467265616374&quot; width=&quot;160&quot; height=&quot;24&quot; alt=&quot;@blender-ui/react&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;/a&gt; &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://www.npmjs.com/package/@blender-ui/native&quot;&gt;&lt;picture class=&quot;article-picture article-badge&quot; style=&quot;--image-width:160px;--image-ratio:160 / 24&quot;&gt;&lt;img src=&quot;https://camo.githubusercontent.com/cfb94e39f3cad42164161a92b63dbcec1108fde260852102763693f772f0e82b/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f40626c656e6465722d75692f6e61746976653f6c6162656c3d253430626c656e6465722d75692532466e6174697665&quot; width=&quot;160&quot; height=&quot;24&quot; alt=&quot;@blender-ui/native&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;The npm packages are prebuilt for &lt;strong&gt;Windows x64&lt;/strong&gt;. On &lt;strong&gt;Linux&lt;/strong&gt;, build the addon from a clone (&lt;code&gt;npm install&lt;/code&gt; then &lt;code&gt;npm run build&lt;/code&gt; in &lt;code&gt;bindings/&lt;/code&gt;, with Rust, CMake and a C compiler); windows are native X11 windows there. On &lt;strong&gt;macOS&lt;/strong&gt;, JavaScript runs headless for now (see &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#34-platforms&quot;&gt;Platforms&lt;/a&gt;).&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;C and C++.&lt;/strong&gt; Build from source with CMake 3.20+ and a C11 / C++20 compiler (MSVC, GCC or MinGW-w64, or Clang); on Linux, also the X11 headers:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-shell&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;Shell&quot;&gt;&lt;span class=&quot;syntax-source syntax-shell syntax-bash&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;git&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; clone https://github.com/ppmpreetham/BUI&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-logical syntax-and syntax-shell&quot;&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-support syntax-function syntax-cd syntax-shell&quot;&gt;cd&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; BUI&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;cmake&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; -&lt;/span&gt;S&lt;/span&gt; .&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; -&lt;/span&gt;B&lt;/span&gt; build&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;cmake&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;build&lt;/span&gt; build&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; -&lt;/span&gt;j&lt;/span&gt; 2&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;ctest&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;test-dir&lt;/span&gt; build            &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; optional: run the test suites&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;In your own CMake project, add BUI as a subdirectory and link &lt;code&gt;bui::kit&lt;/code&gt; (or &lt;code&gt;bui::imgui&lt;/code&gt; for Dear ImGui):&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-cmake&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;Cmake&quot;&gt;add_subdirectory(BUI)
target_link_libraries(myapp PRIVATE bui::kit)
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;Dear ImGui.&lt;/strong&gt; Python gets it with &lt;code&gt;pip install blenderui&lt;/code&gt; (&lt;code&gt;import blenderui.imgui&lt;/code&gt;). C++ links &lt;code&gt;bui::imgui&lt;/code&gt;, C links &lt;code&gt;bui_cimgui&lt;/code&gt;. Rust uses the &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://crates.io/crates/blenderui-imgui&quot;&gt;&lt;code&gt;blenderui-imgui&lt;/code&gt;&lt;/a&gt; crate:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-shell&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;Shell&quot;&gt;&lt;span class=&quot;syntax-source syntax-shell syntax-bash&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;cargo&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; add blenderui-imgui&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;If something goes wrong:&lt;/strong&gt;&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Symptom&lt;/th&gt;
&lt;th&gt;Fix&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;ImportError: buipy&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;You&#39;re running from a source checkout without a build. Build first (&lt;code&gt;cmake --build build&lt;/code&gt;), or set &lt;code&gt;BUIPY_BUILD_DIR&lt;/code&gt;. The extension must match your Python version.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;The window never appears&lt;/td&gt;
&lt;td&gt;Start the event loop: &lt;code&gt;mainloop()&lt;/code&gt;, &lt;code&gt;app.exec()&lt;/code&gt; or &lt;code&gt;App.run()&lt;/code&gt;.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Blurry or tiny UI&lt;/td&gt;
&lt;td&gt;Set &lt;code&gt;BUI_UI_SCALE&lt;/code&gt;, for example &lt;code&gt;BUI_UI_SCALE=1.25&lt;/code&gt;.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;gpu=True&lt;/code&gt; does nothing&lt;/td&gt;
&lt;td&gt;Run with &lt;code&gt;BUI_GPU_DEBUG=1&lt;/code&gt; to see why the GPU device didn&#39;t start. Without Direct3D 11 or OpenGL 3.3, BUI stays on the CPU renderer, which draws the same pixels.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;More: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/getting-started.md&quot;&gt;docs/getting-started.md&lt;/a&gt; and &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/start/installation/&quot;&gt;Install BUI&lt;/a&gt; on the website.&lt;/p&gt;
&lt;h2&gt;8. First app: tkinter&lt;/h2&gt;
&lt;p&gt;Run any tkinter program on BUI &lt;strong&gt;without changing a line&lt;/strong&gt;:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-shell&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;Shell&quot;&gt;&lt;span class=&quot;syntax-source syntax-shell syntax-bash&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;blenderui-tk&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; my_app.py          &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; same as: python -m bui.tksyntax my_app.py&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;code&gt;blenderui-tk&lt;/code&gt; makes &lt;code&gt;import tkinter&lt;/code&gt; return BUI&#39;s implementation for that run. Or opt in from code:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-python&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;Python&quot;&gt;&lt;span class=&quot;syntax-source syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-statement syntax-import syntax-python&quot;&gt;&lt;span class=&quot;syntax-keyword syntax-control syntax-import syntax-python&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;blenderui&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;tksyntax&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-control syntax-import syntax-as syntax-python&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;tk&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-statement syntax-import syntax-python&quot;&gt;&lt;span class=&quot;syntax-keyword syntax-control syntax-import syntax-from syntax-python&quot;&gt;from&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-statement syntax-import syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-import-source syntax-python&quot;&gt; &lt;span class=&quot;syntax-meta syntax-import-path syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-import-name syntax-python&quot;&gt;blenderui&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-import-name syntax-python&quot;&gt;tksyntax&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-statement syntax-import syntax-python&quot;&gt;&lt;span class=&quot;syntax-keyword syntax-control syntax-import syntax-python&quot;&gt;import&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-statement syntax-import syntax-python&quot;&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-statement syntax-import syntax-python&quot;&gt; &lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;ttk&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-import-list syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;messagebox&lt;/span&gt;&lt;/span&gt;

&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;root&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;tk&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;Tk&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;name&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;tk&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;StringVar&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-python&quot;&gt;value&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;Cube&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;ttk&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;Entry&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;root&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-parameter syntax-python&quot;&gt;textvariable&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;name&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;pack&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-python&quot;&gt;fill&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;x&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-parameter syntax-python&quot;&gt;padx&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-python&quot;&gt;8&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-parameter syntax-python&quot;&gt;pady&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-python&quot;&gt;8&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;ttk&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;Button&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;root&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-parameter syntax-python&quot;&gt;text&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;Greet&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt;
           &lt;span class=&quot;syntax-variable syntax-parameter syntax-python&quot;&gt;command&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-inline syntax-python&quot;&gt;&lt;span class=&quot;syntax-storage syntax-type syntax-function syntax-inline syntax-python&quot;&gt;lambda&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-inline syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-function syntax-begin syntax-python&quot;&gt;:&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;messagebox&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;showinfo&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;Hi&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;Hello &lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-arithmetic syntax-python&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;get&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;pack&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;root&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;mainloop&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/website/public/images/shots/python-tkinter-dark.png&quot; alt=&quot;An unchanged tkinter program: a glTF export dialog with entries, checkbuttons, radio buttons, a spinbox, an option menu, a scale and a listbox&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt; &lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/website/public/images/shots/python-ttk-dark.png&quot; alt=&quot;An unchanged ttk program: a render-farm queue with a combobox, notebook, treeview and progress bar&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;figcaption&gt;Unchanged tkinter and ttk programs (&lt;code&gt;examples/site/tk_export.py&lt;/code&gt;, &lt;code&gt;ttk_queue.py&lt;/code&gt;)&lt;/figcaption&gt;&lt;/figure&gt;
&lt;p&gt;Number fields (&lt;code&gt;Spinbox&lt;/code&gt;, &lt;code&gt;Scale&lt;/code&gt;) scrub like Blender&#39;s, Ctrl+Z / Ctrl+Shift+Z undo edits, and &lt;code&gt;filedialog&lt;/code&gt; opens Blender&#39;s File Browser. Guide: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/tkinter.md&quot;&gt;docs/tkinter.md&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;9. First app: Blender components&lt;/h2&gt;
&lt;p&gt;Build with Blender&#39;s own components:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-python&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;Python&quot;&gt;&lt;span class=&quot;syntax-source syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-statement syntax-import syntax-python&quot;&gt;&lt;span class=&quot;syntax-keyword syntax-control syntax-import syntax-from syntax-python&quot;&gt;from&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-statement syntax-import syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-import-source syntax-python&quot;&gt; &lt;span class=&quot;syntax-meta syntax-import-path syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-import-name syntax-python&quot;&gt;blenderui&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-import-name syntax-python&quot;&gt;components&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-statement syntax-import syntax-python&quot;&gt;&lt;span class=&quot;syntax-keyword syntax-control syntax-import syntax-python&quot;&gt;import&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-statement syntax-import syntax-python&quot;&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-statement syntax-import syntax-python&quot;&gt; &lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;App&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-import-list syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;Panel&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-import-list syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;NumberSlider&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-import-list syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;VectorField&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-import-list syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;Checkbox&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-import-list syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;ColorSwatch&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-import-list syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;Button&lt;/span&gt;&lt;/span&gt;

&lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;App&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;Object&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-group syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-python&quot;&gt;420&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-tuple syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-python&quot;&gt;520&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;Panel&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;Transform&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt;
          &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;VectorField&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;Location&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-group syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-python&quot;&gt;0&lt;span class=&quot;syntax-punctuation syntax-separator syntax-decimal syntax-python&quot;&gt;.&lt;/span&gt;0&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-tuple syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-python&quot;&gt;1&lt;span class=&quot;syntax-punctuation syntax-separator syntax-decimal syntax-python&quot;&gt;.&lt;/span&gt;25&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-tuple syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-python&quot;&gt;0&lt;span class=&quot;syntax-punctuation syntax-separator syntax-decimal syntax-python&quot;&gt;.&lt;/span&gt;0&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt;
          &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;NumberSlider&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;Scale&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-python&quot;&gt;1&lt;span class=&quot;syntax-punctuation syntax-separator syntax-decimal syntax-python&quot;&gt;.&lt;/span&gt;0&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-parameter syntax-python&quot;&gt;min&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-python&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-parameter syntax-python&quot;&gt;max&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-python&quot;&gt;10&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-parameter syntax-python&quot;&gt;on_change&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-support syntax-function syntax-builtin syntax-python&quot;&gt;print&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;Panel&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;Shading&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt;
          &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;Checkbox&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;Shadows&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-language syntax-python&quot;&gt;True&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt;
          &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;ColorSwatch&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;Color&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-group syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-python&quot;&gt;0&lt;span class=&quot;syntax-punctuation syntax-separator syntax-decimal syntax-python&quot;&gt;.&lt;/span&gt;8&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-tuple syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-python&quot;&gt;0&lt;span class=&quot;syntax-punctuation syntax-separator syntax-decimal syntax-python&quot;&gt;.&lt;/span&gt;3&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-tuple syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-python&quot;&gt;0&lt;span class=&quot;syntax-punctuation syntax-separator syntax-decimal syntax-python&quot;&gt;.&lt;/span&gt;1&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-tuple syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-python&quot;&gt;1&lt;span class=&quot;syntax-punctuation syntax-separator syntax-decimal syntax-python&quot;&gt;.&lt;/span&gt;0&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;Button&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;Apply&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-parameter syntax-python&quot;&gt;on_click&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-inline syntax-python&quot;&gt;&lt;span class=&quot;syntax-storage syntax-type syntax-function syntax-inline syntax-python&quot;&gt;lambda&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-inline syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-function syntax-begin syntax-python&quot;&gt;:&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-support syntax-function syntax-builtin syntax-python&quot;&gt;print&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;apply&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;run&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;figure class=&quot;article-figure&quot;&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/website/public/images/shots/python-components-dark.png&quot; alt=&quot;A Render Properties editor built from Blender components: menus, side tabs, panels with header checkboxes, number fields, sliders, dropdowns and a color swatch&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;figcaption&gt;A Render Properties editor from the components (&lt;code&gt;examples/site/render_props.py&lt;/code&gt;)&lt;/figcaption&gt;&lt;/figure&gt;
&lt;p&gt;There are 45 components: layout, values, buttons, views, menus and pie menus, the color picker, the color ramp, curve and node editors, areas and templates. Reference: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/components.md&quot;&gt;docs/components.md&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;10. First app: Qt syntax&lt;/h2&gt;
&lt;p&gt;Write Qt-style Python. The import is the only line that differs from PySide or PyQt, and neither is needed:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-python&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;Python&quot;&gt;&lt;span class=&quot;syntax-source syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-statement syntax-import syntax-python&quot;&gt;&lt;span class=&quot;syntax-keyword syntax-control syntax-import syntax-python&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;sys&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-statement syntax-import syntax-python&quot;&gt;&lt;span class=&quot;syntax-keyword syntax-control syntax-import syntax-from syntax-python&quot;&gt;from&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-statement syntax-import syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-import-source syntax-python&quot;&gt; &lt;span class=&quot;syntax-meta syntax-import-path syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-import-name syntax-python&quot;&gt;blenderui&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-import-name syntax-python&quot;&gt;qtsyntax&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-statement syntax-import syntax-python&quot;&gt;&lt;span class=&quot;syntax-keyword syntax-control syntax-import syntax-python&quot;&gt;import&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-statement syntax-import syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-statement syntax-import syntax-python&quot;&gt; &lt;span class=&quot;syntax-punctuation syntax-section syntax-import-list syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-statement syntax-import syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;QApplication&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-import-list syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;QWidget&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-import-list syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;QVBoxLayout&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-import-list syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;QFormLayout&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-import-list syntax-python&quot;&gt;,&lt;/span&gt;
                                &lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;QLineEdit&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-import-list syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;QComboBox&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-import-list syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;QSlider&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-import-list syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;QProgressBar&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-import-list syntax-python&quot;&gt;,&lt;/span&gt;
                                &lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;QPushButton&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-import-list syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;QLabel&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-import-list syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;Qt&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-import-list syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;

&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;app&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;QApplication&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;sys&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;argv&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;window&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;QWidget&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;window&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;setWindowTitle&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;Export&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;layout&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;QVBoxLayout&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;window&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;

&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;form&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;QFormLayout&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;kind&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;QComboBox&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;kind&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;addItems&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-structure syntax-list syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-list syntax-begin syntax-python&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;glTF&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-list syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;FBX&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-list syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;OBJ&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-list syntax-end syntax-python&quot;&gt;]&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;quality&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;QSlider&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;Qt&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;Horizontal&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;quality&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;setRange&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-python&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-python&quot;&gt;100&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;form&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;addRow&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;Format:&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;kind&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;form&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;addRow&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;Quality:&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;quality&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;layout&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;addLayout&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;form&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;

&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;bar&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;QProgressBar&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;quality&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;valueChanged&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;connect&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;bar&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;setValue&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;layout&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;addWidget&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;bar&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;

&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;status&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;QLabel&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;Ready.&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;go&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;QPushButton&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;Export&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;go&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;clicked&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;connect&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-inline syntax-python&quot;&gt;&lt;span class=&quot;syntax-storage syntax-type syntax-function syntax-inline syntax-python&quot;&gt;lambda&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-inline syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-function syntax-begin syntax-python&quot;&gt;:&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;status&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;setText&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;Exporting as &lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-arithmetic syntax-python&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;kind&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;currentText&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;layout&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;addWidget&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;status&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;layout&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;addWidget&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;go&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;

&lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;window&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;show&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;sys&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;exit&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;app&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;exec&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;figure class=&quot;article-figure&quot;&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/website/public/images/shots/python-qt-dark.png&quot; alt=&quot;A material editor in Qt syntax: a list, line edit, group box with a form layout, combo box, slider with spin box, checkbox and progress bar&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;figcaption&gt;Qt syntax (&lt;code&gt;examples/site/qt_material.py&lt;/code&gt;)&lt;/figcaption&gt;&lt;/figure&gt;
&lt;p&gt;Qt syntax is &lt;strong&gt;partial&lt;/strong&gt; (about 24% of Qt&#39;s method names on the main widget classes); anything missing raises &lt;code&gt;AttributeError&lt;/code&gt;. Guide: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/qt.md&quot;&gt;docs/qt.md&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;11. First app: Rust, in rsx and gpui builders&lt;/h2&gt;
&lt;p&gt;BUI&#39;s Rust crate has &lt;strong&gt;two first-class syntaxes&lt;/strong&gt;, and they draw the same window:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;&lt;code&gt;rsx!&lt;/code&gt;&lt;/strong&gt; is HTML-like markup inside a macro, with &lt;code&gt;#[component]&lt;/code&gt; functions and hooks for state.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;gpui builders&lt;/strong&gt; are plain method chains: &lt;code&gt;div().flex().gap_3().child(...)&lt;/code&gt;. State lives in your view struct, and &lt;code&gt;cx.listener&lt;/code&gt; updates it. gpui code compiles against BUI too.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;In &lt;code&gt;rsx!&lt;/code&gt;&lt;/strong&gt; (this is &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bindings/rust/blenderui/examples/hello.rs&quot;&gt;&lt;code&gt;bindings/rust/blenderui/examples/hello.rs&lt;/code&gt;&lt;/a&gt;; run it with &lt;code&gt;cargo run --release --example hello&lt;/code&gt; in &lt;code&gt;bindings/rust&lt;/code&gt;):&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-rust&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;Rust&quot;&gt;&lt;span class=&quot;syntax-source syntax-rust&quot;&gt;&lt;span class=&quot;syntax-keyword syntax-other syntax-rust&quot;&gt;use&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-path syntax-rust&quot;&gt;blenderui&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-rust&quot;&gt;::&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-path syntax-rust&quot;&gt;prelude&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-rust&quot;&gt;::&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;*&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-rust&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;syntax-meta syntax-annotation syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-annotation syntax-rust&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;syntax-variable syntax-annotation syntax-rust&quot;&gt;component&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;]&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-storage syntax-type syntax-function syntax-rust&quot;&gt;fn&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-entity syntax-name syntax-function syntax-rust&quot;&gt;counter&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-rust&quot;&gt;label&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;amp;&lt;/span&gt;&lt;span class=&quot;syntax-storage syntax-type syntax-rust&quot;&gt;str&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;syntax-storage syntax-type syntax-rust&quot;&gt;let&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;count&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;,&lt;/span&gt; set_count&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;use_state&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-rust&quot;&gt;0&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-rust&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;syntax-support syntax-macro syntax-rust&quot;&gt;rsx!&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;div flex items&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;center gap&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-rust&quot;&gt;3&lt;/span&gt; p&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-rust&quot;&gt;4&lt;/span&gt; rounded&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;xl bg&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;zinc&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-rust&quot;&gt;800&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;span text&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;zinc&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-rust&quot;&gt;300&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;label.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;to_string&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;: &lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;count&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;to_string&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;/&lt;/span&gt;span&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;div px&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-rust&quot;&gt;3&lt;/span&gt; py&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-rust&quot;&gt;1&lt;/span&gt; rounded&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;md bg&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;sky&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-rust&quot;&gt;700&lt;/span&gt; hover&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;:&lt;/span&gt;bg&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;sky&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-rust&quot;&gt;500&lt;/span&gt; onClick&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;syntax-storage syntax-modifier syntax-rust&quot;&gt;move&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;|&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;|&lt;/span&gt; &lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;set_count&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;count&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-rust&quot;&gt;1&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;
                &lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;Add one&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;
            &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;/&lt;/span&gt;div&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;/&lt;/span&gt;div&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;
    &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;

&lt;span class=&quot;syntax-meta syntax-struct syntax-rust&quot;&gt;&lt;span class=&quot;syntax-storage syntax-type syntax-struct syntax-rust&quot;&gt;struct&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-struct syntax-rust&quot;&gt;&lt;span class=&quot;syntax-entity syntax-name syntax-struct syntax-rust&quot;&gt;Hello&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-rust&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;syntax-meta syntax-impl syntax-rust&quot;&gt;&lt;span class=&quot;syntax-storage syntax-type syntax-impl syntax-rust&quot;&gt;impl&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-impl syntax-rust&quot;&gt;Render &lt;span class=&quot;syntax-keyword syntax-other syntax-rust&quot;&gt;for&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-impl syntax-rust&quot;&gt; &lt;span class=&quot;syntax-entity syntax-name syntax-impl syntax-rust&quot;&gt;Hello&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-impl syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-storage syntax-type syntax-function syntax-rust&quot;&gt;fn&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-entity syntax-name syntax-function syntax-rust&quot;&gt;render&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;amp;&lt;/span&gt;&lt;span class=&quot;syntax-storage syntax-modifier syntax-rust&quot;&gt;mut&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-parameter syntax-rust&quot;&gt;self&lt;/span&gt;, &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;_&lt;/span&gt;: &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;amp;&lt;/span&gt;&lt;span class=&quot;syntax-storage syntax-modifier syntax-rust&quot;&gt;mut&lt;/span&gt; Window, &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;_&lt;/span&gt;: &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;amp;&lt;/span&gt;&lt;span class=&quot;syntax-storage syntax-modifier syntax-rust&quot;&gt;mut&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-generic syntax-rust&quot;&gt;Context&lt;span class=&quot;syntax-punctuation syntax-definition syntax-generic syntax-begin syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;syntax-storage syntax-type syntax-rust&quot;&gt;Self&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-generic syntax-end syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt; &lt;span class=&quot;syntax-meta syntax-function syntax-return-type syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;-&amp;gt;&lt;/span&gt; impl IntoElement&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;syntax-support syntax-macro syntax-rust&quot;&gt;rsx!&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;body m&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-rust&quot;&gt;0&lt;/span&gt; p&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-rust&quot;&gt;6&lt;/span&gt; min&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;h&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;screen flex flex&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;col gap&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-rust&quot;&gt;4&lt;/span&gt; bg&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;zinc&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-rust&quot;&gt;900&lt;/span&gt; text&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;white&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;
                &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;h1 text&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;2xl font&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;bold&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;Hello, BUI&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;/&lt;/span&gt;h1&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;
                &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;counter label&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;Clicks&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;
                &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;NumberSlider min&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-rust&quot;&gt;0.&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-rust&quot;&gt;0&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt; max&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-rust&quot;&gt;10.&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-rust&quot;&gt;0&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt; value&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;5&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;   &lt;span class=&quot;syntax-comment syntax-line syntax-double-slash syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-rust&quot;&gt;//&lt;/span&gt; a real Blender slider
&lt;/span&gt;            &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;/&lt;/span&gt;body&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;
        &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
    &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;

&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-storage syntax-type syntax-function syntax-rust&quot;&gt;fn&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-entity syntax-name syntax-function syntax-rust&quot;&gt;main&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;syntax-meta syntax-path syntax-rust&quot;&gt;Application&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-rust&quot;&gt;::&lt;/span&gt;&lt;/span&gt;new&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-closure syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-begin syntax-rust&quot;&gt;|&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-closure syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-rust&quot;&gt;cx&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-end syntax-rust&quot;&gt;|&lt;/span&gt;&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-closure syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;
        cx.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;open_window&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-path syntax-rust&quot;&gt;WindowOptions&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-rust&quot;&gt;::&lt;/span&gt;&lt;/span&gt;default&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function syntax-closure syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-begin syntax-rust&quot;&gt;|&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-closure syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;_&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-parameter syntax-rust&quot;&gt;cx&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-end syntax-rust&quot;&gt;|&lt;/span&gt;&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-closure syntax-rust&quot;&gt;cx.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;new&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-closure syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-begin syntax-rust&quot;&gt;|&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-closure syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;_&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-end syntax-rust&quot;&gt;|&lt;/span&gt;&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-closure syntax-rust&quot;&gt;Hello&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;unwrap&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-rust&quot;&gt;;&lt;/span&gt;
    &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-rust&quot;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;In gpui builders&lt;/strong&gt;, the same window:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-rust&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;Rust&quot;&gt;&lt;span class=&quot;syntax-source syntax-rust&quot;&gt;&lt;span class=&quot;syntax-keyword syntax-other syntax-rust&quot;&gt;use&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-path syntax-rust&quot;&gt;blenderui&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-rust&quot;&gt;::&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-path syntax-rust&quot;&gt;prelude&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-rust&quot;&gt;::&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;*&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-rust&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;syntax-meta syntax-struct syntax-rust&quot;&gt;&lt;span class=&quot;syntax-storage syntax-type syntax-struct syntax-rust&quot;&gt;struct&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-struct syntax-rust&quot;&gt;&lt;span class=&quot;syntax-entity syntax-name syntax-struct syntax-rust&quot;&gt;Hello&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-struct syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-other syntax-member syntax-rust&quot;&gt;count&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;syntax-storage syntax-type syntax-rust&quot;&gt;i32&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;

&lt;span class=&quot;syntax-meta syntax-impl syntax-rust&quot;&gt;&lt;span class=&quot;syntax-storage syntax-type syntax-impl syntax-rust&quot;&gt;impl&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-impl syntax-rust&quot;&gt;Render &lt;span class=&quot;syntax-keyword syntax-other syntax-rust&quot;&gt;for&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-impl syntax-rust&quot;&gt; &lt;span class=&quot;syntax-entity syntax-name syntax-impl syntax-rust&quot;&gt;Hello&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-impl syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-storage syntax-type syntax-function syntax-rust&quot;&gt;fn&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-entity syntax-name syntax-function syntax-rust&quot;&gt;render&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;amp;&lt;/span&gt;&lt;span class=&quot;syntax-storage syntax-modifier syntax-rust&quot;&gt;mut&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-parameter syntax-rust&quot;&gt;self&lt;/span&gt;, &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;_&lt;/span&gt;: &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;amp;&lt;/span&gt;&lt;span class=&quot;syntax-storage syntax-modifier syntax-rust&quot;&gt;mut&lt;/span&gt; Window, &lt;span class=&quot;syntax-variable syntax-parameter syntax-rust&quot;&gt;cx&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;amp;&lt;/span&gt;&lt;span class=&quot;syntax-storage syntax-modifier syntax-rust&quot;&gt;mut&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-generic syntax-rust&quot;&gt;Context&lt;span class=&quot;syntax-punctuation syntax-definition syntax-generic syntax-begin syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;syntax-storage syntax-type syntax-rust&quot;&gt;Self&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-generic syntax-end syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt; &lt;span class=&quot;syntax-meta syntax-function syntax-return-type syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;-&amp;gt;&lt;/span&gt; impl IntoElement&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;syntax-storage syntax-type syntax-rust&quot;&gt;let&lt;/span&gt; counter &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;flex&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;items_center&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;gap_3&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;p_4&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;rounded_xl&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;bg&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;rgb&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-hexadecimal syntax-rust&quot;&gt;0x27272a&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
            .&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;child&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;span&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;text_color&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;rgb&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-hexadecimal syntax-rust&quot;&gt;0xd4d4d8&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;child&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-support syntax-macro syntax-rust&quot;&gt;format!&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;Clicks: &lt;span class=&quot;syntax-constant syntax-other syntax-placeholder syntax-rust&quot;&gt;{}&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-language syntax-rust&quot;&gt;self&lt;/span&gt;.count&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
            .&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;child&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;px_3&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;py_1&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;rounded_md&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;bg&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;rgb&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-hexadecimal syntax-rust&quot;&gt;0x0369a1&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
                .&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;hover&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-closure syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-begin syntax-rust&quot;&gt;|&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-closure syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-rust&quot;&gt;s&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-end syntax-rust&quot;&gt;|&lt;/span&gt;&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-closure syntax-rust&quot;&gt;s.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;bg&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;rgb&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-hexadecimal syntax-rust&quot;&gt;0x0ea5e9&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;cursor_pointer&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
                .&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;child&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;Add one&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
                .&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;on_click&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;cx.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;listener&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-closure syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-begin syntax-rust&quot;&gt;|&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-closure syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-rust&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;,&lt;/span&gt; _&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;,&lt;/span&gt; _&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-parameter syntax-rust&quot;&gt;cx&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-end syntax-rust&quot;&gt;|&lt;/span&gt;&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-closure syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;
                    this.count &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;+&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-rust&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-rust&quot;&gt;;&lt;/span&gt;
                    cx.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;notify&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-rust&quot;&gt;;&lt;/span&gt;
                &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-rust&quot;&gt;;&lt;/span&gt;
        &lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;body&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;m_0&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;p_6&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;css&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;min-height&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;100vh&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;flex&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;flex_col&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;gap_4&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
            .&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;bg&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;rgb&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-hexadecimal syntax-rust&quot;&gt;0x18181b&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;text_color&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;white&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
            .&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;child&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;h1&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;text_2xl&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;font_bold&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;child&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;Hello, BUI&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
            .&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;child&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;counter&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
            .&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;child&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;NumberSlider&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;min&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-rust&quot;&gt;0.&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-rust&quot;&gt;0&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;max&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-rust&quot;&gt;10.&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-rust&quot;&gt;0&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;value&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;5&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;   &lt;span class=&quot;syntax-comment syntax-line syntax-double-slash syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-rust&quot;&gt;//&lt;/span&gt; a real Blender slider
&lt;/span&gt;    &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;

&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-storage syntax-type syntax-function syntax-rust&quot;&gt;fn&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-entity syntax-name syntax-function syntax-rust&quot;&gt;main&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;syntax-meta syntax-path syntax-rust&quot;&gt;Application&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-rust&quot;&gt;::&lt;/span&gt;&lt;/span&gt;new&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-closure syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-begin syntax-rust&quot;&gt;|&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-closure syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-rust&quot;&gt;cx&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-end syntax-rust&quot;&gt;|&lt;/span&gt;&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-closure syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;
        cx.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;open_window&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-path syntax-rust&quot;&gt;WindowOptions&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-rust&quot;&gt;::&lt;/span&gt;&lt;/span&gt;default&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function syntax-closure syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-begin syntax-rust&quot;&gt;|&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-closure syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;_&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-parameter syntax-rust&quot;&gt;cx&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-end syntax-rust&quot;&gt;|&lt;/span&gt;&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-closure syntax-rust&quot;&gt;cx.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;new&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-closure syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-begin syntax-rust&quot;&gt;|&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-closure syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;_&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-end syntax-rust&quot;&gt;|&lt;/span&gt;&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-closure syntax-rust&quot;&gt;Hello &lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt; count&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-rust&quot;&gt;0&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;unwrap&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-rust&quot;&gt;;&lt;/span&gt;
    &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-rust&quot;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;figure class=&quot;article-figure&quot;&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/docs/images/rust-hello.png&quot;&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/docs/images/rust-hello.png&quot; alt=&quot;The Rust hello example: a heading, a counter component and a Blender slider&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Two small things that trip people up in &lt;code&gt;rsx!&lt;/code&gt;:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Text children are text (&lt;code&gt;&amp;amp;&#39;static str&lt;/code&gt;, &lt;code&gt;String&lt;/code&gt;, &lt;code&gt;SharedString&lt;/code&gt;) or elements. Numbers and borrowed &lt;code&gt;&amp;amp;str&lt;/code&gt; props aren&#39;t, so write &lt;code&gt;{count().to_string()}&lt;/code&gt; and &lt;code&gt;{label.to_string()}&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;A component&#39;s body is a normal block that ends in markup, usually an &lt;code&gt;rsx!&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Here&#39;s a bigger example, a render-farm dashboard, written once in each syntax. The two programs draw identical pixels:&lt;/p&gt;
&lt;p&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/website/public/images/shots/rust-rsx-dashboard-dark.png&quot; alt=&quot;A render-farm dashboard: a CSS grid of stat cards, job rows with Blender progress bars, a node list, a dropdown, button and checkbox&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;figcaption&gt;&lt;code&gt;site_dashboard.rs&lt;/code&gt; (&lt;code&gt;rsx!&lt;/code&gt;) and &lt;code&gt;site_dashboard_builder.rs&lt;/code&gt; (gpui builders)&lt;/figcaption&gt;&lt;/figure&gt;
&lt;p&gt;Guide: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/rust.md&quot;&gt;docs/rust.md&lt;/a&gt;, and the &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/tutorials/first-app-rust/&quot;&gt;Rust tutorial&lt;/a&gt; on the website.&lt;/p&gt;
&lt;h2&gt;12. First app: JavaScript and React&lt;/h2&gt;
&lt;pre&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;JavaScript&quot;&gt;&lt;span class=&quot;syntax-source syntax-js&quot;&gt;&lt;span class=&quot;syntax-comment syntax-block syntax-documentation syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-js&quot;&gt;/**&lt;/span&gt; @jsxImportSource @blender-ui/react &lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-js&quot;&gt;*/&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-import syntax-js&quot;&gt;&lt;span class=&quot;syntax-keyword syntax-control syntax-import-export syntax-js&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-block syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-js&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-comma syntax-js&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;useState&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-comma syntax-js&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;NumberSlider&lt;/span&gt; &lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-js&quot;&gt;}&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-control syntax-import-export syntax-js&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js&quot;&gt;&amp;quot;&lt;/span&gt;@blender-ui/react&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-js&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;

&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-declaration syntax-js&quot;&gt;&lt;span class=&quot;syntax-storage syntax-type syntax-function syntax-js&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;syntax-entity syntax-name syntax-function syntax-js&quot;&gt;Counter&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-js&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-js&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-declaration syntax-js&quot;&gt; &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-js&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;syntax-storage syntax-type syntax-js&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-sequence syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-brackets syntax-js&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;count&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-comma syntax-js&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;setCount&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-brackets syntax-js&quot;&gt;]&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-js&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-js&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-js&quot;&gt;useState&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-js&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-js&quot;&gt;0&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-js&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-comment syntax-line syntax-double-slash syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-js&quot;&gt;//&lt;/span&gt; React&amp;#39;s hook, holding a signal
&lt;/span&gt;  &lt;span class=&quot;syntax-keyword syntax-control syntax-flow syntax-js&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-group syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-js&quot;&gt;(&lt;/span&gt;
    &lt;span class=&quot;syntax-keyword syntax-operator syntax-relational syntax-js&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;main&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;styled&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-js&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js&quot;&gt;&amp;quot;&lt;/span&gt;p-6 flex flex-col gap-3&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-js&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-relational syntax-js&quot;&gt;&amp;gt;&lt;/span&gt;
      &lt;span class=&quot;syntax-meta syntax-object-literal syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-js&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-object-literal syntax-key syntax-js&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js&quot;&gt;&amp;quot;&lt;/span&gt; &lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-js&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-js&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;syntax-meta syntax-object-literal syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-js&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-block syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-js&quot;&gt;/*&lt;/span&gt; `styled`: Blender&amp;#39;s look &lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-js&quot;&gt;*/&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-js&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;syntax-keyword syntax-operator syntax-relational syntax-js&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;span&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-relational syntax-js&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;Clicks&lt;/span&gt;: &lt;span class=&quot;syntax-meta syntax-object-literal syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-js&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;count&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-js&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-relational syntax-js&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-regexp syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js&quot;&gt;/&lt;/span&gt;span&amp;gt;
      &amp;lt;button onClick={&lt;span class=&quot;syntax-meta syntax-group syntax-regexp&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-group syntax-regexp&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-group syntax-regexp&quot;&gt;)&lt;/span&gt;&lt;/span&gt; =&amp;gt; setCount&lt;span class=&quot;syntax-meta syntax-group syntax-regexp&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-group syntax-regexp&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-regexp&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-group syntax-regexp&quot;&gt;(&lt;/span&gt;c&lt;span class=&quot;syntax-punctuation syntax-definition syntax-group syntax-regexp&quot;&gt;)&lt;/span&gt;&lt;/span&gt; =&amp;gt; c &lt;span class=&quot;syntax-keyword syntax-operator syntax-quantifier syntax-regexp&quot;&gt;+&lt;/span&gt; 1&lt;span class=&quot;syntax-punctuation syntax-definition syntax-group syntax-regexp&quot;&gt;)&lt;/span&gt;&lt;/span&gt;}&amp;gt;Add one&amp;lt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-js&quot;&gt;/&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;button&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-relational syntax-js&quot;&gt;&amp;gt;&lt;/span&gt;
      &lt;span class=&quot;syntax-keyword syntax-operator syntax-relational syntax-js&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;NumberSlider&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;min&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-js&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-object-literal syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-js&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-object-literal syntax-key syntax-js&quot;&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-js&quot;&gt;0&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-js&quot;&gt;}&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;max&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-js&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-object-literal syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-js&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-object-literal syntax-key syntax-js&quot;&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-js&quot;&gt;10&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-js&quot;&gt;}&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-arithmetic syntax-js&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-relational syntax-js&quot;&gt;&amp;gt;&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-object-literal syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-js&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-block syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-js&quot;&gt;/*&lt;/span&gt; a Blender component &lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-js&quot;&gt;*/&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-js&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;syntax-keyword syntax-operator syntax-relational syntax-js&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-regexp syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js&quot;&gt;/&lt;/span&gt;main&amp;gt;
  )
}

render&lt;span class=&quot;syntax-meta syntax-group syntax-regexp&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-group syntax-regexp&quot;&gt;(&lt;/span&gt;&amp;lt;Counter /&amp;gt;, { title: &amp;quot;Counter&amp;quot;, width: 360, height: 200, gpu: true }&lt;span class=&quot;syntax-punctuation syntax-definition syntax-group syntax-regexp&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code class=&quot;language-shell&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;Shell&quot;&gt;&lt;span class=&quot;syntax-source syntax-shell syntax-bash&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;bun&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; app.jsx                    &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; run it (Bun reads JSX directly)&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;npx&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; bui build app.jsx          &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; or ship it: app.exe, one 7 MB file&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Without React, &lt;code&gt;@blender-ui/native&lt;/code&gt; gives you a DOM-like API:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;JavaScript&quot;&gt;&lt;span class=&quot;syntax-source syntax-js&quot;&gt;&lt;span class=&quot;syntax-storage syntax-type syntax-js&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-object-literal syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-js&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;App&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-comma syntax-js&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;signal&lt;/span&gt; &lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-js&quot;&gt;}&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-js&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-js&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-js&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-js&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js&quot;&gt;&amp;quot;&lt;/span&gt;@blender-ui/native&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-js&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-js&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;

&lt;span class=&quot;syntax-storage syntax-type syntax-js&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;app&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-js&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-instance syntax-constructor syntax-js&quot;&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-word syntax-new syntax-js&quot;&gt;new&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-constructor syntax-js&quot;&gt; &lt;span class=&quot;syntax-variable syntax-type syntax-js&quot;&gt;App&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-js&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-object-literal syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-js&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-object-literal syntax-key syntax-js&quot;&gt;gpu&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-key-value syntax-js&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-language syntax-boolean syntax-true syntax-js&quot;&gt;true&lt;/span&gt; &lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-js&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-js&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-storage syntax-type syntax-js&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;win&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-js&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-other syntax-object syntax-js&quot;&gt;app&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-js&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-method syntax-js&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-js&quot;&gt;window&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-js&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-object-literal syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-js&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-object-literal syntax-key syntax-js&quot;&gt;title&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-key-value syntax-js&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js&quot;&gt;&amp;quot;&lt;/span&gt;Hello&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-js&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-comma syntax-js&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-object-literal syntax-key syntax-js&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-key-value syntax-js&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-js&quot;&gt;360&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-comma syntax-js&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-object-literal syntax-key syntax-js&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-key-value syntax-js&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-js&quot;&gt;200&lt;/span&gt; &lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-js&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-js&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-variable syntax-other syntax-object syntax-js&quot;&gt;win&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-js&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-property syntax-object syntax-js&quot;&gt;body&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-js&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-property syntax-object syntax-js&quot;&gt;className&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-js&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js&quot;&gt;&amp;quot;&lt;/span&gt;m-0 p-6 flex flex-col gap-3 bg-[#2b2b2b] text-[#e6e6e6]&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-js&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;

&lt;span class=&quot;syntax-storage syntax-type syntax-js&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;clicks&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-js&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-js&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-js&quot;&gt;signal&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-js&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-js&quot;&gt;0&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-js&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-storage syntax-type syntax-js&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;label&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-js&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-other syntax-object syntax-js&quot;&gt;win&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-js&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-method syntax-js&quot;&gt;&lt;span class=&quot;syntax-support syntax-function syntax-dom syntax-js&quot;&gt;createElement&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-js&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js&quot;&gt;&amp;quot;&lt;/span&gt;span&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-js&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-js&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-variable syntax-other syntax-object syntax-js&quot;&gt;label&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-js&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-property syntax-object syntax-js&quot;&gt;textContent&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-js&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;clicks&lt;/span&gt; &lt;span class=&quot;syntax-comment syntax-line syntax-double-slash syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-js&quot;&gt;//&lt;/span&gt; follows the signal
&lt;/span&gt;&lt;span class=&quot;syntax-storage syntax-type syntax-js&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;button&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-js&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-other syntax-object syntax-js&quot;&gt;win&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-js&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-method syntax-js&quot;&gt;&lt;span class=&quot;syntax-support syntax-function syntax-dom syntax-js&quot;&gt;createElement&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-js&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js&quot;&gt;&amp;quot;&lt;/span&gt;button&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-js&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-js&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-variable syntax-other syntax-object syntax-js&quot;&gt;button&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-js&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-property syntax-object syntax-js&quot;&gt;textContent&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-js&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js&quot;&gt;&amp;quot;&lt;/span&gt;Add one&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-js&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-variable syntax-other syntax-object syntax-js&quot;&gt;button&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-js&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-method syntax-js&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-js&quot;&gt;addEventListener&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-js&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js&quot;&gt;&amp;quot;&lt;/span&gt;click&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-js&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-comma syntax-js&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function syntax-declaration syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-js&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-js&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-declaration syntax-js&quot;&gt; &lt;/span&gt;&lt;span class=&quot;syntax-storage syntax-type syntax-function syntax-arrow syntax-js&quot;&gt;=&amp;gt;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-block syntax-js&quot;&gt;&lt;span class=&quot;syntax-variable syntax-other syntax-object syntax-js&quot;&gt;clicks&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-js&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-property syntax-object syntax-js&quot;&gt;value&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-arithmetic syntax-js&quot;&gt;++&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-js&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-variable syntax-other syntax-object syntax-js&quot;&gt;win&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-js&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-property syntax-object syntax-js&quot;&gt;body&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-js&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-method syntax-js&quot;&gt;&lt;span class=&quot;syntax-support syntax-function syntax-dom syntax-js&quot;&gt;appendChild&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-js&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;label&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-js&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-variable syntax-other syntax-object syntax-js&quot;&gt;win&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-js&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-property syntax-object syntax-js&quot;&gt;body&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-js&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-method syntax-js&quot;&gt;&lt;span class=&quot;syntax-support syntax-function syntax-dom syntax-js&quot;&gt;appendChild&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-js&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;button&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-js&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;figure class=&quot;article-figure&quot;&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/website/public/images/shots/js-react-tasks-dark.png&quot; alt=&quot;A task list in React on BUI: a Blender text field, button, checkboxes and a progress bar&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;figcaption&gt;A task list in React (&lt;code&gt;examples/site/js/todo_react.js&lt;/code&gt;); the DOM-like version draws the same&lt;/figcaption&gt;&lt;/figure&gt;
&lt;p&gt;Node.js 18+ or Bun. Prebuilt for Windows x64; on Linux, build the addon from source (&lt;code&gt;npm run build&lt;/code&gt; in &lt;code&gt;bindings/node&lt;/code&gt;) and windows are native. Guide: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/javascript.md&quot;&gt;docs/javascript.md&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;13. First app: Dear ImGui&lt;/h2&gt;
&lt;p&gt;The real Dear ImGui 1.93 runs on BUI: BUI&#39;s windows, input, CPU/GPU renderer, Blender&#39;s theme and the Inter font. Existing ImGui code compiles unchanged.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;C++:&lt;/strong&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-c++&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;C++&quot;&gt;&lt;span class=&quot;syntax-source syntax-c++&quot;&gt;&lt;span class=&quot;syntax-meta syntax-preprocessor syntax-include syntax-c++&quot;&gt;&lt;span class=&quot;syntax-keyword syntax-control syntax-import syntax-include syntax-c++&quot;&gt;#include&lt;/span&gt; &lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-include syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-c++&quot;&gt;&amp;quot;&lt;/span&gt;imgui.h&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-c++&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-preprocessor syntax-include syntax-c++&quot;&gt;&lt;span class=&quot;syntax-keyword syntax-control syntax-import syntax-include syntax-c++&quot;&gt;#include&lt;/span&gt; &lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-include syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-c++&quot;&gt;&amp;quot;&lt;/span&gt;imgui_impl_bui.h&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-c++&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;     &lt;span class=&quot;syntax-comment syntax-line syntax-double-slash syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-c&quot;&gt;//&lt;/span&gt; see examples/imgui_demo.cpp&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;syntax-storage syntax-modifier syntax-c++&quot;&gt;static&lt;/span&gt; &lt;span class=&quot;syntax-storage syntax-type syntax-c&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function syntax-c++&quot;&gt;&lt;span class=&quot;syntax-entity syntax-name syntax-function syntax-c++&quot;&gt;frame&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-c++&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c++&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-c++&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;&lt;span class=&quot;syntax-storage syntax-type syntax-c++&quot;&gt;void&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-c&quot;&gt;*&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c++&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-c++&quot;&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-c++&quot;&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-c++&quot;&gt;{&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-c++&quot;&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-c++&quot;&gt;
    &lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c++&quot;&gt;ImGui&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-c++&quot;&gt;::&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c++&quot;&gt;ShowDemoWindow&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c++&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c++&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c++&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c++&quot;&gt;ImGui&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-c++&quot;&gt;::&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c++&quot;&gt;Begin&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c++&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;Hello&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c++&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c++&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;syntax-storage syntax-modifier syntax-c++&quot;&gt;static&lt;/span&gt; &lt;span class=&quot;syntax-storage syntax-type syntax-c&quot;&gt;float&lt;/span&gt; v &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-c&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-c++&quot;&gt;0.5f&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c++&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c++&quot;&gt;ImGui&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-c++&quot;&gt;::&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c++&quot;&gt;SliderFloat&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c++&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;Value&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c++&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-c&quot;&gt;&amp;amp;&lt;/span&gt;v&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c++&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-c++&quot;&gt;0.0f&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c++&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-c++&quot;&gt;1.0f&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c++&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c++&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c++&quot;&gt;ImGui&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-c++&quot;&gt;::&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c++&quot;&gt;End&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c++&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c++&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c++&quot;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-c++&quot;&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-c++&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;

&lt;span class=&quot;syntax-storage syntax-type syntax-c&quot;&gt;int&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function syntax-c++&quot;&gt;&lt;span class=&quot;syntax-entity syntax-name syntax-function syntax-c++&quot;&gt;main&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-c++&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c++&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-c++&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c++&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-c++&quot;&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-c++&quot;&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-c++&quot;&gt;{&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-c++&quot;&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-c++&quot;&gt;
    &lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c++&quot;&gt;ImGui&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-c++&quot;&gt;::&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c++&quot;&gt;CreateContext&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c++&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c++&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c++&quot;&gt;;&lt;/span&gt;
    ImGui_ImplBUI_App&lt;span class=&quot;syntax-keyword syntax-operator syntax-c&quot;&gt;*&lt;/span&gt; app &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-c&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c++&quot;&gt;ImGui_ImplBUI_CreateApp&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c++&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;Demo&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c++&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-c++&quot;&gt;1280&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c++&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-c++&quot;&gt;800&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c++&quot;&gt;,&lt;/span&gt; frame&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c++&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-language syntax-c++&quot;&gt;nullptr&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c++&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c++&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c++&quot;&gt;ImGui_ImplBUI_RunApp&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c++&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;app&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c++&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c++&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c++&quot;&gt;ImGui_ImplBUI_DestroyApp&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c++&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;app&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c++&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c++&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c++&quot;&gt;ImGui&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-c++&quot;&gt;::&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c++&quot;&gt;DestroyContext&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c++&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c++&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c++&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c++&quot;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-c++&quot;&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-c++&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-c++&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;Python:&lt;/strong&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-python&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;Python&quot;&gt;&lt;span class=&quot;syntax-source syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-statement syntax-import syntax-python&quot;&gt;&lt;span class=&quot;syntax-keyword syntax-control syntax-import syntax-python&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;blenderui&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;imgui&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-control syntax-import syntax-as syntax-python&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;imgui&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;        &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-python&quot;&gt;#&lt;/span&gt; C: cimgui.h  ·  Rust: the blenderui-imgui crate
&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;state&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-structure syntax-dictionary-or-set syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-dictionary-or-set syntax-begin syntax-python&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;value&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-key-value syntax-python&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-python&quot;&gt;0&lt;span class=&quot;syntax-punctuation syntax-separator syntax-decimal syntax-python&quot;&gt;.&lt;/span&gt;5&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-dictionary-or-set syntax-end syntax-python&quot;&gt;}&lt;/span&gt;&lt;/span&gt;

&lt;span class=&quot;syntax-meta syntax-function syntax-python&quot;&gt;&lt;span class=&quot;syntax-storage syntax-type syntax-function syntax-python&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;syntax-entity syntax-name syntax-function syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;frame&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-function syntax-begin syntax-python&quot;&gt;:&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;imgui&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;show_demo_window&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;imgui&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;begin&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;Hello&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-language syntax-python&quot;&gt;_&lt;/span&gt;&lt;/span&gt;, &lt;span class=&quot;syntax-meta syntax-item-access syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;state&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-item-access syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-brackets syntax-begin syntax-python&quot;&gt;[&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-item-access syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;value&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-item-access syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-brackets syntax-end syntax-python&quot;&gt;]&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;imgui&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;slider_float&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;Value&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-item-access syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;state&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-item-access syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-brackets syntax-begin syntax-python&quot;&gt;[&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-item-access syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;value&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-item-access syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-brackets syntax-end syntax-python&quot;&gt;]&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-python&quot;&gt;0&lt;span class=&quot;syntax-punctuation syntax-separator syntax-decimal syntax-python&quot;&gt;.&lt;/span&gt;0&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-python&quot;&gt;1&lt;span class=&quot;syntax-punctuation syntax-separator syntax-decimal syntax-python&quot;&gt;.&lt;/span&gt;0&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;imgui&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;end&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;

&lt;span class=&quot;syntax-meta syntax-function-call syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;imgui&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-dot syntax-python&quot;&gt;.&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-python&quot;&gt;run&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-qualified-name syntax-python&quot;&gt;&lt;span class=&quot;syntax-meta syntax-generic-name syntax-python&quot;&gt;frame&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-parameter syntax-python&quot;&gt;title&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-string syntax-python&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-python&quot;&gt;Hello&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-python&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-arguments syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-parameter syntax-python&quot;&gt;size&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-python&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-python&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-python&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-python&quot;&gt;1280&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-tuple syntax-python&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-python&quot;&gt;800&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-arguments syntax-end syntax-python&quot;&gt;)&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;C&lt;/strong&gt; (&lt;code&gt;cimgui.h&lt;/code&gt;, cimgui conventions: &lt;code&gt;ImGui_Button&lt;/code&gt;, &lt;code&gt;ImGui_ButtonEx&lt;/code&gt;, and the backend in &lt;code&gt;cimgui_impl_bui.h&lt;/code&gt;) and &lt;strong&gt;Rust&lt;/strong&gt; (&lt;code&gt;blenderui-imgui&lt;/code&gt;) work the same way:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-rust&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;Rust&quot;&gt;&lt;span class=&quot;syntax-source syntax-rust&quot;&gt;&lt;span class=&quot;syntax-keyword syntax-other syntax-rust&quot;&gt;use&lt;/span&gt; blenderui_imgui &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;as&lt;/span&gt; imgui&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-rust&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-storage syntax-type syntax-function syntax-rust&quot;&gt;fn&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-entity syntax-name syntax-function syntax-rust&quot;&gt;main&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-parameters syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-rust&quot;&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;syntax-storage syntax-type syntax-rust&quot;&gt;let&lt;/span&gt; &lt;span class=&quot;syntax-storage syntax-modifier syntax-rust&quot;&gt;mut&lt;/span&gt; value &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-rust&quot;&gt;0.&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-rust&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;syntax-storage syntax-type syntax-numeric syntax-rust&quot;&gt;f32&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-rust&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;syntax-meta syntax-path syntax-rust&quot;&gt;imgui&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-rust&quot;&gt;::&lt;/span&gt;&lt;/span&gt;run&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;Hello&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-rust&quot;&gt;1280&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-rust&quot;&gt;800&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;]&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-storage syntax-modifier syntax-rust&quot;&gt;move&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;|&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;|&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;syntax-meta syntax-path syntax-rust&quot;&gt;imgui&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-rust&quot;&gt;::&lt;/span&gt;&lt;/span&gt;show_demo_window&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-rust&quot;&gt;;&lt;/span&gt;
        &lt;span class=&quot;syntax-meta syntax-path syntax-rust&quot;&gt;imgui&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-rust&quot;&gt;::&lt;/span&gt;&lt;/span&gt;begin&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;Hello&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-rust&quot;&gt;;&lt;/span&gt;
        &lt;span class=&quot;syntax-meta syntax-path syntax-rust&quot;&gt;imgui&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-rust&quot;&gt;::&lt;/span&gt;&lt;/span&gt;slider_float&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;Value&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;amp;&lt;/span&gt;&lt;span class=&quot;syntax-storage syntax-modifier syntax-rust&quot;&gt;mut&lt;/span&gt; value&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-rust&quot;&gt;0.&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-rust&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-rust&quot;&gt;1.&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-rust&quot;&gt;0&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-rust&quot;&gt;;&lt;/span&gt;
        &lt;span class=&quot;syntax-meta syntax-path syntax-rust&quot;&gt;imgui&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-rust&quot;&gt;::&lt;/span&gt;&lt;/span&gt;end&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-rust&quot;&gt;;&lt;/span&gt;
    &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-rust&quot;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Build with &lt;code&gt;-DBUI_IMGUI_BLENDER_WIDGETS=ON&lt;/code&gt; (or the Rust feature &lt;code&gt;blender-widgets&lt;/code&gt;) and ImGui&#39;s widgets become Blender&#39;s own: &lt;code&gt;DragFloat&lt;/code&gt; is Blender&#39;s drag-to-scrub number field (Shift for precision, Ctrl to snap), &lt;code&gt;SliderFloat&lt;/code&gt; Blender&#39;s number slider, checkboxes drag-toggle, menus and combos get Blender&#39;s menus. The rest of the ImGui API is unchanged. (The PyPI wheel is built without it, so from Python you get ImGui&#39;s own widgets in Blender&#39;s theme unless you build from source.)&lt;/p&gt;
&lt;figure class=&quot;article-figure&quot;&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/docs/images/imgui-blender.png&quot;&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/docs/images/imgui-blender.png&quot; alt=&quot;Dear ImGui&amp;#39;s demo window drawn with Blender&amp;#39;s widgets&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;/a&gt;&lt;figcaption&gt;Dear ImGui&#39;s own demo with &lt;code&gt;BUI_IMGUI_BLENDER_WIDGETS=ON&lt;/code&gt;: number fields, sliders, color rows and panel headers are Blender&#39;s&lt;/figcaption&gt;&lt;/figure&gt;
&lt;figure class=&quot;article-figure&quot;&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/website/public/images/shots/imgui-cpp-stock-dark.png&quot; alt=&quot;A scene inspector in Dear ImGui with ImGui&amp;#39;s own widgets and colors&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt; &lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/website/public/images/shots/imgui-cpp-blender-dark.png&quot; alt=&quot;The same inspector with Blender widgets and Blender&amp;#39;s style&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;figcaption&gt;The same ImGui code: ImGui&#39;s widgets (left) and the Blender-widgets build (right) (&lt;code&gt;examples/site/imgui_inspector.cpp&lt;/code&gt;)&lt;/figcaption&gt;&lt;/figure&gt;
&lt;p&gt;Guide, coverage and the stock look: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/imgui.md&quot;&gt;docs/imgui.md&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;14. First app: C&lt;/h2&gt;
&lt;p&gt;The kit&#39;s API is one header, &lt;code&gt;kit/include/BUI_kit.h&lt;/code&gt;, and it doubles as the reference: every function has a one-line comment. This is a shortened &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/examples/kit_hello.c&quot;&gt;&lt;code&gt;examples/kit_hello.c&lt;/code&gt;&lt;/a&gt;: a slider and a button in a native window.&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-c&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;C&quot;&gt;&lt;span class=&quot;syntax-source syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-preprocessor syntax-include syntax-c&quot;&gt;&lt;span class=&quot;syntax-keyword syntax-control syntax-import syntax-include syntax-c&quot;&gt;#include&lt;/span&gt; &lt;span class=&quot;syntax-string syntax-quoted syntax-other syntax-lt-gt syntax-include syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-c&quot;&gt;&amp;lt;&lt;/span&gt;stdio.h&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-c&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-preprocessor syntax-include syntax-c&quot;&gt;&lt;span class=&quot;syntax-keyword syntax-control syntax-import syntax-include syntax-c&quot;&gt;#include&lt;/span&gt; &lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-include syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;BUI_kit.h&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;syntax-storage syntax-modifier syntax-c&quot;&gt;static&lt;/span&gt; &lt;span class=&quot;syntax-storage syntax-type syntax-c&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function syntax-c&quot;&gt;&lt;span class=&quot;syntax-entity syntax-name syntax-function syntax-c&quot;&gt;on_event&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-storage syntax-type syntax-c&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-c&quot;&gt;*&lt;/span&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-c&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; BKNode &lt;span class=&quot;syntax-keyword syntax-operator syntax-c&quot;&gt;*&lt;/span&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-c&quot;&gt;node&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-storage syntax-type syntax-c&quot;&gt;int&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-parameter syntax-c&quot;&gt;kind&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-storage syntax-type syntax-c&quot;&gt;void&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-c&quot;&gt;*&lt;/span&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-c&quot;&gt;ref&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-storage syntax-type syntax-c&quot;&gt;double&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-parameter syntax-c&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-storage syntax-type syntax-c&quot;&gt;double&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-parameter syntax-c&quot;&gt;b&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-c&quot;&gt;
&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-c&quot;&gt;{&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-c&quot;&gt;
  &lt;span class=&quot;syntax-keyword syntax-control syntax-c&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;kind &lt;span class=&quot;syntax-keyword syntax-operator syntax-comparison syntax-c&quot;&gt;==&lt;/span&gt; BK_EV_CLICK&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-support syntax-function syntax-C99 syntax-c&quot;&gt;printf&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;clicked &lt;span class=&quot;syntax-constant syntax-other syntax-placeholder syntax-c&quot;&gt;%s&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-character syntax-escape syntax-c&quot;&gt;\n&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c&quot;&gt;BK_get_str&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;node&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;text&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;syntax-keyword syntax-control syntax-c&quot;&gt;else&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-control syntax-c&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;kind &lt;span class=&quot;syntax-keyword syntax-operator syntax-comparison syntax-c&quot;&gt;==&lt;/span&gt; BK_EV_CHANGE&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-support syntax-function syntax-C99 syntax-c&quot;&gt;printf&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-other syntax-placeholder syntax-c&quot;&gt;%s&lt;/span&gt; = &lt;span class=&quot;syntax-constant syntax-other syntax-placeholder syntax-c&quot;&gt;%g&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-character syntax-escape syntax-c&quot;&gt;\n&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c&quot;&gt;BK_get_str&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;node&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;label&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c&quot;&gt;BK_get_num&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;node&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;value&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-c&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;

&lt;span class=&quot;syntax-storage syntax-type syntax-c&quot;&gt;int&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function syntax-c&quot;&gt;&lt;span class=&quot;syntax-entity syntax-name syntax-function syntax-c&quot;&gt;main&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-parameters syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-storage syntax-type syntax-c&quot;&gt;void&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-c&quot;&gt;
&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-c&quot;&gt;{&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-c&quot;&gt;
  BKNode &lt;span class=&quot;syntax-keyword syntax-operator syntax-c&quot;&gt;*&lt;/span&gt;root &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-c&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c&quot;&gt;BK_node_new&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;frame&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;          &lt;span class=&quot;syntax-comment syntax-block syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-c&quot;&gt;/*&lt;/span&gt; everything is a node &lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-c&quot;&gt;*/&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c&quot;&gt;BK_set_num&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;root&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;padding&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-c&quot;&gt;8&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;               &lt;span class=&quot;syntax-comment syntax-block syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-c&quot;&gt;/*&lt;/span&gt; configured by property name &lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-c&quot;&gt;*/&lt;/span&gt;&lt;/span&gt;

  BKNode &lt;span class=&quot;syntax-keyword syntax-operator syntax-c&quot;&gt;*&lt;/span&gt;size &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-c&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c&quot;&gt;BK_node_new&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;slider&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c&quot;&gt;BK_set_str&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;size&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;label&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;Size&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c&quot;&gt;BK_set_num&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;size&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;max&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-c&quot;&gt;10&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c&quot;&gt;BK_set_num&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;size&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;value&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-c&quot;&gt;2.5&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c&quot;&gt;BK_node_add&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;root&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; size&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-arithmetic syntax-c&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-c&quot;&gt;1&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c&quot;&gt;BK_geom_set_manager&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;size&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; BK_GEOM_PACK&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;      &lt;span class=&quot;syntax-comment syntax-block syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-c&quot;&gt;/*&lt;/span&gt; Tk&amp;#39;s packer, in C &lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-c&quot;&gt;*/&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c&quot;&gt;BK_geom_set&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;size&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;fill&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-c&quot;&gt;1&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;

  BKNode &lt;span class=&quot;syntax-keyword syntax-operator syntax-c&quot;&gt;*&lt;/span&gt;apply &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-c&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c&quot;&gt;BK_node_new&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;button&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c&quot;&gt;BK_set_str&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;apply&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;text&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;Apply&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c&quot;&gt;BK_node_add&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;root&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; apply&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-arithmetic syntax-c&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-c&quot;&gt;1&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c&quot;&gt;BK_geom_set_manager&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;apply&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; BK_GEOM_PACK&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;

  BKContext &lt;span class=&quot;syntax-keyword syntax-operator syntax-c&quot;&gt;*&lt;/span&gt;ctx &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-c&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c&quot;&gt;BK_context_new&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;root&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;        &lt;span class=&quot;syntax-comment syntax-block syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-c&quot;&gt;/*&lt;/span&gt; input, focus, popups, undo &lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-c&quot;&gt;*/&lt;/span&gt;&lt;/span&gt;
  BKHost host &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-c&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-block syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-c&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-c&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-c&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;
  host&lt;span class=&quot;syntax-punctuation syntax-accessor syntax-c&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;syntax-variable syntax-other syntax-member syntax-c&quot;&gt;emit&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-c&quot;&gt;=&lt;/span&gt; on_event&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;                         &lt;span class=&quot;syntax-comment syntax-block syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-c&quot;&gt;/*&lt;/span&gt; the window fills in the rest &lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-c&quot;&gt;*/&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c&quot;&gt;BK_context_set_host&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;ctx&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-c&quot;&gt;&amp;amp;&lt;/span&gt;host&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;

  &lt;span class=&quot;syntax-keyword syntax-control syntax-c&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c&quot;&gt;BK_window_supported&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-block syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-c&quot;&gt;{&lt;/span&gt;                  &lt;span class=&quot;syntax-comment syntax-block syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-c&quot;&gt;/*&lt;/span&gt; Win32, X11 or Cocoa &lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-c&quot;&gt;*/&lt;/span&gt;&lt;/span&gt;
    BKWindow &lt;span class=&quot;syntax-keyword syntax-operator syntax-c&quot;&gt;*&lt;/span&gt;win &lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-c&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c&quot;&gt;BK_window_new&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;ctx&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;BUI from C&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-c&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-c&quot;&gt;320&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-c&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-c&quot;&gt;120&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c&quot;&gt;BK_window_show&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;win&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c&quot;&gt;BK_window_run&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c&quot;&gt;BK_window_free&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;win&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-c&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c&quot;&gt;BK_context_free&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;ctx&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-c&quot;&gt;BK_node_free&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-c&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;root&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-c&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;syntax-keyword syntax-control syntax-c&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;syntax-constant syntax-numeric syntax-c&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-terminator syntax-c&quot;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function syntax-c&quot;&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-c&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-c&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code class=&quot;language-shell&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;Shell&quot;&gt;&lt;span class=&quot;syntax-source syntax-shell syntax-bash&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;cmake&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; -&lt;/span&gt;S&lt;/span&gt; .&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; -&lt;/span&gt;B&lt;/span&gt; build&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; -&lt;/span&gt;DBUI_BUILD_EXAMPLES&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-option syntax-shell&quot;&gt;=&lt;/span&gt;ON&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;cmake&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;build&lt;/span&gt; build&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;target&lt;/span&gt; bui_kit_hello&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;figure class=&quot;article-figure&quot;&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/website/public/images/shots/c-kit-app-dark.png&quot; alt=&quot;A modifier stack built with the C kit: panels, enum rows, number fields, dropdowns, a slider, checkboxes and buttons&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;figcaption&gt;A bigger C program: a modifier stack (&lt;code&gt;examples/site/kit_modifiers.c&lt;/code&gt;)&lt;/figcaption&gt;&lt;/figure&gt;
&lt;p&gt;Without a window system, render into a raster instead (&lt;code&gt;BK_render(ctx, raster, w, h, full)&lt;/code&gt;), which is also how tests and screenshots work. Guide: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/c-api.md&quot;&gt;docs/c-api.md&lt;/a&gt;.&lt;/p&gt;
&lt;hr /&gt;
&lt;h2&gt;Part III: Concepts&lt;/h2&gt;
&lt;h2&gt;15. How it works&lt;/h2&gt;
&lt;pre&gt;&lt;code&gt;&lt;span class=&quot;code-snippet&quot;&gt; your code:   tkinter   Qt   components   Dear ImGui (C++/C/Python/Rust)   Rust: rsx! / HTML / CSS / Tailwind / hooks   JS / React
                  │      │        │                │                                  │                                    │
                  └──── Python: options, signals    │ ImGui core + BUI backend          └── style cascade + taffy layout ◄────┘
                                  │                │                                  │
 C kit (kit/):   node tree · geometry · input &amp;amp; interaction · Blender widget drawing · undo · animation · themes · Blender search/expr
                                         │
 renderer:       damage-driven software raster (parallel)   or   GPU (Direct3D 11 / OpenGL 3.3, instanced, opt-in)
                                         │
 window:         native Win32 / X11 / Cocoa window   ·   stdlib Tk window   ·   headless (tests, screenshots)
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Your code&lt;/strong&gt;, in any language above, creates widgets and says what happens when they change.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;The kit&lt;/strong&gt; keeps them in one tree, lays them out and handles input, following Blender&#39;s rules.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;The renderer&lt;/strong&gt; draws them, on the CPU by default or on the GPU if you ask.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Damage rendering&lt;/strong&gt; keeps it cheap: a change redraws only the rectangle it touched, and an idle window uses no CPU at all.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;What&#39;s under the hood:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Blender&#39;s real UI code.&lt;/strong&gt; Widget drawing is a C port of Blender&#39;s &lt;code&gt;interface_widgets.cc&lt;/code&gt; (&lt;code&gt;round_box_edges&lt;/code&gt;, &lt;code&gt;widgetbase_draw&lt;/code&gt;, the shape tables), and interaction follows &lt;code&gt;interface_handlers.cc&lt;/code&gt;. Color math, rects, text cursors, string search and expression evaluation are Blender&#39;s &lt;code&gt;blenlib&lt;/code&gt;, copied in. A few interface files (string search, text-edit undo, float precision) are copied into &lt;code&gt;kit/intern/blender/&lt;/code&gt; and edited for the kit. The X11 and Cocoa hosts follow Blender&#39;s GHOST; the Win32 host is BUI&#39;s own.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;One node tree.&lt;/strong&gt; Every widget is one kit node. The C kit owns layout, hit testing, hover, focus, drags, menus, tooltips, undo and animation.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Damage rendering.&lt;/strong&gt; A change marks only its widget&#39;s rectangle, and only changed tiles reach the screen.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Thin bindings.&lt;/strong&gt; Python, Rust and JavaScript keep only what their syntax layer needs.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;More: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/ARCHITECTURE.md&quot;&gt;ARCHITECTURE.md&lt;/a&gt; and &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/concepts/how-it-works/&quot;&gt;How it works&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;16. Blender&#39;s widgets and interactions&lt;/h2&gt;
&lt;p&gt;These rules live in the C kit, so they work the same everywhere Blender widgets are drawn: the Python components, tkinter and Qt syntax, the Rust and JavaScript Blender components and form controls inside &lt;code&gt;styled&lt;/code&gt;, ImGui&#39;s Blender-widgets build, and every C kit widget.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Drag to scrub.&lt;/strong&gt; Press a number field and drag sideways. The cursor hides and wraps, so you never hit the screen edge, and comes back where the drag started. A float moves one click step per pixel; Shift moves at a tenth of the speed; Esc cancels and restores the value.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Ctrl snaps&lt;/strong&gt; with Blender&#39;s rules: unbounded floats to whole units, angles to 10°, sliders to 0.1, 1 or 10 depending on their range, integers to multiples of 10.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Click to type&lt;/strong&gt;, and type &lt;strong&gt;math&lt;/strong&gt;: Blender&#39;s expression evaluator (&lt;code&gt;expr_pylike_eval.cc&lt;/code&gt;) turns &lt;code&gt;2*pi&lt;/code&gt;, &lt;code&gt;90/4&lt;/code&gt;, &lt;code&gt;min(4, 3)&lt;/code&gt; or &lt;code&gt;x if c else y&lt;/code&gt; into numbers. This works in Blender number fields and sliders; plain text fields keep what you type as text.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Shortcuts on any value:&lt;/strong&gt; Backspace resets to the default, &lt;code&gt;-&lt;/code&gt; negates, Ctrl+Wheel steps, Ctrl+C / Ctrl+V copy and paste, right-click opens Copy, Paste and Reset.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Several fields at once.&lt;/strong&gt; Drag &lt;em&gt;down&lt;/em&gt; over a column of number fields to collect them, then sideways to change them together. Drag across checkboxes (or panel headers) to set them all in one stroke.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Panels&lt;/strong&gt; collapse with Blender&#39;s animation; Ctrl+click opens one and closes the others; drag the grip to reorder.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Menus&lt;/strong&gt; work press-drag-release or click; hover switches menu-bar menus; &lt;strong&gt;pie menus&lt;/strong&gt; open around the pointer.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Menu search&lt;/strong&gt; is Blender&#39;s string search: start typing in any open menu. It matches word initials (&amp;quot;ad cu&amp;quot; finds &amp;quot;Add Cube&amp;quot;), forgives typos, and ranks your recent picks first.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Undo everywhere.&lt;/strong&gt; Ctrl+Z and Ctrl+Shift+Z work on every UI edit, and inside a text field while you type. A burst of typing or a multi-field drag is one step.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Float precision&lt;/strong&gt; follows Blender: small values show the decimals they need.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Tooltips&lt;/strong&gt; appear after Blender&#39;s half-second delay.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Coming soon: typing values with units (&amp;quot;2 m&amp;quot;), Blender&#39;s search-as-you-type popups, and widget drag and drop. More: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/concepts/blender-widgets/&quot;&gt;Blender&#39;s widgets&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;17. Three looks: HTML, styled and Blender components&lt;/h2&gt;
&lt;p&gt;In Rust and JavaScript you pick the look per element:&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;You write&lt;/th&gt;
&lt;th&gt;You get&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Plain HTML: &lt;code&gt;&amp;lt;button&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;input type=&amp;quot;range&amp;quot;&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;select&amp;gt;&lt;/code&gt; ...&lt;/td&gt;
&lt;td&gt;What a browser draws: black text on white and Chrome&#39;s form controls, in the Inter UI font&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;styled&lt;/code&gt; on any element: &lt;code&gt;&amp;lt;div styled&amp;gt;&lt;/code&gt;, &lt;code&gt;div().styled()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Blender&#39;s look for it and everything inside: Blender&#39;s theme (dark or light), UI font, Blender widgets&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Blender components&lt;/strong&gt; (capitalized): &lt;code&gt;&amp;lt;NumberSlider&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;Button&amp;gt;&lt;/code&gt; ...&lt;/td&gt;
&lt;td&gt;Blender&#39;s widgets and interaction everywhere (drag to scrub, Ctrl+Z, Blender&#39;s color picker)&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;The components are &lt;code&gt;Button&lt;/code&gt;, &lt;code&gt;Checkbox&lt;/code&gt;, &lt;code&gt;Radio&lt;/code&gt;, &lt;code&gt;NumberField&lt;/code&gt;, &lt;code&gt;NumberSlider&lt;/code&gt;, &lt;code&gt;TextField&lt;/code&gt;, &lt;code&gt;TextArea&lt;/code&gt;, &lt;code&gt;ColorSwatch&lt;/code&gt;, &lt;code&gt;Dropdown&lt;/code&gt; and &lt;code&gt;ProgressBar&lt;/code&gt;. Each one is the HTML element it stands for, so every attribute, style and event works on it:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-rust&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;Rust&quot;&gt;&lt;span class=&quot;syntax-source syntax-rust&quot;&gt;&lt;span class=&quot;syntax-support syntax-macro syntax-rust&quot;&gt;rsx!&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;main class&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;p-4 flex gap-2&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;                          &lt;span class=&quot;syntax-comment syntax-line syntax-double-slash syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-rust&quot;&gt;//&lt;/span&gt; browser look
&lt;/span&gt;        &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;input &lt;span class=&quot;syntax-storage syntax-type syntax-type syntax-rust&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;range&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;                             &lt;span class=&quot;syntax-comment syntax-line syntax-double-slash syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-rust&quot;&gt;//&lt;/span&gt; Chrome&amp;#39;s slider
&lt;/span&gt;        &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;NumberSlider min&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-rust&quot;&gt;0.&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-rust&quot;&gt;0&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt; max&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-rust&quot;&gt;10.&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-float syntax-rust&quot;&gt;0&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt; value&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;2.5&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;  &lt;span class=&quot;syntax-comment syntax-line syntax-double-slash syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-rust&quot;&gt;//&lt;/span&gt; Blender&amp;#39;s slider
&lt;/span&gt;        &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;div styled&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;button&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;Apply&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;/&lt;/span&gt;button&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;/&lt;/span&gt;div&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;         &lt;span class=&quot;syntax-comment syntax-line syntax-double-slash syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-rust&quot;&gt;//&lt;/span&gt; Blender&amp;#39;s look inside
&lt;/span&gt;    &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;/&lt;/span&gt;main&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;child&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;Checkbox&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;checked&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-language syntax-rust&quot;&gt;true&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;child&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;Button&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;.&lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;child&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;Apply&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;   &lt;span class=&quot;syntax-comment syntax-line syntax-double-slash syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-rust&quot;&gt;//&lt;/span&gt; gpui syntax
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;JavaScript&quot;&gt;&lt;span class=&quot;syntax-source syntax-js&quot;&gt;&lt;span class=&quot;syntax-meta syntax-import syntax-js&quot;&gt;&lt;span class=&quot;syntax-keyword syntax-control syntax-import-export syntax-js&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-block syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-js&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-comma syntax-js&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;NumberSlider&lt;/span&gt;&lt;span class=&quot;syntax-punctuation syntax-separator syntax-comma syntax-js&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-js&quot;&gt;Button&lt;/span&gt; &lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-js&quot;&gt;}&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-control syntax-import-export syntax-js&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js&quot;&gt;&amp;quot;&lt;/span&gt;@blender-ui/react&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-js&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-comment syntax-line syntax-double-slash syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-js&quot;&gt;//&lt;/span&gt; &amp;lt;NumberSlider min={0} max={10} onChange={...} /&amp;gt;, &amp;lt;Button onClick={...}&amp;gt;Apply&amp;lt;/Button&amp;gt;
&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-double-slash syntax-js&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-js&quot;&gt;//&lt;/span&gt; DOM API: win.createElement(&amp;quot;NumberSlider&amp;quot;)
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;figure class=&quot;article-figure&quot;&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/docs/images/rust-forms.png&quot;&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/docs/images/rust-forms.png&quot; alt=&quot;Form controls as plain HTML, inside styled, and as Blender components&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;/a&gt;&lt;figcaption&gt;&lt;code&gt;cargo run --example forms&lt;/code&gt;: plain HTML, inside &lt;code&gt;styled&lt;/code&gt;, and the Blender components&lt;/figcaption&gt;&lt;/figure&gt;
&lt;figure class=&quot;article-figure&quot;&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/website/public/images/shots/rust-html-plain-dark.png&quot; alt=&quot;A form and a table in plain HTML, with a browser&amp;#39;s default look&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt; &lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/website/public/images/shots/rust-html-styled-dark.png&quot; alt=&quot;The same markup inside styled: Blender&amp;#39;s theme and widgets&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;figcaption&gt;The same markup, plain (left) and inside &lt;code&gt;styled&lt;/code&gt; (right). Plain HTML looks the same in both themes.&lt;/figcaption&gt;&lt;/figure&gt;
&lt;figure class=&quot;article-figure&quot;&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/ppmpreetham/BUI/main/website/public/images/shots/rust-components-dark.png&quot; alt=&quot;Camera properties built from Blender components in Rust: number fields, sliders, a dropdown, checkboxes, a text field, a color swatch, a progress bar and buttons&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;figcaption&gt;Blender components from Rust (&lt;code&gt;site_components.rs&lt;/code&gt;)&lt;/figcaption&gt;&lt;/figure&gt;
&lt;p&gt;Python&#39;s &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/components.md&quot;&gt;Blender components&lt;/a&gt; (&lt;code&gt;Panel&lt;/code&gt;, &lt;code&gt;PieMenu&lt;/code&gt;, the node editor ...) are a separate, larger set.&lt;/p&gt;
&lt;h2&gt;18. Rendering on the CPU and the GPU&lt;/h2&gt;
&lt;p&gt;BUI has two renderers, and they draw &lt;strong&gt;the same pixels&lt;/strong&gt;.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;The software raster&lt;/strong&gt; (&lt;code&gt;gpu/intern/gpu_raster.c&lt;/code&gt;) is the default. It draws anti-aliased shapes with signed-distance coverage, like Blender&#39;s widget shaders, into one frame buffer, compares it with the last frame in 64×32 tiles, and reports only the tiles that changed. Big canvases draw in parallel bands on Windows (&lt;code&gt;BUI_RASTER_THREADS&lt;/code&gt;). It needs nothing from your graphics card and uses the least memory.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;The GPU renderer&lt;/strong&gt; is opt-in: &lt;strong&gt;Direct3D 11 on Windows&lt;/strong&gt; (&lt;code&gt;gpu/intern/gpu_d3d11.c&lt;/code&gt;) and &lt;strong&gt;OpenGL 3.3 core on Linux&lt;/strong&gt; (&lt;code&gt;gpu/intern/gpu_gl.c&lt;/code&gt;). It&#39;s modeled on Blender&#39;s instanced widget drawing: each primitive is one 128-byte instance of a single uber-shader, so a frame is a few instanced draw calls. Text and images are cached in atlases. Frames render into a persistent target, so only damaged regions redraw; on Windows, a flip-model swap chain presents dirty rectangles. On Linux, &lt;code&gt;libGL&lt;/code&gt;, &lt;code&gt;libEGL&lt;/code&gt; and &lt;code&gt;libX11&lt;/code&gt; are loaded at run time (GLX for windows, EGL for offscreen), so no GL headers are needed, and BUI falls back to the CPU where OpenGL is missing.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;The shaders evaluate the software raster&#39;s formulas: the parity test finds 10 of 172,800 pixels that differ by more than 3/255, on both backends.&lt;/p&gt;
&lt;p&gt;Turn the GPU on:&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Where&lt;/th&gt;
&lt;th&gt;How&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Python&lt;/td&gt;
&lt;td&gt;&lt;code&gt;bui.set_gpu(True)&lt;/code&gt; before creating windows; tkinter syntax also &lt;code&gt;tk.Tk(gpu=True)&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Rust&lt;/td&gt;
&lt;td&gt;&lt;code&gt;Application::new().gpu(true)&lt;/code&gt;, or &lt;code&gt;WindowOptions { gpu: Some(true), .. }&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;JavaScript&lt;/td&gt;
&lt;td&gt;&lt;code&gt;new App({ gpu: true })&lt;/code&gt;, or React&#39;s &lt;code&gt;render(..., { gpu: true })&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;C&lt;/td&gt;
&lt;td&gt;&lt;code&gt;BUI_gpu_set_default(1)&lt;/code&gt;, or &lt;code&gt;BK_window_set_gpu(win, 1)&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Any app, no code change&lt;/td&gt;
&lt;td&gt;&lt;code&gt;BUI_GPU=1&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;&lt;code&gt;BUI_GPU=1&lt;/code&gt; overrides the app-wide setting in code; &lt;code&gt;BUI_GPU=0&lt;/code&gt; turns the app-wide defaults off, but a window that asks for the GPU itself still gets it. Where no device can start, BUI quietly stays on the CPU (&lt;code&gt;BUI_GPU_DEBUG=1&lt;/code&gt; says why).&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Which one?&lt;/strong&gt; A tool window, form or settings panel: the CPU (lightest on memory, idles at zero). A large or HiDPI window, lots of animation, thousands of items: the GPU (about half the CPU per frame, or less, for about 10 MB more RAM plus GPU memory). Servers and tests: the CPU. macOS: the CPU, for now (a GPU renderer there is coming soon).&lt;/p&gt;
&lt;p&gt;More: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/concepts/rendering/&quot;&gt;Rendering&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;19. Damage rendering&lt;/h2&gt;
&lt;p&gt;Leave a BUI window open and walk away: it uses no CPU at all. Hover a button, and BUI redraws that button, not the window.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;A change marks only its widget&#39;s rectangle as dirty (popups get a margin for their shadow).&lt;/li&gt;
&lt;li&gt;Dirty rectangles merge (up to 24 per window).&lt;/li&gt;
&lt;li&gt;If nothing is dirty, the loop doesn&#39;t render; it sleeps until the next input or timer.&lt;/li&gt;
&lt;li&gt;Only the dirty regions are redrawn, clipped to their rectangles.&lt;/li&gt;
&lt;li&gt;The raster compares the new pixels with the last frame in 64×32 tiles; a redraw that changed nothing reports nothing.&lt;/li&gt;
&lt;li&gt;Only damaged tiles reach the screen (Win32 copies them, X11 sends each rectangle with &lt;code&gt;XPutImage&lt;/code&gt;, Cocoa invalidates them, the GPU presents dirty rectangles).&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;On the full component demo, that&#39;s about &lt;strong&gt;0.7 ms&lt;/strong&gt; for a complete frame and about &lt;strong&gt;0.05 ms&lt;/strong&gt; for a hover or number-scrub frame. Animations run only while something moves, paced to the display. More: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/concepts/damage-rendering/&quot;&gt;Damage rendering&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;20. Window hosts&lt;/h2&gt;
&lt;p&gt;A &lt;strong&gt;window host&lt;/strong&gt; puts a kit context in a top-level window and feeds it input.&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Host&lt;/th&gt;
&lt;th&gt;Where&lt;/th&gt;
&lt;th&gt;Notes&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Win32&lt;/strong&gt; (&lt;code&gt;kit_window_win32.c&lt;/code&gt;)&lt;/td&gt;
&lt;td&gt;Windows&lt;/td&gt;
&lt;td&gt;BUI&#39;s own host. Per-monitor DPI, vsync-paced animation, clipboard, cursors, window-manager features.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;X11&lt;/strong&gt; (&lt;code&gt;kit_window_x11.c&lt;/code&gt;)&lt;/td&gt;
&lt;td&gt;Linux; Wayland through XWayland&lt;/td&gt;
&lt;td&gt;Input mapping after Blender&#39;s GHOST. &lt;code&gt;Xft.dpi&lt;/code&gt; scaling. libX11 is loaded when the first window opens.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Cocoa&lt;/strong&gt; (&lt;code&gt;kit_window_cocoa.m&lt;/code&gt;)&lt;/td&gt;
&lt;td&gt;macOS&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;Experimental.&lt;/strong&gt; Ported from Blender&#39;s GHOST Cocoa code, with Retina scaling. It&#39;s checked by CI and has been tried by hand on one Apple Silicon Mac so far; testing notes in &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/macos-testing.md&quot;&gt;docs/macos-testing.md&lt;/a&gt;.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Tk&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Python, anywhere&lt;/td&gt;
&lt;td&gt;A stdlib &lt;code&gt;tkinter&lt;/code&gt; window that shows the kit&#39;s frame buffer. &lt;code&gt;BUI_HOST=tk&lt;/code&gt; forces it; it&#39;s also the fallback where no native host works.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Headless&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Everywhere&lt;/td&gt;
&lt;td&gt;No window: render into a raster for tests and screenshots, with a virtual clock that steps animations exactly.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;&lt;code&gt;BUI_UI_SCALE=1.5&lt;/code&gt; fixes the UI scale instead of following the display (1 is Blender&#39;s default, 20 px widgets). More: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/concepts/window-hosts/&quot;&gt;Window hosts&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;21. Text and fonts&lt;/h2&gt;
&lt;p&gt;Your app&#39;s text looks the same on Windows, Linux and macOS, and it looks like Blender&#39;s:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Inter&lt;/strong&gt;, Blender&#39;s UI font, is embedded (the variable version, with optical-size and weight axes). UI text is 11 pt at scale 1.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Rendered like Blender&#39;s BLF&lt;/strong&gt;: BUI vendors FreeType 2.13.3 and renders with light hinting, Blender&#39;s gamma-1.43 coverage table, Inter&#39;s optical size, a real bold instance, no kerning (as in Blender), and Blender&#39;s text shadows. With &lt;code&gt;BUI_TEXT_FREETYPE=OFF&lt;/code&gt;, stb_truetype rasterizes instead.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;On the GPU&lt;/strong&gt;, glyphs are drawn from their outlines with &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/EricLengyel/Slug&quot;&gt;Slug&lt;/a&gt; by default, or from a per-glyph atlas like Blender&#39;s (&lt;code&gt;BUI_SLUG=0&lt;/code&gt;, &lt;code&gt;bui.set_slug(False)&lt;/code&gt;, &lt;code&gt;.slug(false)&lt;/code&gt;, &lt;code&gt;BUI_gpu_set_slug(0)&lt;/code&gt;).&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Other fonts&lt;/strong&gt;: &lt;code&gt;BUI_FONT=path.ttf&lt;/code&gt; replaces Inter, &lt;code&gt;BUI_FONT_DIR&lt;/code&gt; adds a folder to search first, &lt;code&gt;blenderui::add_font&lt;/code&gt; (Rust) and &lt;code&gt;BUI_text_add_font&lt;/code&gt; (C) register faces from memory, and CSS &lt;code&gt;@font-face&lt;/code&gt; loads local files.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Windows&#39; GDI text&lt;/strong&gt; is opt-in (&lt;code&gt;-DBUI_TEXT_GDI=ON&lt;/code&gt;, Rust feature &lt;code&gt;gdi-text&lt;/code&gt;): ClearType-style hinting and system fonts, without Slug.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Limits worth knowing: no per-glyph font fallback yet (missing characters show as boxes), no IME, right-to-left text is reordered but not shaped, no OpenType features. Font fallback and IME are coming soon. More: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/concepts/text-and-fonts/&quot;&gt;Text and fonts&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;22. Themes: dark and light&lt;/h2&gt;
&lt;p&gt;BUI looks like Blender because it uses Blender&#39;s theme. It ships two: Blender&#39;s &lt;strong&gt;Dark&lt;/strong&gt; theme (the default) and its &lt;strong&gt;Light&lt;/strong&gt; preset. Both are generated by &lt;code&gt;tools/gen_theme.py&lt;/code&gt; from Blender&#39;s own &lt;code&gt;Blender_Dark.xml&lt;/code&gt; and &lt;code&gt;Blender_Light.xml&lt;/code&gt; presets, over Blender 5.x&#39;s built-in defaults. Switch at run time, and every open window relayouts and redraws:&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Where&lt;/th&gt;
&lt;th&gt;Light theme&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;C&lt;/td&gt;
&lt;td&gt;&lt;code&gt;BK_set_theme(&amp;quot;light&amp;quot;)&lt;/code&gt;; &lt;code&gt;BK_theme_name()&lt;/code&gt;, &lt;code&gt;BK_theme_color(&amp;quot;region_bg&amp;quot;, rgba)&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Python&lt;/td&gt;
&lt;td&gt;&lt;code&gt;blenderui.set_theme(&amp;quot;light&amp;quot;)&lt;/code&gt; (also switches the Dear ImGui extension); &lt;code&gt;theme_name()&lt;/code&gt;, &lt;code&gt;theme_color(key)&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Rust&lt;/td&gt;
&lt;td&gt;&lt;code&gt;blenderui::set_theme(&amp;quot;light&amp;quot;)&lt;/code&gt;, or &lt;code&gt;Application::new().theme(&amp;quot;light&amp;quot;)&lt;/code&gt;; &lt;code&gt;theme_name()&lt;/code&gt;, &lt;code&gt;theme_color(key)&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;JavaScript&lt;/td&gt;
&lt;td&gt;&lt;code&gt;new App({ theme: &amp;quot;light&amp;quot; })&lt;/code&gt;, &lt;code&gt;app.setTheme(&amp;quot;light&amp;quot;)&lt;/code&gt;, or React&#39;s &lt;code&gt;render(..., { theme: &amp;quot;light&amp;quot; })&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Dear ImGui&lt;/td&gt;
&lt;td&gt;Its Blender style follows the kit&#39;s theme (pick it before the backend starts)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Any app, no code change&lt;/td&gt;
&lt;td&gt;&lt;code&gt;BUI_THEME=light&lt;/code&gt; (or &lt;code&gt;dark&lt;/code&gt;)&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;Widgets, panels, the region background, the &lt;code&gt;styled&lt;/code&gt; HTML sheet and ImGui&#39;s Blender style all follow the theme. Plain HTML keeps a browser&#39;s look either way. Inside each theme you can still color things yourself: &lt;code&gt;bg&lt;/code&gt; / &lt;code&gt;fg&lt;/code&gt; in tkinter, &lt;code&gt;setStyleSheet&lt;/code&gt; in Qt syntax, &lt;code&gt;color=&lt;/code&gt; on components, full CSS on HTML in Rust and JavaScript, ImGui&#39;s own style colors.&lt;/p&gt;
&lt;p&gt;BUI also includes Blender&#39;s icons: all 781 of Blender&#39;s SVG icons, rasterized with Blender&#39;s NanoSVG code so they&#39;re sharp at any scale. Use them by Blender&#39;s name: &lt;code&gt;Button(&amp;quot;Add&amp;quot;, icon=&amp;quot;ADD&amp;quot;)&lt;/code&gt;, &lt;code&gt;EnumRow(..., icons=[...])&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Coming soon: loading any Blender theme file, beyond Dark and Light. More: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/concepts/theming/&quot;&gt;Theming&lt;/a&gt;.&lt;/p&gt;
&lt;hr /&gt;
&lt;h2&gt;Part IV: Guides by language&lt;/h2&gt;
&lt;h2&gt;23. Python&lt;/h2&gt;
&lt;p&gt;&lt;code&gt;pip install blenderui&lt;/code&gt; gives you four APIs in one package:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;tkinter syntax&lt;/strong&gt; (&lt;code&gt;blenderui.tksyntax&lt;/code&gt;): every public tkinter and ttk name (7,846 of 7,846). Run existing programs with &lt;code&gt;blenderui-tk app.py&lt;/code&gt;, or call &lt;code&gt;blenderui.tksyntax.install()&lt;/code&gt; first. &lt;code&gt;messagebox&lt;/code&gt; and &lt;code&gt;simpledialog&lt;/code&gt; are Blender-styled, &lt;code&gt;colorchooser&lt;/code&gt; is Blender&#39;s color picker, and &lt;code&gt;filedialog&lt;/code&gt; is Blender&#39;s File Browser (&lt;code&gt;BUI_FILEDIALOG=native&lt;/code&gt; for the OS dialogs). Look-only Tk options (&lt;code&gt;relief&lt;/code&gt;, &lt;code&gt;ttk.Style&lt;/code&gt; ...) are accepted, but the look comes from Blender&#39;s theme. Guide: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/tkinter.md&quot;&gt;docs/tkinter.md&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Qt syntax&lt;/strong&gt; (&lt;code&gt;blenderui.qtsyntax&lt;/code&gt;): widgets, layouts (box, grid, form, stacked), signals, &lt;code&gt;QPainter&lt;/code&gt;, menus, timers and animations, &lt;code&gt;QFileDialog&lt;/code&gt; as Blender&#39;s File Browser. Partial: model/view classes, docks, toolbars, splitters and Qt stylesheets are missing. Guide: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/qt.md&quot;&gt;docs/qt.md&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Blender components&lt;/strong&gt; (&lt;code&gt;blenderui.components&lt;/code&gt;): 45 components, from &lt;code&gt;NumberSlider&lt;/code&gt; to &lt;code&gt;NodeEditor&lt;/code&gt;. Reference: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/components.md&quot;&gt;docs/components.md&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Dear ImGui&lt;/strong&gt; (&lt;code&gt;blenderui.imgui&lt;/code&gt;), pyimgui-style. Guide: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/imgui.md#python&quot;&gt;docs/imgui.md&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;You can mix them in one process: windows, timers and the event loop are shared (&lt;code&gt;bui.host&lt;/code&gt;). Every interaction runs in C, so tests can drive widgets headless. On the website: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/python/tkinter/&quot;&gt;tkinter&lt;/a&gt;, &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/python/qt-syntax/&quot;&gt;Qt syntax&lt;/a&gt;, &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/python/components/&quot;&gt;components&lt;/a&gt;, &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/python/headless-testing/&quot;&gt;headless testing&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;24. Rust&lt;/h2&gt;
&lt;p&gt;The &lt;code&gt;blenderui&lt;/code&gt; crate is a web-like framework drawn by BUI: every HTML element, CSS, Tailwind, HTML-like markup (&lt;code&gt;rsx!&lt;/code&gt; / &lt;code&gt;view!&lt;/code&gt;) or gpui-style builders, components and hooks. A taste:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-rust&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;Rust&quot;&gt;&lt;span class=&quot;syntax-source syntax-rust&quot;&gt;&lt;span class=&quot;syntax-support syntax-macro syntax-rust&quot;&gt;rsx!&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;syntax-comment syntax-line syntax-double-slash syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-rust&quot;&gt;//&lt;/span&gt; Tailwind as attributes, any variant, arbitrary values; typos fail to compile
&lt;/span&gt;    &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;button px&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-rust&quot;&gt;3&lt;/span&gt; py&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-rust&quot;&gt;1&lt;/span&gt; rounded&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;md bg&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;zinc&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-rust&quot;&gt;800&lt;/span&gt; hover&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;:&lt;/span&gt;bg&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;sky&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-rust&quot;&gt;600&lt;/span&gt; md&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;:&lt;/span&gt;dark&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;:&lt;/span&gt;hover&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;:&lt;/span&gt;bg&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;sky&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-rust&quot;&gt;400&lt;/span&gt;
            active&lt;span class=&quot;syntax-punctuation syntax-separator syntax-rust&quot;&gt;:&lt;/span&gt;style&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;transform: scale(0.97)&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt; onClick&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;syntax-storage syntax-modifier syntax-rust&quot;&gt;move&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;|&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;|&lt;/span&gt; &lt;span class=&quot;syntax-support syntax-function syntax-rust&quot;&gt;save&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-begin syntax-rust&quot;&gt;(&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-group syntax-end syntax-rust&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;Save&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;/&lt;/span&gt;button&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;

    &lt;span class=&quot;syntax-comment syntax-line syntax-double-slash syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-rust&quot;&gt;//&lt;/span&gt; control flow right in the markup
&lt;/span&gt;    &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;ul&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-control syntax-rust&quot;&gt;for&lt;/span&gt; item &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;in&lt;/span&gt; items &lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;li class&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;py-1&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;item&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;/&lt;/span&gt;li&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;/&lt;/span&gt;ul&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-control syntax-rust&quot;&gt;if&lt;/span&gt; dirty &lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-begin syntax-rust&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;p text&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;amber&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;syntax-constant syntax-numeric syntax-integer syntax-decimal syntax-rust&quot;&gt;400&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;Unsaved changes&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;/&lt;/span&gt;p&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;

    &lt;span class=&quot;syntax-comment syntax-line syntax-double-slash syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-rust&quot;&gt;//&lt;/span&gt; real CSS, evaluated by the engine
&lt;/span&gt;    &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;lt;&lt;/span&gt;div style&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-quoted syntax-double syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-begin syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;width: calc(100% - 2 * var(--gap)); background: color-mix(in oklch, var(--brand) 60%, white)&lt;span class=&quot;syntax-punctuation syntax-definition syntax-string syntax-end syntax-rust&quot;&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-rust&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-block syntax-rust&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-section syntax-block syntax-end syntax-rust&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code&gt;&lt;span class=&quot;code-snippet&quot;&gt;error: rsx!: `bg-sky-50O` is not a Tailwind utility; did you mean `bg-sky-500` or `bg-sky-50` or `bg-sky-100`?
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;What&#39;s in the box:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Layout&lt;/strong&gt; by &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/DioxusLabs/taffy&quot;&gt;taffy&lt;/a&gt;: block flow and wrapping text, flexbox and grid (every property, including &lt;code&gt;grid-template-areas&lt;/code&gt; and named lines), tables, &lt;code&gt;relative&lt;/code&gt; / &lt;code&gt;absolute&lt;/code&gt; / &lt;code&gt;fixed&lt;/code&gt; positioning (fixed boxes are placed against the window), scrolling, and bidirectional text.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;CSS&lt;/strong&gt;: selectors level 4, nesting, &lt;code&gt;@layer&lt;/code&gt; / &lt;code&gt;@media&lt;/code&gt; / &lt;code&gt;@supports&lt;/code&gt; / &lt;code&gt;@scope&lt;/code&gt; / &lt;code&gt;@container&lt;/code&gt; / &lt;code&gt;@font-face&lt;/code&gt; / &lt;code&gt;@property&lt;/code&gt;, &lt;code&gt;var()&lt;/code&gt; and &lt;code&gt;env()&lt;/code&gt;, every math function, CSS Color 4 and 5.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Effects and animations&lt;/strong&gt;: &lt;code&gt;@keyframes&lt;/code&gt; animations and transitions (every longhand, &lt;code&gt;cubic-bezier()&lt;/code&gt;, &lt;code&gt;steps()&lt;/code&gt;, &lt;code&gt;linear()&lt;/code&gt;, interruptible transitions), &lt;code&gt;filter&lt;/code&gt; and &lt;code&gt;backdrop-filter&lt;/code&gt;, &lt;code&gt;mix-blend-mode&lt;/code&gt;, &lt;code&gt;clip-path&lt;/code&gt;, masks, 2D transforms, &lt;code&gt;border-image&lt;/code&gt;. Frames render only while something moves, and headless windows step a virtual clock (&lt;code&gt;App::advance_clock&lt;/code&gt;).&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Tailwind CSS v4&lt;/strong&gt;, compiled on first use, with compile-time checks in &lt;code&gt;rsx!&lt;/code&gt; and &lt;code&gt;tw!&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Components and hooks&lt;/strong&gt; in zopra, React or Leptos style, with optional props and keys.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Blender components&lt;/strong&gt;, &lt;code&gt;styled&lt;/code&gt;, and the &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#22-themes-dark-and-light&quot;&gt;theme&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Headless testing&lt;/strong&gt;: &lt;code&gt;Application::headless()&lt;/code&gt;, screenshots, simulated input.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Not yet: async resources (&lt;code&gt;use_resource&lt;/code&gt;), generic components, 3D transforms, OpenType features, multi-column layout. Guide: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/rust.md&quot;&gt;docs/rust.md&lt;/a&gt;, crate README: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bindings/rust/blenderui/README.md&quot;&gt;bindings/rust/blenderui&lt;/a&gt;, and the website&#39;s &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/rust/overview/&quot;&gt;Rust section&lt;/a&gt; (including &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/rust/effects-and-animations/&quot;&gt;effects and animations&lt;/a&gt;).&lt;/p&gt;
&lt;h2&gt;25. JavaScript and React&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;&lt;code&gt;@blender-ui/react&lt;/code&gt;&lt;/strong&gt;: a React 19.3 renderer. HTML host components, CSS and Tailwind, events, Suspense, transitions, actions, and the Blender components. Hooks keep React&#39;s names but hold signals: pass one into JSX and a change updates that node without re-rendering. README: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bindings/react/README.md&quot;&gt;bindings/react&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;&lt;code&gt;@blender-ui/svelte&lt;/code&gt;&lt;/strong&gt;: Svelte 5 components (runes, snippets, bindings, keyed blocks, context, scoped &lt;code&gt;&amp;lt;style&amp;gt;&lt;/code&gt;) and the Blender components, on Node.js (&lt;code&gt;--import @blender-ui/svelte/register&lt;/code&gt;), Bun and &lt;code&gt;bui build&lt;/code&gt;. README: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bindings/svelte/README.md&quot;&gt;bindings/svelte&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;&lt;code&gt;@blender-ui/native&lt;/code&gt;&lt;/strong&gt;: a DOM-like API (&lt;code&gt;createElement&lt;/code&gt;, &lt;code&gt;appendChild&lt;/code&gt;, &lt;code&gt;addEventListener&lt;/code&gt;, &lt;code&gt;className&lt;/code&gt; with Tailwind, &lt;code&gt;style&lt;/code&gt;) with signals, &lt;code&gt;memo&lt;/code&gt;, &lt;code&gt;effect&lt;/code&gt; and &lt;code&gt;batch&lt;/code&gt;. README: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bindings/node/README.md&quot;&gt;bindings/node&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;How it&#39;s fast&lt;/strong&gt;: BUI renders on its own UI thread, so it never blocks JavaScript; each tick sends one batch of changes; styles are parsed once.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Standalone apps&lt;/strong&gt;: &lt;code&gt;npx bui build app.jsx&lt;/code&gt; makes a ~7 MB executable with an embedded QuickJS engine; &lt;code&gt;--bun&lt;/code&gt; makes a Bun executable instead; &lt;code&gt;npx bui run app.jsx&lt;/code&gt; runs on QuickJS without building.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Tests&lt;/strong&gt;: &lt;code&gt;new App({ headless: true })&lt;/code&gt; renders off-screen, and &lt;code&gt;win.click(x, y)&lt;/code&gt; simulates input.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Limits: npm packages are prebuilt for Windows x64 only; events reach JavaScript after BUI handled them (no native &lt;code&gt;preventDefault&lt;/code&gt;), and &lt;code&gt;event.target&lt;/code&gt; is the deepest &lt;em&gt;listening&lt;/em&gt; element. Guide: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/javascript.md&quot;&gt;docs/javascript.md&lt;/a&gt;; website: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/javascript/react/&quot;&gt;React&lt;/a&gt;, &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/javascript/native-api/&quot;&gt;native API&lt;/a&gt;, &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/javascript/signals/&quot;&gt;signals&lt;/a&gt;, &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/javascript/standalone-executables/&quot;&gt;standalone executables&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;26. Dear ImGui&lt;/h2&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Language&lt;/th&gt;
&lt;th&gt;What you use&lt;/th&gt;
&lt;th&gt;Built by&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;C++&lt;/td&gt;
&lt;td&gt;&lt;code&gt;imgui.h&lt;/code&gt; + &lt;code&gt;imgui_impl_bui.h&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;CMake target &lt;code&gt;bui_imgui&lt;/code&gt; (&lt;code&gt;bui::imgui&lt;/code&gt;)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;C&lt;/td&gt;
&lt;td&gt;&lt;code&gt;cimgui.h&lt;/code&gt; + &lt;code&gt;cimgui_impl_bui.h&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;CMake target &lt;code&gt;bui_cimgui&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Python&lt;/td&gt;
&lt;td&gt;&lt;code&gt;import blenderui.imgui as imgui&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The &lt;code&gt;_buiimgui&lt;/code&gt; extension, in the wheel&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Rust&lt;/td&gt;
&lt;td&gt;the &lt;code&gt;blenderui-imgui&lt;/code&gt; crate (on crates.io)&lt;/td&gt;
&lt;td&gt;Cargo&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;The C, Python and Rust bindings are generated from &lt;code&gt;imgui.h&lt;/code&gt;. ImGui is idle-free on BUI: frames run only on input and while something animates. The Blender-widgets build (&lt;code&gt;BUI_IMGUI_BLENDER_WIDGETS=ON&lt;/code&gt;, Rust feature &lt;code&gt;blender-widgets&lt;/code&gt;) swaps in Blender&#39;s widgets, and can be switched at run time (&lt;code&gt;ImGui_ImplBUI_SetBlenderWidgets&lt;/code&gt;, &lt;code&gt;imgui.set_blender_widgets&lt;/code&gt;). In that build, window title bars, tooltips, plain popups, tables and the color picker keep ImGui&#39;s drawing.&lt;/p&gt;
&lt;p&gt;Guides: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/imgui.md&quot;&gt;docs/imgui.md&lt;/a&gt;, &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bindings/imgui/README.md&quot;&gt;bindings/imgui/README.md&lt;/a&gt; (the backend and the Blender style), &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bindings/imgui/blender/README.md&quot;&gt;bindings/imgui/blender/README.md&lt;/a&gt; (the widget mapping), and the website&#39;s &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/imgui/cpp/&quot;&gt;Dear ImGui section&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;27. C and embedding&lt;/h2&gt;
&lt;p&gt;The kit&#39;s concepts: &lt;strong&gt;nodes&lt;/strong&gt; made by type name (&lt;code&gt;frame&lt;/code&gt;, &lt;code&gt;slider&lt;/code&gt;, &lt;code&gt;button&lt;/code&gt;, &lt;code&gt;panel&lt;/code&gt;, &lt;code&gt;tree&lt;/code&gt;, &lt;code&gt;canvas&lt;/code&gt;, &lt;code&gt;filebrowser&lt;/code&gt; ...), &lt;strong&gt;properties&lt;/strong&gt; set by name, Tk&#39;s &lt;strong&gt;geometry managers&lt;/strong&gt; (pack, grid, place) in C, a &lt;strong&gt;context&lt;/strong&gt; that owns input, popups, focus and undo, a &lt;strong&gt;host&lt;/strong&gt; that receives events, and &lt;strong&gt;windows&lt;/strong&gt;. A &lt;code&gt;custom&lt;/code&gt; node draws and handles input itself; Dear ImGui runs on BUI that way. Guide: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/c-api.md&quot;&gt;docs/c-api.md&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;To embed BUI in your own renderer, render the kit into a &lt;code&gt;BuiRaster&lt;/code&gt; and blit it (as &lt;code&gt;bui.qt.BuiCanvas&lt;/code&gt; does inside Qt). A separate, lower-level layer, &lt;strong&gt;render sinks&lt;/strong&gt; (&lt;code&gt;api/bui_c_api.h&lt;/code&gt;), hands the triangles, lines and text of the immediate-mode GPU seam to your renderer; the Qt/QPainter backend and the SVG recorder use it. Guide: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/INTEGRATION.md&quot;&gt;INTEGRATION.md&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;28. Where the docs live&lt;/h2&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Guide&lt;/th&gt;
&lt;th&gt;What&#39;s inside&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top&quot;&gt;Website&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;Everything below, as tutorials, concepts and references, with screenshots in dark and light&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/getting-started.md&quot;&gt;Getting started&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;Building, environment variables, window hosts, GPU rendering, troubleshooting&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/tkinter.md&quot;&gt;tkinter&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;Running tkinter apps on BUI, behavior notes, limitations&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/qt.md&quot;&gt;Qt syntax&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;Classes, signals, layouts, painting, coverage&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/components.md&quot;&gt;Components&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;The &lt;code&gt;bui.components&lt;/code&gt; reference&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/rust.md&quot;&gt;Rust&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;rsx!&lt;/code&gt;, hooks, HTML, CSS and Tailwind coverage, effects, animations, events, headless tests&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/javascript.md&quot;&gt;JavaScript, React and Svelte&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;@blender-ui/native&lt;/code&gt;, &lt;code&gt;@blender-ui/react&lt;/code&gt;, &lt;code&gt;@blender-ui/svelte&lt;/code&gt;, adding a framework, how changes cross to the UI thread, performance&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/imgui.md&quot;&gt;Dear ImGui&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;Dear ImGui on BUI from C++, C, Python and Rust; the Blender-widgets build; coverage&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/c-api.md&quot;&gt;C API&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;The C kit (&lt;code&gt;BUI_kit.h&lt;/code&gt;)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/INTEGRATION.md&quot;&gt;Integration&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;Embedding BUI drawing in C, C++, Qt or PySide hosts&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/ARCHITECTURE.md&quot;&gt;Architecture&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;Modules and what was taken from Blender&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/SYNTAX_COVERAGE.md&quot;&gt;Syntax coverage&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;The Qt and tkinter surface, exactly&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/macos-testing.md&quot;&gt;macOS testing&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;How to try the experimental Cocoa host on a Mac&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/publishing.md&quot;&gt;Publishing&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;Releasing to PyPI and crates.io&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/CHANGELOG.md&quot;&gt;Changelog&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;What changed&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;hr /&gt;
&lt;h2&gt;Part V: Performance&lt;/h2&gt;
&lt;h2&gt;29. Before you read the numbers&lt;/h2&gt;
&lt;p&gt;These numbers were measured on a Ryzen 7 5800U laptop (Windows 11, on AC power) &lt;strong&gt;before the latest features landed&lt;/strong&gt;: Dear ImGui, the Linux GPU renderer, the light theme, and the Blender search and expression code. They show the shape of things, not a promise for your machine. Rerun them with the tools in &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#33-run-the-benchmarks-yourself&quot;&gt;Run the benchmarks yourself&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;30. Start time and battery&lt;/h2&gt;
&lt;p&gt;The same small settings window (a label, text field, checkbox, slider and button) written each of the five ways, from &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bench/apps&quot;&gt;&lt;code&gt;bench/apps&lt;/code&gt;&lt;/a&gt;, on BUI&#39;s CPU renderer (the default) and its GPU renderer (&lt;code&gt;BUI_GPU=1&lt;/code&gt;). The last rows are one gpui-syntax source file, &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bindings/rust/bench/common/settings.rs&quot;&gt;&lt;code&gt;settings.rs&lt;/code&gt;&lt;/a&gt;, compiled unchanged against blenderui, Zed&#39;s &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://crates.io/crates/gpui&quot;&gt;gpui&lt;/a&gt; and &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/longbridge/gpui-fast&quot;&gt;gpui-fast&lt;/a&gt;. gpui has no form widgets, so there the controls are styled divs.&lt;/p&gt;
&lt;p&gt;Median of 10 launches, from process start until the first frame is on screen, with Python 3.14 and Node 22:&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;/th&gt;
&lt;th&gt;Renderer&lt;/th&gt;
&lt;th&gt;Start time&lt;/th&gt;
&lt;th&gt;CPU used to start&lt;/th&gt;
&lt;th&gt;Memory (idle)&lt;/th&gt;
&lt;th&gt;Idle CPU per minute&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Rust (HTML + CSS)&lt;/td&gt;
&lt;td&gt;CPU&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;38 ms&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;27 ms&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;13 MB&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;0 ms&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;GPU&lt;/td&gt;
&lt;td&gt;42 ms&lt;/td&gt;
&lt;td&gt;61 ms&lt;/td&gt;
&lt;td&gt;31 MB&lt;/td&gt;
&lt;td&gt;1.8 ms&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;JavaScript (React, Node.js)&lt;/td&gt;
&lt;td&gt;CPU&lt;/td&gt;
&lt;td&gt;94 ms&lt;/td&gt;
&lt;td&gt;100 ms&lt;/td&gt;
&lt;td&gt;48 MB&lt;/td&gt;
&lt;td&gt;68 ms&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;GPU&lt;/td&gt;
&lt;td&gt;99 ms&lt;/td&gt;
&lt;td&gt;131 ms&lt;/td&gt;
&lt;td&gt;60 MB&lt;/td&gt;
&lt;td&gt;71 ms&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Blender components (Python)&lt;/td&gt;
&lt;td&gt;CPU&lt;/td&gt;
&lt;td&gt;112 ms&lt;/td&gt;
&lt;td&gt;86 ms&lt;/td&gt;
&lt;td&gt;23 MB&lt;/td&gt;
&lt;td&gt;0 ms&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;GPU&lt;/td&gt;
&lt;td&gt;116 ms&lt;/td&gt;
&lt;td&gt;125 ms&lt;/td&gt;
&lt;td&gt;32 MB&lt;/td&gt;
&lt;td&gt;1.7 ms&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;tkinter syntax (Python)&lt;/td&gt;
&lt;td&gt;CPU&lt;/td&gt;
&lt;td&gt;139 ms&lt;/td&gt;
&lt;td&gt;112 ms&lt;/td&gt;
&lt;td&gt;25 MB&lt;/td&gt;
&lt;td&gt;0.2 ms&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;GPU&lt;/td&gt;
&lt;td&gt;159 ms&lt;/td&gt;
&lt;td&gt;157 ms&lt;/td&gt;
&lt;td&gt;43 MB&lt;/td&gt;
&lt;td&gt;2.4 ms&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Qt syntax (Python)&lt;/td&gt;
&lt;td&gt;CPU&lt;/td&gt;
&lt;td&gt;156 ms&lt;/td&gt;
&lt;td&gt;123 ms&lt;/td&gt;
&lt;td&gt;27 MB&lt;/td&gt;
&lt;td&gt;0 ms&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;GPU&lt;/td&gt;
&lt;td&gt;161 ms&lt;/td&gt;
&lt;td&gt;160 ms&lt;/td&gt;
&lt;td&gt;36 MB&lt;/td&gt;
&lt;td&gt;1.2 ms&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Same gpui code:&lt;/strong&gt; blenderui&lt;/td&gt;
&lt;td&gt;CPU&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;40 ms&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;27 ms&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;15 MB&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;0 ms&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;blenderui&lt;/td&gt;
&lt;td&gt;GPU&lt;/td&gt;
&lt;td&gt;43 ms&lt;/td&gt;
&lt;td&gt;60 ms&lt;/td&gt;
&lt;td&gt;31 MB&lt;/td&gt;
&lt;td&gt;2.1 ms&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;gpui&lt;/td&gt;
&lt;td&gt;GPU&lt;/td&gt;
&lt;td&gt;231 ms&lt;/td&gt;
&lt;td&gt;226 ms&lt;/td&gt;
&lt;td&gt;29 MB&lt;/td&gt;
&lt;td&gt;743 ms&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;gpui-fast&lt;/td&gt;
&lt;td&gt;GPU&lt;/td&gt;
&lt;td&gt;226 ms&lt;/td&gt;
&lt;td&gt;217 ms&lt;/td&gt;
&lt;td&gt;31 MB&lt;/td&gt;
&lt;td&gt;2.5 ms&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;On the same code, blenderui shows its first frame about 5× sooner than gpui and gpui-fast, spends about 8× less CPU getting there, and on the CPU renderer uses half the memory. Idle, gpui keeps about 1.2 % of a core busy; blenderui uses none.&lt;/p&gt;
&lt;p&gt;Laptops can&#39;t report energy per app, so battery cost is measured by the CPU time an app causes: the CPU it spends starting up, and the CPU it uses over 20 seconds while the window sits idle (what drains a battery while an app is open). BUI redraws only when something changes and otherwise sleeps, so idle use is near zero on either renderer. The GPU renderer starts a little slower and uses more memory (the GPU device), and pays off on large, animated scenes (below). Node&#39;s event loop accounts for the JavaScript idle figure, Python&#39;s times include starting the interpreter, and memory doesn&#39;t count GPU memory.&lt;/p&gt;
&lt;h2&gt;31. Frame times&lt;/h2&gt;
&lt;p&gt;Python and C, on the full component demo (520×900):&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Frame&lt;/th&gt;
&lt;th&gt;Time&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Complete frame (everything redrawn)&lt;/td&gt;
&lt;td&gt;~0.7 ms&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Hover or number-scrub frame (damage only)&lt;/td&gt;
&lt;td&gt;~0.05 ms&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Native window: input event → on screen&lt;/td&gt;
&lt;td&gt;~0.06 ms&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;Dear ImGui&#39;s demo window with every section open (27k triangles, 1280×800) is a full software redraw of about 5–8 ms.&lt;/p&gt;
&lt;p&gt;Rust, against Zed&#39;s &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://crates.io/crates/gpui&quot;&gt;gpui&lt;/a&gt; and the faster fork &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/longbridge/gpui-fast&quot;&gt;gpui-fast&lt;/a&gt;. The scene is 3000 animated cells, and all apps ran in the same session (GPU rows on Direct3D 11):&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;/th&gt;
&lt;th&gt;blenderui (GPU)&lt;/th&gt;
&lt;th&gt;blenderui (CPU)&lt;/th&gt;
&lt;th&gt;gpui-fast&lt;/th&gt;
&lt;th&gt;gpui&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;FPS&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;59.9&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;57.6&lt;/td&gt;
&lt;td&gt;31.5&lt;/td&gt;
&lt;td&gt;19.9&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;CPU per frame&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;11.6 ms&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;22.0 ms&lt;/td&gt;
&lt;td&gt;31.9 ms + GPU&lt;/td&gt;
&lt;td&gt;50.5 ms + GPU&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;RAM&lt;/td&gt;
&lt;td&gt;40 MB&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;30 MB&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;65 MB&lt;/td&gt;
&lt;td&gt;77 MB&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;First frame&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;~5 ms&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;~5 ms&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;~200 ms&lt;/td&gt;
&lt;td&gt;~220 ms&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Idle CPU&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;0 %&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;0–0.9 %&lt;/td&gt;
&lt;td&gt;0–0.4 %&lt;/td&gt;
&lt;td&gt;0.9–1.4 %&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;Full results, the GPU renderer, and the method&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;/th&gt;
&lt;th&gt;blenderui (GPU)&lt;/th&gt;
&lt;th&gt;blenderui (CPU)&lt;/th&gt;
&lt;th&gt;gpui-fast&lt;/th&gt;
&lt;th&gt;gpui&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;FPS, 1000 animated cells&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;60&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;60&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;49.2&lt;/td&gt;
&lt;td&gt;36.4&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;CPU per frame, 1000 / 100 cells&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;4.7 / 1.2 ms&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;10.2 / 4.6 ms&lt;/td&gt;
&lt;td&gt;20.5 / 2.7 ms + GPU&lt;/td&gt;
&lt;td&gt;27.7 / 4.7 ms + GPU&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Uncapped FPS, 100 / 1000 / 3000 cells&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;1491 / 309 / 94&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;649 / 202 / 76&lt;/td&gt;
&lt;td&gt;-&lt;/td&gt;
&lt;td&gt;-&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;RAM, 1000 / 100 cells&lt;/td&gt;
&lt;td&gt;35 / 28 MB&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;24 / 21 MB&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;45 / 47 MB&lt;/td&gt;
&lt;td&gt;47 / 40 MB&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;GPU memory&lt;/td&gt;
&lt;td&gt;19–22 MB&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;none&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;19–24 MB&lt;/td&gt;
&lt;td&gt;16–21 MB&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;The GPU renderer is off by default. Turn it on with &lt;code&gt;Application::new().gpu(true)&lt;/code&gt;, &lt;code&gt;tk.Tk(gpu=True)&lt;/code&gt;, &lt;code&gt;bui.set_gpu(True)&lt;/code&gt; or &lt;code&gt;BUI_GPU=1&lt;/code&gt;:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Every primitive is one instance of a single shader, so a frame is a few instanced draw calls (Direct3D 11 on Windows, OpenGL 3.3 on Linux).&lt;/li&gt;
&lt;li&gt;Text and images are cached in atlases.&lt;/li&gt;
&lt;li&gt;Frames render into a persistent target, so only damaged regions redraw.&lt;/li&gt;
&lt;li&gt;On Windows, presentation uses a flip-model swap chain with dirty rects.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Its shaders evaluate the software raster&#39;s formulas: the parity test finds 10 of 172,800 pixels that differ by more than 3/255, on both backends.&lt;/p&gt;
&lt;p&gt;gpui-fast&#39;s heavy-scene frame rate varies between sessions on this laptop (30–60 fps), so compare within one session. Method, raw data and how to rerun: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bindings/rust/bench/README.md&quot;&gt;bindings/rust/bench/README.md&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;32. JavaScript and React: startup and animation&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;Startup.&lt;/strong&gt; These launch a small React app (the counter above) that quits once its first frame is on screen. Each figure is the median of 12 launches after a warm-up launch (&lt;code&gt;node bench/startup.js&lt;/code&gt;).&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;/th&gt;
&lt;th&gt;First frame&lt;/th&gt;
&lt;th&gt;Launch to exit&lt;/th&gt;
&lt;th&gt;RAM at first frame&lt;/th&gt;
&lt;th&gt;What you ship&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;QuickJS executable&lt;/strong&gt; (&lt;code&gt;bui build&lt;/code&gt;)&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;68 ms&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;104 ms&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;19 MB&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;7.3 MB&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Bun executable (&lt;code&gt;bui build --bun&lt;/code&gt;)&lt;/td&gt;
&lt;td&gt;79 ms&lt;/td&gt;
&lt;td&gt;147 ms&lt;/td&gt;
&lt;td&gt;35 MB&lt;/td&gt;
&lt;td&gt;114 MB&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Bun (&lt;code&gt;bun app.js&lt;/code&gt;)&lt;/td&gt;
&lt;td&gt;80 ms&lt;/td&gt;
&lt;td&gt;152 ms&lt;/td&gt;
&lt;td&gt;35 MB&lt;/td&gt;
&lt;td&gt;Bun + your app&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Node.js (&lt;code&gt;node app.js&lt;/code&gt;)&lt;/td&gt;
&lt;td&gt;108 ms&lt;/td&gt;
&lt;td&gt;187 ms&lt;/td&gt;
&lt;td&gt;45 MB&lt;/td&gt;
&lt;td&gt;Node + your app&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Rust (for reference: the benchmark app)&lt;/td&gt;
&lt;td&gt;5 ms&lt;/td&gt;
&lt;td&gt;~92 ms&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;3.5 MB&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;First frame is measured from the runtime&#39;s start. Launch to exit is wall time measured from outside, including process creation and teardown.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Animation.&lt;/strong&gt; The same scene as the Rust table above, in &lt;code&gt;one&lt;/code&gt; mode: one cell changes per frame, GPU renderer, medians of 3 runs. CPU is the whole process, counted with the cycle counter as for Rust.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Plain JS&lt;/strong&gt; uses &lt;code&gt;@blender-ui/native&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React with signals&lt;/strong&gt; passes the changing values as signals, so the grid renders once.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React with state&lt;/strong&gt; re-renders the grid every frame.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React&#39;s production build&lt;/strong&gt; is used throughout.&lt;/li&gt;
&lt;/ul&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;3,000 cells&lt;/th&gt;
&lt;th&gt;FPS&lt;/th&gt;
&lt;th&gt;CPU per frame&lt;/th&gt;
&lt;th&gt;RAM&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Rust&lt;/td&gt;
&lt;td&gt;59.6&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;12.0 ms&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;43 MB&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;QuickJS: plain JS / React with signals / React with state&lt;/td&gt;
&lt;td&gt;59.1 / 58.7 / 19.7&lt;/td&gt;
&lt;td&gt;16.3 / 14.9 / 51.0 ms&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;56 / 61 / 67 MB&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Bun 1.4: plain JS / React with signals / React with state&lt;/td&gt;
&lt;td&gt;58.8 / 58.4 / 55.8&lt;/td&gt;
&lt;td&gt;13.1 / 13.3 / 20.8 ms&lt;/td&gt;
&lt;td&gt;80 / 85 / 118 MB&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Node 22: plain JS / React with signals / React with state&lt;/td&gt;
&lt;td&gt;55.8 / 56.7 / 54.8&lt;/td&gt;
&lt;td&gt;14.4 / 14.0 / 18.9 ms&lt;/td&gt;
&lt;td&gt;88 / 93 / 121 MB&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;1,000 cells&lt;/th&gt;
&lt;th&gt;FPS&lt;/th&gt;
&lt;th&gt;CPU per frame&lt;/th&gt;
&lt;th&gt;RAM&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Rust&lt;/td&gt;
&lt;td&gt;60&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;4.8 ms&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;32 MB&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;QuickJS: plain JS / React with signals / React with state&lt;/td&gt;
&lt;td&gt;60 / 60 / 56.8&lt;/td&gt;
&lt;td&gt;6.0 / 5.6 / 17.8 ms&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;38 / 40 / 43 MB&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Bun: plain JS / React with signals / React with state&lt;/td&gt;
&lt;td&gt;60 / 60 / 60&lt;/td&gt;
&lt;td&gt;5.2 / 5.2 / 7.5 ms&lt;/td&gt;
&lt;td&gt;58 / 63 / 81 MB&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Node: plain JS / React with signals / React with state&lt;/td&gt;
&lt;td&gt;60 / 60 / 60&lt;/td&gt;
&lt;td&gt;5.6 / 5.6 / 6.9 ms&lt;/td&gt;
&lt;td&gt;68 / 71 / 97 MB&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;What this means:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;JavaScript costs little over Rust:&lt;/strong&gt; 0.4–2.4 ms per frame, for sending changes to BUI&#39;s UI thread.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Signals make React as cheap as the plain API:&lt;/strong&gt; the component doesn&#39;t re-render.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;QuickJS&lt;/strong&gt; starts fastest and uses the least memory, from a 7 MB file. It has no JIT, so re-rendering a 3,000-element list every frame drops it to 20 FPS. Keep big lists on signals, or build with &lt;code&gt;--bun&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;React and Svelte, side by side&lt;/strong&gt; (one session, runs interleaved, medians of 3; &lt;code&gt;--svelte&lt;/code&gt; in the commands below):&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;3,000 cells, one session (Node 26 / Bun 1.4 / QuickJS)&lt;/th&gt;
&lt;th&gt;CPU per frame&lt;/th&gt;
&lt;th&gt;RAM&lt;/th&gt;
&lt;th&gt;JavaScript per update&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Plain JS&lt;/td&gt;
&lt;td&gt;37.0 / 37.4 / 38.6 ms&lt;/td&gt;
&lt;td&gt;92 / 81 / 59 MB&lt;/td&gt;
&lt;td&gt;14 / 13 / 28 µs&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;React with signals&lt;/td&gt;
&lt;td&gt;37.6 / 38.4 / 37.8 ms&lt;/td&gt;
&lt;td&gt;100 / 87 / 60 MB&lt;/td&gt;
&lt;td&gt;23 / 17 / 40 µs&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Svelte with signals (as values)&lt;/td&gt;
&lt;td&gt;39.0 / 36.8 / 38.5 ms&lt;/td&gt;
&lt;td&gt;116 / 97 / 75 MB&lt;/td&gt;
&lt;td&gt;17 / 19 / 36 µs&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Svelte with runes&lt;/td&gt;
&lt;td&gt;39.4 / 35.9 / 37.0 ms&lt;/td&gt;
&lt;td&gt;117 / 98 / 75 MB&lt;/td&gt;
&lt;td&gt;65 / 76 / 790 µs&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;React with state&lt;/td&gt;
&lt;td&gt;38.1 ms on Node&lt;/td&gt;
&lt;td&gt;166 MB on Node&lt;/td&gt;
&lt;td&gt;5.2 / 8.6 / 76 ms&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;First frame, median of 12&lt;/th&gt;
&lt;th&gt;React&lt;/th&gt;
&lt;th&gt;Svelte&lt;/th&gt;
&lt;th&gt;Svelte before&lt;/th&gt;
&lt;th&gt;RAM (React / Svelte)&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;QuickJS executable (&lt;code&gt;bui build&lt;/code&gt;)&lt;/td&gt;
&lt;td&gt;93 ms&lt;/td&gt;
&lt;td&gt;89 ms&lt;/td&gt;
&lt;td&gt;81 ms&lt;/td&gt;
&lt;td&gt;20.4 / 20.4 MB&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Bun executable (&lt;code&gt;--bun&lt;/code&gt;)&lt;/td&gt;
&lt;td&gt;106 ms&lt;/td&gt;
&lt;td&gt;90 ms&lt;/td&gt;
&lt;td&gt;94 ms&lt;/td&gt;
&lt;td&gt;37.8 / 38.8 MB&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Bun (&lt;code&gt;--preload …/register&lt;/code&gt;)&lt;/td&gt;
&lt;td&gt;107 ms&lt;/td&gt;
&lt;td&gt;121 ms&lt;/td&gt;
&lt;td&gt;203 ms&lt;/td&gt;
&lt;td&gt;36.5 / 40.2 MB&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Node.js (&lt;code&gt;--import …/register&lt;/code&gt;)&lt;/td&gt;
&lt;td&gt;125 ms&lt;/td&gt;
&lt;td&gt;135 ms&lt;/td&gt;
&lt;td&gt;393 ms&lt;/td&gt;
&lt;td&gt;52.1 / 55.4 MB&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Every variant ran at 26–29 FPS&lt;/strong&gt; in this session (the machine, not the code), so CPU per frame is mostly BUI&#39;s own rendering and differs within noise. &amp;quot;JavaScript per update&amp;quot; is the cost of one update alone: 500 back to back, each applied by the framework and sent to the UI thread.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Svelte with signals costs what React with signals does:&lt;/strong&gt; a BUI signal passed as a value (&lt;code&gt;{label}&lt;/code&gt;, &lt;code&gt;style={style}&lt;/code&gt;) binds its node, so an update skips Svelte. Before this release&#39;s work it went through Svelte as a store: 86–87 µs on Node.js and Bun, 793 µs on QuickJS.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Svelte with runes&lt;/strong&gt; pays Svelte&#39;s flush, which walks the component&#39;s effects (3,000 here): 65–76 µs, 790 µs on QuickJS (85 / 78 / 790 before).&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Memory:&lt;/strong&gt; Svelte keeps 10–17 MB more than React with signals (6 MB less than before on Node). A heap snapshot puts the rest in Svelte&#39;s own effects, closures and each-block items, about 1.9 KB per cell; BUI&#39;s nodes are the same for both.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Startup:&lt;/strong&gt; &lt;code&gt;register&lt;/code&gt; serves Svelte&#39;s runtime bundled (once, with Bun, into &lt;code&gt;node_modules/.cache&lt;/code&gt;), which brought Node.js from 393 to 135 ms and Bun from 203 to 121 ms. React and Svelte ran one after the other here.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React with state&lt;/strong&gt; on Bun and QuickJS: the 500 back-to-back re-renders overran the warm-up, so only its per-update cost is valid from this session. Bun also sometimes crashes when a React app quits (after its first frame), a bug that predates this work.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Method, the memory breakdown and how to rerun: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/javascript.md#performance&quot;&gt;docs/javascript.md&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;33. Run the benchmarks yourself&lt;/h2&gt;
&lt;p&gt;Every number above comes from a tool in this repo. Build in release mode, close other heavy apps, and plug the laptop in. Run one benchmark (and one build) at a time.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Start time and battery: the five ways and gpui&lt;/strong&gt; (&lt;code&gt;bench/&lt;/code&gt;, Windows). The same settings window written each way, on the CPU and the GPU renderer, plus one gpui-syntax file compiled for blenderui, gpui and gpui-fast. It reports start time, CPU used to start, memory and idle CPU, and writes &lt;code&gt;bench/results.json&lt;/code&gt;.&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-shell&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;Shell&quot;&gt;&lt;span class=&quot;syntax-source syntax-shell syntax-bash&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;cmake&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; -&lt;/span&gt;S&lt;/span&gt; .&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; -&lt;/span&gt;B&lt;/span&gt; build&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-logical syntax-and syntax-shell&quot;&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;cmake&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;build&lt;/span&gt; build&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;config&lt;/span&gt; Release&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;target&lt;/span&gt; buipy  &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; Python extension&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-support syntax-function syntax-cd syntax-shell&quot;&gt;cd&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; bindings/node&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-logical syntax-and syntax-shell&quot;&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;npm&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; run build&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-logical syntax-and syntax-shell&quot;&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-support syntax-function syntax-cd syntax-shell&quot;&gt;cd&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; ../..                                &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; Node addon&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-support syntax-function syntax-cd syntax-shell&quot;&gt;cd&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; bindings/rust&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-logical syntax-and syntax-shell&quot;&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;cargo&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; build&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;release&lt;/span&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;example&lt;/span&gt; bench_app&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-logical syntax-and syntax-shell&quot;&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-support syntax-function syntax-cd syntax-shell&quot;&gt;cd&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; ../..    &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; Rust app&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-support syntax-function syntax-cd syntax-shell&quot;&gt;cd&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; bindings/rust/bench&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-logical syntax-and syntax-shell&quot;&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;cargo&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; build&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;release&lt;/span&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;bins&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-logical syntax-and syntax-shell&quot;&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-support syntax-function syntax-cd syntax-shell&quot;&gt;cd&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; ../../..        &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; gpui comparison&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;py&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; -&lt;/span&gt;3&lt;/span&gt; bench/run.py 10 20        &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; launches per app, seconds of idle measurement&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;Frame cost: 100, 1,000 and 3,000 animated cells, against gpui and gpui-fast&lt;/strong&gt; (&lt;code&gt;bindings/rust/bench/&lt;/code&gt;, Windows). A 1000×800 window filled with N rounded, numbered cells, in three modes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;anim:&lt;/strong&gt; every cell changes every frame, the worst case.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;one:&lt;/strong&gt; one cell changes per frame, like a hover or a ticking value.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;idle:&lt;/strong&gt; nothing changes.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Each app measures its own CPU cycles, frames and memory, and &lt;code&gt;run.py&lt;/code&gt; adds GPU utilisation and GPU memory from Windows&#39; performance counters.&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-shell&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;Shell&quot;&gt;&lt;span class=&quot;syntax-source syntax-shell syntax-bash&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-support syntax-function syntax-cd syntax-shell&quot;&gt;cd&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; bindings/rust/bench&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-support syntax-function syntax-set syntax-shell&quot;&gt;set&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; GPUI_FXC_PATH=C:&lt;span class=&quot;syntax-constant syntax-character syntax-escape syntax-shell&quot;&gt;\P&lt;/span&gt;rogram Files (x86&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-post-cmd syntax-shell&quot;&gt;)&lt;span class=&quot;syntax-constant syntax-character syntax-escape syntax-shell&quot;&gt;\W&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;indows&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; Kits&lt;span class=&quot;syntax-constant syntax-character syntax-escape syntax-shell&quot;&gt;\1&lt;/span&gt;0&lt;span class=&quot;syntax-constant syntax-character syntax-escape syntax-shell&quot;&gt;\b&lt;/span&gt;in&lt;span class=&quot;syntax-constant syntax-character syntax-escape syntax-shell&quot;&gt;\1&lt;/span&gt;0.0.19041.0&lt;span class=&quot;syntax-constant syntax-character syntax-escape syntax-shell&quot;&gt;\x&lt;/span&gt;64&lt;span class=&quot;syntax-constant syntax-character syntax-escape syntax-shell&quot;&gt;\f&lt;/span&gt;xc.exe   &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; gpui needs fxc.exe&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;cargo&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; build&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;release&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;py&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; run.py&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;reps&lt;/span&gt; 3                                   &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; all apps, 100 / 1000 / 3000 cells, about 12 minutes&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;py&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; run.py&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;cells&lt;/span&gt; 3000&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;apps&lt;/span&gt; blenderui,blenderui-gpu&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;reps&lt;/span&gt; 1&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;target&lt;span class=&quot;syntax-constant syntax-character syntax-escape syntax-shell&quot;&gt;\r&lt;/span&gt;elease&lt;span class=&quot;syntax-constant syntax-character syntax-escape syntax-shell&quot;&gt;\b&lt;/span&gt;ui-bench&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;cells&lt;/span&gt; 3000&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;mode&lt;/span&gt; anim   &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; one run by hand (--mode one / idle, --uncapped)&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-support syntax-function syntax-set syntax-shell&quot;&gt;set&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; BUI_GPU=1&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-logical syntax-and syntax-shell&quot;&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;target&lt;span class=&quot;syntax-constant syntax-character syntax-escape syntax-shell&quot;&gt;\r&lt;/span&gt;elease&lt;span class=&quot;syntax-constant syntax-character syntax-escape syntax-shell&quot;&gt;\b&lt;/span&gt;ui-bench&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;cells&lt;/span&gt; 3000&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;mode&lt;/span&gt; anim   &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; on the GPU renderer&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Method and full results: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bindings/rust/bench/README.md&quot;&gt;bindings/rust/bench/README.md&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;JavaScript: the same cells, and startup&lt;/strong&gt; (&lt;code&gt;bindings/node/bench/&lt;/code&gt;):&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-shell&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;Shell&quot;&gt;&lt;span class=&quot;syntax-source syntax-shell syntax-bash&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-support syntax-function syntax-cd syntax-shell&quot;&gt;cd&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; bindings/node&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;node&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; bench/cells.js 3000                       &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; DOM-like API, one cell changing per frame&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;node&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; bench/cells.js 3000&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;react               &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; React re-rendering the grid&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;node&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; bench/cells.js 3000&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;react&lt;/span&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;signals     &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; React with signals: no re-render&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;node&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;import&lt;/span&gt; ../svelte/register.js bench/cells.js 3000&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;svelte   &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; Svelte, runes&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;node&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; bench/cells.js 3000&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;gpu                 &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; on the GPU renderer&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;bun&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; bench/cells.js 3000                        &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; on Bun&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;node&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; cli.js run bench/cells.js&lt;span class=&quot;syntax-keyword syntax-operator syntax-end-of-options syntax-shell&quot;&gt; --&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; 3000         &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; on the 5 MB QuickJS runtime&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;node&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; bench/startup.js                          &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; launch to first frame: Node, Bun and both executables&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;node&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; bench/startup.js&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;svelte                 &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; the same for the Svelte app&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;tkinter: canvas frame cost&lt;/strong&gt; (headless, any platform):&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-shell&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;Shell&quot;&gt;&lt;span class=&quot;syntax-source syntax-shell syntax-bash&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;py&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; bindings/python/bench/tk_canvas_bench.py 3000 all    &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; move 3,000 canvas items every frame&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;py&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; bindings/python/bench/tk_canvas_bench.py 3000 one    &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; move one&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;Inside any app:&lt;/strong&gt; run it with &lt;code&gt;BUI_PROFILE=1&lt;/code&gt; to print per-phase frame times (layout, paint, raster, present) every 60 frames; any value turns it on. Use &lt;code&gt;BUI_GPU=1&lt;/code&gt; / &lt;code&gt;BUI_GPU=0&lt;/code&gt; to pick the renderer. More: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/performance/profiling/&quot;&gt;Profiling&lt;/a&gt;.&lt;/p&gt;
&lt;hr /&gt;
&lt;h2&gt;Part VI: Reference&lt;/h2&gt;
&lt;h2&gt;34. Platforms&lt;/h2&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;/th&gt;
&lt;th&gt;Windows&lt;/th&gt;
&lt;th&gt;Linux&lt;/th&gt;
&lt;th&gt;macOS&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Window&lt;/td&gt;
&lt;td&gt;Native (Win32)&lt;/td&gt;
&lt;td&gt;Native (X11; Wayland through XWayland)&lt;/td&gt;
&lt;td&gt;Native (Cocoa), experimental&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Python (&lt;code&gt;pip install&lt;/code&gt;)&lt;/td&gt;
&lt;td&gt;Works: wheels&lt;/td&gt;
&lt;td&gt;Works: wheels (native X11 host)&lt;/td&gt;
&lt;td&gt;Works: wheels&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Rust (&lt;code&gt;cargo add blenderui&lt;/code&gt;)&lt;/td&gt;
&lt;td&gt;Works&lt;/td&gt;
&lt;td&gt;Works&lt;/td&gt;
&lt;td&gt;Experimental&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;JavaScript / React&lt;/td&gt;
&lt;td&gt;Works: prebuilt on npm&lt;/td&gt;
&lt;td&gt;Works: build the addon from source (&lt;code&gt;npm run build&lt;/code&gt;); native X11 windows&lt;/td&gt;
&lt;td&gt;Headless (see below)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;C, C++, Dear ImGui&lt;/td&gt;
&lt;td&gt;Works&lt;/td&gt;
&lt;td&gt;Works&lt;/td&gt;
&lt;td&gt;Experimental&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Renderer&lt;/td&gt;
&lt;td&gt;CPU raster, or GPU (Direct3D 11)&lt;/td&gt;
&lt;td&gt;CPU raster, or GPU (OpenGL 3.3)&lt;/td&gt;
&lt;td&gt;CPU raster&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;HiDPI&lt;/td&gt;
&lt;td&gt;Per-monitor DPI&lt;/td&gt;
&lt;td&gt;&lt;code&gt;Xft.dpi&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Retina (backing scale)&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;&lt;strong&gt;Works&lt;/strong&gt; means it works and is tested. &lt;strong&gt;Experimental&lt;/strong&gt; means it&#39;s written but has had little hands-on testing on real hardware (macOS: one Apple Silicon Mac so far, plus CI).&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;macOS.&lt;/strong&gt; The macOS window host is new: it&#39;s a port of Blender&#39;s Cocoa code (GHOST). So far it has been checked by CI and tried by hand on one Apple Silicon Mac by &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/krishkalaria12&quot;&gt;Krish Kalaria&lt;/a&gt;, who reported issue #3 and fixed it in pull request #4. If you have another one, please try it and tell us what happens: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/macos-testing.md&quot;&gt;docs/macos-testing.md&lt;/a&gt;. Python can still use the stdlib Tk window there (&lt;code&gt;BUI_HOST=tk&lt;/code&gt;; this needs Python&#39;s &lt;code&gt;tkinter&lt;/code&gt;, for example from python.org or &lt;code&gt;brew install python-tk&lt;/code&gt;). Node runs BUI on its own UI thread and macOS only allows windows on the main thread, so JavaScript stays headless on macOS for now.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Linux.&lt;/strong&gt; libX11 and libGL are loaded when the first window opens, so BUI also imports and renders headless on servers and in containers without them, and falls back to the CPU raster where OpenGL is missing. Building from source needs the X11 headers (&lt;code&gt;libx11-dev&lt;/code&gt; / &lt;code&gt;libX11-devel&lt;/code&gt;); no GL headers are needed. The C, Python, window and GPU parity tests pass on Linux, on Mesa&#39;s software OpenGL and on an NVIDIA GPU.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Packages:&lt;/strong&gt;&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Package&lt;/th&gt;
&lt;th&gt;Platforms&lt;/th&gt;
&lt;th&gt;Notes&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;blenderui&lt;/code&gt; on PyPI&lt;/td&gt;
&lt;td&gt;Windows x86_64, Linux x86_64 (manylinux), macOS arm64 and x86_64&lt;/td&gt;
&lt;td&gt;CPython 3.11 to 3.14. No musllinux or 32-bit wheels.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;blenderui&lt;/code&gt; on crates.io&lt;/td&gt;
&lt;td&gt;Any platform with CMake and a C compiler&lt;/td&gt;
&lt;td&gt;Rust 1.88+. &lt;code&gt;blenderui-imgui&lt;/code&gt; (Dear ImGui) is on crates.io too.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;@blender-ui/native&lt;/code&gt;, &lt;code&gt;@blender-ui/react&lt;/code&gt;, &lt;code&gt;@blender-ui/svelte&lt;/code&gt; on npm&lt;/td&gt;
&lt;td&gt;Windows x64&lt;/td&gt;
&lt;td&gt;Node.js 18+ (22.15+ for Svelte) or Bun. Elsewhere, build the addon from source.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;C and C++ (CMake)&lt;/td&gt;
&lt;td&gt;Windows, Linux, macOS&lt;/td&gt;
&lt;td&gt;CMake 3.20+, a C11 and C++20 compiler.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;h2&gt;35. Environment variables&lt;/h2&gt;
&lt;p&gt;Most are read by the C library, so they work the same from every language. On/off variables look at the first character: &lt;code&gt;1&lt;/code&gt;, &lt;code&gt;y&lt;/code&gt;, &lt;code&gt;Y&lt;/code&gt;, &lt;code&gt;t&lt;/code&gt; or &lt;code&gt;T&lt;/code&gt; is on. Where a variable and an app-wide API call set the same thing, the variable wins.&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Variable&lt;/th&gt;
&lt;th&gt;What it does&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_GPU&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;1&lt;/code&gt; draws native windows on the GPU (Direct3D 11 / OpenGL 3.3). Overrides &lt;code&gt;bui.set_gpu()&lt;/code&gt;, &lt;code&gt;Application::gpu()&lt;/code&gt;, &lt;code&gt;BUI_gpu_set_default()&lt;/code&gt;. &lt;code&gt;0&lt;/code&gt; turns those defaults off; a window that asks for the GPU itself still gets it.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_SLUG&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;GPU text: &lt;code&gt;1&lt;/code&gt; from glyph outlines (Slug, the default), &lt;code&gt;0&lt;/code&gt; from a per-glyph atlas.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_GPU_DEBUG&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;1&lt;/code&gt; prints why the GPU renderer couldn&#39;t start.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_GPU_WARP&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;1&lt;/code&gt; (Windows) creates the Direct3D 11 device on WARP, the software rasterizer. Handy in VMs and CI.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_GPU_MAX_TEXTURE&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Testing: the largest texture side the GPU renderers give one image (at least 64), so images over it are tiled as on devices with a small limit.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_GPU_EGL&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;default&lt;/code&gt; or &lt;code&gt;surfaceless&lt;/code&gt; (Linux): the EGL platform for offscreen GPU rendering.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_RASTER_THREADS&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;1 to 8 (Windows): the most threads the software raster uses for big canvases.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_PROFILE&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Prints frame times every 60 frames. &lt;strong&gt;Any&lt;/strong&gt; value turns it on, even &lt;code&gt;0&lt;/code&gt;.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_THEME&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;dark&lt;/code&gt; (default) or &lt;code&gt;light&lt;/code&gt;: Blender&#39;s theme, when the app doesn&#39;t set one.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_UI_SCALE&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;A fixed UI scale (&lt;code&gt;1.25&lt;/code&gt;, &lt;code&gt;1.5&lt;/code&gt; ...) instead of the display&#39;s. Clamped to 0.5–4.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_HOST&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;tk&lt;/code&gt; (Python): use the stdlib Tk window even where a native host exists.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_MAC_TK&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;0&lt;/code&gt; (Python on macOS): skip starting a hidden Tk root before the first native window.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_FONT&lt;/code&gt;, &lt;code&gt;BUI_FONT_DIR&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;A font file to replace Inter, and an extra font folder to search first.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_FILEDIALOG&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;native&lt;/code&gt; (or &lt;code&gt;system&lt;/code&gt;, &lt;code&gt;tk&lt;/code&gt;), Python: file dialogs use the OS&#39;s instead of Blender&#39;s File Browser.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_BOOKMARKS&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The File Browser&#39;s bookmarks file.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUIPY_BUILD_DIR&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Running Python from a source checkout: the folder holding the built &lt;code&gt;buipy&lt;/code&gt; extension.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_NODE_ADDON&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;@blender-ui/native&lt;/code&gt;: load this &lt;code&gt;.node&lt;/code&gt; addon instead of the bundled one.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_HEADLESS&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;1&lt;/code&gt;: &lt;code&gt;bui build&lt;/code&gt; apps and &lt;code&gt;bui run&lt;/code&gt; render off-screen (same as &lt;code&gt;--headless&lt;/code&gt;).&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_SOURCE_DIR&lt;/code&gt;, &lt;code&gt;BUI_TEXT_GDI&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Build time, Rust: build the C library from this checkout; use GDI text.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;Every variable, with defaults and where it&#39;s read: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/reference/environment-variables/&quot;&gt;Environment variables&lt;/a&gt; and &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/getting-started.md#environment-variables&quot;&gt;docs/getting-started.md&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;36. Building from source and CMake options&lt;/h2&gt;
&lt;p&gt;You need &lt;strong&gt;CMake 3.20+&lt;/strong&gt;, a &lt;strong&gt;C11 / C++20 compiler&lt;/strong&gt; (MSVC, GCC/MinGW or Clang) and &lt;strong&gt;Python 3.11+&lt;/strong&gt; with headers. On Linux, also the X11 headers.&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-shell&quot;&gt;&lt;span class=&quot;code-snippet&quot; data-language=&quot;Shell&quot;&gt;&lt;span class=&quot;syntax-source syntax-shell syntax-bash&quot;&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;git&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; clone https://github.com/ppmpreetham/BUI&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-logical syntax-and syntax-shell&quot;&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-support syntax-function syntax-cd syntax-shell&quot;&gt;cd&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; BUI&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;cmake&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; -&lt;/span&gt;S&lt;/span&gt; .&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; -&lt;/span&gt;B&lt;/span&gt; build&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-logical syntax-and syntax-shell&quot;&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;cmake&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;build&lt;/span&gt; build&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; -&lt;/span&gt;j&lt;/span&gt; 2&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;ctest&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-parameter syntax-option syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-parameter syntax-shell&quot;&gt; --&lt;/span&gt;test-dir&lt;/span&gt; build                      &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; C, C++, ImGui and Python test suites&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-storage syntax-modifier syntax-shell&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-assignment syntax-shell&quot;&gt;PYTHONPATH&lt;/span&gt;&lt;span class=&quot;syntax-keyword syntax-operator syntax-assignment syntax-shell&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;syntax-string syntax-unquoted syntax-shell&quot;&gt;&lt;span class=&quot;syntax-meta syntax-group syntax-expansion syntax-parameter syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-variable syntax-shell&quot;&gt;$&lt;/span&gt;&lt;span class=&quot;syntax-variable syntax-other syntax-readwrite syntax-shell&quot;&gt;PWD&lt;/span&gt;&lt;/span&gt;/bindings/python&lt;/span&gt;&lt;/span&gt;      &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; Windows: set PYTHONPATH=%CD%\bindings\python&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;python&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; examples/components_demo.py&lt;/span&gt;

&lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-support syntax-function syntax-cd syntax-shell&quot;&gt;cd&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; bindings/rust&lt;/span&gt; &lt;span class=&quot;syntax-keyword syntax-operator syntax-logical syntax-and syntax-shell&quot;&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class=&quot;syntax-meta syntax-function-call syntax-shell&quot;&gt;&lt;span class=&quot;syntax-variable syntax-function syntax-shell&quot;&gt;cargo&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-meta syntax-function-call syntax-arguments syntax-shell&quot;&gt; test              &lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;&lt;span class=&quot;syntax-punctuation syntax-definition syntax-comment syntax-begin syntax-shell&quot;&gt;#&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt; Rust: CSS, Tailwind, rsx!, hooks, effects, headless windows&lt;/span&gt;&lt;span class=&quot;syntax-comment syntax-line syntax-number-sign syntax-shell&quot;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Option&lt;/th&gt;
&lt;th&gt;Default&lt;/th&gt;
&lt;th&gt;What it does&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_BUILD_TESTS&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;ON&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;C test programs and the &lt;code&gt;ctest&lt;/code&gt; suites&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_BUILD_EXAMPLES&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;OFF&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The C examples (&lt;code&gt;bui_kit_hello&lt;/code&gt;, &lt;code&gt;bui_svg_demo&lt;/code&gt;, the site screenshot programs)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_BUILD_PYTHON_BINDINGS&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;ON&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The &lt;code&gt;buipy&lt;/code&gt; extension (and the ImGui extension); skipped without Python&#39;s dev files&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_BUILD_IMGUI&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;ON&lt;/code&gt; with a C++ compiler&lt;/td&gt;
&lt;td&gt;Dear ImGui on BUI, its C API, demo and test&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_IMGUI_BLENDER_WIDGETS&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;OFF&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Dear ImGui with Blender&#39;s widgets&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_BUILD_QT_BACKEND&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;OFF&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The C++ Qt/QPainter render-sink backend (needs Qt 5 or 6)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_BUILD_UI&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;OFF&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Also compile Blender&#39;s original &lt;code&gt;ui/&lt;/code&gt; sources (reference only)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_TEXT_FREETYPE&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;ON&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Render glyphs with FreeType like Blender&#39;s BLF; &lt;code&gt;OFF&lt;/code&gt; uses stb_truetype&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_TEXT_GDI&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;OFF&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Windows&#39; GDI text and system fonts&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_SLUG&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;ON&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Slug as the GPU&#39;s default text method (switchable at run time)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_IMAGE_SVG&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;ON&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;SVG images through the kit&#39;s nanosvg (no extra code: Blender&#39;s icons already use it)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;BUI_WARNINGS_AS_ERRORS&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;OFF&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;GCC and Clang only: when &lt;code&gt;OFF&lt;/code&gt; the build adds &lt;code&gt;-Wno-error&lt;/code&gt;; it never adds &lt;code&gt;-Werror&lt;/code&gt; or &lt;code&gt;/WX&lt;/code&gt; itself&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;Rebuild the docs screenshots with &lt;code&gt;python tools/gen_doc_images.py&lt;/code&gt; (and the website&#39;s dark and light shots with &lt;code&gt;--site&lt;/code&gt;). More: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/reference/cmake-options/&quot;&gt;CMake options&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;37. Coverage&lt;/h2&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;API&lt;/th&gt;
&lt;th&gt;Coverage&lt;/th&gt;
&lt;th&gt;Status&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;tkinter and ttk&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;7,846 of 7,846&lt;/strong&gt; public names; nine real programs behave identically&lt;/td&gt;
&lt;td&gt;Complete&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Qt syntax&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;About 220 of 920&lt;/strong&gt; public method names on 25 core widget classes (~24%)&lt;/td&gt;
&lt;td&gt;Partial&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Blender components (Python)&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;45&lt;/strong&gt; components (10 of them also in Rust and JavaScript)&lt;/td&gt;
&lt;td&gt;Complete&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;HTML elements (Rust, JavaScript)&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;113 of 113&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Complete&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;CSS properties (Rust, JavaScript)&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;261 of 745&lt;/strong&gt; W3C properties render, &lt;strong&gt;129&lt;/strong&gt; more parse, &lt;strong&gt;355&lt;/strong&gt; not recognized (mostly drafts, speech, paged media and SVG)&lt;/td&gt;
&lt;td&gt;Partial&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;CSS 2.1 screen properties&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;90 of 90&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Complete&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Flexbox / Grid&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;12 of 12&lt;/strong&gt; / &lt;strong&gt;23 of 23&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Complete&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Dear ImGui, C&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;399 of 399&lt;/strong&gt; functions&lt;/td&gt;
&lt;td&gt;Complete&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Dear ImGui, Python and safe Rust&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;366 of 399&lt;/strong&gt; functions (Rust FFI: 385)&lt;/td&gt;
&lt;td&gt;Partial&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Image formats (every language)&lt;/td&gt;
&lt;td&gt;PNG, JPEG, WebP, GIF, BMP, TGA, QOI, HDR, PNM, SVG; not yet AVIF, EXR, TIFF, JPEG XL, HEIC&lt;/td&gt;
&lt;td&gt;Partial&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;How each was counted: &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top/docs/reference/coverage/&quot;&gt;Coverage&lt;/a&gt;, &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/SYNTAX_COVERAGE.md&quot;&gt;SYNTAX_COVERAGE.md&lt;/a&gt;, &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/rust.md#coverage&quot;&gt;docs/rust.md&lt;/a&gt;, &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/imgui.md#coverage&quot;&gt;docs/imgui.md&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;38. Repository layout&lt;/h2&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Path&lt;/th&gt;
&lt;th&gt;Contents&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;kit/&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The C runtime: nodes, input, widget drawing (the &lt;code&gt;interface_widgets.cc&lt;/code&gt; port), menus, geometry managers, canvas, the File Browser, themes (&lt;code&gt;kit_theme_presets.c&lt;/code&gt;), the Win32, X11 and Cocoa window hosts; &lt;code&gt;kit/intern/image/&lt;/code&gt; (images: decoders, cache, worker pool; third-party decoders in &lt;code&gt;kit/extern/&lt;/code&gt;); &lt;code&gt;kit/intern/blender/&lt;/code&gt; holds Blender files copied in (string search, text-edit undo, float precision). API: &lt;code&gt;kit/include/BUI_kit.h&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;gpu/&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Software raster, GPU renderer on Direct3D 11 (&lt;code&gt;gpu_d3d11.c&lt;/code&gt;, &lt;code&gt;shaders/&lt;/code&gt;) and OpenGL 3.3 (&lt;code&gt;gpu_gl.c&lt;/code&gt;), textured meshes, Slug text, text engine (FreeType or stb_truetype + embedded Inter, or GDI)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;core/&lt;/code&gt;, &lt;code&gt;types/&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Blender&#39;s &lt;code&gt;blenlib&lt;/code&gt; subset (including &lt;code&gt;string_search.cc&lt;/code&gt; and &lt;code&gt;expr_pylike_eval.cc&lt;/code&gt;) and data types&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;ui/&lt;/code&gt;, &lt;code&gt;compat/&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Blender&#39;s original interface sources, kept for reference (not compiled by default; &lt;code&gt;kit/&lt;/code&gt; re-ports them in C), and the seams replacing Blender&#39;s application APIs&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;api/&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Stable C ABI for render-sink hosts&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;bindings/python/&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The &lt;code&gt;buipy&lt;/code&gt; extension and the &lt;code&gt;bui&lt;/code&gt; / &lt;code&gt;blenderui&lt;/code&gt; packages (tkinter, Qt, components, ImGui)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;bindings/rust/&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;blenderui&lt;/code&gt;, &lt;code&gt;blenderui-sys&lt;/code&gt;, &lt;code&gt;blenderui-macros&lt;/code&gt;, &lt;code&gt;blenderui-tailwind&lt;/code&gt;, &lt;code&gt;blenderui-imgui&lt;/code&gt;, &lt;code&gt;blenderui-jsview&lt;/code&gt;, &lt;code&gt;blenderui-node&lt;/code&gt;, &lt;code&gt;blenderui-qjs&lt;/code&gt;, and the benchmark&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;bindings/node/&lt;/code&gt;, &lt;code&gt;bindings/react/&lt;/code&gt;, &lt;code&gt;bindings/svelte/&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;@blender-ui/native&lt;/code&gt;, &lt;code&gt;@blender-ui/react&lt;/code&gt; and &lt;code&gt;@blender-ui/svelte&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;bindings/imgui/&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Dear ImGui (vendored), the BUI backend, Blender style, the C API and its generator, the Blender-widgets build&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;backends/qt/&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;C++ Qt/QPainter render-sink backend&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;bench/&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The start time and battery benchmark; &lt;code&gt;bench/images/&lt;/code&gt; (decoders, thumbnail grid)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;examples/&lt;/code&gt;, &lt;code&gt;tools/&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Demos, the website&#39;s screenshot programs (&lt;code&gt;examples/site/&lt;/code&gt;), the icon and theme generators, the docs screenshot generator&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;website/&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The documentation website, &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top&quot;&gt;bui.preetham.top&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;h2&gt;39. Examples&lt;/h2&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;File&lt;/th&gt;
&lt;th&gt;Shows&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/examples/tk_unchanged_app.py&quot;&gt;&lt;code&gt;examples/tk_unchanged_app.py&lt;/code&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;A plain tkinter app: menus, notebook, form, table, text, canvas&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/examples/components_demo.py&quot;&gt;&lt;code&gt;examples/components_demo.py&lt;/code&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;Every Blender component in a properties-editor layout&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/examples/qt_syntax_demo.py&quot;&gt;&lt;code&gt;examples/qt_syntax_demo.py&lt;/code&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;Qt syntax: layouts, form widgets, signals&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/examples/tk_syntax_demo.py&quot;&gt;&lt;code&gt;examples/tk_syntax_demo.py&lt;/code&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;tkinter syntax laid out like a Blender properties editor&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/examples/kit_hello.c&quot;&gt;&lt;code&gt;examples/kit_hello.c&lt;/code&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;The C kit: a slider and a button in a native window&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/examples/imgui_demo.cpp&quot;&gt;&lt;code&gt;examples/imgui_demo.cpp&lt;/code&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;Dear ImGui&#39;s demo window on BUI, from C++&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/examples/imgui_demo_c.c&quot;&gt;&lt;code&gt;examples/imgui_demo_c.c&lt;/code&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;The same from C (&lt;code&gt;cimgui.h&lt;/code&gt;)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/examples/imgui_blender_compare.cpp&quot;&gt;&lt;code&gt;examples/imgui_blender_compare.cpp&lt;/code&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;ImGui widgets next to BUI&#39;s native Blender widgets&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/examples/site&quot;&gt;&lt;code&gt;examples/site/&lt;/code&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;The website&#39;s screenshot programs: a Render Properties editor and a node editor (Python components), tkinter and ttk dialogs, a Qt material editor, an ImGui inspector (C++ and Python), a C modifier stack, and a JavaScript task list (DOM, React and Svelte)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bindings/rust/blenderui/examples/hello.rs&quot;&gt;&lt;code&gt;hello.rs&lt;/code&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;Rust: a component, hooks, Tailwind attributes and a Blender slider&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bindings/rust/blenderui/examples/showcase.rs&quot;&gt;&lt;code&gt;showcase.rs&lt;/code&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;Rust: HTML, a stylesheet, flex/grid, tables, Blender form widgets&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bindings/rust/blenderui/examples/forms.rs&quot;&gt;&lt;code&gt;forms.rs&lt;/code&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;Rust: form controls as plain HTML, inside &lt;code&gt;styled&lt;/code&gt;, and as Blender components&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bindings/rust/blenderui/examples/site_dashboard.rs&quot;&gt;&lt;code&gt;site_dashboard.rs&lt;/code&gt;&lt;/a&gt;, &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bindings/rust/blenderui/examples/site_dashboard_builder.rs&quot;&gt;&lt;code&gt;site_dashboard_builder.rs&lt;/code&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;Rust: the same dashboard in &lt;code&gt;rsx!&lt;/code&gt; and in gpui builders&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bindings/rust/blenderui/examples/site_effects.rs&quot;&gt;&lt;code&gt;site_effects.rs&lt;/code&gt;&lt;/a&gt;, &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bindings/rust/blenderui/examples/site_grid.rs&quot;&gt;&lt;code&gt;site_grid.rs&lt;/code&gt;&lt;/a&gt;, &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bindings/rust/blenderui/examples/site_animation.rs&quot;&gt;&lt;code&gt;site_animation.rs&lt;/code&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;Rust: CSS effects, grid and &lt;code&gt;@keyframes&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bindings/rust/blenderui/examples/site_plain_html.rs&quot;&gt;&lt;code&gt;site_plain_html.rs&lt;/code&gt;&lt;/a&gt;, &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bindings/rust/blenderui/examples/site_styled.rs&quot;&gt;&lt;code&gt;site_styled.rs&lt;/code&gt;&lt;/a&gt;, &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bindings/rust/blenderui/examples/site_components.rs&quot;&gt;&lt;code&gt;site_components.rs&lt;/code&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;Rust: the three looks&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bindings/rust/blenderui-imgui/examples/demo.rs&quot;&gt;&lt;code&gt;blenderui-imgui&lt;/code&gt; demo&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;Dear ImGui from Rust (&lt;code&gt;cargo run -p blenderui-imgui --example demo&lt;/code&gt;)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bindings/node/examples/counter.js&quot;&gt;&lt;code&gt;bindings/node/examples/counter.js&lt;/code&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;JavaScript: the DOM-like API&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bindings/react/examples/counter.jsx&quot;&gt;&lt;code&gt;bindings/react/examples/counter.jsx&lt;/code&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;React in JSX (&lt;code&gt;bun examples/counter.jsx&lt;/code&gt;)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/bindings/svelte/examples/Counter.svelte&quot;&gt;&lt;code&gt;bindings/svelte/examples/Counter.svelte&lt;/code&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;Svelte 5 (&lt;code&gt;node --import ./bindings/svelte/register.js bindings/svelte/examples/counter.js&lt;/code&gt;)&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;hr /&gt;
&lt;h2&gt;Part VII: The project&lt;/h2&gt;
&lt;h2&gt;40. Status and roadmap&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;Done&lt;/strong&gt;&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Area&lt;/th&gt;
&lt;th&gt;What works&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;C runtime (&lt;code&gt;kit/&lt;/code&gt;)&lt;/td&gt;
&lt;td&gt;Nodes, Tk-style geometry managers, input, Blender widget drawing, damage rendering, undo, animation, text area, canvas, scroll views, Blender&#39;s string search, expression evaluator, text-edit undo and float precision, Blender&#39;s Dark and Light themes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Native windows&lt;/td&gt;
&lt;td&gt;Windows (Win32) and Linux (X11; Wayland through XWayland), in C: DPI-aware, frame-paced animation, clipboard, cursors, window-manager features&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;tkinter syntax&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;Complete&lt;/strong&gt;: every public tkinter and ttk name (7,846 of 7,846)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Components&lt;/td&gt;
&lt;td&gt;45 Blender components, including the color ramp, curve and node editors&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Rust&lt;/td&gt;
&lt;td&gt;HTML (113/113 elements), Flexbox 12/12, Grid 23/23, CSS 2.1 90/90, math functions, &lt;code&gt;var()&lt;/code&gt;, CSS Color 4/5, Selectors 4, &lt;code&gt;@layer&lt;/code&gt; / &lt;code&gt;@media&lt;/code&gt; / &lt;code&gt;@supports&lt;/code&gt; / &lt;code&gt;@scope&lt;/code&gt; / &lt;code&gt;@container&lt;/code&gt; / &lt;code&gt;@font-face&lt;/code&gt; / &lt;code&gt;@property&lt;/code&gt;, &lt;code&gt;@keyframes&lt;/code&gt; animations and transitions, filters / blend modes / masks / &lt;code&gt;clip-path&lt;/code&gt; / 2D transforms / &lt;code&gt;border-image&lt;/code&gt;, bidi text, background images, &lt;code&gt;object-fit&lt;/code&gt;, Tailwind v4, &lt;code&gt;rsx!&lt;/code&gt;, &lt;code&gt;#[component]&lt;/code&gt; with optional props and &lt;code&gt;key&lt;/code&gt;, hooks, Blender components, browser-look form controls, headless testing&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Dear ImGui&lt;/td&gt;
&lt;td&gt;The real Dear ImGui 1.93 on BUI (CPU, Direct3D 11, OpenGL), Blender theme and Inter; C++ / C (399/399 functions) / Python and Rust (366–385/399); the Blender-widgets build&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Rendering&lt;/td&gt;
&lt;td&gt;Software raster (parallel, damage-tracked), GPU renderer (Direct3D 11 on Windows, OpenGL 3.3 on Linux), textured meshes, portable text engine (FreeType, as in Blender)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;JavaScript / React&lt;/td&gt;
&lt;td&gt;&lt;code&gt;@blender-ui/native&lt;/code&gt;: a DOM-like API over napi-rs, with its own UI thread, only changes crossing the boundary, vsync-paced &lt;code&gt;requestAnimationFrame&lt;/code&gt; and signals. &lt;code&gt;@blender-ui/react&lt;/code&gt;: a React 19.3 renderer whose hooks (&lt;code&gt;useState&lt;/code&gt;, &lt;code&gt;useMemo&lt;/code&gt;, &lt;code&gt;useEffect&lt;/code&gt; ...) hold signals that update nodes without re-renders. Both on Node.js and Bun, with headless testing. &lt;code&gt;bui build&lt;/code&gt; makes standalone executables: about 7 MB with the embedded QuickJS runtime, or Bun&#39;s with &lt;code&gt;--bun&lt;/code&gt; (&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/javascript.md&quot;&gt;guide&lt;/a&gt;)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Packaging&lt;/td&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://pypi.org/project/blenderui/&quot;&gt;&lt;code&gt;blenderui&lt;/code&gt; on PyPI&lt;/a&gt;, with a CI workflow for wheels on all platforms (Linux wheels with the native X11 host); &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://crates.io/crates/blenderui&quot;&gt;&lt;code&gt;blenderui&lt;/code&gt; on crates.io&lt;/a&gt;; &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://www.npmjs.com/package/@blender-ui/react&quot;&gt;&lt;code&gt;@blender-ui/react&lt;/code&gt;&lt;/a&gt; and &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://www.npmjs.com/package/@blender-ui/native&quot;&gt;&lt;code&gt;@blender-ui/native&lt;/code&gt;&lt;/a&gt; on npm&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Docs&lt;/td&gt;
&lt;td&gt;The website, &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://bui.preetham.top&quot;&gt;bui.preetham.top&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;&lt;strong&gt;Partial or in progress&lt;/strong&gt;&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Area&lt;/th&gt;
&lt;th&gt;What&#39;s missing&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Qt syntax (~24%)&lt;/td&gt;
&lt;td&gt;Model/view classes, docks, toolbars, splitters, Qt stylesheets (&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/qt.md#coverage&quot;&gt;details&lt;/a&gt;)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;CSS (261 of 745 W3C properties render, 129 more parse)&lt;/td&gt;
&lt;td&gt;3D transforms, OpenType font features, multi-column layout; hit testing ignores 2D transforms. Most of the remaining W3C list is drafts, speech, print and SVG (&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/rust.md#coverage&quot;&gt;breakdown&lt;/a&gt;)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Text&lt;/td&gt;
&lt;td&gt;No text wrapping around floats; right-to-left text is reordered (bidi) but not shaped (Arabic joining); no OpenType features; no per-glyph font fallback yet (characters missing from the font show as boxes); no IME&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Rust components&lt;/td&gt;
&lt;td&gt;No async resources (&lt;code&gt;use_resource&lt;/code&gt;); no generic components&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Dear ImGui&lt;/td&gt;
&lt;td&gt;Python and safe Rust skip the &lt;code&gt;va_list&lt;/code&gt;, &lt;code&gt;void*&lt;/code&gt; and C-callback functions (reachable from C and the Rust FFI); with Blender widgets, window title bars, tooltips, plain popups, tables and the color picker keep ImGui&#39;s drawing&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;JavaScript / React packages&lt;/td&gt;
&lt;td&gt;npm packages are prebuilt for Windows x64 only (on Linux, build the addon from source); events reach JavaScript after BUI handled them (no native &lt;code&gt;preventDefault&lt;/code&gt;), and &lt;code&gt;event.target&lt;/code&gt; is the deepest &lt;em&gt;listening&lt;/em&gt; element&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;macOS&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;Experimental.&lt;/strong&gt; The native Cocoa window host is written, checked by CI and tried by hand on one Apple Silicon Mac (&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/macos-testing.md&quot;&gt;how to help&lt;/a&gt;); JavaScript is headless there (Node&#39;s UI thread isn&#39;t the main thread); no GPU renderer yet&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Themes&lt;/td&gt;
&lt;td&gt;Dark and Light work; loading other Blender theme files doesn&#39;t yet&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;&lt;strong&gt;Planned (coming soon)&lt;/strong&gt;&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Target&lt;/th&gt;
&lt;th&gt;Plan&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;WebAssembly&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;The kit in the browser: the raster blits to &lt;code&gt;&amp;lt;canvas&amp;gt;&lt;/code&gt;, DOM events feed the kit; &lt;code&gt;@blender-ui/react&lt;/code&gt; and the DOM-like API on top, unchanged&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;egui&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;BUI panels inside egui, plus a Blender-styled theme&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;More from Blender&#39;s source&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Per-glyph font fallback (BLF), IME, search-as-you-type popups, units in number fields, widget drag and drop&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;macOS GPU and JavaScript windows&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;The GPU renderer on Metal (or the OpenGL backend), and Node windows on the main thread&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;More GPU backends&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Vulkan / WebGPU drawing the same instance stream as Direct3D 11 and OpenGL&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Qt parity&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Measure against PySide6, run the same programs on Qt and BUI, fill in the missing classes, then &lt;code&gt;install()&lt;/code&gt; so &lt;code&gt;import PySide6&lt;/code&gt; programs run unchanged&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;More languages&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;MyGo, C#, Go, Zig, Swift, Kotlin and Lua over the same C header; Godot, Unity and Bevy; Flutter&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;Our roadmap has no dates on it. Like a good render, it&#39;s done when the noise goes away.&lt;/p&gt;
&lt;h2&gt;41. FAQ&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;Do I need Blender installed?&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;No. BUI contains the parts of Blender&#39;s UI code it needs and builds on its own.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Is it really my unchanged tkinter app?&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Yes. &lt;code&gt;blenderui-tk app.py&lt;/code&gt; makes &lt;code&gt;import tkinter&lt;/code&gt; return BUI&#39;s implementation, which covers every public tkinter and ttk name. Nine real programs are tested to behave identically on the standard library and on BUI. See &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/tkinter.md#limitations&quot;&gt;the limitations&lt;/a&gt; for the few differences.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Is it a web browser in Rust?&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;No. There&#39;s no browser engine and no network. BUI takes HTML elements and CSS as a &lt;em&gt;UI language&lt;/em&gt;: they are laid out with &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/DioxusLabs/taffy&quot;&gt;taffy&lt;/a&gt; and drawn by BUI&#39;s engine, with Blender&#39;s widgets where you ask for them, in a native window. JavaScript is optional: the Rust crate needs none, and the JavaScript packages drive the same engine.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Is the Dear ImGui support a re-implementation?&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;No. It&#39;s the real Dear ImGui (vendored, MIT), running on a BUI backend, so every function behaves as upstream. The optional Blender-widgets build swaps only how ImGui&#39;s widgets are drawn and how they react to the mouse, by compiling an edited copy of &lt;code&gt;imgui_widgets.cpp&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;How is it different from Electron, Electrobun or GPUIX?&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Electron&lt;/strong&gt; ships Chromium with every app: on the order of 100 MB or more.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Electrobun&lt;/strong&gt; runs on Bun and renders in the system&#39;s webview. It&#39;s small to download, but the UI is still a browser page.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;GPUIX&lt;/strong&gt;, like BUI, renders React natively: React drives Zed&#39;s GPUI.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;BUI also renders natively, with Blender&#39;s widgets, a much larger part of CSS, Tailwind, and hooks backed by signals. &lt;code&gt;bui build&lt;/code&gt; makes a 5 MB executable that reaches its first frame in about 70 ms.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Do the macros cost performance?&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;code&gt;rsx!&lt;/code&gt;, &lt;code&gt;#[component]&lt;/code&gt;, &lt;code&gt;css!&lt;/code&gt; and &lt;code&gt;tw!&lt;/code&gt; expand at compile time into the same builder calls you would write by hand. Tailwind classes are compiled to CSS once, on first use. Hooks are a few nanoseconds per read or write.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Can I change the colors?&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Yes. Switch between Blender&#39;s Dark and Light themes at run time (&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#22-themes-dark-and-light&quot;&gt;Themes&lt;/a&gt;), color individual widgets in every API, and use full CSS on plain HTML elements in Rust and JavaScript. Loading any other Blender theme file is coming soon.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Does it run on my Mac?&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Probably, but nobody has checked yet: the Cocoa host is written and experimental. Python can always fall back to the Tk window (&lt;code&gt;BUI_HOST=tk&lt;/code&gt;). If you try it, the notes in &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/macos-testing.md&quot;&gt;docs/macos-testing.md&lt;/a&gt; say what to report.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Is it ready for production?&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Much of it is complete and tested (the C kit, tkinter, the components, Rust, Dear ImGui, JavaScript), and some parts are partial or experimental (Qt syntax, parts of CSS and text, macOS). &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI#40-status-and-roadmap&quot;&gt;Status and roadmap&lt;/a&gt; shows which is which. Pin your version, and test on the platforms you ship.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Who wrote it?&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;The repository is built entirely using LLMs, with no human-written code. The drawing and interaction code is ported from Blender&#39;s sources, and the behavior is checked by tests: C, Python, Rust and JavaScript suites, the tkinter side-by-side programs and the GPU parity test.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Why GPL?&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;BUI is derived from Blender&#39;s source code, which is GPL-2.0-or-later, so BUI is too.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Can I use BUI in a commercial app?&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;The GPL allows commercial use. What it asks is that when you distribute a program that includes BUI, you distribute it under the GPL too, with its source code available. If that doesn&#39;t fit your project, talk to a lawyer before you ship. (This is a summary, not legal advice.)&lt;/p&gt;
&lt;h2&gt;Star History&lt;/h2&gt;
&lt;p&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://www.star-history.com/?repos=ppmpreetham%2Fbui&amp;amp;type=timeline&amp;amp;legend=bottom-right&quot;&gt;&lt;picture class=&quot;article-picture article-picture-fallback&quot; style=&quot;--image-ratio:16 / 9&quot;&gt;&lt;img src=&quot;https://camo.githubusercontent.com/6a35c3da354c3afe256cff36a946c93f280738a6f612fca76f2dcada90f1df71/68747470733a2f2f6170692e737461722d686973746f72792e636f6d2f63686172743f7265706f733d70706d707265657468616d2f62756926747970653d64617465266c6567656e643d626f74746f6d2d7269676874&quot; alt=&quot;Star History Chart&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; fetchpriority=&quot;low&quot; referrerpolicy=&quot;no-referrer&quot; class=&quot;progressive-image&quot;&gt;&lt;/picture&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;42. Contributing and publishing&lt;/h2&gt;
&lt;p&gt;Contributions are welcome: bug reports, missing tkinter/Qt behavior, CSS features, platform hosts and docs. If you have a Mac, running the Cocoa host and reporting what happens is one of the most useful things you can do right now. Read &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/CONTRIBUTING.md&quot;&gt;CONTRIBUTING.md&lt;/a&gt; first, and please follow the &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/CODE_OF_CONDUCT.md&quot;&gt;Code of Conduct&lt;/a&gt;. Report security issues privately, as &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/SECURITY.md&quot;&gt;SECURITY.md&lt;/a&gt; describes.&lt;/p&gt;
&lt;p&gt;Releases go to PyPI (&lt;code&gt;blenderui&lt;/code&gt;, wheels built by CI on a &lt;code&gt;v*&lt;/code&gt; tag), crates.io (the eight Rust crates, in dependency order) and npm (&lt;code&gt;@blender-ui/native&lt;/code&gt;, &lt;code&gt;@blender-ui/react&lt;/code&gt;). The steps are in &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/BUI/blob/main/docs/publishing.md&quot;&gt;docs/publishing.md&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;43. License and credits&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;License.&lt;/strong&gt; BUI is derived from Blender sources and is licensed &lt;strong&gt;GPL-2.0-or-later&lt;/strong&gt;. The SPDX header is kept in every file. Third-party parts keep their own licenses:&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Part&lt;/th&gt;
&lt;th&gt;What it does in BUI&lt;/th&gt;
&lt;th&gt;License&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://www.blender.org&quot;&gt;Blender&lt;/a&gt; sources&lt;/td&gt;
&lt;td&gt;Widget drawing, interaction rules, theme, icons, &lt;code&gt;blenlib&lt;/code&gt;, GHOST window code, the File Browser and node editor&lt;/td&gt;
&lt;td&gt;GPL-2.0-or-later&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ocornut/imgui&quot;&gt;Dear ImGui&lt;/a&gt; by Omar Cornut&lt;/td&gt;
&lt;td&gt;The immediate-mode GUI that runs on BUI&lt;/td&gt;
&lt;td&gt;MIT&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://rsms.me/inter&quot;&gt;Inter&lt;/a&gt; by Rasmus Andersson&lt;/td&gt;
&lt;td&gt;The embedded UI font, as in Blender (&lt;code&gt;gpu/extern/Inter-LICENSE.txt&lt;/code&gt;)&lt;/td&gt;
&lt;td&gt;SIL Open Font License 1.1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://freetype.org&quot;&gt;FreeType&lt;/a&gt; 2.13.3&lt;/td&gt;
&lt;td&gt;Glyph loading, hinting and rendering, like Blender&#39;s BLF&lt;/td&gt;
&lt;td&gt;FreeType License or GPLv2 (dual-licensed)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/nothings/stb&quot;&gt;stb_truetype&lt;/a&gt; by Sean Barrett&lt;/td&gt;
&lt;td&gt;Font metrics and character maps, and the fallback rasterizer&lt;/td&gt;
&lt;td&gt;Public domain&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/memononen/nanosvg&quot;&gt;NanoSVG&lt;/a&gt; by Mikko Mononen, as edited by Blender&lt;/td&gt;
&lt;td&gt;Rasterizing Blender&#39;s SVG icons&lt;/td&gt;
&lt;td&gt;Zlib&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/EricLengyel/Slug&quot;&gt;Slug&lt;/a&gt; by Eric Lengyel&lt;/td&gt;
&lt;td&gt;The GPU glyph coverage algorithm (shader code &amp;quot;Copyright 2017 by Eric Lengyel&amp;quot;)&lt;/td&gt;
&lt;td&gt;MIT&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://tailwindcss.com&quot;&gt;Tailwind CSS&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;The v4 default theme values behind the Tailwind support&lt;/td&gt;
&lt;td&gt;MIT&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;The Rust and JavaScript bindings also depend on crates and packages such as taffy, napi-rs, React and QuickJS, each under its own license.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Acknowledgments.&lt;/strong&gt; Thank you to:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://www.blender.org&quot;&gt;Blender&lt;/a&gt; and its community: the UI this project is built from, including its GHOST window code and blenlib.&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ocornut/imgui&quot;&gt;Dear ImGui&lt;/a&gt; by Omar Cornut: the immediate-mode GUI that runs on BUI.&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/DioxusLabs/taffy&quot;&gt;taffy&lt;/a&gt;: flexbox, grid and block layout for the Rust crate.&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://tailwindcss.com&quot;&gt;Tailwind CSS&lt;/a&gt;: the v4 theme behind the Tailwind support.&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://freetype.org&quot;&gt;FreeType&lt;/a&gt;: glyph rendering, as in Blender.&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/nothings/stb&quot;&gt;stb_truetype&lt;/a&gt;: font metrics and the fallback rasterizer.&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/memononen/nanosvg&quot;&gt;NanoSVG&lt;/a&gt; by Mikko Mononen: the icon rasterizer, via Blender&#39;s edited copy.&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://rsms.me/inter&quot;&gt;Inter&lt;/a&gt; by Rasmus Andersson: the embedded UI font, as in Blender.&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/EricLengyel/Slug&quot;&gt;Slug&lt;/a&gt; by Eric Lengyel: the GPU glyph coverage algorithm.&lt;/li&gt;
&lt;li&gt;&lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/zed-industries/zed&quot;&gt;gpui&lt;/a&gt;, &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://github.com/ppmpreetham/zopra&quot;&gt;zopra&lt;/a&gt; and &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href=&quot;https://leptos.dev&quot;&gt;Leptos&lt;/a&gt;: the APIs the Rust syntax follows.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;BUI is Blender&#39;s UI, minus the default cube. You&#39;re free to add your own.&lt;/p&gt;
</content>
  </entry>
</feed>
