Settings

oziConf() is optional — without it, ozi-ui works with default values (default theme, en language, all plugins loaded).

Call oziConf() right after including ozi.js:

<script src="/plugins/ozi-ui/ozi.js"></script>
<script>
    oziConf({ ... });
</script>

Minimal configuration

Most projects only need to set the theme and language:

oziConf({
    theme: 'bootstrap5',
    lang:  'en'
});

Themes

oziConf({ theme: 'bootstrap5' });

The theme defines the classMap — the CSS classes applied by ozi-ui for validation states, buttons and visual feedback. See the classMap section to customize.

Languages

oziConf({
    lang:         'en',
    fallbackLang: 'en'  // used when a key doesn't exist in the main language
});

Plugins — load only what you need

By default ozi-ui loads all plugins. To load only the necessary ones:

oziConf({
    plugins: ['loaddata', 'select', 'toggle']
});

Dependencies are resolved automatically — no need to declare internal modules.

Available plugins

Full configuration

oziConf({

    // ── Theme and visual mode ───────────────────
    theme:     'bootstrap5',  // 'default' | 'bootstrap5' | 'tailwind'
    themeMode: 'auto',        // 'light' | 'dark' | 'auto'

    // ── Language ────────────────────────────────
    lang:         'en',
    fallbackLang: 'en',

    // ── Plugins to load ─────────────────────────
    plugins: 'all',  // 'all' or array: ['loaddata', 'select', ...]

    // ── Core ────────────────────────────────────
    core: {
        urlBase:  './plugins/ozi-ui/',  // base path of the files
        log:      false,                // debug logs in the console
        failFast: false                 // stops boot on first error
    },

    // ── Per-plugin configuration ─────────────────
    pluginConf: {

        loaddata: {
            progressBarGlobalClass: 'ozi-progress',
            interactiveValidation:  true   // validates fields on blur
        },

        select: {
            imageDimension: '24px',   // default size of images in options
            autoObserve:    false     // detects new elements via MutationObserver
        },

        autocomplete: {
            autoObserve: false
        },

        editor: {
            uicolor: 'var(--ozi-color-primary)'  // color of active buttons and focus border
        },

        audio: {
            autoObserve: false
        },

        auth: {
            passMin:      12,  // minimum password characters
            passMax:      64,  // maximum password characters
            userCaracter:  4   // minimum characters in the username field
        }
    },

    // ── classMap — overrides the theme preset ───
    classMap: {
        invalid:       'is-invalid',
        valid:         'is-valid',
        formValidated: 'was-validated',
        feedback:      'invalid-feedback',
        button:        'btn btn-primary',
        disabled:      'disabled'
    }

});

Reference

core

pluginConf

loaddata

select

autocomplete

editor

audio

auth

classMap

Mapping of semantic tokens to UI framework CSS classes. Automatically populated by the theme preset — override only what is necessary.

Bootstrap 5 (bootstrap5 theme default)

Tailwind (tailwind theme)

Partial override

To adjust only one token without changing the theme:

oziConf({
    theme: 'bootstrap5',
    classMap: {
        button: 'btn btn-danger'  // only this changes — the rest comes from the preset
    }
});