Progressive adoption

Start small and use individual elements from the library. Use glu as a web framework when you need more power. Glu is only here to help, not to take over.

Designed for openness

Inversion of Control means Glu is designed for you to add and modify behaviour. Retain complete control of styling. Glu never forgets who the application belongs to.

Third Generation

Based on real world experience since 2006, focused on developer convenience and productivity over the long term, so you can get started quickly but the more Glu you use the more productive you can be.

Pure Standards

Pure JavaScript+CSS+HTML, only W3C standards. No Node.js, no TypeScript, nothing you didn't ask for, no useless complexity.

<glu-float-input required="Please enter your name" label="Full name:"></glu-float-input> <glu-toggle label="Express delivery"></glu-toggle> <glu-select label="Country:" layout="grid">  <option value="AU">Australia</option> ... </glu-select> <glu-form-input layout="grid" label="Address:" placeholder="Postal address"></glu-float-input>

Use individual elements from the library

Glu provides library of standalone elements that you can drop into your page for a consistent, professional appearance without any coding at all.

The glu-float-input demonstrates a required field. Leave the field empty to see the error message and styling. Enter a name to see the validated style with a green tick.

The glu-toggle provides a nicely-styled alternative to a checkbox, with an integrated label. Packed with features, each element is flexible and operates in the expected way. They are just better versions of the basic HTML elements.

The elements are consistently styled and designed to operate together, so you can assemble a beautiful form quickly. There is no Shadow DOM involved, so styling remains completely under your control.

Explore the element library
<glu-float-input label="Phone number:" parser="digits" validator="phone810" format="phone810" required="Please enter your phone number"></glu-float-input> <glu-float-input label="Discount:" parser="percent" validator="nonNegative" format="percent2pa"></glu-float-input> <glu-float-input label="Due date:" parser="dmy" validator="future" format="dmmmyyyy"></glu-float-input> <glu-float-input label="Amount:" parser="positiveDecimal2" format="dollar2"></glu-float-input>

Smarter input with parsing, formatting, and validation

Glu makes it easy to manage text input. A range of pre-built parsers filter out invalid characters from your data. If you only want digits, that is all that can be entered. Try it. Enter some other characters along with some digits in the phone field - all the rubbish is discarded.

Data that has been cleaned by a parser is then ready for a validator. Select from a variety of pre-built validators for common needs. Note how the phone number field accepts either an 8-digit phone number, or 10 digits if the first digit is a zero. The phone810 validator is defined in glu.validator.phone810. When you add a function to glu.validator, it is immediately available to be used in the same way.

Valid data is ready to be formatted in a way that is convenient to the user. That includes common formats for phone numbers, dates, amounts, and percentages.

The percent parser accepts input in whatever way is convenient for the user: both ".04" and "4%". The due date field accepts only future dates after today, and expects day-month-year format (parser="dmy") but try various forms of input: '25/9/25', '25.sep/25', '25 September 2025', or the word 'today'.

Explore the JavaScript library
<json-datasource url="/a/forex.json" name="currencies"></json-datasource> <glu-list ds="currencies" generator="forexrates"></glu-list>

Professional data binding and generation

Glu is not just a library of elements. It is an enterprise-strength web application framework that offers a powerful data binding approach to make development easy.

A datasource is a JavaScript object that holds records provided by the server at the url shown. It is named 'currencies' so it accessible globally as app.ds.currencies.

The glu-list is a standard widget which gets its data from the datasource named "currencies" and formats the fields of each record into an item of the list. That format is generated by a small custom JavaScript function named glu.generator.forexrates. Any similar function added to glu.generator is instantly available for use in this way. And as always, you control the style of the generated content.

This demonstrates read-only data binding, but Glu also makes it easy to load data to populate a form, edit the data, and save it back to the server.

More examples

Controller design pattern

The Controller design pattern helps to manage dynamic interactions between elements, such as cross-field validation in a form, or an online calculator. When an item is not for sale unless the customer is an adult, or the discount is only applied if the user is a member, there is a need for a controller to react to changes in certain elements by making changes to other elements: setting values, enabling or disabling, hiding and showing, applying any other logic that is needed.

The combination of datasource and controller is incredibly versatile - note how the format for the converted amount is correct for Korean Won. The source code is in currency-converter.js

A controller is a mini-application, managing the elements inside one segment of a page.

More examples

Complete application framework

Glu is a powerful framework for building large web applications for millions of users.

Getting Started