Transformers.js 4.3: browser structured output tutorial

Learn to constrain browser model output with JSON Schema or regex in Transformers.js 4.3, using a logits processor and a recipe generator example.

Player not loading? Watch on YouTube

Transformers.js 4.3 adds structured output through the separate @huggingface/transformers-structured-output package. The tutorial explains how browser-based local AI applications can request a defined response format instead of parsing markdown and hoping the model uses the expected property names.

The speaker starts with personal-detail extraction, then adds a processor configured with the tokenizer and a JSON Schema. It hooks into the existing logits processor interface to exclude tokens that violate the constraints. In the example, the response becomes plain JSON with the required full name property. A regex example imposes a different text format, while a recipe generator parses structured JSON to fill an application layout.

The implementation discussion covers an initial WASM wrapper around the Rust llguidance library. The speaker reports that this prototype was slow and required a 1 MB download. A JavaScript implementation removed that WASM dependency. Tests with Gemma 4, Granite and LFM 2.5 reportedly showed minimal decoding overhead, though some cases were slightly slower. These are the speaker's test results, rather than a guarantee for every model or tokenizer.

The release also includes a rebuilt documentation pipeline and community fixes. The repository documents supported JSON Schema and regex constraints.