Feedback on UI Tool designed to make UI faster to make

I’ve created the basis of how my UI Tool designed to make UI faster to make in scripts. It’s (going to be) based off of Material Design 3 and Jetpack Compose.

I know the scripts are kind of messy, but I just want feedback on how this affects your workflow for designing/making UI and how you like the way it’s set up so I don’t get too invested in a system that’s terrible.

Example Script:

local Bolt = require(script.Parent.Bolt)

Bolt.setContent {
	Bolt.component.CenterAlignedTopAppBar({
		Title = "Home",
		navigationIcon = Bolt.component.Icon {
			image = Bolt.MaterialTheme.icons.navigation,
			onClick = function()
				print("Hello World!")
			end,
		},
		Actions = {
			Bolt.component.Icon(Bolt.MaterialTheme.icons.error_outline),
			--you shouldn't really do this, just an example
			Bolt.component.Icon(Bolt.MaterialTheme.icons.navigation)
		},
		Drag = "Parent"
	}),
	Bolt.component.Body {
		Bolt.newActivity {transitionEvent = Instance.new("BindableEvent").Event, transitionType = "slideForward"} {
			Bolt.layout.listLayout(true,5) {
				Bolt.instance.textLabel("Hello World!"),
				Bolt.instance.textLabel("Hello world!"),
				Bolt.instance.textLabel("Hello world!"),
				Bolt.instance.textLabel("Hello world!"),
				Bolt.instance.textLabel("Hello world"),
				Bolt.instance.textLabel("Hello world!"),
				Bolt.instance.textLabel("Hello world!"),
				Bolt.component.Icon(Bolt.MaterialTheme.icons.error_outline).object;
			}
		}
	}
}.Parent = script.Parent.Parent

What it generates:

Here’s the file with the module itself and an example script:
Bolt.rbxm (75.4 KB)

Could you provide some pictures please?

1 Like

Fairly nice, but the syntax is kind of hard to read.