chore: add demo link

apps/docs/src/en/guide/advanced/form.mdx

@@ -6,7 +6,9 @@
 
 Node engine is required to use form
 
-```tsx pure title="use-editor-props.ts"
+[> API Detail](https://github.com/bytedance/flowgram.ai/blob/main/packages/client/editor/src/preset/editor-props.ts#L54)
+
+```tsx pure title="use-editor-props.ts" {3}
 
 // EditorProps
 {
@@ -14,21 +16,25 @@ Node engine is required to use form
     /**
      * Node engine is required to use form
      */
-    enable: true
-    /**
-     * The component to render when the node has an error
-     */
-    nodeErrorRender?: NodeErrorRender;
-    /**
-     * The component to render when the node has no content
-     */
-    nodePlaceholderRender?: NodePlaceholderRender;
+    enable: true;
+    materials: {
+      /**
+       * The component to render when the node has an error
+       */
+      nodeErrorRender?: NodeErrorRender;
+      /**
+       * The component to render when the node has no content
+       */
+      nodePlaceholderRender?: NodePlaceholderRender;
+    }
   }
 }
 ```
 
 ### Node Configuration formMeta
 
+[> node-registries.ts](https://github.com/bytedance/flowgram.ai/blob/main/apps/demo-fixed-layout-simple/src/node-registries.ts)
+
 ```tsx pure title="node-registries.ts"
 import { FlowNodeRegistry, ValidateTrigger } from '@flowgram.ai/fixed-layout-editor';
 
