Add Help Menu in NodeLibrarySidebarTab (#3922)

Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Claude <noreply@anthropic.com>
2026-01-26 10:59:53 +00:00 · 2025-06-01 09:24:31 -04:00
parent 35a811c5cf
commit 40cfc43c54
25 changed files with 1695 additions and 104 deletions
--- a/browser_tests/tests/nodeHelp.spec.ts
+++ b/browser_tests/tests/nodeHelp.spec.ts
@@ -0,0 +1,556 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../fixtures/ComfyPage'
+
+// TODO: there might be a better solution for this
+// Helper function to pan canvas and select node
+async function selectNodeWithPan(comfyPage: any, nodeRef: any) {
+  const nodePos = await nodeRef.getPosition()
+
+  await comfyPage.page.evaluate((pos) => {
+    const app = window['app']
+    const canvas = app.canvas
+    canvas.ds.offset[0] = -pos.x + canvas.canvas.width / 2
+    canvas.ds.offset[1] = -pos.y + canvas.canvas.height / 2 + 100
+    canvas.setDirty(true, true)
+  }, nodePos)
+
+  await comfyPage.nextFrame()
+  await nodeRef.click('title')
+}
+
+test.describe('Node Help', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setup()
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test.describe('Selection Toolbox', () => {
+    test('Should open help menu for selected node', async ({ comfyPage }) => {
+      // Load a workflow with a node
+      await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)
+      await comfyPage.loadWorkflow('default')
+
+      // Select a single node (KSampler) using node references
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      if (ksamplerNodes.length === 0) {
+        throw new Error('No KSampler nodes found in the workflow')
+      }
+
+      // Select the node with panning to ensure toolbox is visible
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      // Wait for selection overlay container and toolbox to appear
+      await expect(
+        comfyPage.page.locator('.selection-overlay-container')
+      ).toBeVisible()
+      await expect(comfyPage.page.locator('.selection-toolbox')).toBeVisible()
+
+      // Click the help button in the selection toolbox
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button:has(.pi-question-circle)'
+      )
+      await expect(helpButton).toBeVisible()
+      await helpButton.click()
+
+      // Verify that the node library sidebar is opened
+      await expect(
+        comfyPage.menu.nodeLibraryTab.selectedTabButton
+      ).toBeVisible()
+
+      // Verify that the help page is shown for the correct node
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      await expect(helpPage).toContainText('KSampler')
+      await expect(helpPage.locator('.node-help-content')).toBeVisible()
+    })
+  })
+
+  test.describe('Node Library Sidebar', () => {
+    test('Should open help menu from node library', async ({ comfyPage }) => {
+      // Open the node library sidebar
+      await comfyPage.menu.nodeLibraryTab.open()
+
+      // Wait for node library to load
+      await expect(comfyPage.menu.nodeLibraryTab.nodeLibraryTree).toBeVisible()
+
+      // Search for KSampler to make it easier to find
+      await comfyPage.menu.nodeLibraryTab.nodeLibrarySearchBoxInput.fill(
+        'KSampler'
+      )
+
+      // Find the KSampler node in search results
+      const ksamplerNode = comfyPage.page
+        .locator('.tree-explorer-node-label')
+        .filter({ hasText: 'KSampler' })
+        .first()
+      await expect(ksamplerNode).toBeVisible()
+
+      // Hover over the node to show action buttons
+      await ksamplerNode.hover()
+
+      // Click the help button
+      const helpButton = ksamplerNode.locator('button:has(.pi-question)')
+      await expect(helpButton).toBeVisible()
+      await helpButton.click()
+
+      // Verify that the help page is shown
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      await expect(helpPage).toContainText('KSampler')
+      await expect(helpPage.locator('.node-help-content')).toBeVisible()
+    })
+
+    test('Should show node library tab when clicking back from help page', async ({
+      comfyPage
+    }) => {
+      // Open the node library sidebar
+      await comfyPage.menu.nodeLibraryTab.open()
+
+      // Wait for node library to load
+      await expect(comfyPage.menu.nodeLibraryTab.nodeLibraryTree).toBeVisible()
+
+      // Search for KSampler
+      await comfyPage.menu.nodeLibraryTab.nodeLibrarySearchBoxInput.fill(
+        'KSampler'
+      )
+
+      // Find and interact with the node
+      const ksamplerNode = comfyPage.page
+        .locator('.tree-explorer-node-label')
+        .filter({ hasText: 'KSampler' })
+        .first()
+      await ksamplerNode.hover()
+      const helpButton = ksamplerNode.locator('button:has(.pi-question)')
+      await helpButton.click()
+
+      // Verify help page is shown
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      await expect(helpPage).toContainText('KSampler')
+
+      // Click the back button - use a more specific selector
+      const backButton = comfyPage.page.locator('button:has(.pi-arrow-left)')
+      await expect(backButton).toBeVisible()
+      await backButton.click()
+
+      // Verify that we're back to the node library view
+      await expect(comfyPage.menu.nodeLibraryTab.nodeLibraryTree).toBeVisible()
+      await expect(
+        comfyPage.menu.nodeLibraryTab.nodeLibrarySearchBoxInput
+      ).toBeVisible()
+
+      // Verify help page is no longer visible
+      await expect(helpPage.locator('.node-help-content')).not.toBeVisible()
+    })
+  })
+
+  test.describe('Help Content', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)
+    })
+
+    test('Should display loading state while fetching help', async ({
+      comfyPage
+    }) => {
+      // Mock slow network response
+      await comfyPage.page.route('**/docs/**/*.md', async (route) => {
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+        await route.fulfill({
+          status: 200,
+          body: '# Test Help Content\nThis is test help content.'
+        })
+      })
+
+      // Load workflow and select a node
+      await comfyPage.loadWorkflow('default')
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      // Click help button
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button:has(.pi-question-circle)'
+      )
+      await helpButton.click()
+
+      // Verify loading spinner is shown
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      await expect(helpPage.locator('.p-progressspinner')).toBeVisible()
+
+      // Wait for content to load
+      await expect(helpPage).toContainText('Test Help Content')
+    })
+
+    test('Should display fallback content when help file not found', async ({
+      comfyPage
+    }) => {
+      // Mock 404 response for help files
+      await comfyPage.page.route('**/docs/**/*.md', async (route) => {
+        await route.fulfill({
+          status: 404,
+          body: 'Not Found'
+        })
+      })
+
+      // Load workflow and select a node
+      await comfyPage.loadWorkflow('default')
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      // Click help button
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button:has(.pi-question-circle)'
+      )
+      await helpButton.click()
+
+      // Verify fallback content is shown (description, inputs, outputs)
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      await expect(helpPage).toContainText('Description')
+      await expect(helpPage).toContainText('Inputs')
+      await expect(helpPage).toContainText('Outputs')
+    })
+
+    test('Should render markdown with images correctly', async ({
+      comfyPage
+    }) => {
+      // Mock response with markdown containing images
+      await comfyPage.page.route('**/docs/KSampler/en.md', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: `# KSampler Documentation
+
+![Example Image](example.jpg)
+![External Image](https://example.com/image.png)
+
+## Parameters
+- **steps**: Number of steps
+`
+        })
+      })
+
+      await comfyPage.loadWorkflow('default')
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button:has(.pi-question-circle)'
+      )
+      await helpButton.click()
+
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      await expect(helpPage).toContainText('KSampler Documentation')
+
+      // Check that relative image paths are prefixed correctly
+      const relativeImage = helpPage.locator('img[alt="Example Image"]')
+      await expect(relativeImage).toBeVisible()
+      await expect(relativeImage).toHaveAttribute(
+        'src',
+        /.*\/docs\/KSampler\/example\.jpg/
+      )
+
+      // Check that absolute URLs are not modified
+      const externalImage = helpPage.locator('img[alt="External Image"]')
+      await expect(externalImage).toHaveAttribute(
+        'src',
+        'https://example.com/image.png'
+      )
+    })
+
+    test('Should render video elements with source tags in markdown', async ({
+      comfyPage
+    }) => {
+      // Mock response with video elements
+      await comfyPage.page.route('**/docs/KSampler/en.md', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: `# KSampler Demo
+
+<video src="demo.mp4" controls autoplay></video>
+<video src="/absolute/video.mp4" controls></video>
+
+<video controls>
+  <source src="video.mp4" type="video/mp4">
+  <source src="https://example.com/video.webm" type="video/webm">
+</video>
+`
+        })
+      })
+
+      await comfyPage.loadWorkflow('default')
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button:has(.pi-question-circle)'
+      )
+      await helpButton.click()
+
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+
+      // Check relative video paths are prefixed
+      const relativeVideo = helpPage.locator('video[src*="demo.mp4"]')
+      await expect(relativeVideo).toBeVisible()
+      await expect(relativeVideo).toHaveAttribute(
+        'src',
+        /.*\/docs\/KSampler\/demo\.mp4/
+      )
+      await expect(relativeVideo).toHaveAttribute('controls', '')
+      await expect(relativeVideo).toHaveAttribute('autoplay', '')
+
+      // Check absolute paths are not modified
+      const absoluteVideo = helpPage.locator('video[src="/absolute/video.mp4"]')
+      await expect(absoluteVideo).toHaveAttribute('src', '/absolute/video.mp4')
+
+      // Check video source elements
+      const relativeVideoSource = helpPage.locator('source[src*="video.mp4"]')
+      await expect(relativeVideoSource).toHaveAttribute(
+        'src',
+        /.*\/docs\/KSampler\/video\.mp4/
+      )
+
+      const externalVideoSource = helpPage.locator(
+        'source[src="https://example.com/video.webm"]'
+      )
+      await expect(externalVideoSource).toHaveAttribute(
+        'src',
+        'https://example.com/video.webm'
+      )
+    })
+
+    test('Should handle custom node documentation paths', async ({
+      comfyPage
+    }) => {
+      // First load workflow with custom node
+      await comfyPage.loadWorkflow('group_node_v1.3.3')
+
+      // Mock custom node documentation with fallback
+      await comfyPage.page.route(
+        '**/extensions/*/docs/*/en.md',
+        async (route) => {
+          await route.fulfill({ status: 404 })
+        }
+      )
+
+      await comfyPage.page.route('**/extensions/*/docs/*.md', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: `# Custom Node Documentation
+
+This is documentation for a custom node.
+
+![Custom Image](assets/custom.png)
+`
+        })
+      })
+
+      // Find and select a custom/group node
+      const nodeRefs = await comfyPage.page.evaluate(() => {
+        return window['app'].graph.nodes.map((n: any) => n.id)
+      })
+      if (nodeRefs.length > 0) {
+        const firstNode = await comfyPage.getNodeRefById(nodeRefs[0])
+        await selectNodeWithPan(comfyPage, firstNode)
+      }
+
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button:has(.pi-question-circle)'
+      )
+      if (await helpButton.isVisible()) {
+        await helpButton.click()
+
+        const helpPage = comfyPage.page.locator('.sidebar-content-container')
+        await expect(helpPage).toContainText('Custom Node Documentation')
+
+        // Check image path for custom nodes
+        const image = helpPage.locator('img[alt="Custom Image"]')
+        await expect(image).toHaveAttribute(
+          'src',
+          /.*\/extensions\/.*\/docs\/assets\/custom\.png/
+        )
+      }
+    })
+
+    test('Should sanitize dangerous HTML content', async ({ comfyPage }) => {
+      // Mock response with potentially dangerous content
+      await comfyPage.page.route('**/docs/KSampler/en.md', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: `# Safe Content
+
+<script>alert('XSS')</script>
+<img src="x" onerror="alert('XSS')">
+<a href="javascript:alert('XSS')">Dangerous Link</a>
+<iframe src="evil.com"></iframe>
+
+<!-- Safe content -->
+<video src="safe.mp4" controls></video>
+<img src="safe.jpg" alt="Safe Image">
+`
+        })
+      })
+
+      await comfyPage.loadWorkflow('default')
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button:has(.pi-question-circle)'
+      )
+      await helpButton.click()
+
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+
+      // Dangerous elements should be removed
+      await expect(helpPage.locator('script')).toHaveCount(0)
+      await expect(helpPage.locator('iframe')).toHaveCount(0)
+
+      // Check that onerror attribute is removed
+      const images = helpPage.locator('img')
+      const imageCount = await images.count()
+      for (let i = 0; i < imageCount; i++) {
+        const img = images.nth(i)
+        const onError = await img.getAttribute('onerror')
+        expect(onError).toBeNull()
+      }
+
+      // Check that javascript: links are sanitized
+      const links = helpPage.locator('a')
+      const linkCount = await links.count()
+      for (let i = 0; i < linkCount; i++) {
+        const link = links.nth(i)
+        const href = await link.getAttribute('href')
+        if (href !== null) {
+          expect(href).not.toContain('javascript:')
+        }
+      }
+
+      // Safe content should remain
+      await expect(helpPage.locator('video[src*="safe.mp4"]')).toBeVisible()
+      await expect(helpPage.locator('img[alt="Safe Image"]')).toBeVisible()
+    })
+
+    test('Should handle locale-specific documentation', async ({
+      comfyPage
+    }) => {
+      // Mock different responses for different locales
+      await comfyPage.page.route('**/docs/KSampler/ja.md', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: `# KSamplerノード
+
+これは日本語のドキュメントです。
+`
+        })
+      })
+
+      await comfyPage.page.route('**/docs/KSampler/en.md', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: `# KSampler Node
+
+This is English documentation.
+`
+        })
+      })
+
+      // Set locale to Japanese
+      await comfyPage.setSetting('Comfy.Locale', 'ja')
+
+      await comfyPage.loadWorkflow('default')
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button:has(.pi-question-circle)'
+      )
+      await helpButton.click()
+
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      await expect(helpPage).toContainText('KSamplerノード')
+      await expect(helpPage).toContainText('これは日本語のドキュメントです')
+
+      // Reset locale
+      await comfyPage.setSetting('Comfy.Locale', 'en')
+    })
+
+    test('Should handle network errors gracefully', async ({ comfyPage }) => {
+      // Mock network error
+      await comfyPage.page.route('**/docs/**/*.md', async (route) => {
+        await route.abort('failed')
+      })
+
+      await comfyPage.loadWorkflow('default')
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button:has(.pi-question-circle)'
+      )
+      await helpButton.click()
+
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+
+      // Should show fallback content (node description)
+      await expect(helpPage).toBeVisible()
+      await expect(helpPage.locator('.p-progressspinner')).not.toBeVisible()
+
+      // Should show some content even on error
+      const content = await helpPage.textContent()
+      expect(content).toBeTruthy()
+    })
+
+    test('Should update help content when switching between nodes', async ({
+      comfyPage
+    }) => {
+      // Mock different help content for different nodes
+      await comfyPage.page.route('**/docs/KSampler/en.md', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: '# KSampler Help\n\nThis is KSampler documentation.'
+        })
+      })
+
+      await comfyPage.page.route(
+        '**/docs/CheckpointLoaderSimple/en.md',
+        async (route) => {
+          await route.fulfill({
+            status: 200,
+            body: '# Checkpoint Loader Help\n\nThis is Checkpoint Loader documentation.'
+          })
+        }
+      )
+
+      await comfyPage.loadWorkflow('default')
+
+      // Select KSampler first
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button:has(.pi-question-circle)'
+      )
+      await helpButton.click()
+
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      await expect(helpPage).toContainText('KSampler Help')
+      await expect(helpPage).toContainText('This is KSampler documentation')
+
+      // Now select Checkpoint Loader
+      const checkpointNodes = await comfyPage.getNodeRefsByType(
+        'CheckpointLoaderSimple'
+      )
+      await selectNodeWithPan(comfyPage, checkpointNodes[0])
+
+      // Click help button again
+      const helpButton2 = comfyPage.page.locator(
+        '.selection-toolbox button:has(.pi-question-circle)'
+      )
+      await helpButton2.click()
+
+      // Content should update
+      await expect(helpPage).toContainText('Checkpoint Loader Help')
+      await expect(helpPage).toContainText(
+        'This is Checkpoint Loader documentation'
+      )
+      await expect(helpPage).not.toContainText('KSampler documentation')
+    })
+  })
+})
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,12 +29,14 @@
        "@xterm/xterm": "^5.5.0",
        "algoliasearch": "^5.21.0",
        "axios": "^1.8.2",
