Render Modes

Grunfeld supports two rendering modes: inline and top-layer. Each mode has different advantages and disadvantages.

Inline Mode (Default)#

Traditional z-index based rendering:

• Supports all modern browsers (IE11+)
• Full style customization
• Predictable behavior
• JavaScript-based ESC key handling

This mode is the most stable and provides wide browser support. It's recommended to use this mode in most cases.

grunfeld.add(() => ({
  element: <MyDialog />,
  renderMode: "inline", // default
}));

Top-layer Mode#

Native approach using HTML5 <dialog> element:

• No z-index conflicts
• Browser native ESC key handling
• Better accessibility
• Modern browsers only (Chrome 37+, Firefox 98+, Safari 15.4+)

The <dialog> element is automatically rendered in the top layer, so it's not affected by other elements' z-index.

grunfeld.add(() => ({
  element: <MyDialog />,
  renderMode: "top-layer",
}));

Browser Compatibility#

Browser support for each mode:

Inline mode:
- Chrome: All versions
- Firefox: All versions
- Safari: All versions
- Edge: All versions
- IE: 11+

Top-layer mode:
- Chrome: 37+
- Firefox: 98+
- Safari: 15.4+
- Edge: 79+

Choose the appropriate mode based on your project's target browsers.

Mode Switching#

You can use different rendering modes for individual dialogs:

// Use top-layer only for some dialogs
grunfeld.add(() => ({
  element: <CriticalModal />,
  renderMode: "top-layer",
}));

grunfeld.add(() => ({
  element: <RegularModal />,
  renderMode: "inline",
}));

Generally, it's recommended to consistently use one mode throughout the project.