@@ -69,6 +75,8 @@ export const nodeRegistries: FlowNodeRegistry[] = [
 
 ### Add form to node rendering
 
+[> base-node.tsx](https://github.com/bytedance/flowgram.ai/blob/main/apps/demo-fixed-layout-simple/src/components/base-node.tsx)
+
 ```tsx pure title="base-node.tsx"
 
 export const BaseNode = () => {
@@ -90,6 +98,8 @@ export const BaseNode = () => {
 
 ## Field
 
+[> Demo Detail](https://github.com/bytedance/flowgram.ai/blob/main/apps/demo-fixed-layout/src/nodes/start/form-meta.tsx)
+
 The rendering part of Field, supports three writing methods, as follows:
 
 :::note `renderProps` parameter
@@ -198,6 +208,8 @@ export const arrayMeta: FormMeta = {
 
 ## Validation
 
+[> Demo Detail](https://github.com/bytedance/flowgram.ai/blob/main/apps/demo-fixed-layout/src/form-components/form-inputs/index.tsx#L37)
+
 ### Validation Configuration
 
 Validation logic is configured globally, and the validation logic is declared by the form item path

apps/docs/src/en/guide/advanced/history.mdx

@@ -5,11 +5,13 @@ Undo/Redo is a plugin of FlowGram.AI, which is provided in both @flowgram.ai/fix
 
 ## 1. Quick Start
 
+[> Demo Detail](https://github.com/bytedance/flowgram.ai/blob/main/apps/demo-fixed-layout/src/hooks/use-editor-props.ts#L125)
+
 ### 1.1. Enable history
 Before using the Undo/Redo feature, you need to introduce the editor, using the fixed layout editor as an example.
 
 1. Add dependencies in package.json
-```tsx pure title="use-editor-props.tsx"
+```tsx pure title="use-editor-props.tsx" {4}
 export function useEditorProps() {
   return useMemo(
     () => ({

apps/docs/src/en/guide/advanced/variable.mdx

@@ -2,7 +2,9 @@
 
 ## Enable Variable Engine
 
-```tsx pure title="use-editor-props.ts"
+[> API Detail](https://flowgram.ai/auto-docs/editor/interfaces/VariablePluginOptions.html)
+
+```tsx pure title="use-editor-props.ts" {3}
 
 // EditorProps
 {
@@ -17,9 +19,11 @@
 
 ## Node Output Variables
 
+[> Demo Detail](https://github.com/bytedance/flowgram.ai/blob/main/apps/demo-fixed-layout/src/plugins/sync-variable-plugin/sync-variable-plugin.ts#L25)
+
 ### Set Output Variables through FlowNodeVariableData
 
-```tsx pure title="variable-plugin.tsx"
+```tsx pure title="sync-variable-plugin.tsx"
 import {
   FlowNodeVariableData,
   ASTFactory,

apps/docs/src/zh/guide/advanced/form.mdx

@@ -6,7 +6,9 @@
 
 需要开启节点引擎才能使用
 
-```tsx pure title="use-editor-props.ts"
+[> API Detail](https://github.com/bytedance/flowgram.ai/blob/main/packages/client/editor/src/preset/editor-props.ts#L54)
+
+```tsx pure title="use-editor-props.ts" {3}
 
 // EditorProps
 {
@@ -14,21 +16,25 @@
     /**
      * 需要开启节点引擎才能使用
      */
-    enable: true
-    /**
-     * 节点内部报错的渲染组件
-     */
-    nodeErrorRender?: NodeErrorRender;
-    /**
-     * 节点无内容时的渲染组件
-     */
-    nodePlaceholderRender?: NodePlaceholderRender;
+    enable: true;
+    materials: {
+      /**
+       * 节点内部报错的渲染组件
+       */
+      nodeErrorRender?: NodeErrorRender;
+      /**
+       * 节点无内容时的渲染组件
+       */
+      nodePlaceholderRender?: NodePlaceholderRender;
+    }
   }
 }
 ```
 
 ### 节点配置 formMeta
 
+[> node-registries.ts](https://github.com/bytedance/flowgram.ai/blob/main/apps/demo-fixed-layout-simple/src/node-registries.ts)
+
 ```tsx pure title="node-registries.ts"
 import { FlowNodeRegistry, ValidateTrigger } from '@flowgram.ai/fixed-layout-editor';
 
@@ -69,6 +75,8 @@ export const nodeRegistries: FlowNodeRegistry[] = [
 
 ### 节点渲染添加表单
 
+[> base-node.tsx](https://github.com/bytedance/flowgram.ai/blob/main/apps/demo-fixed-layout-simple/src/components/base-node.tsx)
+
 ```tsx pure title="base-node.tsx"
 
 export const BaseNode = () => {
@@ -90,6 +98,8 @@ export const BaseNode = () => {
 
 ## Field
 
+[> Demo Detail](https://github.com/bytedance/flowgram.ai/blob/main/apps/demo-fixed-layout/src/nodes/start/form-meta.tsx)
+
 Field 的渲染部分，支持三种写法，如下:
 
 :::note `renderProps` 参数
@@ -198,6 +208,8 @@ export const arrayMeta: FormMeta = {
 
 ## 校验
 
+[> Demo Detail](https://github.com/bytedance/flowgram.ai/blob/main/apps/demo-fixed-layout/src/form-components/form-inputs/index.tsx#L37)
+
 ### 校验配置
 
 校验逻辑配置在全局，通过表单项路径声明校验逻辑

apps/docs/src/zh/guide/advanced/history.mdx

@@ -5,11 +5,13 @@ Undo/Redo 是 FlowGram.AI 的一个插件，在 @flowgram.ai/fixed-layout-editor
 
 ## 1. 快速开始
 
+[> Demo Detail](https://github.com/bytedance/flowgram.ai/blob/main/apps/demo-fixed-layout/src/hooks/use-editor-props.ts#L125)
+
 ### 1.1. 开启 history
 使用 Undo/Redo 功能前需要先引入编辑器，以固定布局编辑器为例。
 
 1. package.json 添加依赖
-```tsx pure title="use-editor-props.tsx"
+```tsx pure title="use-editor-props.tsx" {4}
 export function useEditorProps() {
   return useMemo(
     () => ({

apps/docs/src/zh/guide/advanced/variable.mdx

@@ -2,7 +2,9 @@
 
 ## 开启变量引擎
 
-```tsx pure title="use-editor-props.ts"
+[> API Detail](https://flowgram.ai/auto-docs/editor/interfaces/VariablePluginOptions.html)
+
+```tsx pure title="use-editor-props.ts" {3}
 
 // EditorProps
 {
@@ -17,9 +19,11 @@
 
 ## 节点输出变量
 
+[> Demo Detail](https://github.com/bytedance/flowgram.ai/blob/main/apps/demo-fixed-layout/src/plugins/sync-variable-plugin/sync-variable-plugin.ts#L25)
+
 ### 通过 FlowNodeVariableData 设置输出变量
 
-```tsx pure title="variable-plugin.tsx"
+```tsx pure title="sync-variable-plugin.tsx"
 import {
   FlowNodeVariableData,
   ASTFactory,