diff --git a/packages/docs/fluent-editor/demos/header-list-container.vue b/packages/docs/fluent-editor/demos/header-list-container.vue
index 7483d8c3..3b9cf8a9 100644
--- a/packages/docs/fluent-editor/demos/header-list-container.vue
+++ b/packages/docs/fluent-editor/demos/header-list-container.vue
@@ -8,8 +8,10 @@ const editorRef = ref<HTMLElement>()
 const headerListRef = ref<HTMLElement>()
 
 onMounted(async () => {
-  // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
-  const [{ default: FluentEditor, DEFAULT_TOOLBAR }, { default: HeaderList }] = await Promise.all([
+  const [
+    { default: FluentEditor, DEFAULT_TOOLBAR },
+    { default: HeaderList, HeaderWithID },
+  ] = await Promise.all([
     import('@opentiny/fluent-editor'),
     import('quill-header-list'),
   ])
@@ -17,6 +19,8 @@ onMounted(async () => {
   if (!editorRef.value) return
   FluentEditor.register({ 'modules/header-list': HeaderList }, true)
 
+  HeaderWithID.idKey = 'id'
+
   editor = new FluentEditor(editorRef.value, {
     theme: 'snow',
     modules: {
@@ -26,6 +30,9 @@ onMounted(async () => {
           [{ header: [null, 1, 2, 3, 4, 5, 6] }, 'header-list'],
         ],
         handlers: {
+          header(value: string | false) {
+            this.quill.format('header', value === false ? false : Number(value))
+          },
           'header-list': HeaderList.toolbarHandle,
         },
       },
diff --git a/packages/docs/fluent-editor/demos/header-list.vue b/packages/docs/fluent-editor/demos/header-list.vue
index b52082ea..1ae5a932 100644
--- a/packages/docs/fluent-editor/demos/header-list.vue
+++ b/packages/docs/fluent-editor/demos/header-list.vue
@@ -9,7 +9,10 @@ const headerListRef = ref<HTMLElement>()
 
 onMounted(async () => {
   // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
-  const [{ default: FluentEditor, DEFAULT_TOOLBAR }, { default: HeaderList }] = await Promise.all([
+  const [
+    { default: FluentEditor, DEFAULT_TOOLBAR },
+    { default: HeaderList, HeaderWithID },
+  ] = await Promise.all([
     import('@opentiny/fluent-editor'),
     import('quill-header-list'),
   ])
@@ -17,6 +20,8 @@ onMounted(async () => {
   if (!editorRef.value) return
   FluentEditor.register({ 'modules/header-list': HeaderList }, true)
 
+  HeaderWithID.idKey = 'id'
+
   editor = new FluentEditor(editorRef.value, {
     theme: 'snow',
     modules: {
@@ -26,6 +31,9 @@ onMounted(async () => {
           [{ header: [false, 1, 2, 3, 4, 5, 6] }, 'header-list'],
         ],
         handlers: {
+          header(value: string | false) {
+            this.quill.format('header', value === false ? false : Number(value))
+          },
           'header-list': HeaderList.toolbarHandle,
         },
       },