Fnon.js v2.0.4 Interactive Playground — all APIs, live sandbox, Init reference 🌙 →

1. Hint Fnon.Hint.Theme(msg, titleOrOpts?)

Toast-style notifications. Auto-dismisses after 4 seconds. 7 themes, 9 positions, customizable width/font/progress bar.

Async: Fnon.Hint.Theme.Async(message, title?) returns a Promise<void> that resolves when the hint closes (auto or manual). Useful for sequencing notifications.

2. Wait Fnon.Wait.Type(text?, opts?)

Full-page spinner overlay. 5 spinner types (Orbit, Spin / Infinity, Ripple, Typing). Supports clickToClose, text label, custom color, and Remove/Change controls.

Async: Fnon.Wait.Type.Async(text?, opts?) returns Promise<boolean> (resolves true when Remove() is called or the spinner is dismissed).

3. Box Fnon.Box.Type(selector, text?, opts?)

Container-bound spinner overlay. Same 5 spinner types as Wait, but rendered inside a specific DOM element instead of full-screen.

Async: Fnon.Box.Type.Async(selector, text?, opts?) returns Promise<boolean> (resolves true when Box.Remove(selector) is called).

4. Alert Fnon.Alert.Theme(msg, title?, btnOkText?, callback?)

A one-button modal for simple messages. Supports both positional args and a single options object.

Async: Fnon.Alert.Theme.Async(message, title?, btnOkText?) returns Promise<void> that resolves when OK is clicked or the modal is closed.

5. Ask Fnon.Ask.Theme(msg, title?, okText?, cancelText?, callback?)

A two-button confirm modal (OK / Cancel). The callback receives true or false. Supports object args and async.

Async: Fnon.Ask.Theme.Async(message, title?, okText?, cancelText?) returns Promise<boolean> — true on OK, false on Cancel or close.

6. Dialogue Fnon.Dialogue(opts) · Fnon.Dialogue.Theme(...)

The most flexible modal. Custom buttons, full lifecycle hooks, minimize/maximize, drag, and raw options control.

Async: Fnon.Dialogue.Theme.Async(message, title?, okText?, cancelText?) returns Promise<boolean | null> — true on OK, false on Cancel, null on close/X.

7. Breaking Fnon.Breaking(opts) · Fnon.Breaking.Theme(headline?)

Full-width notification bar anchored to top or bottom. Auto-dismisses after 5 seconds. Supports custom buttons and headlines.

Async: Fnon.Breaking.Theme.Async(message?, headline?) returns Promise<void> that resolves when the bar is closed (auto-dismiss or manual).

8. DatePicker Fnon.DatePicker(opts) · Fnon.DP(opts)

A modal date picker with month/year selector, range mode, optional time picker, and min/max constraints. Returns a Promise.

{
  initDate: Date          // Initial month to show (default: today)
  dateRange: boolean       // Enable range mode (default: false)
  withTime: boolean        // Show time picker after date selection (default: false)
  minDate: Date           // Earliest selectable date
  maxDate: Date           // Latest selectable date
  title: string           // Modal title
  isDark: boolean|()=>boolean  // Enable dark mode for this instance
}
      

Async: Always async — returns Promise<Date | { start: Date; end: Date }>. Rejects when the modal is closed without selecting. Also available as Fnon.DP(opts).

9. ContextMenu Fnon.ContextMenu(event, items[], globalOnClick?)

Right-click or programmatic context menu with nested submenus, keyboard navigation, viewport-aware positioning, and dark mode support.

Keyboard: Arrow keys to navigate, Enter/Space to select, Escape to close, ArrowRight to open submenu, ArrowLeft to close submenu. Alias: Fnon.CM(event, items, globalOnClick?)

10. AddTheme Fnon.AddTheme(name, config)

Register a custom theme that applies to all modal types and hints.

11. AddLogo Fnon.AddLogo(name, html)

Register a custom SVG spinner by name. Creates both Wait.name() and Box.name() variants.