UI libraries for HtmlDialog user interfaces

SketchUp traditionally ships not a huge API for OS-native user interfaces (see the UI module, UI.messagebox). This would always have limitations in regard to what UI ideas developers can realize and distract focus and effort away from SketchUp’s core expertise, 3D.

Frameworks have been suggested, like jQuery UI, Angular, React.js and Vue.js (recommended by several of SketchUp’s own projects). In contrast to jQuery UI, the latter require more developer setup (like npm, typescript or transpiling/building). They have some downsides like

  • big library size (Angular), whereas most HtmlDialogs (like a messagebox alternative) are single-page web apps with often exactly one page (no routing)
  • higher barrier of entry: When building steps are necessary, the dialog does not run from the raw source code and users or potential contributers might be less likely to join. But from experience, most open-source efforts for SketchUp extensions didn’t grow a community. Typically the main developer is the only developer.

Does anyone have experience with svelte?

It would solve the first issue: You can use modern JavaScript with templating, but it builds a light-weight plain JavaScript app at compile-time so that there is no heavy framework doing the templating at run-time and it leaves away all functions that your simple single page dialog does not actually use. Seems ideal for simple HtmlDialogs!

1 Like

I’ll have look at that on as my pet peeve is we only need to consider embedded chromium and all the libraries are bloated…

Have you ever looked at slim

john

Sorry for being late to the party.

I’ve had some code that addressed event binding, communication between the dialog & SU, and allowed common CSS to be used. It did not deal with assembling the hmtl, but did allow for a limited set of operations on the DOM.

So, is html assembly what people want, or is it more about event binding & communication?

I know this thread is old, but for anyone else getting into HTMLDialog, Alpine.js is a good option for a no-build UI. Very easy templating directives inspired by Vue, if you don’t need reusable components it’s a great way to add some reactivity to your HTML markup.

I have found myself wanting components for my projects, so I went with Solid-js. It’s similar to svelte in that it is also compiled and requires a build step, resulting in a tiny bundle and very fast execution. But it handles data very differently, enforcing a one-way data flow down a component hierarchy rather than two-way binding. It’s much more explicit about everything, which in larger projects can help avoid mysterious bugs.

2 Likes

For reference; Trimble has a UI design system “Modus”: https://modus.trimble.com/

https://sketchup.github.io/modus-for-sketchup-extensions/

1 Like