diff --git a/www/src/components/CodeEditorHelper/index.tsx b/www/src/components/CodeEditorHelper/index.tsx
index 7d0c67ca..de9afc3d 100644
--- a/www/src/components/CodeEditorHelper/index.tsx
+++ b/www/src/components/CodeEditorHelper/index.tsx
@@ -17,14 +17,18 @@ function AvailableValueTag({ label, details }) {
   );
 }
 
-/* TODO implement parameter "tags" that defines available tags and values
-{
-    row: "You have access to the object 'row' at...",
-    ref: "...",
-    ...: ...
+export interface ICodeEditorHelperProps {
+  docLink: string;
+  additionalVariables?: {
+    key: string;
+    description: string;
+  }[];
 }
-*/
-export default function CodeEditorHelper({ docLink }) {
+
+export default function CodeEditorHelper({
+  docLink,
+  additionalVariables,
+}: ICodeEditorHelperProps) {
   const { tableState } = useFiretableContext();
   const availableVariables = [
     {
@@ -56,7 +60,7 @@ export default function CodeEditorHelper({ docLink }) {
     <Box marginBottom={1} display="flex" justifyContent="space-between">
       <Box>
         You have access to:{" "}
-        {availableVariables.map((v) => (
+        {availableVariables.concat(additionalVariables ?? []).map((v) => (
           <AvailableValueTag label={v.key} details={v.description} />
         ))}
       </Box>
diff --git a/www/src/components/Table/TableHeader/Sparks/SparkModal.tsx b/www/src/components/Table/TableHeader/Sparks/SparkModal.tsx
index a9f0a16b..4757c093 100644
--- a/www/src/components/Table/TableHeader/Sparks/SparkModal.tsx
+++ b/www/src/components/Table/TableHeader/Sparks/SparkModal.tsx
@@ -1,10 +1,11 @@
 import React, { useState } from "react";
 import _isEqual from "lodash/isEqual";
 import { ISpark, triggerTypes } from "./utils";
-import BackIcon from "@material-ui/icons/ArrowBack";
 import Modal from "components/Modal";
+import CodeEditorHelper from "components/CodeEditorHelper";
 import CodeEditor from "../../editors/CodeEditor";
 import { useFiretableContext } from "contexts/FiretableContext";
+import BackIcon from "@material-ui/icons/ArrowBack";
 import AddIcon from "@material-ui/icons/AddBox";
 import DeleteIcon from "@material-ui/icons/RemoveCircle";
 import {
@@ -23,6 +24,28 @@ import {
   Typography,
 } from "@material-ui/core";
 
+const additionalVariables = [
+  {
+    key: "change",
+    description:
+      "you can pass in field name to change.before.get() or change.after.get() to get changes",
+  },
+  {
+    key: "triggerType",
+    description: "triggerType indicates the type of the spark invocation",
+  },
+  {
+    key: "fieldTypes",
+    description:
+      "fieldTypes is a map of all fields and its corresponding Firetable column type",
+  },
+  {
+    key: "sparkConfig",
+    description:
+      "you can pass in field name to change.before.get() or change.after.get() to get changes",
+  },
+];
+
 const useStyles = makeStyles((theme) => ({
   modalRoot: {
     height: `calc(100vh - 250px)`,
@@ -387,14 +410,16 @@ export default function SparkModal({
                   }}
                 />
               </Box>
+              <CodeEditorHelper
+                docLink="https://github.com/FiretableProject/firetable/wiki/Sparks"
+                additionalVariables={additionalVariables}
+              />
             </TabPanel>
             <TabPanel value={tabIndex} index={1}>
               <Box className={classes.tabPanel} flexGrow={1}>
-                {/* TODO add editor help info */}
                 <Typography variant="overline" className={classes.label}>
                   Spark Body
                 </Typography>
-                {/* TODO break spark body fields into editable UI components */}
                 <CodeEditor
                   script={sparkObject.sparkBody}
                   height="100%"
@@ -414,6 +439,10 @@ export default function SparkModal({
                   }}
                 />
               </Box>
+              <CodeEditorHelper
+                docLink="https://github.com/FiretableProject/firetable/wiki/Sparks"
+                additionalVariables={additionalVariables}
+              />
             </TabPanel>
           </Box>
         </Box>
diff --git a/www/src/components/Table/editors/CodeEditor.tsx b/www/src/components/Table/editors/CodeEditor.tsx
index a4006d7c..a529e08a 100644
--- a/www/src/components/Table/editors/CodeEditor.tsx
+++ b/www/src/components/Table/editors/CodeEditor.tsx
@@ -187,6 +187,9 @@ export default function CodeEditor(props: any) {
         type Fields = Field[];
         type Trigger = "create" | "update" | "delete";
         type Triggers = Trigger[];
+
+        // function types that defines spark body and shuold run
+        type Condition = boolean | ((data: SparkContext) => boolean | Promise<boolean>);
       
         // the argument that the spark body takes in
         type SparkContext = {
@@ -197,13 +200,18 @@ export default function CodeEditor(props: any) {
           auth:adminauth.BaseAuth;
           change: any;
           triggerType: Triggers;
-          sparkConfig: any;
+          fieldTypes: any;
+          sparkConfig: {
+            label: string;
+            type: sring;
+            triggers: Trigger[];
+            shouldRun: Condition;
+            requiredFields: string[];
+            sparkBody: any;
+          };
           utilFns: any;
         }
 
-        // function types that defines spark body and shuold run
-        type Condition = boolean | ((data: SparkContext) => boolean | Promise<boolean>);
-
         // spark body definition
         type slackEmailBody = {
           channels?: string[];