glendix — Gleam bindings for React + Mendix Pluggable Widgets

[gentle kettle]

Building Mendix Pluggable Widgets with Gleam

Mendix is an enterprise low-code platform, and Pluggable Widgets are custom React components you drop into it. Normally TypeScript + JSX, but I wanted to try pure Gleam

So I made glendix, a Hex package with FFI bindings for React 19 + the Mendix runtime API.

What's in it:

• 115 HTML tags, 61 SVG elements, 117 HTML attributes, 98 SVG attributes
• 249 event handlers/accessors, 16 event types (capture phase included)
• All 42 React 19 hooks — useActionState, useFormStatus, useOptimistic, use, etc.
• 14 Mendix type modules — EditableValue, ActionValue, ListValue (paging/sort/filter), Big.js, Date, and more
• External component bindings — write a bindings.json, FFI is auto-generated. .mpk widgets supported too
• CLI tools via gleam run -m glendix/<cmd> — install, dev, build, start, release, lint

Here's what a widget looks like:

import glendix/mendix
import glendix/react.{type JsProps, type ReactElement}
import glendix/react/attribute
import glendix/react/event
import glendix/react/hook
import glendix/react/html

pub fn widget(props: JsProps) -> ReactElement {
  let name = mendix.get_string_prop(props, "sampleText")
  let #(count, set_count) = hook.use_state(0)

  html.div([attribute.class("my-widget")], [
    html.h2_([react.text("Hello " <> name)]),
    html.button([event.on_click(fn(_) { set_count(count + 1) })], [
      react.text("Click me"),
    ]),
  ])
}

All JS types are opaque, undefined/null converts to Option at the FFI boundary. attribute.none() for conditional attrs, multiple attribute.class() calls auto-merge.

Scaffolding: npx create-mendix-widget-gleam MyWidget

Hex: https://hexdocs.pm/glendix/
GitHub: https://github.com/GG-O-BP/glendix
Example: https://github.com/GG-O-BP/MendixWidgetGleam

Feedback welcome, especially on API design!

[gentle kettle]

npx create-mendix-widget-gleam my-widget

[grand cairn]

on the react side of things did you see https://hexdocs.pm/redraw/index.html maybe?

[gentle kettle]

https://github.com/GG-O-BP/gleam-recharts-widget

[gentle kettle]

Yeah, I did look at redraw! It's a great library for building React apps in Gleam. The main reason I didn't use it is that Mendix widgets have a pretty different execution model — Mendix owns the React lifecycle, calls your component directly with its own props object, and uses a fixed Rollup build pipeline. redraw is designed to be the app owner (bootstrap, compose, Vite), so the two don't quite fit together. I ended up building a thin FFI layer instead that lets Mendix stay in control while keeping the Gleam side clean.

I also just updated glendix so it auto-generates the FFI for external React components internally so now users can just add their React dependencies, and build Mendix widgets in pure Gleam without having to set up any FFI themselves.

[gentle kettle]

I've identified some inefficient parts in how my project handles React, and since I think developers in the Gleam ecosystem are also familiar with redraw, I feel like I need to do a comprehensive overhaul.

[gentle kettle]

I've revised all the code related to React and Mendix bindings based on the redraw, and added a feature that allows .mpk files (build outputs from other Mendix widgets) placed in the widgets folder to be used as components in Gleam.

[grand cairn]

ah yeah that makes sense, thanks!