Skip to Content
Program GuideSettings

Settings

This guide covers DM Note’s various settings options.

General Settings

Language

Select the program interface language:

  • Korean
  • English

Background Color

Set the background color of the overlay window. Default is transparent.

Using window capture in OBS maintains transparent background. No chroma key needed.

Window Settings

Always on Top

Keeps the overlay window always above other windows. Useful when placing the key viewer over game screens.

Lock Overlay Window

When enabled, the overlay window ignores mouse events (click-through) allowing you to click on windows underneath.

When locked, you cannot directly interact with the overlay.

Detaching the Properties Panel

Use the detach button at the top of the properties panel to move it into a separate window at any time. Key, note, and counter editing as well as layer management work the same in the detached window.

  • Use the X button on the detached window or the reattach button at the top of the panel to return it inline.
  • While detached, picking a gradient color anchor on the canvas is limited.

Graphics Settings

Rendering Option

Select the graphics rendering method:

  • Auto: Automatically selects the best option for your system
  • Direct3D 11: Recommended for most modern systems
  • Direct3D 9: For older system compatibility
  • OpenGL: Alternative if DirectX has issues

If you experience graphics issues, try changing the rendering option.

Resize Anchor

Select the reference point when resizing the overlay window:

  • top-left: Fixed top-left, expand bottom-right
  • top-right: Fixed top-right, expand bottom-left
  • bottom-left: Fixed bottom-left, expand top-right
  • bottom-right: Fixed bottom-right, expand top-left
  • center: Fixed center, expand all directions

Custom CSS/JS

Custom CSS

Load a custom CSS file to customize key and counter styles.

  1. Click the Manage CSS button to open the custom CSS panel.
  2. Turn on the Enable toggle at the top of the panel.
  3. Click Import CSS File and select your CSS file (.css, up to 1 MiB).
  4. Styles are applied immediately.

The list in the panel keeps up to 10 previously imported CSS files.

  • Click the Apply button on an entry to switch to that file instantly, without a file dialog.
  • Right-click an entry and choose Remove from list (the file itself is not deleted).
  • Entries that can no longer be applied show a badge: Missing (moved or deleted), Unusable (not a regular .css file anymore), or Too large (over 1 MiB).

For detailed CSS styling information, see the Custom CSS Guide.

JS Plugins

Load JavaScript plugins to extend program functionality.

  1. Click the Manage Plugins button to open the panel.
  2. Turn on the Enable toggle at the top of the panel.
  3. Click Add Plugins to select a file.

For detailed plugin development information, see Getting Started.

Reset Data

This resets keys and placements, saved plugin display-element placements, counters, custom tabs, layer groups, per-tab note and CSS overrides, and note, background, and custom CSS visual options.

Installed plugins and their non-layout storage, language, shortcuts, and update or startup options are not removed.

Elements placed by the user through defineElement are removed from storage and the grid. An element that plugin startup code creates directly with the low-level displayElement.add() API is not a saved placement. Because the plugin remains installed, it can remain or be created again immediately or after an app restart.

  1. Click the Reset Data button.
  2. Select Confirm in the confirmation message.

Resetting data cannot be undone. Save important settings as presets beforehand.

PresetsTips & Notes