+        "dompurify": "^3.2.5",
        "dotenv": "^16.4.5",
        "firebase": "^11.6.0",
        "fuse.js": "^7.0.0",
        "jsondiffpatch": "^0.6.0",
        "lodash": "^4.17.21",
        "loglevel": "^1.9.2",
+        "marked": "^15.0.11",
        "pinia": "^2.1.7",
        "primeicons": "^7.0.0",
        "primevue": "^4.2.5",
@@ -55,6 +57,7 @@
        "@pinia/testing": "^0.1.5",
        "@playwright/test": "^1.44.1",
        "@trivago/prettier-plugin-sort-imports": "^5.2.0",
+        "@types/dompurify": "^3.0.5",
        "@types/fs-extra": "^11.0.4",
        "@types/lodash": "^4.17.6",
        "@types/node": "^20.14.8",
@@ -4351,6 +4354,16 @@
      "integrity": "sha512-xFdR6tkm0MWvBfO8xXCSsinYxHcqkQUlcHeSpMC2ukzOb6lwQAfDmW+Qt0AvlGd8HpsS28qKsB+oPeJn9I39jg==",
      "license": "MIT"
    },
+    "node_modules/@types/dompurify": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz",
+      "integrity": "sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/trusted-types": "*"
+      }
+    },
    "node_modules/@types/estree": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -4478,6 +4491,13 @@
        "meshoptimizer": "~0.18.1"
      }
    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
    "node_modules/@types/unist": {
      "version": "2.0.11",
      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
@@ -7218,6 +7238,15 @@
        "url": "https://github.com/fb55/domhandler?sponsor=1"
      }
    },
