diff --git a/web/app/components/snippets/hooks/use-snippet-init.ts b/web/app/components/snippets/hooks/use-snippet-init.ts
index c98e46c446..bacd5d21e9 100644
--- a/web/app/components/snippets/hooks/use-snippet-init.ts
+++ b/web/app/components/snippets/hooks/use-snippet-init.ts
@@ -9,6 +9,7 @@ import {
   buildSnippetDetailPayload,
   useSnippetApiDetail,
 } from '@/service/use-snippets'
+import { getSnippetDetailMock } from '@/service/use-snippets.mock'
 
 const normalizeNodesDefaultConfigs = (nodesDefaultConfigs: unknown) => {
   if (!nodesDefaultConfigs || typeof nodesDefaultConfigs !== 'object')
@@ -57,19 +58,25 @@ export const useSnippetInit = (snippetId: string) => {
     workflowStore.getState().setPublishedAt(publishedWorkflow.created_at)
   })
 
+  const mockData = useMemo(() => getSnippetDetailMock(snippetId), [snippetId])
+  const shouldUseMockData = !snippetApiDetail.isLoading && !snippetApiDetail.data && !!mockData
+
   const data = useMemo(() => {
     if (snippetApiDetail.data && !draftWorkflowQuery.isLoading)
       return buildSnippetDetailPayload(snippetApiDetail.data, draftWorkflowQuery.data)
 
+    if (shouldUseMockData)
+      return mockData
+
     if (snippetApiDetail.error && isNotFoundError(snippetApiDetail.error))
       return null
 
     return undefined
-  }, [draftWorkflowQuery.data, draftWorkflowQuery.isLoading, snippetApiDetail.data, snippetApiDetail.error])
+  }, [draftWorkflowQuery.data, draftWorkflowQuery.isLoading, mockData, shouldUseMockData, snippetApiDetail.data, snippetApiDetail.error])
 
   return {
     ...snippetApiDetail,
     data,
-    isLoading: snippetApiDetail.isLoading || draftWorkflowQuery.isLoading,
+    isLoading: shouldUseMockData ? false : snippetApiDetail.isLoading || draftWorkflowQuery.isLoading,
   }
 }
diff --git a/web/service/use-snippets.mock.ts b/web/service/use-snippets.mock.ts
index 222652e0e4..60408340b2 100644
--- a/web/service/use-snippets.mock.ts
+++ b/web/service/use-snippets.mock.ts
@@ -27,6 +27,18 @@ export const getSnippetListMock = (): SnippetListItem[] => ([
   },
 ])
 
+const createSnippetMock = (snippetId: string): SnippetListItem => ({
+  id: snippetId,
+  name: 'Tone Rewriter',
+  description: 'Rewrites rough drafts into a concise, professional tone for internal stakeholder updates.',
+  author: 'Evan',
+  updatedAt: 'Updated 2h ago',
+  usage: 'Used 19 times',
+  icon: '🪄',
+  iconBackground: '#E0EAFF',
+  status: 'Draft',
+})
+
 const getSnippetInputFieldsMock = (): SnippetInputField[] => ([
   {
     type: PipelineInputVarType.textInput,
@@ -175,11 +187,12 @@ const getSnippetGraphMock = (): SnippetDetailPayload['graph'] => ({
   ],
 })
 
-const getSnippetDetailMock = (snippetId: string): SnippetDetailPayload | null => {
-  const snippet = getSnippetListMock().find(item => item.id === snippetId)
-  if (!snippet)
+export const getSnippetDetailMock = (snippetId: string): SnippetDetailPayload | null => {
+  if (!snippetId)
     return null
 
+  const snippet = getSnippetListMock().find(item => item.id === snippetId) ?? createSnippetMock(snippetId)
+
   const inputFields = getSnippetInputFieldsMock()
 
   return {