diff --git a/src/zeroline/function-editor.ts b/src/zeroline/function-editor.ts
index 980f0a688..2ed81f255 100644
--- a/src/zeroline/function-editor.ts
+++ b/src/zeroline/function-editor.ts
@@ -8,6 +8,8 @@ import {
 } from 'lit-element';
 
 import '../action-pane.js';
+import './subfunction-editor.js';
+import { getChildElementsByTagName } from '../foundation.js';
 
 /** Pane rendering `Function` element with its children */
 @customElement('function-editor')
@@ -24,12 +26,21 @@ export class FunctionEditor extends LitElement {
     return `${name}${desc ? ` - ${desc}` : ''}${type ? ` (${type})` : ''}`;
   }
 
+  renderSubFunctions(): TemplateResult {
+    const subfunctions = getChildElementsByTagName(this.element, 'SubFunction');
+    return html` ${subfunctions.map(
+      subFunction =>
+        html`<subfunction-editor .element=${subFunction}></subfunction-editor>`
+    )}`;
+  }
+
   render(): TemplateResult {
     return html`<action-pane
       label="${this.header}"
       icon="functions"
       secondary
       highlighted
-    ></action-pane>`;
+      >${this.renderSubFunctions()}</action-pane
+    >`;
   }
 }
diff --git a/src/zeroline/subfunction-editor.ts b/src/zeroline/subfunction-editor.ts
new file mode 100644
index 000000000..6e12ef760
--- /dev/null
+++ b/src/zeroline/subfunction-editor.ts
@@ -0,0 +1,42 @@
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  property,
+  customElement,
+  state,
+} from 'lit-element';
+
+import '../action-pane.js';
+import './subfunction-editor.js';
+import { getChildElementsByTagName } from '../foundation.js';
+
+/** Pane rendering `SubFunction` element with its children */
+@customElement('subfunction-editor')
+export class SubFunctionEditor extends LitElement {
+  /** The edited `SubFunction` element */
+  @property({ attribute: false })
+  element!: Element;
+  @state()
+  get header(): string {
+    const name = this.element.getAttribute('name');
+    const desc = this.element.getAttribute('desc');
+    const type = this.element.getAttribute('type');
+
+    return `${name}${desc ? ` - ${desc}` : ''}${type ? ` (${type})` : ''}`;
+  }
+
+  renderSubFunctions(): TemplateResult {
+    const subfunctions = getChildElementsByTagName(this.element, 'SubFunction');
+    return html` ${subfunctions.map(
+      subFunction =>
+        html`<subfunction-editor .element=${subFunction}></subfunction-editor>`
+    )}`;
+  }
+
+  render(): TemplateResult {
+    return html`<action-pane label="${this.header}" icon="functions" secondary
+      >${this.renderSubFunctions()}</action-pane
+    >`;
+  }
+}
diff --git a/test/testfiles/zeroline/functions.scd b/test/testfiles/zeroline/functions.scd
index 51be8e942..5e87b5f15 100644
--- a/test/testfiles/zeroline/functions.scd
+++ b/test/testfiles/zeroline/functions.scd
@@ -7,12 +7,16 @@
 		</History>
 	</Header>
 	<Substation name="AA1" desc="Substation">
-        <Function name="myFunc" desc="myDesc" type="myFuncType"/>
+        <Function name="myFunc" desc="myDesc" type="myFuncType">
+			<SubFunction name="mySubFunc"/>
+		</Function>
 		<VoltageLevel name="E1" desc="Voltage Level" nomFreq="50.0" numPhases="3">
 			<Voltage unit="V" multiplier="k">110.0</Voltage>
             <Function name="voltLvName">
-                <SubFunction name="mySubFunc">
-					<SubFunction name="mySubSubFunction"/>
+                <SubFunction name="mySubFunc" desc="some string" type="some type">
+					<SubFunction name="mySubSubFunction">
+						<SubFunction name="mySubSubSubFunction"/>
+					</SubFunction>
 				</SubFunction> 
             </Function>
 			<Bay name="COUPLING_BAY" desc="Bay">
diff --git a/test/unit/zeroline/__snapshots__/function-editor.test.snap.js b/test/unit/zeroline/__snapshots__/function-editor.test.snap.js
new file mode 100644
index 000000000..f4131b1c6
--- /dev/null
+++ b/test/unit/zeroline/__snapshots__/function-editor.test.snap.js
@@ -0,0 +1,31 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["web component rendering Function element with complete attribute set and existing children looks like the latest snapshot"] = 
+`<action-pane
+  highlighted=""
+  icon="functions"
+  label="myFunc - myDesc (myFuncType)"
+  secondary=""
+  tabindex="0"
+>
+  <subfunction-editor>
+  </subfunction-editor>
+</action-pane>
+`;
+/* end snapshot web component rendering Function element with complete attribute set and existing children looks like the latest snapshot */
+
+snapshots["web component rendering Function element with missing desc and type attribute looks like the latest snapshot"] = 
+`<action-pane
+  highlighted=""
+  icon="functions"
+  label="voltLvName"
+  secondary=""
+  tabindex="0"
+>
+  <subfunction-editor>
+  </subfunction-editor>
+</action-pane>
+`;
+/* end snapshot web component rendering Function element with missing desc and type attribute looks like the latest snapshot */
+
diff --git a/test/unit/zeroline/__snapshots__/subfunction-editor.test.snap.js b/test/unit/zeroline/__snapshots__/subfunction-editor.test.snap.js
new file mode 100644
index 000000000..8f5f8d987
--- /dev/null
+++ b/test/unit/zeroline/__snapshots__/subfunction-editor.test.snap.js
@@ -0,0 +1,27 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["web component rendering SubFunction element with complete attribute set and existing children looks like the latest snapshot"] = 
+`<action-pane
+  icon="functions"
+  label="mySubFunc - some string (some type)"
+  secondary=""
+  tabindex="0"
+>
+  <subfunction-editor>
+  </subfunction-editor>
+</action-pane>
+`;
+/* end snapshot web component rendering SubFunction element with complete attribute set and existing children looks like the latest snapshot */
+
+snapshots["web component rendering SubFunction element with missing desc and type attribute looks like the latest snapshot"] = 
+`<action-pane
+  icon="functions"
+  label="mySubFunc"
+  secondary=""
+  tabindex="0"
+>
+</action-pane>
+`;
+/* end snapshot web component rendering SubFunction element with missing desc and type attribute looks like the latest snapshot */
+
diff --git a/test/unit/zeroline/function-editor.test.ts b/test/unit/zeroline/function-editor.test.ts
new file mode 100644
index 000000000..9536ff500
--- /dev/null
+++ b/test/unit/zeroline/function-editor.test.ts
@@ -0,0 +1,47 @@
+import { fixture, html, expect } from '@open-wc/testing';
+
+import '../../../src/zeroline/function-editor.js';
+import { FunctionEditor } from '../../../src/zeroline/function-editor.js';
+
+describe('web component rendering Function element', () => {
+  let element: FunctionEditor;
+  let doc: XMLDocument;
+
+  beforeEach(async () => {
+    doc = await fetch('/test/testfiles/zeroline/functions.scd')
+      .then(response => response.text())
+      .then(str => new DOMParser().parseFromString(str, 'application/xml'));
+  });
+
+  describe('with complete attribute set and existing children', () => {
+    beforeEach(async () => {
+      element = <FunctionEditor>(
+        await fixture(
+          html`<function-editor
+            .element=${doc.querySelector('Function')}
+          ></function-editor>`
+        )
+      );
+    });
+
+    it('looks like the latest snapshot', async () => {
+      await expect(element).shadowDom.to.equalSnapshot();
+    });
+  });
+
+  describe('with missing desc and type attribute', () => {
+    beforeEach(async () => {
+      element = <FunctionEditor>(
+        await fixture(
+          html`<function-editor
+            .element=${doc.querySelector('VoltageLevel Function')}
+          ></function-editor>`
+        )
+      );
+    });
+
+    it('looks like the latest snapshot', async () => {
+      await expect(element).shadowDom.to.equalSnapshot();
+    });
+  });
+});
diff --git a/test/unit/zeroline/subfunction-editor.test.ts b/test/unit/zeroline/subfunction-editor.test.ts
new file mode 100644
index 000000000..97740500a
--- /dev/null
+++ b/test/unit/zeroline/subfunction-editor.test.ts
@@ -0,0 +1,47 @@
+import { fixture, html, expect } from '@open-wc/testing';
+
+import '../../../src/zeroline/subfunction-editor.js';
+import { SubFunctionEditor } from '../../../src/zeroline/subfunction-editor.js';
+
+describe('web component rendering SubFunction element', () => {
+  let element: SubFunctionEditor;
+  let doc: XMLDocument;
+
+  beforeEach(async () => {
+    doc = await fetch('/test/testfiles/zeroline/functions.scd')
+      .then(response => response.text())
+      .then(str => new DOMParser().parseFromString(str, 'application/xml'));
+  });
+
+  describe('with complete attribute set and existing children', () => {
+    beforeEach(async () => {
+      element = <SubFunctionEditor>(
+        await fixture(
+          html`<subfunction-editor
+            .element=${doc.querySelector('VoltageLevel SubFunction')}
+          ></subfunction-editor>`
+        )
+      );
+    });
+
+    it('looks like the latest snapshot', async () => {
+      await expect(element).shadowDom.to.equalSnapshot();
+    });
+  });
+
+  describe('with missing desc and type attribute', () => {
+    beforeEach(async () => {
+      element = <SubFunctionEditor>(
+        await fixture(
+          html`<subfunction-editor
+            .element=${doc.querySelector('SubFunction')}
+          ></subfunction-editor>`
+        )
+      );
+    });
+
+    it('looks like the latest snapshot', async () => {
+      await expect(element).shadowDom.to.equalSnapshot();
+    });
+  });
+});