Overview

Show Animated Numbers

- Real-time KPIs

- Financial dashboards

- Performance indicators

- IoT metrics

- Percentage completion displays

- Animated counters and scoreboards

Documentation

React Numberflow – Animated Number Display

Bring your Mendix dashboards to life with React Numberflow, a sleek and modern widget for animating numeric values. Perfect for KPIs, dashboards, reports, and any scenario where numbers matter, Numberflow transforms static values into smooth, dynamic animations—all fully customizable.

Key Features

Animated Number Transitions

Display changing numeric values with elegant animations. Great for metrics that update frequently or need visual emphasis.

Prefix & Suffix Support

Add context to your numbers with optional prefixes (e.g., "$", "±") and suffixes (e.g., "kg", "%", "/mo").

Multiple Number Formatting Styles

Choose exactly how your value should be formatted: decimal, currency, percent, or unit-based values (e.g., meters, liters, kilograms).

Full control over:

• • Minimum fraction digits
  • Maximum fraction digits
  • Currency symbol (when applicable)
  • Custom unit labels

Design Mode Preview

Easily visualize how the widget will look in Studio Pro using the Static Value property—no need to run the app during design.

Entity-Aware & Offline-Capable

Reads numeric attributes directly from your domain model and works in offline-first applications.

Configuration Options

General

• • Value Attribute (Integer/Decimal) – The source value to animate.
  • Prefix – Optional prefix expression.
  • Suffix – Optional suffix expression.

Number Formatting

• • Format Style – Decimal, Currency, Percent, Unit.
  • Currency – Custom currency code or symbol.
  • Unit Type – Add units like kg, L, m.
  • Fraction Digits – Define min/max decimal digits.

Design Mode

• • Static Value – Preview the display during design time.

Use Cases

• • Real-time KPIs
  • Financial dashboards
  • Performance indicators
  • IoT metrics
  • Percentage completion displays
  • Animated counters and scoreboards

Technical Details

• • Built using React and Numberflow animation logic
  • Fully supported on Web
  • Compatible with both online and offline apps
  • Mendix Studio Pro: All versions supporting pluggable widgets