From 6b3315b1dd75a2b5e0311bb432d3dbc9b6c9f29f Mon Sep 17 00:00:00 2001
From: Eric Tuvesson <eric.tuvesson@gmail.com>
Date: Tue, 10 Oct 2023 10:13:32 +0200
Subject: [PATCH] fix: hierarchy typo (#37)

---
 docs/guides/user-interfaces/basics.md                  | 8 ++++----
 javascript/reference/component/README.md               | 2 +-
 nodes/component-utilities/component-children/README.md | 2 +-
 static/lessons/gettingstarted/lesson_old.html          | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/guides/user-interfaces/basics.md b/docs/guides/user-interfaces/basics.md
index 2e2c2b4..2196edf 100644
--- a/docs/guides/user-interfaces/basics.md
+++ b/docs/guides/user-interfaces/basics.md
@@ -25,14 +25,14 @@ To edit the properties of a UI element, you click the element in the visual canv
     <video width="100%" autoPlay muted loop src={useBaseUrl("/docs/guides/user-interfaces/basics/edit-properties.mp4")}/>
 </div>
 
-## The visual heirarchy
-As you add UI elements to your component you will see the visual heirarchy being built in the node graph editor. All UI elements are depicted as blue nodes. Here are some nifty things to know about the visual hierarchy in the node editor.
+## The visual hierarchy
+As you add UI elements to your component you will see the visual hierarchy being built in the node graph editor. All UI elements are depicted as blue nodes. Here are some nifty things to know about the visual hierarchy in the node editor.
 
 - All components must have a **single root** UI Element, most ofthen this is a **Group** node.
 
 - You can hover the UI elements in the node graph editor to reveal them in the visual canvas.
 
-- You can manipulate the heirarchy much like you would a layer panel in other design tools.
+- You can manipulate the hierarchy much like you would a layer panel in other design tools.
 
 - You can bring up the **Node picker** by **right clicking** in the node graph editor. If you want the newly created UI element to be placed as a child to another UI element simply right click the parent element to bring up the **Node Picker**.
 
@@ -41,7 +41,7 @@ As you add UI elements to your component you will see the visual heirarchy being
 </div>
 
 ## Grouping and Layouts
-Now that you know how to place new components it's time to learn another important concept, grouping. This is how you group UI elements together and control the layout of the elements under a group. Use the **Node Picker** to create a new group, place it where you want it in the heirarchy, select, drag and drop the UI elements that you want under the group.
+Now that you know how to place new components it's time to learn another important concept, grouping. This is how you group UI elements together and control the layout of the elements under a group. Use the **Node Picker** to create a new group, place it where you want it in the hierarchy, select, drag and drop the UI elements that you want under the group.
 
 The **Group** node gives you a bunch of options for layouting user interfaces, learn more about the details of layouting and the group node in this [guide](/docs/guides/user-interfaces/layout)
 
diff --git a/javascript/reference/component/README.md b/javascript/reference/component/README.md
index 2ec4d50..d0c308b 100644
--- a/javascript/reference/component/README.md
+++ b/javascript/reference/component/README.md
@@ -25,7 +25,7 @@ Component.Object.Selection = Component.Object.Checkboxes.filter(
 ).map((o) => ({ Value: o.Value }));
 ```
 
-`Component.ParentObject` is similair but this object is the [Parent Component Object](/nodes/component-utilities/parent-component-object), that is the **Component Object** of the parent component in the visual heirarchy. It is also used like any other [Noodl.Object](/javascript/reference/object).
+`Component.ParentObject` is similair but this object is the [Parent Component Object](/nodes/component-utilities/parent-component-object), that is the **Component Object** of the parent component in the visual hierarchy. It is also used like any other [Noodl.Object](/javascript/reference/object).
 
 `Component.RepeaterObject` If this component is the template of a repeater this will contain the object of the items array corresponding to this specific component instance. That is the same object as if you set an object **Id Source** to **From Repeater**, as shown below.
 
diff --git a/nodes/component-utilities/component-children/README.md b/nodes/component-utilities/component-children/README.md
index 966d94f..3bebe55 100644
--- a/nodes/component-utilities/component-children/README.md
+++ b/nodes/component-utilities/component-children/README.md
@@ -10,7 +10,7 @@ title: Component Children node
 
 Used to mark where children of instances of this component will be placed.
 
-Any instance of a component that have a **Component Children** placed in its heirarchy will be
+Any instance of a component that have a **Component Children** placed in its hierarchy will be
 able to have children. These children will appear as though they were inserted at the location of
 the **Component Children** node.
 
diff --git a/static/lessons/gettingstarted/lesson_old.html b/static/lessons/gettingstarted/lesson_old.html
index 60fd73e..01b80bb 100644
--- a/static/lessons/gettingstarted/lesson_old.html
+++ b/static/lessons/gettingstarted/lesson_old.html
@@ -53,7 +53,7 @@ style="width:300px; height: 190px;">
       ]'>
 
 <h3>Visual hierarchy</h3>
-<p>Let's get down to business. You can move nodes by dragging them around with the <strong>left</strong> mouse button. You can drag a node in and out of the visual heirarchy as you please.</p>
+<p>Let's get down to business. You can move nodes by dragging them around with the <strong>left</strong> mouse button. You can drag a node in and out of the visual hierarchy as you please.</p>
 
 <h3>Drag the text from the root node</h3><i data-checkmark="0"></i>
 <p>Try dragging the text node away from the hierarchy. As you can see, the text disappears from the preview.</p>