Skip to main content
LucentUI Editor is the control center for version 3.0. It is a Paymenter extension, not a core patch, and appears under Extensions → LucentUI Editor after installation and enablement.

Editor layout

The Editor combines a configuration form with a responsive storefront preview. Its main tabs are:

Draft preview behavior

Most visual changes update the private preview before they are saved. The preview can switch between desktop, tablet, and mobile widths and between homepage and dashboard.
Preview drafts are cached for two hours and tied to the authenticated administrator who created them. A preview URL without the matching signed-in owner renders live settings instead of exposing the draft.
Changes to colors and typography can update as CSS variables. Structural changes such as block order or variants refresh the preview frame. The preview does not make settings public until you select Save Changes.

Save, export, import, and reset

Validates the current form, stores settings using the lucentui_ prefix, clears relevant caches, and refreshes the preview. Use Ctrl+S or Cmd+S as a shortcut.
Downloads a timestamped JSON file containing the current lucentui_* database settings. Export before upgrades and before large layout changes.
Accepts JSON produced by Export and immediately replaces matching LucentUI settings. Review the source and make a fresh export before importing third-party configuration.
Deletes every saved LucentUI setting and returns the theme to defaults. The action is irreversible and requires typing DELETE ALL SETTINGS exactly.
A color preset or dashboard layout preset only changes the form until Save Changes is selected. Import and Reset are different: they write immediately after confirmation.
1

Export a baseline

Save the initial defaults once, then export them. Keep this JSON as a known-good design.
2

Choose appearance and palette

Select Lucent or Flat mode, apply a color strip preset, and verify light and dark preview.
3

Build the homepage and dashboard

Apply a starting preset, reorder blocks, and disable anything your business does not use.
4

Configure languages and operational links

Fill English first, add translations, then verify support, legal, control-panel, and social URLs.
5

Test as a customer

Check guest, authenticated, mobile, and both color-mode paths outside the preview.

Appearance modes

Understand Lucent glass, Flat UI, surface hierarchy, and user color preference.

Settings reference

Find every Editor tab and the most important stored setting keys.
Last modified on September 9, 2026