Text message management

Usage no npm install needed!

<script type="module">
  import uttalat from 'https://cdn.skypack.dev/uttalat';



Utility to manage text messages in an application


A text bundle is a regular js object. It can have nested properties.

const bundle = {
    headline: 'Hello World!',
    error: {
        greetingUnknown: 'No greeting found',
        remoteError: 'Could not load hello world'

Add bundles to uttalat.

import uttalat from 'uttalat';

const m = uttalat();


The text messages can be retrieved using dot notation.

import uttalat from 'uttalat';

const m = uttalat();

function HelloWorld({errorMessage}) {
    return (

            {errorMessage ?
                <div>{m(`error.${errorMessage}`, 'error.remoteError')}</div>
                : null

Replace variables in message

A variable can be substituted in a text message by prefixing a colon :.

const bundle = {
    greet: ':greeting World!'


const message = m('greet', {greeting: 'Hello'}); // "Hello World!"


uttalat(key, fallbackKey1, ..., fallbackKeyN, args)

get text message

  • key [string]: key to look for.
  • fallbackKey{1..n} [string]: if key before is not found, check the next.
  • args [object]: replace variables in text message with values in args.
  • returns: [string] the text message found or key if not found.

uttalat.addBundle(bundle, override)

adds a new bundle with text messages

  • bundle [object]: any object with text messages
  • override: optionally specify if the added bundle should override previous bundles

uttalat.getHtmlMessage(key, fallbackKey1, ..., fallbackKeyN, args)

get text message for use in react dangerouslySetInnerHTML

Returns the text message wrapped in {__html: '...'};