diff --git a/apps/design-system/src/components/VisualJsonSchemaEditor.stories.tsx b/apps/design-system/src/components/VisualJsonSchemaEditor.stories.tsx
new file mode 100644
index 000000000..394eeabae
--- /dev/null
+++ b/apps/design-system/src/components/VisualJsonSchemaEditor.stories.tsx
@@ -0,0 +1,284 @@
+import React, { useState } from 'react';
+import { VisualEditor, CodeEditor, Examples } from '@asyncapi/studio-ui';
+
+export default {
+  component: VisualEditor,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+type TemplateProps = {
+  initialSchema: string;
+};
+
+const Template: React.FC<TemplateProps> = ({ initialSchema }) => {
+  const [schema, setSchema] = useState<string>(initialSchema);
+  const [editorType, setEditorType] = useState<'visual' | 'code' | 'examples'>('visual');
+
+
+  return (
+    <div>
+      <div style={{ width: '45vw', minWidth:'550px', background: '#0F172A', color: '#CBD5E1', fontFamily: 'Inter, sans-serif' }}>
+        <button style={{padding: 5}} onClick={() => setEditorType('visual')}>Visual Editor </button>
+        <button style={{padding: 5}} onClick={() => setEditorType('code')}>Code Editor </button>
+        <button style={{padding: 5}} onClick={() => setEditorType('examples')}>Examples </button>
+      </div>
+      <div>
+        {editorType === 'visual' && (
+          <VisualEditor schema={schema} onSchemaChange={setSchema} />
+        )}
+        {editorType === 'code' && (
+          <CodeEditor schema={schema} onSchemaChange={setSchema} />
+        )}
+        {editorType === 'examples' && (
+          <Examples/>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const Sample_Schema = () => (
+  <Template
+    initialSchema={JSON.stringify({
+      "type": "object",
+      "properties": {
+     
+        "age": {
+          "type": "integer"
+        },
+        "address": {
+          "type": "object",
+          "properties": {
+            "street": {
+              "type": "string"
+            },
+            "city": {
+              "type": "string"
+            },
+            "pincode":{
+              "type": "number"
+            }
+          },
+          "required": [
+            "street",
+            "city"
+          ]
+        }
+      }
+    }, null, 2)}
+  />
+);
+
+export const Schema_with_array_object = () => (
+  <Template
+    initialSchema={JSON.stringify({
+      "type": "object",
+      "properties": {
+        "firstName": {
+          "type": "string"
+        },
+        "lastName": {
+          "type": "string"
+        },
+        "age": {
+          "type": "boolean"
+        },
+        "height": {
+          "type": ["integer", "null"]
+        },
+        "friends": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "firstName": {
+                "type": "string"
+              }
+            },
+            "required": ["firstName"]
+          }
+        }
+      },
+      "required": ["firstName", "lastName"]
+    }
+    , null, 2)}
+  />
+);
+
+export const WithArray_obj = () => (
+  <Template
+    initialSchema={JSON.stringify({
+      "type": "object",
+      "properties": {
+        "books": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "title": {
+                "type": "string"
+              },
+              "author": {
+                "type": "string"
+              }
+            }
+          }
+        }
+      }
+    }, null, 2)}
+  />
+);
+
+export const WithArray_obj_and_obj = () => (
+  <Template
+    initialSchema={JSON.stringify({
+      "type": "object",
+      "properties": {
+          "books": {
+              "type": "array",
+              "items": {
+                  "type": "object",
+                  "properties": {
+                      "title": {"type": "string"},
+                      "author": {"type": "string"}
+                  },
+                  "required": ["title"]
+              }
+          },
+          "list": {
+              "type": "object",
+              "properties": {
+                  "hii": {"type": "string"}
+              }
+          }
+      },
+      "required": ["books", "list"]
+    }, null, 2)}
+  />
+);
+
+export const Array_of_string = () => (
+  <Template
+    initialSchema={JSON.stringify({
+      "type": "object",
+      "properties": {
+        "numbers": {
+          "type": "array",
+          "items": {
+            "type": "number"
+          }
+        },
+        "aString": {
+          "type": "string"
+        },
+        "aNumber": {
+          "type": "number"
+        }
+      },
+      "required": ["numbers", "aString", "aNumber"]
+    }, null, 2)}
+  />
+);
+
+export const Root_Array_of_Object = () => (
+  <Template
+    initialSchema={JSON.stringify({
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": "integer"
+          },
+          "name": {
+            "type": "string"
+          },
+          "isActive": {
+            "type": "boolean"
+          }
+        },
+        "required": ["id", "name"]
+      }
+    }, null, 2)}
+  />
+);
+
+export const two_property_having_same_name = () => (
+  <Template
+    initialSchema={JSON.stringify({
+
+      "type": "object",
+      "properties": {
+        "address": {
+          "type": "object",
+          "properties": {
+            "address": { "type": "object",
+            "properties": {
+              "street": { "type": "string" },
+              "city": { "type": "string" }
+            }
+          }
+          }
+        }
+      }
+    }
+    
+    , null, 2)}
+  />
+);
+
+export const nestead_array = () => (
+  <Template
+    initialSchema={JSON.stringify(
+      {
+        "type": "object",
+        "properties": {
+          "age": {
+            "type": "integer"
+          },
+          "address": {
+            "type": "object",
+            "properties": {
+              "street": {
+                "type": "string"
+              },
+              "city": {
+                "type": "string"
+              },
+              "pincode": {
+                "type": "number"
+              },
+              "contact_number": {
+                "type": "array",
+                "items": {
+                  "type": "object",
+                  "properties": {
+                    "name": {
+                      "type": "string"
+                    },
+                    "mobile":{
+                      "type": "stirng"
+                    },
+                    "address": {
+                      "type": "object",
+                      "properties":{
+                        "city":{
+                          "type": "string"
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            },
+            "required": [
+              "street",
+              "city"
+            ]
+          }
+        }
+      }, null, 2)}
+  />
+);
+
diff --git a/package-lock.json b/package-lock.json
index c95a3d7ce..523927e83 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
         "packages/*"
       ],
       "dependencies": {
-        "@changesets/cli": "^2.26.2"
+        "@changesets/cli": "^2.26.2",
+        "lodash": "^4.17.21"
       },
       "devDependencies": {
         "esbuild": "^0.19.0",
diff --git a/package.json b/package.json
index 791b222d1..5210ebfb0 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
   ],
   "packageManager": "npm@8.19.3",
   "dependencies": {
-    "@changesets/cli": "^2.26.2"
+    "@changesets/cli": "^2.26.2",
+    "lodash": "^4.17.21"
   }
 }
diff --git a/packages/ui/components/VisualEditor.tsx b/packages/ui/components/VisualEditor.tsx
new file mode 100644
index 000000000..1d8a661d1
--- /dev/null
+++ b/packages/ui/components/VisualEditor.tsx
@@ -0,0 +1,101 @@
+import React, { useState, useEffect } from 'react';
+import SchemaObject from './VisualEditor/SchemaObject';
+import _ from 'lodash';
+
+interface VisualEditorProps {
+    schema: string;
+    onSchemaChange: (newSchema: string) => void;
+}
+
+interface SchemaObjectInterface {
+    type?: string;
+    items?: any;
+    properties?: { [key: string]: any };
+    required?: string[];
+}
+
+export const VisualEditor: React.FC<VisualEditorProps> = ({ schema, onSchemaChange }) => {
+  const selectStyle = {
+    backgroundColor: '#0F172A',
+    color: 'white',
+    borderRadius: '3px',
+    fontSize: '12px',
+    fontFamily: 'Inter, sans-serif'
+  };
+  
+  const [schemaObject, setSchemaObject] = useState<SchemaObjectInterface>({});
+
+  useEffect(() => {
+    const safeParse = _.attempt(JSON.parse, schema);
+    if (!_.isError(safeParse)) {
+      console.log('Successfully parsed schema.');
+      setSchemaObject(safeParse);
+    } else {
+      console.error('Invalid JSON schema:', safeParse.message);
+    }
+  }, [schema]);
+
+  const handleSchemaChange = (updatedPart: any) => {
+    const updatedSchema = { ...schemaObject, ...updatedPart };
+    const newSchemaString = JSON.stringify(updatedSchema);
+    console.log('Schema updated:', newSchemaString);
+    setSchemaObject(updatedSchema);
+    onSchemaChange(newSchemaString);
+  };
+
+  const renderRootTypeSelector = () => (
+    <div>
+      <select
+        value={schemaObject.type || ''}
+        onChange={(e) => handleSchemaChange({ type: e.target.value })}
+        style={selectStyle}
+      >
+        <option value="">Select root type</option>
+        <option value="object">Object</option>
+        <option value="array">Array</option>
+        <option value="string">String</option>
+        <option value="number">Number</option>
+        <option value="boolean">Boolean</option>
+      </select>
+    </div>
+  );
+
+  const renderArrayItemTypeSelector = () => {
+    if (schemaObject.type === 'array') {
+      return (
+        <div>
+          <strong>Array Item Type:</strong>
+          <select
+            value={schemaObject.items?.type || ''}
+            onChange={(e) => handleSchemaChange({ items: { ...schemaObject.items, type: e.target.value } })}
+            style={selectStyle}
+          >
+            <option value="">Select item type</option>
+            <option value="string">String</option>
+            <option value="number">Number</option>
+            <option value="boolean">Boolean</option>
+            <option value="object">Object</option>
+            <option value="array">Array</option>
+          </select>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <div className="visual-editor" style={{ width: '45vw', minWidth: '550px', background: '#0F172A', color: '#CBD5E1', fontFamily: 'Inter, sans-serif', padding: '20px'}}>
+      {renderRootTypeSelector()}
+      {renderArrayItemTypeSelector()}
+
+      <SchemaObject
+        schema={schemaObject.type === 'array' ? schemaObject.items : schemaObject}
+        onSchemaChange={(newSchema: any) => handleSchemaChange(newSchema)}
+        path={schemaObject.type === 'array' ? 'items' : ''}
+        level={0}
+      />
+    </div>
+  );
+};
+
+export default VisualEditor;
\ No newline at end of file
diff --git a/packages/ui/components/VisualEditor/CodeEditor.tsx b/packages/ui/components/VisualEditor/CodeEditor.tsx
new file mode 100644
index 000000000..937513f3f
--- /dev/null
+++ b/packages/ui/components/VisualEditor/CodeEditor.tsx
@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+import _ from 'lodash';
+import debounce from 'lodash/debounce';
+
+interface CodeEditorProps {
+  schema: string;
+  onSchemaChange: (newSchema: string) => void;
+}
+
+export const CodeEditor: React.FC<CodeEditorProps> = ({ schema, onSchemaChange }) => {
+  const [value, setValue] = useState<string>(schema);
+  const [error, setError] = useState<string>('');
+
+  useEffect(() => {
+    setValue(schema);
+    setError('');
+  }, [schema]);
+
+  const handleChange = debounce((newValue: string) => {
+    try {
+      setError('');
+      onSchemaChange(newValue);
+      console.log('Schema valid and updated from Code Editor:', newValue);
+    } catch (e) {
+      if (_.isError(e)) {
+        setError(`Invalid JSON: ${e.message}`);
+        console.error('Error updating schema from Code Editor:', e.message);
+      }
+    }
+  }, 250);
+
+  const handleTextAreaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = e.target.value;
+    setValue(newValue);
+    handleChange(newValue);
+  };
+
+  return (
+    <div className="code-editor">
+      <h2>Code Editor</h2>
+      {error && <p style={{ color: 'red' }}>Error: {error}</p>}
+      <textarea
+        value={value}
+        onChange={handleTextAreaChange}
+        style={{ width: '45vw', minWidth: '550px', height: '400px' }}
+      />
+    </div>
+  );
+};
+
+export default CodeEditor;
diff --git a/packages/ui/components/VisualEditor/Example.tsx b/packages/ui/components/VisualEditor/Example.tsx
new file mode 100644
index 000000000..3b47ec0f6
--- /dev/null
+++ b/packages/ui/components/VisualEditor/Example.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const Examples: React.FC = () => {
+  return (
+    <div className=" width: '50%', border border-gray-500 rounded p-4">
+      <h2>Examples</h2>
+      {/* Add example(future development) */}
+      <p>This section will show examples of how to use the schema in the future.</p>
+    </div>
+  );
+};
+export default Examples;
\ No newline at end of file
diff --git a/packages/ui/components/VisualEditor/PropertyControls.tsx b/packages/ui/components/VisualEditor/PropertyControls.tsx
new file mode 100644
index 000000000..d2f9d850f
--- /dev/null
+++ b/packages/ui/components/VisualEditor/PropertyControls.tsx
@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import _ from 'lodash';
+
+interface PropertyControlsProps {
+    onAdd: (path: string, property: { name: string; schema: any }) => void;
+    schemaPath?: string;
+    level: number;
+}
+
+const PropertyControls: React.FC<PropertyControlsProps> = ({ onAdd, schemaPath, level }) => {
+  const inputAndSelectStyle = {
+    backgroundColor: '#0F172A',
+    color: 'white',
+    borderRadius: '3px',
+    padding: '2px',
+    fontSize: '14px',
+    fontFamily: 'Inter, Helvetica'
+  };
+
+  const [key, setKey] = useState('');
+  const [type, setType] = useState('');
+  const [error, setError] = useState('');
+  const [itemType, setItemType] = useState('');
+
+  const handleAddProperty = () => {
+    if (_.isEmpty(key) || _.isEmpty(type)) {
+      setError('Both property name and type are required.');
+      return;
+    }
+
+    const fullPath = schemaPath ? `${schemaPath}.properties.${key}` : `properties.${key}`;
+    console.log('Full Full Path :)', fullPath);
+    console.log(`Adding new property at: ${fullPath}`);
+
+    onAdd(fullPath, {
+      type, 
+      ...(type === 'object' && { properties: {} }), 
+      ...(type === 'array' && { items: { type: itemType } }) 
+    } as any); 
+
+    setKey('');
+    setType('');
+    setItemType('');
+    setError('');
+  };
+
+  return (
+    <div style={{
+      marginLeft: `${level === 0 ? 20 : level * 20}px`,
+      color: '#CBD5E1',
+      fontFamily: 'Inter, sans-serif',
+      borderLeft: '1px solid grey',
+      paddingLeft: '10px',
+      marginTop: '-1px',
+    }}>
+      <div className="flex gap-[6px] items-center mt-[6px] mb-[6px]">
+        <input
+          type="text"
+          value={key}
+          onChange={(e) => setKey(e.target.value)}
+          placeholder="Property name"
+          style={inputAndSelectStyle}
+        />
+        <select value={type} onChange={(e) => setType(e.target.value)} style={inputAndSelectStyle}>
+          <option value="">Select type</option>
+          <option value="string">String</option>
+          <option value="number">Number</option>
+          <option value="boolean">Boolean</option>
+          <option value="object">Object</option>
+          <option value="array">Array</option>
+        </select>
+        {type === 'array' && (
+          <select value={itemType} onChange={(e) => setItemType(e.target.value)} style={inputAndSelectStyle}>
+            <option value="">Select item type</option>
+            <option value="string">String</option>
+            <option value="number">Number</option>
+            <option value="boolean">Boolean</option>
+            <option value="object">Object</option>
+          </select>
+        )}
+        <button onClick={handleAddProperty}>Add Property</button>
+      </div>
+      {error && <p style={{ color: '#DB2777' }}>{error}</p>}
+    </div>
+  );
+};
+
+export default PropertyControls;
diff --git a/packages/ui/components/VisualEditor/SchemaObject.tsx b/packages/ui/components/VisualEditor/SchemaObject.tsx
new file mode 100644
index 000000000..36b5661d0
--- /dev/null
+++ b/packages/ui/components/VisualEditor/SchemaObject.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import _ from 'lodash';
+import SchemaProperty from './SchemaProperty';
+import PropertyControls from './PropertyControls';
+
+interface SchemaObjectProps {
+  schema: any;
+  onSchemaChange: (newSchema: any) => void;
+  path: string;
+  level: number;
+}
+
+const SchemaObject: React.FC<SchemaObjectProps> = ({
+  schema,
+  onSchemaChange,
+  path,
+  level,
+}) => {
+  console.log(`Rendering SchemaObject. Path: ${path}, Level: ${level}`);
+
+  const handleAddProperty = (fullPath: string, propertySchema: any) => {
+    const updatedSchema = _.cloneDeep(schema);
+    const normalizedPath = fullPath.startsWith('.') ? fullPath.slice(1) : fullPath;
+    console.log('Normalised path',normalizedPath);
+    _.set(updatedSchema, normalizedPath, propertySchema);
+
+    console.log(`Property added at ${normalizedPath}`, updatedSchema);
+    onSchemaChange(updatedSchema);
+  };
+
+  const handleRemoveProperty = (propertyPath: string) => {
+    const currentSchema = _.cloneDeep(schema);
+    _.unset(currentSchema, propertyPath);
+    console.log(`Removed property at ${propertyPath}`);
+    onSchemaChange(currentSchema);
+  };
+
+  const handleTypeChange = (propertyPath: string, newSchema: any) => { // Added types to resolve TS7006
+    console.log(`handleTypeChange called with path: ${propertyPath}, newType: ${newSchema}`);
+    const currentSchema = _.cloneDeep(schema);
+    _.set(currentSchema, propertyPath, newSchema);
+    console.log(`Type changed at ${propertyPath}`, newSchema);
+    onSchemaChange(currentSchema);
+  };
+
+  return (
+    <div style={{ margin: '10px 0' }}>
+      {_.map(schema.properties, (propertySchema, propertyName) => (
+        <SchemaProperty
+          key={propertyName}
+          name={propertyName}
+          schema={propertySchema}
+          onRemove={handleRemoveProperty}
+          onToggleRequired={() => console.log('Toggling required')}
+          isRequired={_.includes(schema.required, propertyName)}
+          onTypeChange={handleTypeChange}
+          onAddNestedProperty={handleAddProperty}
+          onRemoveNestedProperty={handleRemoveProperty}
+          onToggleNestedRequired={() => console.log('Toggling nested required')}
+          path={`${path}.properties.${propertyName}`}
+          level={level + 1}
+        />
+      ))}
+      <PropertyControls
+        onAdd={handleAddProperty}
+        schemaPath={path}
+        level={level}
+      />
+    </div>
+  );
+};
+
+export default SchemaObject;
diff --git a/packages/ui/components/VisualEditor/SchemaProperty.tsx b/packages/ui/components/VisualEditor/SchemaProperty.tsx
new file mode 100644
index 000000000..c402cd96a
--- /dev/null
+++ b/packages/ui/components/VisualEditor/SchemaProperty.tsx
@@ -0,0 +1,148 @@
+import React from 'react';
+import _ from 'lodash';
+import SchemaObject from './SchemaObject';
+import PropertyControls from './PropertyControls';
+import { RequiredIcon, NotRequiredIcon, TrashIcon } from '../icons';
+
+interface SchemaPropertyProps {
+    name: string;
+    schema: any;
+    onRemove: (path: string, propertyName: string) => void;
+    onToggleRequired: (path: string, propertyName: string) => void;
+    isRequired: boolean;
+    onTypeChange: (path: string, propertyName: string, newSchema: any) => void;
+    onAddNestedProperty: (fullPath: string, newProperty: any) => void;
+    onRemoveNestedProperty: (path: string, propertyName: string) => void;
+    onToggleNestedRequired: (path: string, propertyName: string) => void;
+    path: string;
+    level: number;
+}
+
+const SchemaProperty: React.FC<SchemaPropertyProps> = ({
+  name, 
+  schema, 
+  onRemove, 
+  onToggleRequired, 
+  isRequired, 
+  onTypeChange, 
+  onAddNestedProperty, 
+  onRemoveNestedProperty, 
+  onToggleNestedRequired, 
+  path, 
+  level 
+}) => {
+  console.log(`Rendering SchemaProperty. Name: ${name}, Path: ${path}, Level: ${level}`);
+
+  const handleTypeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const newType = event.target.value;
+    const updatedSchema = _.cloneDeep(schema);
+    updatedSchema.type = newType;
+
+    if (newType === 'array') {
+      updatedSchema.items = updatedSchema.items || { type: 'string' };
+    } else if (newType === 'object') {
+      updatedSchema.properties = updatedSchema.properties || {};
+    }
+
+    console.log(`Type changed for ${name} at ${path} to ${newType}`);
+    onTypeChange(path, name, updatedSchema);
+  };
+
+  const handleRemove = () => {
+    console.log(`Removing property ${name} at ${path}`);
+    onRemove(path, name);
+  };
+
+  const handleToggleRequired = () => {
+    console.log(`Toggling required for ${name} at ${path}`);
+    onToggleRequired(path, name);
+  };
+
+  const renderArrayItemsProperties = () => {
+    if (schema.type === 'array' && schema.items && schema.items.type === 'object') {
+      return (
+        <SchemaObject
+          schema={schema.items}
+          onSchemaChange={(newItemsSchema) => {
+            const updatedSchema = { ...schema, items: newItemsSchema };
+            onTypeChange(path, name, updatedSchema);
+            //Need to updated schema from local schema
+          }}
+          path={''}
+          level={level + 1}
+        />
+      );
+    }
+    return null;
+  };
+  
+  const renderNestedProperties = () => {
+    if (schema.type === 'object') {
+      return _.map(schema.properties, (nestedSchema, nestedName) => (
+        <SchemaProperty
+          key={nestedName}
+          name={nestedName}
+          schema={nestedSchema}
+          onRemove={onRemoveNestedProperty}
+          onToggleRequired={onToggleNestedRequired}
+          isRequired={_.includes(schema.required, nestedName)}
+          onTypeChange={onTypeChange}
+          onAddNestedProperty={onAddNestedProperty}
+          onRemoveNestedProperty={onRemoveNestedProperty}
+          onToggleNestedRequired={onToggleNestedRequired}
+          path={`${path}.properties.${nestedName}`}
+          level={level + 1}
+        />
+      ));
+    }
+    return null;
+  };
+
+  return (
+    <div style={{ marginLeft: `${level * 20}px`, borderLeft: '1px solid grey', paddingLeft: '10px', marginBottom: '-8px' }}>
+      <div className="flex items-center justify-between">
+        <div>
+          <strong className="[font-family:'Inter',Helvetica] font-medium text-extendedblue-gray300">{name}</strong>
+          <select
+            value={schema.type}
+            onChange={handleTypeChange}
+            style={{
+              backgroundColor: '#0F172A',
+              color: 'white',
+              borderRadius: '3px',
+              padding: '2px',
+              fontSize: '14px',
+              fontFamily: 'Inter, Helvetica'
+            }}
+          >
+            <option value="">Select type</option>
+            <option value="string">String</option>
+            <option value="number">Number</option>
+            <option value="boolean">Boolean</option>
+            <option value="object">Object</option>
+            <option value="array">Array</option>
+          </select>
+        </div>
+        <div style={{ marginLeft: 'auto' }}>
+          <button style={{ marginRight: '10px' }} onClick={handleRemove}>
+            <TrashIcon className="w-4 h-4" />
+          </button>
+          <button onClick={handleToggleRequired}>
+            {isRequired ? <RequiredIcon className="w-4 h-4" /> : <NotRequiredIcon className="w-4 h-4" />}
+          </button>
+        </div>
+      </div>
+      {renderNestedProperties()}
+      {renderArrayItemsProperties()}
+      {schema.type === 'object' && (
+        <PropertyControls
+          onAdd={onAddNestedProperty}
+          schemaPath={`${path}`}
+          level={level + 1}
+        />
+      )}
+    </div>
+  );
+};
+
+export default SchemaProperty;
diff --git a/packages/ui/components/icons/NotRequiredIcon.tsx b/packages/ui/components/icons/NotRequiredIcon.tsx
new file mode 100644
index 000000000..d45df4281
--- /dev/null
+++ b/packages/ui/components/icons/NotRequiredIcon.tsx
@@ -0,0 +1,13 @@
+const NotRequiredIcon = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16" height="16" viewBox="0 0 16 16" fill="none"
+    {...props}
+  >
+    <path fillRule="evenodd" clipRule="evenodd" d="M8.00033 0L6.80505 1.30539L5.22645 0.481353L4.55514 2.11075L2.78388 1.86808L2.71989 3.62748L0.96996 3.9955L1.5186 5.67157L0.000666639 6.60894L1.10129 8.001L0 9.39239L1.5186 10.3291L0.970626 12.0058L2.71989 12.3745L2.78388 14.1333L4.55514 13.8906L5.22645 15.5206L6.80505 14.6966L8.00033 16L9.19695 14.6966L10.7749 15.5206L11.4462 13.8906L13.2181 14.1333L13.2828 12.3745L15.032 12.0058L14.4827 10.3291L16 9.39239L14.8994 8.001L16 6.60894L14.4827 5.67157L15.032 3.9955L13.2828 3.62748L13.2181 1.86808L11.4462 2.11075L10.7749 0.481353L9.19695 1.30539L8.00033 0ZM8.00033 1.77941L8.93363 2.79812L10.1642 2.15609L10.6889 3.42748L12.0662 3.2388L12.1155 4.61019L13.4734 4.89554L13.0461 6.19692L14.2194 6.92162L13.3674 8.00167L14.2194 9.07904L13.0461 9.80307L13.4734 11.1065L12.1155 11.3925L12.0662 12.7625L10.6889 12.5739L10.1642 13.8466L8.93363 13.2039L8.00033 14.2219L7.06771 13.2039L5.83709 13.8466L5.31311 12.5739L3.93584 12.7625L3.88717 11.3925L2.52856 11.1065L2.95521 9.80307L1.78126 9.07904L2.63389 8.00167L1.78059 6.92229L2.95588 6.19692L2.52923 4.89554L3.88717 4.61019L3.93584 3.2388L5.31311 3.42748L5.83709 2.15609L7.06771 2.79812L8.00033 1.77941Z" fill="#334155"/>
+  </svg>
+);
+
+NotRequiredIcon.displayName = 'NotRequiredIcon';
+
+export default NotRequiredIcon
diff --git a/packages/ui/components/icons/RequiredIcon.tsx b/packages/ui/components/icons/RequiredIcon.tsx
new file mode 100644
index 000000000..70b165a8b
--- /dev/null
+++ b/packages/ui/components/icons/RequiredIcon.tsx
@@ -0,0 +1,13 @@
+const RequiredIcon = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16" height="16" viewBox="0 0 16 16" fill="none"
+    {...props}
+  >
+    <path fillRule="evenodd" clipRule="evenodd" d="M8.00033 0L6.80505 1.30539L5.22645 0.481353L4.55514 2.11075L2.78388 1.86808L2.71989 3.62748L0.96996 3.9955L1.5186 5.67157L0.000666639 6.60894L1.10129 8.001L0 9.39239L1.5186 10.3291L0.970626 12.0058L2.71989 12.3745L2.78388 14.1333L4.55514 13.8906L5.22645 15.5206L6.80505 14.6966L8.00033 16L9.19695 14.6966L10.7749 15.5206L11.4462 13.8906L13.2181 14.1333L13.2828 12.3745L15.032 12.0058L14.4827 10.3291L16 9.39239L14.8994 8.001L16 6.60894L14.4827 5.67157L15.032 3.9955L13.2828 3.62748L13.2181 1.86808L11.4462 2.11075L10.7749 0.481353L9.19695 1.30539L8.00033 0ZM8.00033 1.77941L8.93363 2.79812L10.1642 2.15609L10.6889 3.42748L12.0662 3.2388L12.1155 4.61019L13.4734 4.89554L13.0461 6.19692L14.2194 6.92162L13.3674 8.00167L14.2194 9.07904L13.0461 9.80307L13.4734 11.1065L12.1155 11.3925L12.0662 12.7625L10.6889 12.5739L10.1642 13.8466L8.93363 13.2039L8.00033 14.2219L7.06771 13.2039L5.83709 13.8466L5.31311 12.5739L3.93584 12.7625L3.88717 11.3925L2.52856 11.1065L2.95521 9.80307L1.78126 9.07904L2.63389 8.00167L1.78059 6.92229L2.95588 6.19692L2.52923 4.89554L3.88717 4.61019L3.93584 3.2388L5.31311 3.42748L5.83709 2.15609L7.06771 2.79812L8.00033 1.77941Z" fill="#DB2777"/>
+  </svg>
+);
+
+RequiredIcon.displayName = 'RequiredIcon';
+
+export default RequiredIcon
diff --git a/packages/ui/components/icons/index.tsx b/packages/ui/components/icons/index.tsx
index 9bbd645ba..f56c8ecf3 100644
--- a/packages/ui/components/icons/index.tsx
+++ b/packages/ui/components/icons/index.tsx
@@ -30,8 +30,10 @@ export { default as IBMMQIcon } from './IBMMQIcon'
 export { default as KafkaIcon } from './KafkaIcon'
 export { default as MQTTIcon } from './MQTTIcon'
 export { default as NATSIcon } from './NATSIcon'
+export { default as NotRequiredIcon } from './NotRequiredIcon'
 export { default as PulsarIcon } from './PulsarIcon'
 export { default as RedisIcon } from './RedisIcon'
+export { default as RequiredIcon } from './RequiredIcon'
 export { default as SealIcon } from './SealIcon'
 export { default as ServerIcon } from './ServerIcon'
 export { default as SolaceIcon } from './SolaceIcon'
diff --git a/packages/ui/components/index.tsx b/packages/ui/components/index.tsx
index 8f58846ed..1fb51f761 100644
--- a/packages/ui/components/index.tsx
+++ b/packages/ui/components/index.tsx
@@ -13,4 +13,7 @@ export * from './Sidebar'
 export * from './SlideOver'
 export * from './Toolbar'
 export * from './AppCard'
+export * from './VisualEditor/Example'
+export * from './VisualEditor/CodeEditor'
+export * from './VisualEditor'
 export { default as Tooltip } from './Tooltip'