+    "node_modules/dompurify": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.5.tgz",
+      "integrity": "sha512-mLPd29uoRe9HpvwP2TxClGQBzGXeEC/we/q+bFlmPPmj2p2Ugl3r6ATu/UU1v77DXNcehiBg9zsr1dREyA/dJQ==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
    "node_modules/domutils": {
      "version": "2.8.0",
      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
@@ -10952,6 +10981,18 @@
        "url": "https://github.com/sponsors/wooorm"
      }
    },
+    "node_modules/marked": {
+      "version": "15.0.11",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-15.0.11.tgz",
+      "integrity": "sha512-1BEXAU2euRCG3xwgLVT1y0xbJEld1XOrmRJpUwRCcy7rxhSCwMrmEu9LXoPhHSCJG41V7YcQ2mjKRr5BA3ITIA==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
    "node_modules/math-intrinsics": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
    "@pinia/testing": "^0.1.5",
    "@playwright/test": "^1.44.1",
    "@trivago/prettier-plugin-sort-imports": "^5.2.0",
+    "@types/dompurify": "^3.0.5",
    "@types/fs-extra": "^11.0.4",
    "@types/lodash": "^4.17.6",
    "@types/node": "^20.14.8",
@@ -92,12 +93,14 @@
    "@xterm/xterm": "^5.5.0",
    "algoliasearch": "^5.21.0",
    "axios": "^1.8.2",
+    "dompurify": "^3.2.5",
    "dotenv": "^16.4.5",
    "firebase": "^11.6.0",
    "fuse.js": "^7.0.0",
    "jsondiffpatch": "^0.6.0",
    "lodash": "^4.17.21",
    "loglevel": "^1.9.2",
+    "marked": "^15.0.11",
    "pinia": "^2.1.7",
    "primeicons": "^7.0.0",
    "primevue": "^4.2.5",
--- a/src/components/graph/SelectionToolbox.vue
+++ b/src/components/graph/SelectionToolbox.vue
@@ -18,6 +18,7 @@
      :key="command.id"
      :command="command"
    />
+    <HelpButton />
  </Panel>
 </template>

@@ -30,6 +31,7 @@ import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerBu
 import DeleteButton from '@/components/graph/selectionToolbox/DeleteButton.vue'
 import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
 import ExtensionCommandButton from '@/components/graph/selectionToolbox/ExtensionCommandButton.vue'
+import HelpButton from '@/components/graph/selectionToolbox/HelpButton.vue'
 import MaskEditorButton from '@/components/graph/selectionToolbox/MaskEditorButton.vue'
 import PinButton from '@/components/graph/selectionToolbox/PinButton.vue'
 import RefreshButton from '@/components/graph/selectionToolbox/RefreshButton.vue'
--- a/src/components/graph/selectionToolbox/HelpButton.vue
+++ b/src/components/graph/selectionToolbox/HelpButton.vue
@@ -0,0 +1,49 @@
+<template>
+  <Button
+    v-show="nodeDef"
+    v-tooltip.top="{
+      value: $t('g.help'),
+      showDelay: 1000
+    }"
+    class="help-button"
+    text
+    icon="pi pi-question-circle"
+    severity="secondary"
+    @click="showHelp"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+
+import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
+import { useCanvasStore } from '@/stores/graphStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
+import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
+import { isLGraphNode } from '@/utils/litegraphUtil'
+
+const canvasStore = useCanvasStore()
+const nodeDefStore = useNodeDefStore()
+const sidebarTabStore = useSidebarTabStore()
+const nodeHelpStore = useNodeHelpStore()
+const { id: nodeLibraryTabId } = useNodeLibrarySidebarTab()
+
+const nodeDef = computed<ComfyNodeDefImpl | null>(() => {
+  if (canvasStore.selectedItems.length !== 1) return null
+  const item = canvasStore.selectedItems[0]
+  if (!isLGraphNode(item)) return null
+  return nodeDefStore.fromLGraphNode(item)
+})
+
+const showHelp = () => {
+  const def = nodeDef.value
+  if (!def) return
+  if (sidebarTabStore.activeSidebarTabId !== nodeLibraryTabId) {
+    sidebarTabStore.toggleSidebarTab(nodeLibraryTabId)
+  }
+  nodeHelpStore.openHelp(def)
+}
+</script>
--- a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
@@ -1,113 +1,124 @@
 <template>
-  <SidebarTabTemplate
-    :title="$t('sideToolbar.nodeLibrary')"
-    class="bg-[var(--p-tree-background)]"
-  >
-    <template #tool-buttons>
-      <Button
-        v-tooltip.bottom="$t('g.newFolder')"
-        class="new-folder-button"
-        icon="pi pi-folder-plus"
-        text
-        severity="secondary"
-        @click="nodeBookmarkTreeExplorerRef?.addNewBookmarkFolder()"
-      />
-      <Button
-        v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.groupBy')"
-        :icon="selectedGroupingIcon"
-        text
-        severity="secondary"
-        @click="groupingPopover?.toggle($event)"
-      />
-      <Button
-        v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.sortMode')"
-        :icon="selectedSortingIcon"
-        text
-        severity="secondary"
-        @click="sortingPopover?.toggle($event)"
-      />
-      <Button
-        v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.resetView')"
-        icon="pi pi-refresh"
-        text
-        severity="secondary"
-        @click="resetOrganization"
-      />
-      <Popover ref="groupingPopover">
-        <div class="flex flex-col gap-1 p-2">
-          <Button
-            v-for="option in groupingOptions"
-            :key="option.id"
-            :icon="option.icon"
-            :label="$t(option.label)"
-            text
-            :severity="
-              selectedGroupingId === option.id ? 'primary' : 'secondary'
-            "
-            class="justify-start"
-            @click="selectGrouping(option.id)"
+  <div class="h-full">
+    <SidebarTabTemplate
+      v-if="!isHelpOpen"
+      :title="$t('sideToolbar.nodeLibrary')"
+      class="bg-[var(--p-tree-background)]"
+    >
+      <template #tool-buttons>
+        <Button
+          v-tooltip.bottom="$t('g.newFolder')"
+          class="new-folder-button"
+          icon="pi pi-folder-plus"
+          text
+          severity="secondary"
+          @click="nodeBookmarkTreeExplorerRef?.addNewBookmarkFolder()"
+        />
+        <Button
+          v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.groupBy')"
+          :icon="selectedGroupingIcon"
+          text
+          severity="secondary"
+          @click="groupingPopover?.toggle($event)"
+        />
+        <Button
+          v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.sortMode')"
+          :icon="selectedSortingIcon"
+          text
+          severity="secondary"
+          @click="sortingPopover?.toggle($event)"
+        />
+        <Button
+          v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.resetView')"
+          icon="pi pi-refresh"
+          text
+          severity="secondary"
+          @click="resetOrganization"
+        />
+        <Popover ref="groupingPopover">
+          <div class="flex flex-col gap-1 p-2">
+            <Button
+              v-for="option in groupingOptions"
+              :key="option.id"
+              :icon="option.icon"
+              :label="$t(option.label)"
+              text
+              :severity="
+                selectedGroupingId === option.id ? 'primary' : 'secondary'
+              "
+              class="justify-start"
+              @click="selectGrouping(option.id)"
+            />
+          </div>
+        </Popover>
+        <Popover ref="sortingPopover">
+          <div class="flex flex-col gap-1 p-2">
+            <Button
+              v-for="option in sortingOptions"
+              :key="option.id"
+              :icon="option.icon"
+              :label="$t(option.label)"
+              text
+              :severity="
+                selectedSortingId === option.id ? 'primary' : 'secondary'
+              "
+              class="justify-start"
+              @click="selectSorting(option.id)"
+            />
+          </div>
+        </Popover>
+      </template>
+      <template #header>
+        <div>
+          <SearchBox
+            v-model:modelValue="searchQuery"
+            class="node-lib-search-box p-2 2xl:p-4"
+            :placeholder="$t('g.searchNodes') + '...'"
+            filter-icon="pi pi-filter"
+            :filters
+            @search="handleSearch"
+            @show-filter="($event) => searchFilter?.toggle($event)"
+            @remove-filter="onRemoveFilter"
          />
