Skip to content
Better Dialog Better Dialog

Better Dialog

It’s a better way to build modal UIs — with the native <dialog> element.

Better Dialog is a lightweight JavaScript library that enhances the native <dialog> element, offering a clean and flexible API for building accessible, animated modal UIs.

Rather than reinventing the wheel, Better Dialog embraces what browsers already provide natively — and makes it better. You get the benefits of real HTML semantics, accessibility, keyboard support, and optional animations or plugins that stay out of your way unless you want them.

Whether you’re building a design system, a product UI, or just a simple modal, Better Dialog gives you a solid foundation without bloated dependencies.

Try It!

Here’s a live example you can interact with right now:

Hello, I'm Better Dialog :)

I’m lightweight, accessible, and natively fluent in <dialog>. You could say I like to keep things simple — no flashy frameworks, just clean markup and smooth behavior.

Whether you're building a sleek product UI or just need a friendly little popup, I’m here to help. I come with animations, plugin hooks, and just enough customization to feel like your own.

Try resizing me, navigating with the keyboard, or even closing me with the Escape key. I promise I won’t take it personally.

Scroll a little further if you like — I’m not just a pretty face. Under the hood, I embrace native HTML semantics and keep dependencies to a minimum.

Thanks for checking me out. When you’re ready, hit that “Close” button — I’ll be right here when you need me again.

Key Features

  • ⚡ Lightweight & dependency-free
  • 🎬 Plugin-based animation & behavior
  • 🧩 Extendable with custom logic
  • 🌐 Native-first, modern browser support
  • 🎨 No styles included — bring your own design

What Better Dialog Adds

Better Dialog builds on top of the native <dialog> element to provide:

  • Easy closing by clicking outside the dialog (backdrop)
  • Optional animation hooks with lifecycle awareness
  • A plugin system for reusable logic (e.g. scroll lock)
  • Built-in trigger binding via data-better-dialog-show