Smart UI Components & Libraries – Grid, Scheduler, Gantt, Kanban for Angular, React, Next.js, Vue, Blazor, JavaScript › Forums › Editor & Inputs › What’s the best way to handle Editor state persistence in JS?

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • September 12, 2025 at 7:55 am #112961
    linda05
    Participant

    How to theme Smart Editor using custom CSS in a web app project?

    September 15, 2025 at 7:59 am #112963
    Markov
    Keymaster

    Hi,

    Use can use local storage for the state. It keeps the editor state on page refresh or temporary browser session.

    
const editor = document.getElementById("editor");

// Save state
editor.addEventListener("input", () => {
  localStorage.setItem("editorState", editor.innerHTML);
});

// Restore state
window.addEventListener("load", () => {
  const saved = localStorage.getItem("editorState");
  if (saved) editor.innerHTML = saved;
});

    As for your theming related question.

    /* Apply a global theme for Smart Editor */
smart-editor {
  --smart-background: #1e1e2f;     /* Editor background */
  --smart-surface: #2c2c3c;        /* Toolbar background */
  --smart-border: #444;            /* Borders */
  --smart-primary: #4cafef;        /* Primary accent (buttons, highlights) */
  --smart-ui-state-hover: #555;    /* Hover state */
  --smart-ui-state-active: #4cafef;
  --smart-editor-text-color: #fff; /* Text inside editor */
}

    Best regards,
    Markov

    Smart UI Team
    https://www.htmlelements.com/

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.