-        </div>
-      </Popover>
-      <Popover ref="sortingPopover">
-        <div class="flex flex-col gap-1 p-2">
-          <Button
-            v-for="option in sortingOptions"
-            :key="option.id"
-            :icon="option.icon"
-            :label="$t(option.label)"
-            text
-            :severity="
-              selectedSortingId === option.id ? 'primary' : 'secondary'
-            "
-            class="justify-start"
-            @click="selectSorting(option.id)"
-          />
-        </div>
-      </Popover>
-    </template>
-    <template #header>
-      <SearchBox
-        v-model:modelValue="searchQuery"
-        class="node-lib-search-box p-2 2xl:p-4"
-        :placeholder="$t('g.searchNodes') + '...'"
-        filter-icon="pi pi-filter"
-        :filters
-        @search="handleSearch"
-        @show-filter="($event) => searchFilter?.toggle($event)"
-        @remove-filter="onRemoveFilter"
-      />

-      <Popover ref="searchFilter" class="ml-[-13px]">
-        <NodeSearchFilter @add-filter="onAddFilter" />
-      </Popover>
-    </template>
-    <template #body>
-      <NodeBookmarkTreeExplorer
-        ref="nodeBookmarkTreeExplorerRef"
-        :filtered-node-defs="filteredNodeDefs"
-      />
-      <Divider
-        v-show="nodeBookmarkStore.bookmarks.length > 0"
-        type="dashed"
-        class="m-2"
-      />
-      <TreeExplorer
-        v-model:expandedKeys="expandedKeys"
-        class="node-lib-tree-explorer"
-        :root="renderedRoot"
-      >
-        <template #node="{ node }">
-          <NodeTreeLeaf :node="node" />
-        </template>
-      </TreeExplorer>
-    </template>
-  </SidebarTabTemplate>
+          <Popover ref="searchFilter" class="ml-[-13px]">
+            <NodeSearchFilter @add-filter="onAddFilter" />
+          </Popover>
+        </div>
+      </template>
+      <template #body>
+        <div>
+          <NodeBookmarkTreeExplorer
+            ref="nodeBookmarkTreeExplorerRef"
+            :filtered-node-defs="filteredNodeDefs"
+            :open-node-help="openHelp"
+          />
+          <Divider
+            v-show="nodeBookmarkStore.bookmarks.length > 0"
+            type="dashed"
+            class="m-2"
+          />
+          <TreeExplorer
+            v-model:expandedKeys="expandedKeys"
+            class="node-lib-tree-explorer"
+            :root="renderedRoot"
+          >
+            <template #node="{ node }">
+              <NodeTreeLeaf :node="node" :open-node-help="openHelp" />
+            </template>
+          </TreeExplorer>
+        </div>
+      </template>
+    </SidebarTabTemplate>
+
+    <NodeHelpPage v-else :node="currentHelpNode!" @close="closeHelp" />
+  </div>
  <div id="node-library-node-preview-container" />
 </template>

 <script setup lang="ts">
 import { useLocalStorage } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
 import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import Popover from 'primevue/popover'
@@ -119,6 +130,7 @@ import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import NodePreview from '@/components/node/NodePreview.vue'
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
+import NodeHelpPage from '@/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue'
 import NodeTreeLeaf from '@/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue'
 import { useTreeExpansion } from '@/composables/useTreeExpansion'
 import { useLitegraphService } from '@/services/litegraphService'
@@ -129,6 +141,7 @@ import {
 } from '@/services/nodeOrganizationService'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
