diff --git a/browser/components/migration/content/migration-wizard.mjs b/browser/components/migration/content/migration-wizard.mjs
index 4e5837d4b909..2d1eb86b9944 100644
--- a/browser/components/migration/content/migration-wizard.mjs
+++ b/browser/components/migration/content/migration-wizard.mjs
@@ -166,6 +166,19 @@ export class MigrationWizard extends HTMLElement {
     );
   }
 
+  /**
+   * This setter can be used in the event that the MigrationWizard is being
+   * inserted via Lit, and the caller wants to set state declaratively using
+   * a property expression.
+   *
+   * @param {object} state
+   *   The state object to pass to setState.
+   * @see MigrationWizard.setState.
+   */
+  set state(state) {
+    this.setState(state);
+  }
+
   /**
    * This is the main entrypoint for updating the state and appearance of
    * the wizard.
diff --git a/browser/components/storybook/stories/migration-wizard.stories.mjs b/browser/components/storybook/stories/migration-wizard.stories.mjs
index d0c3184fa4f1..eff3aeb1f0cc 100644
--- a/browser/components/storybook/stories/migration-wizard.stories.mjs
+++ b/browser/components/storybook/stories/migration-wizard.stories.mjs
@@ -3,6 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 // Imported for side-effects.
+import { html } from "lit.all.mjs";
 // eslint-disable-next-line import/no-unassigned-import
 import "browser/components/migration/content/migration-wizard.mjs";
 import { MigrationWizardConstants } from "chrome://browser/content/migration/migration-wizard-constants.mjs";
@@ -72,29 +73,21 @@ const FAKE_BROWSER_LIST = [
   },
 ];
 
-const Template = ({ state, dialogMode }) => {
-  let wiz = document.createElement("migration-wizard");
-  wiz.toggleAttribute("dialog-mode", dialogMode);
-  wiz.setState(state);
-
-  let card = document.createElement("div");
-  card.classList.add("card", "card-no-hover");
-  card.style.width = "fit-content";
-  card.append(wiz);
-
-  let style = document.createElement("style");
-  style.textContent = `
+const Template = ({ state, dialogMode }) => html`
+  <style>
     @media (prefers-reduced-motion: no-preference) {
       migration-wizard::part(progress-spinner) {
         mask: url(./migration/progress-mask.svg);
       }
     }
-  `;
+  </style>
 
-  card.prepend(style);
-
-  return card;
-};
+  <div class="card card-no-hover" style="width: fit-content">
+    <migration-wizard ?dialog-mode=${dialogMode} .state=${state}>
+      <!-- <panel-list></panel-list> -->
+    </migration-wizard>
+  </div>
+`;
 
 export const MainSelectorVariant1 = Template.bind({});
 MainSelectorVariant1.args = {