diff --git a/src/workbench/editor/group.tsx b/src/workbench/editor/group.tsx
index 71ab3fdf6..73febe32a 100644
--- a/src/workbench/editor/group.tsx
+++ b/src/workbench/editor/group.tsx
@@ -87,8 +87,14 @@ function EditorGroup(props: IEditorGroupProps & IEditorController) {
             <EditorBreadcrumb breadcrumbs={tab.breadcrumb} />
             <div className={groupContainerClassName}>
                 {
-                    // Default we use monaco editor, but also you can customize by renderPanel() function
-                    tab.renderPanel || (
+                    // Default we use monaco editor, but also you can customize by renderPanel() function or a react element
+                    tab.renderPanel ? (
+                        typeof tab.renderPanel === 'function' ? (
+                            tab.renderPanel(tab.data)
+                        ) : (
+                            tab.renderPanel
+                        )
+                    ) : (
                         <MonacoEditor
                             options={{
                                 value: tab.data?.value,