+import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
 import type {
  GroupingStrategyId,
  SortingStrategyId
@@ -141,6 +154,7 @@ import NodeBookmarkTreeExplorer from './nodeLibrary/NodeBookmarkTreeExplorer.vue

 const nodeDefStore = useNodeDefStore()
 const nodeBookmarkStore = useNodeBookmarkStore()
+const nodeHelpStore = useNodeHelpStore()
 const expandedKeys = ref<Record<string, boolean>>({})
 const { expandNode, toggleNodeOnEvent } = useTreeExpansion(expandedKeys)

@@ -161,6 +175,9 @@ const selectedSortingId = useLocalStorage<SortingStrategyId>(

 const searchQuery = ref<string>('')

+const { currentHelpNode, isHelpOpen } = storeToRefs(nodeHelpStore)
+const { openHelp, closeHelp } = nodeHelpStore
+
 const groupingOptions = computed(() =>
  nodeOrganizationService.getGroupingStrategies().map((strategy) => ({
    id: strategy.id,
--- a/src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue
@@ -9,7 +9,7 @@
      <NodeTreeFolder :node="node" />
    </template>
    <template #node="{ node }">
-      <NodeTreeLeaf :node="node" />
+      <NodeTreeLeaf :node="node" :open-node-help="props.openNodeHelp" />
    </template>
  </TreeExplorer>

@@ -43,6 +43,7 @@ import type {

 const props = defineProps<{
  filteredNodeDefs: ComfyNodeDefImpl[]
+  openNodeHelp: (nodeDef: ComfyNodeDefImpl) => void
 }>()

 const expandedKeys = ref<Record<string, boolean>>({})
--- a/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue
@@ -0,0 +1,230 @@
+<template>
+  <div class="flex flex-col h-full bg-[var(--p-tree-background)] overflow-auto">
+    <div
+      class="px-3 py-2 flex items-center border-b border-[var(--p-divider-color)]"
+    >
+      <Button
+        v-tooltip.bottom="$t('g.back')"
+        icon="pi pi-arrow-left"
+        text
+        severity="secondary"
+        @click="$emit('close')"
+      />
+      <span class="ml-2 font-semibold">{{ node.display_name }}</span>
+    </div>
+    <div class="p-4 flex-grow node-help-content max-w-[600px] mx-auto">
+      <ProgressSpinner
+        v-if="isLoading"
+        class="m-auto"
+        aria-label="Loading help"
+      />
+      <!-- Markdown fetched successfully -->
+      <div
+        v-else-if="!error"
+        class="markdown-content"
+        v-html="renderedHelpHtml"
+      />
+      <!-- Fallback: markdown not found or fetch error -->
+      <div v-else class="text-sm space-y-6 fallback-content">
+        <p v-if="node.description">
+          <strong>{{ $t('g.description') }}:</strong> {{ node.description }}
+        </p>
+
+        <div v-if="inputList.length">
+          <p>
+            <strong>{{ $t('nodeHelpPage.inputs') }}:</strong>
+          </p>
+          <!-- Using plain HTML table instead of DataTable for consistent styling with markdown content -->
+          <table>
+            <thead>
+              <tr>
+                <th>{{ $t('g.name') }}</th>
+                <th>{{ $t('nodeHelpPage.type') }}</th>
+                <th>{{ $t('g.description') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="input in inputList" :key="input.name">
+                <td>
+                  <code>{{ input.name }}</code>
+                </td>
+                <td>{{ input.type }}</td>
+                <td>{{ input.tooltip || '-' }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div v-if="outputList.length">
+          <p>
+            <strong>{{ $t('nodeHelpPage.outputs') }}:</strong>
+          </p>
+          <table>
+            <thead>
+              <tr>
+                <th>{{ $t('g.name') }}</th>
+                <th>{{ $t('nodeHelpPage.type') }}</th>
+                <th>{{ $t('g.description') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="output in outputList" :key="output.name">
+                <td>
+                  <code>{{ output.name }}</code>
+                </td>
+                <td>{{ output.type }}</td>
+                <td>{{ output.tooltip || '-' }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import Button from 'primevue/button'
+import ProgressSpinner from 'primevue/progressspinner'
+import { computed } from 'vue'
+
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
+
+const { node } = defineProps<{ node: ComfyNodeDefImpl }>()
+
+const nodeHelpStore = useNodeHelpStore()
+const { renderedHelpHtml, isLoading, error } = storeToRefs(nodeHelpStore)
+
+defineEmits<{
+  (e: 'close'): void
+}>()
+
+const inputList = computed(() =>
+  Object.values(node.inputs).map((spec) => ({
+    name: spec.name,
+    type: spec.type,
+    tooltip: spec.tooltip || ''
+  }))
+)
+
+const outputList = computed(() =>
+  node.outputs.map((spec) => ({
+    name: spec.name,
+    type: spec.type,
+    tooltip: spec.tooltip || ''
+  }))
+)
+</script>
+
+<style scoped lang="postcss">
+.node-help-content :deep(:is(img, video)) {
+  @apply max-w-full h-auto block mb-4;
+}
+
+.markdown-content,
+.fallback-content {
+  @apply text-sm;
+}
+
+.markdown-content :deep(h1),
+.fallback-content h1 {
+  @apply text-[22px] font-bold mt-8 mb-4 first:mt-0;
+}
+
+.markdown-content :deep(h2),
+.fallback-content h2 {
+  @apply text-[18px] font-bold mt-8 mb-4 first:mt-0;
+}
+
+.markdown-content :deep(h3),
+.fallback-content h3 {
+  @apply text-[16px] font-bold mt-8 mb-4 first:mt-0;
+}
+
+.markdown-content :deep(h4),
+.markdown-content :deep(h5),
+.markdown-content :deep(h6),
+.fallback-content h4,
+.fallback-content h5,
+.fallback-content h6 {
+  @apply mt-8 mb-4 first:mt-0;
+}
+
+.markdown-content :deep(td),
+.fallback-content td {
+  color: var(--drag-text);
+}
+
+.markdown-content :deep(a),
+.fallback-content a {
+  color: var(--drag-text);
+  text-decoration: underline;
+}
+
+.markdown-content :deep(th),
+.fallback-content th {
+  color: var(--fg-color);
+}
+
+.markdown-content :deep(ul),
+.markdown-content :deep(ol),
+.fallback-content ul,
+.fallback-content ol {
+  @apply pl-8 my-2;
+}
+
+.markdown-content :deep(ul ul),
+.markdown-content :deep(ol ol),
+.markdown-content :deep(ul ol),
+.markdown-content :deep(ol ul),
+.fallback-content ul ul,
+.fallback-content ol ol,
+.fallback-content ul ol,
+.fallback-content ol ul {
+  @apply pl-6 my-2;
+}
+
+.markdown-content :deep(li),
+.fallback-content li {
+  @apply my-1;
+}
+
+.markdown-content :deep(*:first-child),
+.fallback-content > *:first-child {
+  @apply mt-0;
+}
+
+.markdown-content :deep(code),
+.fallback-content code {
+  @apply text-[var(--error-text)] bg-[var(--content-bg)] rounded px-1 py-0.5;
+}
+
+.markdown-content :deep(table),
+.fallback-content table {
+  @apply w-full border-collapse;
+}
+
+.markdown-content :deep(th),
+.markdown-content :deep(td),
+.fallback-content th,
+.fallback-content td {
+  @apply px-2 py-2;
+}
+
+.markdown-content :deep(tr),
+.fallback-content tr {
+  border-bottom: 1px solid var(--content-bg);
+}
+
+.markdown-content :deep(tr:last-child),
+.fallback-content tr:last-child {
+  border-bottom: none;
+}
+
+.markdown-content :deep(thead),
+.fallback-content thead {
+  border-bottom: 1px solid var(--p-text-color);
+}
+</style>
--- a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
@@ -22,6 +22,15 @@
          severity="secondary"
          @click.stop="toggleBookmark"
        />
+        <Button
+          v-tooltip.bottom="$t('g.learnMore')"
+          class="help-button"
+          size="small"
+          icon="pi pi-question"
+          text
+          severity="secondary"
+          @click.stop="props.openNodeHelp(nodeDef)"
+        />
      </template>
    </TreeExplorerTreeNode>

@@ -54,6 +63,7 @@ import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'

 const props = defineProps<{
  node: RenderedTreeExplorerNode<ComfyNodeDefImpl>
+  openNodeHelp: (nodeDef: ComfyNodeDefImpl) => void
 }>()

 // Note: node.data should be present for leaf nodes.
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -30,6 +30,7 @@
    "icon": "Icon",
    "color": "Color",
    "error": "Error",
+    "help": "Help",
    "loading": "Loading",
    "findIssues": "Find Issues",
    "reportIssue": "Send Report",
@@ -1423,5 +1424,13 @@
    "cancelEditTooltip": "Cancel edit",
    "copiedTooltip": "Copied",
    "copyTooltip": "Copy message to clipboard"
+  },
+  "nodeHelpPage": {
+    "inputs": "Inputs",
+    "outputs": "Outputs",
+    "type": "Type",
+    "moreHelp": "For more help, visit the",
+    "documentationPage": "documentation page",
+    "loadError": "Failed to load help: {error}"
  }
 }
--- a/src/locales/es/main.json
+++ b/src/locales/es/main.json
@@ -294,6 +294,7 @@
    "findIssues": "Encontrar problemas",
    "firstTimeUIMessage": "Esta es la primera vez que usas la nueva interfaz. Elige \"Menú > Usar nuevo menú > Desactivado\" para restaurar la antigua interfaz.",
    "goToNode": "Ir al nodo",
+    "help": "Ayuda",
    "icon": "Icono",
    "imageFailedToLoad": "Falló la carga de la imagen",
    "imageUrl": "URL de la imagen",
@@ -836,6 +837,14 @@
    "video": "video",
    "video_models": "modelos_de_video"
  },
+  "nodeHelpPage": {
+    "documentationPage": "página de documentación",
+    "inputs": "Entradas",
+    "loadError": "Error al cargar la ayuda: {error}",
+    "moreHelp": "Para más ayuda, visita la",
+    "outputs": "Salidas",
+    "type": "Tipo"
+  },
  "nodeTemplates": {
    "enterName": "Introduzca el nombre",
    "saveAsTemplate": "Guardar como plantilla"
--- a/src/locales/fr/main.json
+++ b/src/locales/fr/main.json
@@ -294,6 +294,7 @@
    "findIssues": "Trouver des problèmes",
    "firstTimeUIMessage": "C'est la première fois que vous utilisez la nouvelle interface utilisateur. Choisissez \"Menu > Utiliser le nouveau menu > Désactivé\" pour restaurer l'ancienne interface utilisateur.",
    "goToNode": "Aller au nœud",
+    "help": "Aide",
    "icon": "Icône",
    "imageFailedToLoad": "Échec du chargement de l'image",
    "imageUrl": "URL de l'image",
@@ -836,6 +837,14 @@
    "video": "vidéo",
    "video_models": "modèles_vidéo"
  },
+  "nodeHelpPage": {
+    "documentationPage": "page de documentation",
+    "inputs": "Entrées",
+    "loadError": "Échec du chargement de l’aide : {error}",
+    "moreHelp": "Pour plus d'aide, visitez la",
+    "outputs": "Sorties",
+    "type": "Type"
+  },
  "nodeTemplates": {
    "enterName": "Entrez le nom",
    "saveAsTemplate": "Enregistrer comme modèle"
--- a/src/locales/ja/main.json
+++ b/src/locales/ja/main.json
@@ -294,6 +294,7 @@
    "findIssues": "問題を見つける",
    "firstTimeUIMessage": "新しいUIを初めて使用しています。「メニュー > 新しいメニューを使用 > 無効」を選択することで古いUIに戻すことが可能です。",
    "goToNode": "ノードに移動",
+    "help": "ヘルプ",
    "icon": "アイコン",
    "imageFailedToLoad": "画像の読み込みに失敗しました",
    "imageUrl": "画像URL",
@@ -836,6 +837,14 @@
    "video": "ビデオ",
    "video_models": "ビデオモデル"
  },
+  "nodeHelpPage": {
+    "documentationPage": "ドキュメントページ",
+    "inputs": "入力",
+    "loadError": "ヘルプの読み込みに失敗しました: {error}",
+    "moreHelp": "さらに詳しい情報は、",
+    "outputs": "出力",
+    "type": "タイプ"
+  },
  "nodeTemplates": {
    "enterName": "名前を入力",
    "saveAsTemplate": "テンプレートとして保存"
--- a/src/locales/ko/main.json
+++ b/src/locales/ko/main.json
@@ -294,6 +294,7 @@
    "findIssues": "문제 찾기",
    "firstTimeUIMessage": "새 UI를 처음 사용합니다. \"메뉴 > 새 메뉴 사용 > 비활성화\"를 선택하여 이전 UI로 복원하세요.",
    "goToNode": "노드로 이동",
+    "help": "도움말",
    "icon": "아이콘",
    "imageFailedToLoad": "이미지를 로드하지 못했습니다.",
    "imageUrl": "이미지 URL",
@@ -836,6 +837,14 @@
    "video": "비디오",
    "video_models": "비디오 모델"
  },
+  "nodeHelpPage": {
+    "documentationPage": "문서 페이지",
+    "inputs": "입력",
+    "loadError": "도움말을 불러오지 못했습니다: {error}",
+    "moreHelp": "더 많은 도움말은",
+    "outputs": "출력",
+    "type": "유형"
+  },
  "nodeTemplates": {
    "enterName": "이름 입력",
    "saveAsTemplate": "템플릿으로 저장"
--- a/src/locales/ru/main.json
+++ b/src/locales/ru/main.json
@@ -294,6 +294,7 @@
    "findIssues": "Найти проблемы",
    "firstTimeUIMessage": "Вы впервые используете новый интерфейс. Выберите \"Меню > Использовать новое меню > Отключено\", чтобы восстановить старый интерфейс.",
    "goToNode": "Перейти к ноде",
+    "help": "Помощь",
    "icon": "Иконка",
    "imageFailedToLoad": "Не удалось загрузить изображение",
    "imageUrl": "URL изображения",
@@ -836,6 +837,14 @@
    "video": "видео",
    "video_models": "видеомодели"
  },
+  "nodeHelpPage": {
+    "documentationPage": "страницу документации",
+    "inputs": "Входы",
+    "loadError": "Не удалось загрузить справку: {error}",
+    "moreHelp": "Для получения дополнительной помощи посетите",
+    "outputs": "Выходы",
+    "type": "Тип"
+  },
  "nodeTemplates": {
    "enterName": "Введите название",
    "saveAsTemplate": "Сохранить как шаблон"
--- a/src/locales/zh/main.json
+++ b/src/locales/zh/main.json
@@ -294,6 +294,7 @@
    "findIssues": "查找问题",
    "firstTimeUIMessage": "这是您第一次使用新界面。选择 \"菜单 > 使用新菜单 > 禁用\" 来恢复旧界面。",
    "goToNode": "转到节点",
+    "help": "帮助",
    "icon": "图标",
    "imageFailedToLoad": "图像加载失败",
    "imageUrl": "图片网址",
@@ -836,6 +837,14 @@
    "video": "视频",
    "video_models": "视频模型"
  },
+  "nodeHelpPage": {
+    "documentationPage": "文档页面",
+    "inputs": "输入",
+    "loadError": "加载帮助失败：{error}",
+    "moreHelp": "如需更多帮助，请访问",
+    "outputs": "输出",
+    "type": "类型"
+  },
  "nodeTemplates": {
    "enterName": "输入名称",
    "saveAsTemplate": "另存为模板"
--- a/src/schemas/nodeDef/nodeDefSchemaV2.ts
+++ b/src/schemas/nodeDef/nodeDefSchemaV2.ts
@@ -73,6 +73,7 @@ export const zComfyNodeDef = z.object({
  name: z.string(),
  display_name: z.string(),
  description: z.string(),
+  help: z.string().optional(),
  category: z.string(),
  output_node: z.boolean(),
  python_module: z.string(),
--- a/src/schemas/nodeDefSchema.ts
+++ b/src/schemas/nodeDefSchema.ts
@@ -219,6 +219,7 @@ export const zComfyNodeDef = z.object({
  name: z.string(),
  display_name: z.string(),
  description: z.string(),
+  help: z.string().optional(),
  category: z.string(),
  output_node: z.boolean(),
  python_module: z.string(),
@@ -227,7 +228,7 @@ export const zComfyNodeDef = z.object({
  /**
   * Whether the node is an API node. Running API nodes requires login to
   * Comfy Org account.
-   * https://www.comfy.org/faq
+   * https://docs.comfy.org/tutorials/api-nodes/overview
   */
  api_node: z.boolean().optional()
 })
--- a/src/services/nodeHelpService.ts
+++ b/src/services/nodeHelpService.ts
@@ -0,0 +1,59 @@
+import { api } from '@/scripts/api'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { NodeSourceType, getNodeSource } from '@/types/nodeSource'
+import { extractCustomNodeName } from '@/utils/nodeHelpUtil'
+
+export class NodeHelpService {
+  async fetchNodeHelp(node: ComfyNodeDefImpl, locale: string): Promise<string> {
+    const nodeSource = getNodeSource(node.python_module)
+
+    if (nodeSource.type === NodeSourceType.CustomNodes) {
+      return this.fetchCustomNodeHelp(node, locale)
+    } else {
+      return this.fetchCoreNodeHelp(node, locale)
+    }
+  }
+
+  private async fetchCustomNodeHelp(
+    node: ComfyNodeDefImpl,
+    locale: string
+  ): Promise<string> {
+    const customNodeName = extractCustomNodeName(node.python_module)
+    if (!customNodeName) {
+      throw new Error('Invalid custom node module')
+    }
+
+    // Try locale-specific path first
+    const localePath = `/extensions/${customNodeName}/docs/${node.name}/${locale}.md`
+    let res = await fetch(api.fileURL(localePath))
+
+    if (!res.ok) {
+      // Fall back to non-locale path
+      const fallbackPath = `/extensions/${customNodeName}/docs/${node.name}.md`
+      res = await fetch(api.fileURL(fallbackPath))
+    }
+
+    if (!res.ok) {
+      throw new Error(res.statusText)
+    }
+
+    return res.text()
+  }
+
+  private async fetchCoreNodeHelp(
+    node: ComfyNodeDefImpl,
+    locale: string
+  ): Promise<string> {
+    const mdUrl = `/docs/${node.name}/${locale}.md`
+    const res = await fetch(api.fileURL(mdUrl))
+
+    if (!res.ok) {
+      throw new Error(res.statusText)
+    }
+
+    return res.text()
+  }
+}
+
+// Export singleton instance
+export const nodeHelpService = new NodeHelpService()
--- a/src/stores/nodeDefStore.ts
+++ b/src/stores/nodeDefStore.ts
@@ -38,6 +38,7 @@ export class ComfyNodeDefImpl
  category: string
  readonly python_module: string
  readonly description: string
+  readonly help: string
  readonly deprecated: boolean
  readonly experimental: boolean
  readonly output_node: boolean
@@ -118,6 +119,7 @@ export class ComfyNodeDefImpl
    this.category = obj.category
    this.python_module = obj.python_module
    this.description = obj.description
+    this.help = obj.help ?? ''
    this.deprecated = obj.deprecated ?? obj.category === ''
    this.experimental =
      obj.experimental ?? obj.category.startsWith('_for_testing')
--- a/src/stores/workspace/nodeHelpStore.ts
+++ b/src/stores/workspace/nodeHelpStore.ts
@@ -0,0 +1,69 @@
+import { defineStore } from 'pinia'
+import { computed, ref, watch } from 'vue'
+
+import { i18n } from '@/i18n'
+import { nodeHelpService } from '@/services/nodeHelpService'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
+import { getNodeHelpBaseUrl } from '@/utils/nodeHelpUtil'
+
+export const useNodeHelpStore = defineStore('nodeHelp', () => {
+  const currentHelpNode = ref<ComfyNodeDefImpl | null>(null)
+  const isHelpOpen = computed(() => currentHelpNode.value !== null)
+  const helpContent = ref<string>('')
+  const isLoading = ref<boolean>(false)
+  const errorMsg = ref<string | null>(null)
+
+  function openHelp(nodeDef: ComfyNodeDefImpl) {
+    currentHelpNode.value = nodeDef
+  }
+
+  function closeHelp() {
+    currentHelpNode.value = null
+  }
+
+  // Base URL for relative assets in node docs markdown
+  const baseUrl = computed(() => {
+    const node = currentHelpNode.value
+    if (!node) return ''
+    return getNodeHelpBaseUrl(node)
+  })
+
+  // Watch for help node changes and fetch its docs markdown
+  watch(
+    () => currentHelpNode.value,
+    async (node) => {
+      helpContent.value = ''
+      errorMsg.value = null
+
+      if (node) {
+        isLoading.value = true
+        try {
+          const locale = i18n.global.locale.value || 'en'
+          helpContent.value = await nodeHelpService.fetchNodeHelp(node, locale)
+        } catch (e: any) {
+          errorMsg.value = e.message
+          helpContent.value = node.description || ''
+        } finally {
+          isLoading.value = false
+        }
+      }
+    },
+    { immediate: true }
+  )
+
+  const renderedHelpHtml = computed(() => {
+    return renderMarkdownToHtml(helpContent.value, baseUrl.value)
+  })
+
+  return {
+    currentHelpNode,
+    isHelpOpen,
+    openHelp,
+    closeHelp,
+    baseUrl,
+    renderedHelpHtml,
+    isLoading,
+    error: errorMsg
+  }
+})
--- a/src/utils/markdownRendererUtil.ts
+++ b/src/utils/markdownRendererUtil.ts
@@ -0,0 +1,53 @@
+import DOMPurify from 'dompurify'
+import { Renderer, marked } from 'marked'
+
+const ALLOWED_TAGS = ['video', 'source']
+const ALLOWED_ATTRS = [
+  'controls',
+  'autoplay',
+  'loop',
+  'muted',
+  'preload',
+  'poster'
+]
+
+// Matches relative src attributes in img, source, and video HTML tags
+// Captures: 1) opening tag with src=", 2) relative path, 3) closing quote
+// Excludes absolute paths (starting with /) and URLs (http:// or https://)
+const MEDIA_SRC_REGEX =
+  /(<(?:img|source|video)[^>]*\ssrc=['"])(?!(?:\/|https?:\/\/))([^'"\s>]+)(['"])/gi
+
+// Create a marked Renderer that prefixes relative URLs with base
+export function createMarkdownRenderer(baseUrl?: string): Renderer {
+  const normalizedBase = baseUrl ? baseUrl.replace(/\/+$/, '') : ''
+  const renderer = new Renderer()
+  renderer.image = ({ href, title, text }) => {
+    let src = href
+    if (normalizedBase && !/^(?:\/|https?:\/\/)/.test(href)) {
+      src = `${normalizedBase}/${href}`
+    }
+    const titleAttr = title ? ` title="${title}"` : ''
+    return `<img src="${src}" alt="${text}"${titleAttr} />`
+  }
+  return renderer
+}
+
+export function renderMarkdownToHtml(
+  markdown: string,
+  baseUrl?: string
+): string {
+  if (!markdown) return ''
+
+  let html = marked.parse(markdown, {
+    renderer: createMarkdownRenderer(baseUrl)
+  }) as string
+
+  if (baseUrl) {
+    html = html.replace(MEDIA_SRC_REGEX, `$1${baseUrl}$2$3`)
+  }
+
+  return DOMPurify.sanitize(html, {
+    ADD_TAGS: ALLOWED_TAGS,
+    ADD_ATTR: ALLOWED_ATTRS
+  })
+}
--- a/src/utils/nodeHelpUtil.ts
+++ b/src/utils/nodeHelpUtil.ts
@@ -0,0 +1,23 @@
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { NodeSourceType, getNodeSource } from '@/types/nodeSource'
+
+export function extractCustomNodeName(
+  pythonModule: string | undefined
+): string | null {
+  const modules = pythonModule?.split('.') || []
+  if (modules.length >= 2 && modules[0] === 'custom_nodes') {
+    return modules[1].split('@')[0]
+  }
+  return null
+}
+
+export function getNodeHelpBaseUrl(node: ComfyNodeDefImpl): string {
+  const nodeSource = getNodeSource(node.python_module)
+  if (nodeSource.type === NodeSourceType.CustomNodes) {
+    const customNodeName = extractCustomNodeName(node.python_module)
+    if (customNodeName) {
+      return `/extensions/${customNodeName}/docs/`
+    }
+  }
+  return `/docs/${node.name}/`
+}
--- a/tests-ui/tests/store/nodeHelpStore.test.ts
+++ b/tests-ui/tests/store/nodeHelpStore.test.ts
@@ -0,0 +1,399 @@
+import { flushPromises } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
+
+vi.mock('@/scripts/api', () => ({
+  api: {
+    fileURL: vi.fn((url) => url)
+  }
+}))
+
+vi.mock('@/i18n', () => ({
+  i18n: {
+    global: {
+      locale: {
+        value: 'en'
+      }
+    }
+  }
+}))
+
+vi.mock('@/types/nodeSource', () => ({
+  NodeSourceType: {
+    Core: 'core',
+    CustomNodes: 'custom_nodes'
+  },
+  getNodeSource: vi.fn((pythonModule) => {
+    if (pythonModule?.startsWith('custom_nodes.')) {
+      return { type: 'custom_nodes' }
+    }
+    return { type: 'core' }
+  })
+}))
+
+vi.mock('dompurify', () => ({
+  default: {
+    sanitize: vi.fn((html) => html)
+  }
+}))
+
+vi.mock('marked', () => ({
+  marked: {
+    parse: vi.fn((markdown, options) => {
+      if (options?.renderer) {
+        if (markdown.includes('![')) {
+          const matches = markdown.match(/!\[(.*?)\]\((.*?)\)/)
+          if (matches) {
+            const [, text, href] = matches
+            return options.renderer.image({ href, text, title: '' })
+          }
+        }
+      }
+      return `<p>${markdown}</p>`
+    })
+  },
+  Renderer: class Renderer {
+    image = vi.fn(
+      ({ href, title, text }) =>
+        `<img src="${href}" alt="${text}"${title ? ` title="${title}"` : ''} />`
+    )
+    link = vi.fn(
+      ({ href, title, text }) =>
+        `<a href="${href}"${title ? ` title="${title}"` : ''}>${text}</a>`
+    )
+  }
+}))
+
+describe('nodeHelpStore', () => {
+  // Define a mock node for testing
+  const mockCoreNode = {
+    name: 'TestNode',
+    display_name: 'Test Node',
+    description: 'A test node',
+    inputs: {},
+    outputs: [],
+    python_module: 'comfy.test_node'
+  }
+
+  const mockCustomNode = {
+    name: 'CustomNode',
+    display_name: 'Custom Node',
+    description: 'A custom node',
+    inputs: {},
+    outputs: [],
+    python_module: 'custom_nodes.test_module.custom@1.0.0'
+  }
+
+  // Mock fetch responses
+  const mockFetch = vi.fn()
+  global.fetch = mockFetch
+
+  beforeEach(() => {
+    // Setup Pinia
+    setActivePinia(createPinia())
+    mockFetch.mockReset()
+  })
+
+  it('should initialize with empty state', () => {
+    const nodeHelpStore = useNodeHelpStore()
+    expect(nodeHelpStore.currentHelpNode).toBeNull()
+    expect(nodeHelpStore.isHelpOpen).toBe(false)
+  })
+
+  it('should open help for a node', () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    nodeHelpStore.openHelp(mockCoreNode as any)
+
+    expect(nodeHelpStore.currentHelpNode).toStrictEqual(mockCoreNode)
+    expect(nodeHelpStore.isHelpOpen).toBe(true)
+  })
+
+  it('should close help', () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    nodeHelpStore.openHelp(mockCoreNode as any)
+    expect(nodeHelpStore.isHelpOpen).toBe(true)
+
+    nodeHelpStore.closeHelp()
+    expect(nodeHelpStore.currentHelpNode).toBeNull()
+    expect(nodeHelpStore.isHelpOpen).toBe(false)
+  })
+
+  it('should generate correct baseUrl for core nodes', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    nodeHelpStore.openHelp(mockCoreNode as any)
+    await nextTick()
+
+    expect(nodeHelpStore.baseUrl).toBe(`/docs/${mockCoreNode.name}/`)
+  })
+
+  it('should generate correct baseUrl for custom nodes', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    nodeHelpStore.openHelp(mockCustomNode as any)
+    await nextTick()
+
+    expect(nodeHelpStore.baseUrl).toBe('/extensions/test_module/docs/')
+  })
+
+  it('should render markdown content correctly', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      text: async () => '# Test Help\nThis is test help content'
+    })
+
+    nodeHelpStore.openHelp(mockCoreNode as any)
+    await flushPromises()
+
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      'This is test help content'
+    )
+  })
+
+  it('should handle fetch errors and fall back to description', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockResolvedValueOnce({
+      ok: false,
+      statusText: 'Not Found'
+    })
+
+    nodeHelpStore.openHelp(mockCoreNode as any)
+    await flushPromises()
+
+    expect(nodeHelpStore.error).toBe('Not Found')
+    expect(nodeHelpStore.renderedHelpHtml).toContain(mockCoreNode.description)
+  })
+
+  it('should include alt attribute for images', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      text: async () => '![image](test.jpg)'
+    })
+
+    nodeHelpStore.openHelp(mockCustomNode as any)
+    await flushPromises()
+    expect(nodeHelpStore.renderedHelpHtml).toContain('alt="image"')
+  })
+
+  it('should prefix relative video src in custom nodes', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      text: async () => '<video src="video.mp4"></video>'
+    })
+
+    nodeHelpStore.openHelp(mockCustomNode as any)
+    await flushPromises()
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      'src="/extensions/test_module/docs/video.mp4"'
+    )
+  })
+
+  it('should prefix relative video src for core nodes with node-specific base URL', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      text: async () => '<video src="video.mp4"></video>'
+    })
+
+    nodeHelpStore.openHelp(mockCoreNode as any)
+    await flushPromises()
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      `src="/docs/${mockCoreNode.name}/video.mp4"`
+    )
+  })
+
+  it('should prefix relative source src in custom nodes', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      text: async () =>
+        '<video><source src="video.mp4" type="video/mp4" /></video>'
+    })
+
+    nodeHelpStore.openHelp(mockCustomNode as any)
+    await flushPromises()
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      'src="/extensions/test_module/docs/video.mp4"'
+    )
+  })
+
+  it('should prefix relative source src for core nodes with node-specific base URL', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      text: async () =>
+        '<video><source src="video.webm" type="video/webm" /></video>'
+    })
+
+    nodeHelpStore.openHelp(mockCoreNode as any)
+    await flushPromises()
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      `src="/docs/${mockCoreNode.name}/video.webm"`
+    )
+  })
+
+  it('should handle loading state', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockImplementationOnce(() => new Promise(() => {})) // Never resolves
+
+    nodeHelpStore.openHelp(mockCoreNode as any)
+    await nextTick()
+
+    expect(nodeHelpStore.isLoading).toBe(true)
+  })
+
+  it('should try fallback URL for custom nodes', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch
+      .mockResolvedValueOnce({
+        ok: false,
+        statusText: 'Not Found'
+      })
+      .mockResolvedValueOnce({
+        ok: true,
+        text: async () => '# Fallback content'
+      })
+
+    nodeHelpStore.openHelp(mockCustomNode as any)
+    await flushPromises()
+
+    expect(mockFetch).toHaveBeenCalledTimes(2)
+    expect(mockFetch).toHaveBeenCalledWith(
+      '/extensions/test_module/docs/CustomNode/en.md'
+    )
+    expect(mockFetch).toHaveBeenCalledWith(
+      '/extensions/test_module/docs/CustomNode.md'
+    )
+  })
+
+  it('should prefix relative img src in raw HTML for custom nodes', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      text: async () => '# Test\n<img src="image.png" alt="Test image">'
+    })
+
+    nodeHelpStore.openHelp(mockCustomNode as any)
+    await flushPromises()
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      'src="/extensions/test_module/docs/image.png"'
+    )
+    expect(nodeHelpStore.renderedHelpHtml).toContain('alt="Test image"')
+  })
+
+  it('should prefix relative img src in raw HTML for core nodes', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      text: async () => '# Test\n<img src="image.png" alt="Test image">'
+    })
+
+    nodeHelpStore.openHelp(mockCoreNode as any)
+    await flushPromises()
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      `src="/docs/${mockCoreNode.name}/image.png"`
+    )
+    expect(nodeHelpStore.renderedHelpHtml).toContain('alt="Test image"')
+  })
+
+  it('should not prefix absolute img src in raw HTML', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      text: async () => '<img src="/absolute/image.png" alt="Absolute">'
+    })
+
+    nodeHelpStore.openHelp(mockCustomNode as any)
+    await flushPromises()
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      'src="/absolute/image.png"'
+    )
+    expect(nodeHelpStore.renderedHelpHtml).toContain('alt="Absolute"')
+  })
+
+  it('should not prefix external img src in raw HTML', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      text: async () =>
+        '<img src="https://example.com/image.png" alt="External">'
+    })
+
+    nodeHelpStore.openHelp(mockCustomNode as any)
+    await flushPromises()
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      'src="https://example.com/image.png"'
+    )
+    expect(nodeHelpStore.renderedHelpHtml).toContain('alt="External"')
+  })
+
+  it('should handle various quote styles in media src attributes', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      text: async () => `# Media Test
+
+Testing quote styles in properly formed HTML:
+
+<video src="video1.mp4" controls></video>
+<video src='video2.mp4' controls></video>
+<img src="image1.png" alt="Double quotes">
+<img src='image2.png' alt='Single quotes'>
+
+<video controls>
+  <source src="video3.mp4" type="video/mp4">
+  <source src='video3.webm' type='video/webm'>
+</video>
+
+The MEDIA_SRC_REGEX handles both single and double quotes in img, video and source tags.`
+    })
+
+    nodeHelpStore.openHelp(mockCoreNode as any)
+    await flushPromises()
+
+    // Check that all media elements with different quote styles are prefixed correctly
+    // Double quotes remain as double quotes
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      `src="/docs/${mockCoreNode.name}/video1.mp4"`
+    )
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      `src="/docs/${mockCoreNode.name}/image1.png"`
+    )
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      `src="/docs/${mockCoreNode.name}/video3.mp4"`
+    )
+
+    // Single quotes remain as single quotes in the output
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      `src='/docs/${mockCoreNode.name}/video2.mp4'`
+    )
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      `src='/docs/${mockCoreNode.name}/image2.png'`
+    )
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      `src='/docs/${mockCoreNode.name}/video3.webm'`
+    )
+  })
+})
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -52,6 +52,18 @@ export default defineConfig({
        target: DEV_SERVER_COMFYUI_URL
      },

+      // Proxy extension assets (images/videos) under /extensions to the ComfyUI backend
+      '/extensions': {
+        target: DEV_SERVER_COMFYUI_URL,
+        changeOrigin: true
+      },
+
+      // Proxy docs markdown from backend
+      '/docs': {
+        target: DEV_SERVER_COMFYUI_URL,
+        changeOrigin: true
+      },
+
      ...(!DISABLE_TEMPLATES_PROXY
        ? {
            '/templates': {