Hello
So I've been working on this thing called glendix and thought I'd share it here. Basically, it lets you write Mendix Pluggable Widgets in Gleam, a type-safe functional language that compiles to JavaScript. No JSX, no TypeScript, just pure Gleam.
If you haven't heard of Gleam before, think of it as a friendly little language with a proper type system that catches your mistakes before anything even runs. It compiles to JS, so it works perfectly fine with React and the Mendix widget tooling.
Getting started is dead simple. Just run npx create-mendix-widget-gleam my-widget and you've got a ready-to-go project scaffolded for you.
Right, so what does a widget look like?
Here's the whole thing:
import glendix/mendix
import glendix/react.{type JsProps, type ReactElement}
import glendix/react/attribute
import glendix/react/html
pub fn widget(props: JsProps) -> ReactElement {
let name = mendix.get_string_prop(props, "sampleText")
html.div([attribute.class("my-widget")], [
react.text("Hello " <> name),
])
}
That's it. fn(JsProps) -> ReactElement, that's all a Mendix widget needs to be. The compiler sorts out the rest.
What's in the box?
Quite a lot, actually. 40 React Hooks (useState, useEffect, useLayoutEffect, useTransition, useOptimistic, the works), 154+ event handlers covering pretty much everything React offers, 85+ HTML tags, 58 SVG elements, all pure Gleam with no FFI needed, and full Mendix API coverage including EditableValue, ActionValue, ListValue, Selection, FilterCondition builder, the lot.
It also comes with built-in tooling so you don't need to mess about with extra config. gleam run -m glendix/dev gives you a dev server with HMR, gleam run -m glendix/build spits out an .mpk, gleam run -m glendix/marketplace lets you search and download widgets from the Mendix Marketplace right in your terminal, and gleam run -m glendix/define gives you an interactive TUI for setting up widget properties. It even figures out your package manager automatically (npm, pnpm, or bun).
Already using React libs or .mpk widgets? Sorted.
Got a favourite npm React component? Just list it in bindings.json, run gleam run -m glendix/install, and glendix generates the bindings for you. No hand-written .mjs files. Got .mpk widgets? Drop them in the widgets/ folder, run install, and you get typed Gleam wrappers with required/optional props already worked out. Classic Dojo widgets work too, via glendix/classic.
Why bother with Gleam though?
Fair question. Here's what sold me on it.
The compiler actually helps you. Forget to handle Loading or Unavailable on a ValueStatus? It won't compile. Typo in a prop name? It won't compile. It's like having a really strict but helpful colleague looking over your shoulder.
No more null/undefined headaches either. Everything goes through Option types at the FFI boundary, so you always know what might be missing. All data is immutable by default too, which pairs brilliantly with React's rendering model, so no accidental state mutations. And your business logic stays in type-safe .gleam files whilst the .mjs files are just thin wrappers for JS runtime access.
Links
GitHub: https://github.com/GG-O-BP/glendix
Quick start: npx create-mendix-widget-gleam my-widget
Version: 2.0.19
Licence: Blue Oak Model Licence 1.0.0
The README's got loads of examples: hooks, Mendix value handling, conditional rendering, external component bindings, marketplace downloads, and so on. Have a look if you're curious!
Big thanks to the redraw project (https://github.com/ghivert/redraw). Their React bindings for Gleam were a massive inspiration for v2.0.
Would love to hear what you think. Questions, feedback, ideas, all welcome. And if you give it a go, let me know how you get on!
Cheers!