diff --git a/README.md b/README.md
index acc410794..8f1771de6 100644
--- a/README.md
+++ b/README.md
@@ -87,7 +87,7 @@ You can add custom sample datasets that can be used with Charticulator.  To do s
 [
     {
         "name": "<Your dataset display name>",
-        "description": "<Your dataset desription>",
+        "description": "<Your dataset description>",
         "tables": [
             {
                 "name": "<Your dataset file name without extension>",
@@ -128,6 +128,6 @@ contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additio
 # Documentation
 
 Run `yarn typedoc` to generate documentation pages.
-The page will be awailable in [`./docs/charticulator`](./docs/charticulator/index.html)
+The page will be available in [`./docs/charticulator`](./docs/charticulator/index.html)
 
 Start point of documentation is index page {@link "index"}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 61e6b5d63..3e340da61 100644
--- a/public/index.html
+++ b/public/index.html
@@ -18,16 +18,16 @@
     <script src="scripts/app.bundle.js"></script>
 
     <script type="text/javascript">
-      const responce = fetch(`${CHARTICULATOR_CONFIG.WorkerURL}`).then(
-        (responce) => {
-          if (!responce.ok) {
+      const response = fetch(`${CHARTICULATOR_CONFIG.WorkerURL}`).then(
+        (response) => {
+          if (!response.ok) {
             throw Error(
               `Loading worker script from ${
                 CHARTICULATOR_CONFIG.WorkerURL
               } failed`
             );
           }
-          const script = responce.text().then((script) => {
+          const script = response.text().then((script) => {
             const blob = new Blob([script], { type: "application/javascript" });
 
             const workerScript = URL.createObjectURL(blob);
diff --git a/sass/components/canvas/attribute_editor.scss b/sass/components/canvas/attribute_editor.scss
index 458a07a62..473612f4c 100644
--- a/sass/components/canvas/attribute_editor.scss
+++ b/sass/components/canvas/attribute_editor.scss
@@ -1119,7 +1119,7 @@
           background: lighten($color-active, 30%);
           height: 26px;
 
-          &-attrubutes {
+          &-attributes {
             @extend .el-drag-over;
             width: auto;
           }
diff --git a/src/app/actions/actions.ts b/src/app/actions/actions.ts
index e08bd2730..22506a234 100644
--- a/src/app/actions/actions.ts
+++ b/src/app/actions/actions.ts
@@ -174,7 +174,7 @@ export class ReplaceDataset extends Action {
   }
 }
 
-/** Invokes updaes all plot segments on the chart,  */
+/** Invokes updates all plot segments on the chart,  */
 export class UpdatePlotSegments extends Action {
   constructor() {
     super();
@@ -283,7 +283,7 @@ export class RemoveMarkFromGlyph extends Action {
 }
 
 /**
- * Dispatches when user binds table coulmns to attributes
+ * Dispatches when user binds table columns to attributes
  */
 export class MapDataToMarkAttribute extends Action {
   /**
@@ -530,7 +530,7 @@ export class MapDataToChartElementAttribute extends Action {
 
   public digest() {
     return {
-      name: "MapChartElementkAttribute",
+      name: "MapChartElementAttribute",
       chartElement: objectDigest(this.chartElement),
       attribute: this.attribute,
       attributeType: this.attributeType,
diff --git a/src/app/application.tsx b/src/app/application.tsx
index bb8c5838a..b65e77420 100644
--- a/src/app/application.tsx
+++ b/src/app/application.tsx
@@ -51,7 +51,7 @@ import { EditorType } from "./stores/app_store";
 import { LocalizationConfig } from "../container/container";
 
 export class ApplicationExtensionContext implements ExtensionContext {
-  constructor(public app: Application) {}
+  constructor(public app: Application) { }
 
   public getGlobalDispatcher(): Dispatcher<Action> {
     return this.app.appStore.dispatcher;
@@ -125,7 +125,7 @@ export class Application {
       workerScriptContent?: string;
       worker?: CharticulatorWorkerInterface;
     },
-    localizaiton: LocalizationConfig,
+    localization: LocalizationConfig,
     handlers?: {
       menuBarHandlers?: MenuBarHandlers;
       telemetry?: TelemetryRecorder;
@@ -175,7 +175,7 @@ export class Application {
       );
       const DelimiterSymbol = parseSafe(
         window.localStorage.getItem(LocalStorageKeys.DelimiterSymbol) ||
-          defaultDelimiter,
+        defaultDelimiter,
         defaultDelimiter
       );
       const GroupSymbol = parseSafe(
@@ -184,7 +184,7 @@ export class Application {
       );
       const NumberFormatRemove = parseSafe(
         window.localStorage.getItem(LocalStorageKeys.NumberFormatRemove) ||
-          defaultNumberFormat.remove,
+        defaultNumberFormat.remove,
         defaultNumberFormat.remove
       );
 
@@ -205,13 +205,13 @@ export class Application {
       });
     } catch (ex) {
       setFormatOptions({
-        currency: [localizaiton?.currency, ""] ?? defaultCurrency,
+        currency: [localization?.currency, ""] ?? defaultCurrency,
         grouping: defaultDigitsGroup,
-        decimal: localizaiton?.decemalDelimiter ?? defaultNumberFormat.decimal,
+        decimal: localization?.decimalDelimiter ?? defaultNumberFormat.decimal,
         thousands:
-          localizaiton?.thousandsDelimiter ?? defaultNumberFormat.decimal,
+          localization?.thousandsDelimiter ?? defaultNumberFormat.decimal,
       });
-      console.warn("Loadin localization settings failed");
+      console.warn("Loading localization settings failed");
     }
 
     (window as any).mainStore = this.appStore;
@@ -283,7 +283,7 @@ export class Application {
         deepClone(info.specification)
       );
 
-      // if version wasn't saved in tempalte we asume it is 2.0.3
+      // if version wasn't saved in template we assume it is 2.0.3
       if (info.template && info.template.version == undefined) {
         info.template.version = defaultVersionOfTemplate;
       }
diff --git a/src/app/components/colors/color_space_select.tsx b/src/app/components/colors/color_space_select.tsx
index 1c8aac33e..d72d116b7 100644
--- a/src/app/components/colors/color_space_select.tsx
+++ b/src/app/components/colors/color_space_select.tsx
@@ -3,7 +3,7 @@
 
 import * as React from "react";
 import { ComboBox, IComboBoxOption } from "@fluentui/react";
-import { defultComponentsHeight } from "../../views/panels/widgets/controls/fluentui_customized_components";
+import { defaultComponentsHeight } from "../../views/panels/widgets/controls/fluentui_customized_components";
 import { Color } from "../../../core";
 import {
   ColorSpaceDescription,
@@ -47,7 +47,7 @@ export class ColorSpaceSelect extends React.Component<
         }}
         styles={{
           root: {
-            ...defultComponentsHeight,
+            ...defaultComponentsHeight,
           },
           input: {
             width: "100px !important",
diff --git a/src/app/components/error_boundary.tsx b/src/app/components/error_boundary.tsx
index 5d1ec391b..031b10a9b 100644
--- a/src/app/components/error_boundary.tsx
+++ b/src/app/components/error_boundary.tsx
@@ -6,7 +6,7 @@ import { copyToClipboard } from "../utils";
 
 export enum TelemetryActionType {
   Exception = "exception",
-  ExportTemplate = "exportTempalte",
+  ExportTemplate = "exportTemplate",
 }
 
 export interface TelemetryRecorder {
diff --git a/src/app/components/index.ts b/src/app/components/index.ts
index 18d84cf89..fbd4dc599 100644
--- a/src/app/components/index.ts
+++ b/src/app/components/index.ts
@@ -18,4 +18,4 @@ export * from "./gradient_picker";
 export * from "./minimizable_panel";
 export * from "./error_boundary";
 export * from "./editable_text_view";
-export * from "./messsage_box";
+export * from "./message_box";
diff --git a/src/app/components/messsage_box.tsx b/src/app/components/message_box.tsx
similarity index 100%
rename from src/app/components/messsage_box.tsx
rename to src/app/components/message_box.tsx
diff --git a/src/app/index.tsx b/src/app/index.tsx
index 43cbb7a13..3e7833991 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -20,13 +20,13 @@
  *
  * * {@link "app/backend/indexed_db"} contains class {@link IndexedDBBackend}. It wraps [IndexedDB API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) to save user charts in the browser storage.
  *
- * * {@link "app/components/index"} contains general high-level componenets for UI. Other low-level components ("bricks" of UI) are in {@link "app/views/index"} module.
+ * * {@link "app/components/index"} contains general high-level components for UI. Other low-level components ("bricks" of UI) are in {@link "app/views/index"} module.
  *
  * Charticulator has {@link WidgetManager} class for managing those components. It's "facade" over all components.
  *
  * {@link ObjectClass.getAttributePanelWidgets} method uses interface of {@link WidgetManager} to build UI for mark attributes. (See {@link "core/prototypes/marks/index"})
  *
- * * {@link "app/views/index"} module contains general views for dataset displaying, file views for open, save, create chart and different panes like attribure panel link creator, object list editor, scale editor, scale panel with used scales list.
+ * * {@link "app/views/index"} module contains general views for dataset displaying, file views for open, save, create chart and different panes like attribute panel link creator, object list editor, scale editor, scale panel with used scales list.
  *
  * * {@link "app/views/dataset/table_view"} contains view for displaying dataset as table on creating the new chart or for displaying data samples after importing data
  *
diff --git a/src/app/renderer/index.tsx b/src/app/renderer/index.tsx
index 311842800..7adc8e294 100644
--- a/src/app/renderer/index.tsx
+++ b/src/app/renderer/index.tsx
@@ -71,7 +71,7 @@ export function applyColorFilter(color: Color, colorFilter: ColorFilter) {
 }
 
 /**
- * Coverts {@Color} to `rgb(r,g,b)` string. Or coverts `#RRGGBB` fromat to `rgb(r,g,b)`}
+ * Coverts {@Color} to `rgb(r,g,b)` string. Or coverts `#RRGGBB` format to `rgb(r,g,b)`}
  * @param color {@Color} object or color string in HEX format (`#RRGGBB`)
  */
 export function renderColor(
diff --git a/src/app/stores/app_store.ts b/src/app/stores/app_store.ts
index a689349f6..66d44ee48 100644
--- a/src/app/stores/app_store.ts
+++ b/src/app/stores/app_store.ts
@@ -347,7 +347,7 @@ export class AppStore extends BaseStore {
     this.chartManager?.resetDifference();
   }
 
-  // removes unused scale objecs
+  // removes unused scale objects
   private updateChartState() {
     function hasMappedProperty(
       mappings: Specification.Mappings,
@@ -2105,9 +2105,9 @@ export class AppStore extends BaseStore {
   }
 
   /**
-   * Due to undefined "value" will not saved after JSON.stringfy, need to update all undefined "values" to null
-   * deepClone uses JSON.stringfy to create copy of object. If object losses some property after copy
-   * the function expect_deep_approximately_equals gives difference for identical tempalte/chart state
+   * Due to undefined "value" will not saved after JSON.stringify, need to update all undefined "values" to null
+   * deepClone uses JSON.stringify to create copy of object. If object losses some property after copy
+   * the function expect_deep_approximately_equals gives difference for identical template/chart state
    * See {@link ChartStateManager.hasUnsavedChanges} for details
    * @param dataExpression Data expression for axis
    */
diff --git a/src/app/stores/migrator.ts b/src/app/stores/migrator.ts
index 3dfe1d5ff..400236c9f 100644
--- a/src/app/stores/migrator.ts
+++ b/src/app/stores/migrator.ts
@@ -201,7 +201,7 @@ export class Migrator {
   }
 
   /**
-   * Adds enableTooltips, enableSelection, enableContextMenu properties with default balue true
+   * Adds enableTooltips, enableSelection, enableContextMenu properties with default value true
    * @param state current state
    */
   public addInteractivityProperties(state: AppStoreState) {
diff --git a/src/app/template/index.ts b/src/app/template/index.ts
index 5a18236bf..82bab1d61 100644
--- a/src/app/template/index.ts
+++ b/src/app/template/index.ts
@@ -1,7 +1,7 @@
 /**
- * The {@link ChartTemplateBuilder} creates tempate ({@link ChartTemplate}) from the current chart.
+ * The {@link ChartTemplateBuilder} creates template ({@link ChartTemplate}) from the current chart.
  * {@link ChartTemplate} contains simplified version of {@link Chart} object in {@link ChartTemplate.specification} property.
- * Tempate can be exported as *.tmplt file (JSON format). It also uses on export to HTML file or on export as Power BI visual.
+ * Template can be exported as *.tmplt file (JSON format). It also uses on export to HTML file or on export as Power BI visual.
  *
  * Template can be loaded into container outside of Charticulator app to visualize with custom dataset.
  *
diff --git a/src/app/utils/index.ts b/src/app/utils/index.ts
index 656f182f5..47795ce9c 100644
--- a/src/app/utils/index.ts
+++ b/src/app/utils/index.ts
@@ -165,7 +165,7 @@ export function stringToDataURL(mimeType: string, content: string) {
   return "data:" + mimeType + ";base64," + b64EncodeUnicode(content);
 }
 
-function checkConvertion(
+function checkConversion(
   type: DataType,
   dataSample: (string | boolean | Date | number)[]
 ) {
@@ -303,7 +303,7 @@ export function getConvertableTypes(
       return true;
     }
     if (dataSample) {
-      return checkConvertion(
+      return checkConversion(
         t,
         dataSample.map((d) => d && d.toString())
       );
@@ -356,11 +356,11 @@ export function convertColumns(
     applyConvertedValues(table, column.name, convertedValues);
     return null;
   } catch (ex) {
-    const messgae = `Converting column type from ${originColumn.type} to ${type} failed`;
-    console.warn(messgae);
+    const message = `Converting column type from ${originColumn.type} to ${type} failed`;
+    console.warn(message);
     // rollback type
     column.type = typeBeforeChange;
-    return messgae;
+    return message;
   }
 }
 
@@ -381,7 +381,7 @@ export function isInIFrame() {
   }
 }
 
-export function getAligntment(anchor: Element) {
+export function getAlignment(anchor: Element) {
   let alignX:
     | "start-outer"
     | "inner"
diff --git a/src/app/views/canvas/handles/input_curve.tsx b/src/app/views/canvas/handles/input_curve.tsx
index b97f0284f..d50789d6d 100644
--- a/src/app/views/canvas/handles/input_curve.tsx
+++ b/src/app/views/canvas/handles/input_curve.tsx
@@ -236,7 +236,7 @@ export class InputCurveHandleView extends React.Component<
                         text={strings.handles.drawSpiral}
                         onClick={() => {
                           context.close();
-                          // Make sprial and emit.
+                          // Make spiral and emit.
                           const dragContext = new HandlesDragContext();
                           const curve: Point[][] = [];
                           this.props.onDragStart(
diff --git a/src/app/views/canvas/snapping/session.ts b/src/app/views/canvas/snapping/session.ts
index 7e8d772a8..27e158537 100644
--- a/src/app/views/canvas/snapping/session.ts
+++ b/src/app/views/canvas/snapping/session.ts
@@ -57,7 +57,7 @@ export class SnappingSession<ElementType> {
     }
   }
 
-  private giveProrityToPoint(
+  private givePriorityToPoint(
     a: SnappableGuide<ElementType>,
     b: SnappableGuide<ElementType>
   ) {
@@ -88,7 +88,7 @@ export class SnappingSession<ElementType> {
           let minXDistance: number = null;
           let minYGuide: SnappableGuide<ElementType> = null;
           let minYDistance: number = null;
-          for (const g of this.candidates.sort(this.giveProrityToPoint)) {
+          for (const g of this.candidates.sort(this.givePriorityToPoint)) {
             const guide = g.guide as Prototypes.SnappingGuides.Axis;
             if (this.findClosestSnappingGuide) {
               if (guide.type == "y") {
@@ -142,7 +142,7 @@ export class SnappingSession<ElementType> {
           let minXDistance: number = null;
           let minYGuide: SnappableGuide<ElementType> = null;
           let minYDistance: number = null;
-          for (const g of this.candidates.sort(this.giveProrityToPoint)) {
+          for (const g of this.candidates.sort(this.givePriorityToPoint)) {
             const guide = g.guide as Prototypes.SnappingGuides.Axis;
             if (this.findClosestSnappingGuide) {
               // Find closest point
@@ -280,7 +280,7 @@ export class SnappingSession<ElementType> {
             }
             if (source == "x" || source == "y") {
               for (const candidate of this.currentCandidates.sort(
-                this.giveProrityToPoint
+                this.givePriorityToPoint
               )) {
                 if (
                   (candidate.guide as Prototypes.SnappingGuides.PolarAxis)
diff --git a/src/app/views/dataset/data_field_binding_builder.tsx b/src/app/views/dataset/data_field_binding_builder.tsx
index a2ec54894..5e83ccd78 100644
--- a/src/app/views/dataset/data_field_binding_builder.tsx
+++ b/src/app/views/dataset/data_field_binding_builder.tsx
@@ -40,7 +40,7 @@ import { AggregationFunctionDescription } from "../../../core/expression";
 import {
   defaultLabelStyle,
   defaultStyle,
-  defultBindButtonSize,
+  defaultBindButtonSize,
   FluentDataBindingMenuItem,
   FluentDataBindingMenuLabel,
 } from "../panels/widgets/controls/fluentui_customized_components";
@@ -85,7 +85,7 @@ interface Builder {
   /**
    * Add default value
    */
-  produceDefaultValue(dafaultValue: IDefaultValue): void;
+  produceDefaultValue(defaultValue: IDefaultValue): void;
 
   getMenuItems(): IContextualMenuItem[];
 
@@ -149,7 +149,7 @@ class MenuItemsCreator {
     }
   }
 
-  public setFieds(
+  public setFields(
     datasetStore: AppStore,
     table?: string,
     kinds?: Dataset.DataKind[],
@@ -736,11 +736,11 @@ export class MenuItemBuilder implements Builder {
     kinds?: Dataset.DataKind[],
     types?: Dataset.DataType[]
   ): void {
-    this.menuItemsCreator.setFieds(datasetStore, table, kinds, types);
+    this.menuItemsCreator.setFields(datasetStore, table, kinds, types);
   }
 
-  public produceDefaultValue(dafaultValue: IDefaultValue): void {
-    this.menuItemsCreator.produceDefaultValue(dafaultValue);
+  public produceDefaultValue(defaultValue: IDefaultValue): void {
+    this.menuItemsCreator.produceDefaultValue(defaultValue);
   }
 
   public buildMenu(): void {
@@ -845,12 +845,12 @@ export class Director {
                 ...(defaultStyle as any),
                 title: {
                   ...defaultStyle.title,
-                  lineHeight: defultBindButtonSize.height,
+                  lineHeight: defaultBindButtonSize.height,
                   borderWidth: "0px",
                 },
                 dropdownOptionText: {
                   boxSizing: "unset",
-                  lineHeight: defultBindButtonSize.height,
+                  lineHeight: defaultBindButtonSize.height,
                 },
                 callout: {
                   minWidth: 180,
diff --git a/src/app/views/dataset/dataset_view.tsx b/src/app/views/dataset/dataset_view.tsx
index 8c7235e83..1fe1c5b86 100644
--- a/src/app/views/dataset/dataset_view.tsx
+++ b/src/app/views/dataset/dataset_view.tsx
@@ -38,7 +38,7 @@ import { FileViewImport, MappingMode } from "../file_view/import_view";
 import { strings } from "../../../strings";
 import { EditorType } from "../../stores/app_store";
 import { Callout, DefaultButton } from "@fluentui/react";
-import { defultBindButtonSize } from "../panels/widgets/controls/fluentui_customized_components";
+import { defaultBindButtonSize } from "../panels/widgets/controls/fluentui_customized_components";
 
 export interface DatasetViewProps {
   store: AppStore;
@@ -93,9 +93,9 @@ export interface ColumnsViewState {
 
 const buttonStyles = {
   root: {
-    height: `${defultBindButtonSize}px`,
-    width: `${defultBindButtonSize}px`,
-    minWidth: `${defultBindButtonSize}px`,
+    height: `${defaultBindButtonSize}px`,
+    width: `${defaultBindButtonSize}px`,
+    minWidth: `${defaultBindButtonSize}px`,
     padding: "0px",
     border: "none",
   },
diff --git a/src/app/views/dataset/fluent_ui_data_field_selector.tsx b/src/app/views/dataset/fluent_ui_data_field_selector.tsx
index 3af96edf9..033ab4cdc 100644
--- a/src/app/views/dataset/fluent_ui_data_field_selector.tsx
+++ b/src/app/views/dataset/fluent_ui_data_field_selector.tsx
@@ -417,7 +417,7 @@ export class DataFieldSelector extends React.Component<
     );
   }
 
-  //Update desing
+  //Update design
   public render() {
     const fields = this.getFields();
 
diff --git a/src/app/views/file_view/export_view.tsx b/src/app/views/file_view/export_view.tsx
index 98acce2e2..bc691a1d3 100644
--- a/src/app/views/file_view/export_view.tsx
+++ b/src/app/views/file_view/export_view.tsx
@@ -489,7 +489,7 @@ export class ExportTemplateView extends React.Component<
             this.props.store.chart,
             inference.objectID
           );
-          const temaplteObject = findObjectById(
+          const templateObject = findObjectById(
             template.specification,
             inference.objectID
           );
@@ -535,7 +535,7 @@ export class ExportTemplateView extends React.Component<
                   true
                 )
               );
-              temaplteObject.properties[keyAutoDomainMax] = true;
+              templateObject.properties[keyAutoDomainMax] = true;
               inference.autoDomainMax = true;
             } else {
               inference.autoDomainMax = (object.properties[
@@ -576,10 +576,10 @@ export class ExportTemplateView extends React.Component<
                   true
                 )
               );
-              temaplteObject.properties[keyAutoDomainMax] = true;
+              templateObject.properties[keyAutoDomainMax] = true;
               inference.autoDomainMax = true;
             } else {
-              inference.autoDomainMax = temaplteObject.properties[
+              inference.autoDomainMax = templateObject.properties[
                 keyAutoDomainMax
               ] as boolean;
             }
@@ -618,7 +618,7 @@ export class ExportTemplateView extends React.Component<
                   true
                 )
               );
-              temaplteObject.properties[keyAutoDomainMin] = true;
+              templateObject.properties[keyAutoDomainMin] = true;
               inference.autoDomainMin = true;
             } else {
               inference.autoDomainMin = (object.properties[
@@ -659,7 +659,7 @@ export class ExportTemplateView extends React.Component<
                   true
                 )
               );
-              temaplteObject.properties[keyAutoDomainMin] = true;
+              templateObject.properties[keyAutoDomainMin] = true;
               inference.autoDomainMin = true;
             } else {
               inference.autoDomainMin = object.properties[
diff --git a/src/app/views/file_view/import_view.tsx b/src/app/views/file_view/import_view.tsx
index 5f71004da..6e600ebd2 100644
--- a/src/app/views/file_view/import_view.tsx
+++ b/src/app/views/file_view/import_view.tsx
@@ -119,8 +119,8 @@ export class FileViewImport extends ContextedComponent<
                   >
                     <h4>
                       {this.props.mode === MappingMode.ImportTemplate
-                        ? strings.templateImport.usbtitleImportTemplate
-                        : strings.templateImport.usbtitleImportData}
+                        ? strings.templateImport.subtitleImportTemplate
+                        : strings.templateImport.subtitleImportData}
                     </h4>
                     <table className="charticulator__file-view-mapping_table">
                       <thead>
diff --git a/src/app/views/file_view/options_view.tsx b/src/app/views/file_view/options_view.tsx
index 377f4bcd2..dbf12ffc4 100644
--- a/src/app/views/file_view/options_view.tsx
+++ b/src/app/views/file_view/options_view.tsx
@@ -80,7 +80,7 @@ export const FileViewOptionsView: React.FC<FileViewOptionsProps> = () => {
             <select
               onChange={(e) => {
                 const isDecimalDot =
-                  e.target.options[e.target.selectedIndex].value === ","; // values is removeal
+                  e.target.options[e.target.selectedIndex].value === ","; // values is removal
                 changeLocaleFileFormat({
                   ...localeFileFormat,
                   numberFormat: {
@@ -109,7 +109,7 @@ export const FileViewOptionsView: React.FC<FileViewOptionsProps> = () => {
             </select>
             <label>{strings.options.numberFormat}</label>
           </div>
-          {/* Uncomment to enable configuration for locale: currency symbol and groupping digits */}
+          {/* Uncomment to enable configuration for locale: currency symbol and grouping digits */}
           {/*
             <div className="form-group">
             <InputText
diff --git a/src/app/views/fluentui_tool_bar.tsx b/src/app/views/fluentui_tool_bar.tsx
index e39b1be7c..bd6e5b187 100644
--- a/src/app/views/fluentui_tool_bar.tsx
+++ b/src/app/views/fluentui_tool_bar.tsx
@@ -27,7 +27,7 @@ import { useState } from "react";
 import { useEffect } from "react";
 import { Icon } from "@fluentui/react/lib/Icon";
 
-const minWidthToColapseButtons = Object.freeze({
+const minWidthToCollapseButtons = Object.freeze({
   guides: 1090,
   plotSegments: 1120,
   scaffolds: 1211,
@@ -496,7 +496,7 @@ export const FluentUIToolbar: React.FC<{
             {strings.toolbar.guides}
           </span>
         )}
-        {innerWidth > minWidthToColapseButtons.guides ? (
+        {innerWidth > minWidthToCollapseButtons.guides ? (
           <>
             <ObjectButton
               classID="guide-y"
@@ -567,7 +567,7 @@ export const FluentUIToolbar: React.FC<{
             {strings.toolbar.scaffolds}
           </span>
         )}
-        {innerWidth > minWidthToColapseButtons.scaffolds ? (
+        {innerWidth > minWidthToCollapseButtons.scaffolds ? (
           <>
             <ScaffoldButton
               type="cartesian-x"
diff --git a/src/app/views/panels/radio_control.tsx b/src/app/views/panels/radio_control.tsx
index bc27a445c..99207ebfb 100644
--- a/src/app/views/panels/radio_control.tsx
+++ b/src/app/views/panels/radio_control.tsx
@@ -5,7 +5,7 @@ import * as React from "react";
 import { DefaultButton } from "@fluentui/react";
 import { SVGImageIcon } from "../../../app/components";
 import * as R from "../../../app/resources";
-import { defultComponentsHeight } from "../../../app/views/panels/widgets/controls/fluentui_customized_components";
+import { defaultComponentsHeight } from "../../../app/views/panels/widgets/controls/fluentui_customized_components";
 
 export interface PanelRadioControlProps {
   options: string[];
@@ -51,7 +51,7 @@ export class PanelRadioControl extends React.Component<
                 root: {
                   marginRight: 5,
                   marginLeft: 5,
-                  ...defultComponentsHeight,
+                  ...defaultComponentsHeight,
                 },
               }}
               onRenderIcon={() => {
diff --git a/src/app/views/panels/widgets/controls/combo_box.tsx b/src/app/views/panels/widgets/controls/combo_box.tsx
index b389cf062..015a5f172 100644
--- a/src/app/views/panels/widgets/controls/combo_box.tsx
+++ b/src/app/views/panels/widgets/controls/combo_box.tsx
@@ -11,7 +11,7 @@ import { fontList } from "../../../../../core";
 import {
   defaultLabelStyle,
   defaultStyle,
-  defultComponentsHeight,
+  defaultComponentsHeight,
 } from "./fluentui_customized_components";
 
 export interface ComboBoxFontFamilyProps {
@@ -41,8 +41,8 @@ export const FluentComboBoxFontFamily: React.FC<ComboBoxFontFamilyProps> = (
           fontFamily: fontName,
         },
         root: {
-          ...defultComponentsHeight,
-          minHeight: defultComponentsHeight.height,
+          ...defaultComponentsHeight,
+          minHeight: defaultComponentsHeight.height,
         },
       },
     }));
@@ -66,7 +66,7 @@ export const FluentComboBoxFontFamily: React.FC<ComboBoxFontFamilyProps> = (
       styles={{
         ...defaultStyle,
         root: {
-          ...defultComponentsHeight,
+          ...defaultComponentsHeight,
         },
       }}
       selectedKey={currentValue}
diff --git a/src/app/views/panels/widgets/controls/fluentui_customized_components.tsx b/src/app/views/panels/widgets/controls/fluentui_customized_components.tsx
index 57251c743..f844157a4 100644
--- a/src/app/views/panels/widgets/controls/fluentui_customized_components.tsx
+++ b/src/app/views/panels/widgets/controls/fluentui_customized_components.tsx
@@ -17,7 +17,7 @@ import {
 } from "@fluentui/react";
 import styled from "styled-components";
 
-export const defultBindButtonSize = {
+export const defaultBindButtonSize = {
   height: "24px",
   width: "24px",
 };
@@ -31,8 +31,8 @@ export const FluentButton = styled.div<{
   margin-left: ${({ marginLeft }) => marginLeft || "unset"};
   display: inline-block;
   padding: 0px ${({ paddingRight }) => paddingRight || "4px"} 0px 0px;
-  height: ${defultBindButtonSize.height};
-  line-height: ${defultBindButtonSize.height};
+  height: ${defaultBindButtonSize.height};
+  line-height: ${defaultBindButtonSize.height};
   button {
     padding: 4px;
   }
@@ -139,7 +139,7 @@ export const FluentGroupedList = styled.div<{ marginLeft?: number }>`
     min-height: 24px;
   }
 `;
-export const defultComponentsHeight = {
+export const defaultComponentsHeight = {
   height: "24px",
   lineHeight: "unset",
 };
@@ -155,10 +155,10 @@ export const groupHeaderStyles: IStyleFunctionOrObject<
     display: "none",
   },
   groupHeaderContainer: {
-    ...defultComponentsHeight,
+    ...defaultComponentsHeight,
   },
   expand: {
-    ...defultBindButtonSize,
+    ...defaultBindButtonSize,
     fontSize: "unset",
   },
   dropIcon: {
@@ -223,45 +223,45 @@ export const FluentDatePickerWrapper = styled.div`
 
 export const defaultStyle: any = {
   field: {
-    defultComponentsHeight,
+    defaultComponentsHeight,
     height: "20px",
   },
-  fieldGroup: defultComponentsHeight,
+  fieldGroup: defaultComponentsHeight,
   dropdown: {
     boxSizing: "unset",
-    ...defultComponentsHeight,
+    ...defaultComponentsHeight,
   },
   dropdownOptionText: {
     boxSizing: "unset",
-    ...defultComponentsHeight,
+    ...defaultComponentsHeight,
   },
   dropdownItem: {
     boxSizing: "unset",
     minHeight: "25px",
-    ...defultComponentsHeight,
+    ...defaultComponentsHeight,
   },
   dropdownItemHeader: {
     boxSizing: "unset",
-    ...defultComponentsHeight,
+    ...defaultComponentsHeight,
   },
   dropdownItemSelected: {
     boxSizing: "unset",
     minHeight: "24px",
     lineHeight: "24px",
-    ...defultComponentsHeight,
+    ...defaultComponentsHeight,
   },
   caretDown: {
     boxSizing: "unset",
-    ...defultComponentsHeight,
+    ...defaultComponentsHeight,
   },
   caretDownWrapper: {
     boxSizing: "unset",
     marginTop: "5px",
-    ...defultComponentsHeight,
+    ...defaultComponentsHeight,
   },
   title: {
     boxSizing: "unset",
-    ...defultComponentsHeight,
+    ...defaultComponentsHeight,
     height: "22px",
     lineHeight: "unset",
   },
diff --git a/src/app/views/panels/widgets/controls/fluentui_empty_mapping.tsx b/src/app/views/panels/widgets/controls/fluentui_empty_mapping.tsx
index e511d7cab..f296bf967 100644
--- a/src/app/views/panels/widgets/controls/fluentui_empty_mapping.tsx
+++ b/src/app/views/panels/widgets/controls/fluentui_empty_mapping.tsx
@@ -5,7 +5,7 @@ import * as React from "react";
 import { DefaultButton, TextField } from "@fluentui/react";
 import {
   defaultStyle,
-  defultBindButtonSize,
+  defaultBindButtonSize,
   FluentButton,
   FluentTextField,
   labelRender,
@@ -116,7 +116,7 @@ export const EmptyColorButton = ({
         styles={{
           root: {
             minWidth: "unset",
-            ...defultBindButtonSize,
+            ...defaultBindButtonSize,
             marginLeft: 5,
           },
         }}
diff --git a/src/app/views/panels/widgets/controls/fluentui_image.tsx b/src/app/views/panels/widgets/controls/fluentui_image.tsx
index b409b21cb..6222df37e 100644
--- a/src/app/views/panels/widgets/controls/fluentui_image.tsx
+++ b/src/app/views/panels/widgets/controls/fluentui_image.tsx
@@ -18,7 +18,7 @@ import {
 } from "@fluentui/react";
 import {
   defaultLabelStyle,
-  defultBindButtonSize,
+  defaultBindButtonSize,
   FluentActionButton,
   FluentButton,
 } from "./fluentui_customized_components";
@@ -149,7 +149,7 @@ export class InputImage extends ContextedComponent<
                 {this.props.label}
               </Label>
             ) : null}
-            <span className="el-drag-over-attrubutes">
+            <span className="el-drag-over-attributes">
               {strings.objects.image.dropImage}
             </span>
           </div>
@@ -161,12 +161,12 @@ export class InputImage extends ContextedComponent<
               </Label>
             ) : null}
             <FluentActionButton
-              style={{ width: "100%", height: defultBindButtonSize.height }}
+              style={{ width: "100%", height: defaultBindButtonSize.height }}
             >
               <ActionButton
                 styles={{
                   root: {
-                    height: defultBindButtonSize.height,
+                    height: defaultBindButtonSize.height,
                   },
                 }}
                 text={isNone ? strings.core.none : imageDisplayURL}
@@ -404,7 +404,7 @@ export class ImageUploader extends React.Component<
                 styles={{
                   root: {
                     minWidth: "unset",
-                    ...defultBindButtonSize,
+                    ...defaultBindButtonSize,
                     marginLeft: 5,
                   },
                 }}
diff --git a/src/app/views/panels/widgets/controls/fluentui_image_2.tsx b/src/app/views/panels/widgets/controls/fluentui_image_2.tsx
index 65c66f43b..57ab6f3f9 100644
--- a/src/app/views/panels/widgets/controls/fluentui_image_2.tsx
+++ b/src/app/views/panels/widgets/controls/fluentui_image_2.tsx
@@ -21,7 +21,7 @@ import {
 } from "@fluentui/react";
 import {
   defaultLabelStyle,
-  defultBindButtonSize,
+  defaultBindButtonSize,
   FluentActionButton,
   FluentButton,
 } from "./fluentui_customized_components";
@@ -118,7 +118,7 @@ export class InputImage extends ContextedComponent<
                 {this.props.label}
               </Label>
             ) : null}
-            <span className="el-drag-over-attrubutes">
+            <span className="el-drag-over-attributes">
               {strings.objects.image.dropImage}
             </span>
           </div>
@@ -130,12 +130,12 @@ export class InputImage extends ContextedComponent<
               </Label>
             ) : null}
             <FluentActionButton
-              style={{ width: "100%", height: defultBindButtonSize.height }}
+              style={{ width: "100%", height: defaultBindButtonSize.height }}
             >
               <ActionButton
                 styles={{
                   root: {
-                    height: defultBindButtonSize.height,
+                    height: defaultBindButtonSize.height,
                   },
                 }}
                 text={isNone ? strings.core.none : imageDisplayURL}
@@ -342,7 +342,7 @@ export class ImageUploader extends React.Component<
                 styles={{
                   root: {
                     minWidth: "unset",
-                    ...defultBindButtonSize,
+                    ...defaultBindButtonSize,
                   },
                 }}
                 iconProps={{
diff --git a/src/app/views/panels/widgets/controls/fluentui_input_color.tsx b/src/app/views/panels/widgets/controls/fluentui_input_color.tsx
index fad355995..d0cb5ec21 100644
--- a/src/app/views/panels/widgets/controls/fluentui_input_color.tsx
+++ b/src/app/views/panels/widgets/controls/fluentui_input_color.tsx
@@ -20,7 +20,7 @@ import { Callout, TextField } from "@fluentui/react";
 import {
   defaultLabelStyle,
   defaultStyle,
-  defultComponentsHeight,
+  defaultComponentsHeight,
   FluentTextField,
   labelRender,
 } from "./fluentui_customized_components";
@@ -162,11 +162,11 @@ export class FluentInputColor extends React.Component<
             styles={{
               ...defaultStyle,
               fieldGroup: {
-                ...defultComponentsHeight,
+                ...defaultComponentsHeight,
                 width: this.props.width,
               },
               root: {
-                ...defultComponentsHeight,
+                ...defaultComponentsHeight,
               },
               subComponentStyles: {
                 label: {
diff --git a/src/app/views/panels/widgets/controls/fluentui_input_number.tsx b/src/app/views/panels/widgets/controls/fluentui_input_number.tsx
index d5b85e89c..dcf7632f8 100644
--- a/src/app/views/panels/widgets/controls/fluentui_input_number.tsx
+++ b/src/app/views/panels/widgets/controls/fluentui_input_number.tsx
@@ -14,7 +14,7 @@ import {
   defaultFontWeight,
   defaultLabelStyle,
   defaultStyle,
-  defultComponentsHeight,
+  defaultComponentsHeight,
   FluentLayoutItem,
   FluentRowLayout,
   labelRender,
@@ -117,10 +117,10 @@ export const FluentInputNumber: React.FC<InputNumberProps> = (props) => {
       <Slider
         styles={{
           root: {
-            ...defultComponentsHeight,
+            ...defaultComponentsHeight,
           },
           slideBox: {
-            ...defultComponentsHeight,
+            ...defaultComponentsHeight,
           },
         }}
         min={sliderMin}
diff --git a/src/app/views/panels/widgets/controls/fluentui_reorder_string_value.tsx b/src/app/views/panels/widgets/controls/fluentui_reorder_string_value.tsx
index aff657256..461b9b7cd 100644
--- a/src/app/views/panels/widgets/controls/fluentui_reorder_string_value.tsx
+++ b/src/app/views/panels/widgets/controls/fluentui_reorder_string_value.tsx
@@ -6,7 +6,7 @@ import { ReorderListView } from "../../object_list_editor";
 import { ButtonRaised } from "../../../../components";
 import { strings } from "../../../../../strings";
 import { DefaultButton, TooltipHost } from "@fluentui/react";
-import { defultComponentsHeight } from "./fluentui_customized_components";
+import { defaultComponentsHeight } from "./fluentui_customized_components";
 import { getRandomNumber } from "../../../../../core";
 import { DataType } from "../../../../../core/specification";
 
@@ -85,7 +85,7 @@ export class FluentUIReorderStringsValue extends React.Component<
             styles={{
               root: {
                 minWidth: "unset",
-                ...defultComponentsHeight,
+                ...defaultComponentsHeight,
                 padding: 0,
                 marginRight: 5,
               },
@@ -98,7 +98,7 @@ export class FluentUIReorderStringsValue extends React.Component<
             styles={{
               root: {
                 minWidth: "unset",
-                ...defultComponentsHeight,
+                ...defaultComponentsHeight,
                 padding: 0,
                 marginRight: 5,
               },
@@ -123,7 +123,7 @@ export class FluentUIReorderStringsValue extends React.Component<
                 styles={{
                   root: {
                     minWidth: "unset",
-                    ...defultComponentsHeight,
+                    ...defaultComponentsHeight,
                     padding: 0,
                   },
                 }}
diff --git a/src/app/views/panels/widgets/fluent_mapping_editor.tsx b/src/app/views/panels/widgets/fluent_mapping_editor.tsx
index 4835cd24d..40ca479ec 100644
--- a/src/app/views/panels/widgets/fluent_mapping_editor.tsx
+++ b/src/app/views/panels/widgets/fluent_mapping_editor.tsx
@@ -31,8 +31,8 @@ import {
 } from "@fluentui/react";
 import {
   defaultLabelStyle,
-  defultBindButtonSize,
-  defultComponentsHeight,
+  defaultBindButtonSize,
+  defaultComponentsHeight,
   FluentActionButton,
   FluentButton,
   FluentRowLayout,
@@ -121,12 +121,12 @@ export class FluentMappingEditor extends React.Component<
                 scaleMapping={mapping as any}
                 store={this.props.store}
                 onSelect={(index) => {
-                  const paresedExpression = Expression.parse(
+                  const parsedExpression = Expression.parse(
                     scaleMapping.expression
                   ) as FunctionCall;
                   // change the second param of get function
-                  (paresedExpression.args[1] as any).value = index;
-                  scaleMapping.expression = paresedExpression.toString();
+                  (parsedExpression.args[1] as any).value = index;
+                  scaleMapping.expression = parsedExpression.toString();
                   this.props.parent.onEditMappingHandler(
                     this.props.attribute,
                     scaleMapping
@@ -411,10 +411,10 @@ export class FluentMappingEditor extends React.Component<
                     styles={{
                       menuIcon: {
                         display: "none !important",
-                        ...defultComponentsHeight,
+                        ...defaultComponentsHeight,
                       },
                       root: {
-                        ...defultComponentsHeight,
+                        ...defaultComponentsHeight,
                       },
                     }}
                     title={strings.mappingEditor.bindData}
@@ -507,10 +507,10 @@ export class FluentMappingEditor extends React.Component<
                       styles={{
                         menuIcon: {
                           display: "none !important",
-                          ...defultComponentsHeight,
+                          ...defaultComponentsHeight,
                         },
                         root: {
-                          ...defultComponentsHeight,
+                          ...defaultComponentsHeight,
                         },
                       }}
                       title={strings.mappingEditor.keyColumnExpression}
@@ -551,10 +551,10 @@ export class FluentMappingEditor extends React.Component<
                       styles={{
                         menuIcon: {
                           display: "none !important",
-                          ...defultComponentsHeight,
+                          ...defaultComponentsHeight,
                         },
                         root: {
-                          ...defultComponentsHeight,
+                          ...defaultComponentsHeight,
                         },
                       }}
                       title={strings.mappingEditor.bindData}
@@ -701,7 +701,7 @@ export class FluentMappingEditor extends React.Component<
                     styles={{
                       root: {
                         minWidth: "unset",
-                        ...defultBindButtonSize,
+                        ...defaultBindButtonSize,
                       },
                     }}
                     checked={false}
@@ -733,7 +733,7 @@ export class FluentMappingEditor extends React.Component<
                         },
                         root: {
                           minWidth: "unset",
-                          ...defultBindButtonSize,
+                          ...defaultBindButtonSize,
                         },
                       }}
                       title={strings.mappingEditor.bindData}
@@ -756,7 +756,7 @@ export class FluentMappingEditor extends React.Component<
                     styles={{
                       root: {
                         minWidth: "unset",
-                        ...defultBindButtonSize,
+                        ...defaultBindButtonSize,
                       },
                     }}
                     title={strings.mappingEditor.bindDataValue}
@@ -887,7 +887,7 @@ export class FluentMappingEditor extends React.Component<
   }
 }
 
-export interface DataMappAndScaleEditorProps {
+export interface DataMapAndScaleEditorProps {
   attribute: string;
   defaultMapping: Specification.Mapping;
   options: Prototypes.Controls.MappingEditorOptions;
@@ -896,13 +896,13 @@ export interface DataMappAndScaleEditorProps {
   alignLeft?: boolean;
   plotSegment: ObjectClass;
 }
-export interface DataMappAndScaleEditorState {
+export interface DataMapAndScaleEditorState {
   currentMapping: Specification.Mapping;
 }
 
-export class DataMappAndScaleEditor extends ContextedComponent<
-  DataMappAndScaleEditorProps,
-  DataMappAndScaleEditorState
+export class DataMapAndScaleEditor extends ContextedComponent<
+  DataMapAndScaleEditorProps,
+  DataMapAndScaleEditorState
 > {
   public state = {
     currentMapping: this.props.defaultMapping,
diff --git a/src/app/views/panels/widgets/fluentui_filter.tsx b/src/app/views/panels/widgets/fluentui_filter.tsx
index d06759727..16bfa8951 100644
--- a/src/app/views/panels/widgets/fluentui_filter.tsx
+++ b/src/app/views/panels/widgets/fluentui_filter.tsx
@@ -8,7 +8,7 @@ import { PanelMode } from "../../../../core/prototypes/controls";
 
 import { strings } from "../../../../strings";
 import {
-  defultComponentsHeight,
+  defaultComponentsHeight,
   FluentButton,
 } from "./controls/fluentui_customized_components";
 import { FluentUIFilterEditor } from "./fluentui_filter_editor";
@@ -46,7 +46,7 @@ export const FilterPanel: React.FC<{
               styles={{
                 root: {
                   minWidth: "unset",
-                  ...defultComponentsHeight,
+                  ...defaultComponentsHeight,
                 },
               }}
             />
diff --git a/src/app/views/panels/widgets/fluentui_manager.tsx b/src/app/views/panels/widgets/fluentui_manager.tsx
index 668153925..e3c5c7c32 100644
--- a/src/app/views/panels/widgets/fluentui_manager.tsx
+++ b/src/app/views/panels/widgets/fluentui_manager.tsx
@@ -78,8 +78,8 @@ import { FluentInputExpression } from "./controls/fluentui_input_expression";
 import {
   defaultLabelStyle,
   defaultStyle,
-  defultBindButtonSize,
-  defultComponentsHeight,
+  defaultBindButtonSize,
+  defaultComponentsHeight,
   FluentButton,
   FluentCheckbox,
   FluentDatePickerWrapper,
@@ -733,7 +733,7 @@ export class FluentUIWidgetManager
                   label: null,
                   root: {
                     minWidth: "unset",
-                    ...defultBindButtonSize,
+                    ...defaultBindButtonSize,
                   },
                 }}
                 title={options.labels[index]}
@@ -783,7 +783,7 @@ export class FluentUIWidgetManager
                 styles={{
                   label: defaultLabelStyle,
                   root: {
-                    ...defultComponentsHeight,
+                    ...defaultComponentsHeight,
                   },
                   ...options.checkBoxStyles,
                 }}
@@ -815,11 +815,11 @@ export class FluentUIWidgetManager
             title={options.label}
             label={options.label}
             styles={{
-              ...defultBindButtonSize,
+              ...defaultBindButtonSize,
               label: defaultLabelStyle,
               root: {
                 minWidth: "unset",
-                ...defultBindButtonSize,
+                ...defaultBindButtonSize,
               },
             }}
             text={options.label}
@@ -1058,7 +1058,7 @@ export class FluentUIWidgetManager
           styles={{
             root: {
               minWidth: "unset",
-              ...defultBindButtonSize,
+              ...defaultBindButtonSize,
             },
           }}
           iconProps={{
@@ -1178,7 +1178,7 @@ export class FluentUIWidgetManager
             styles={{
               root: {
                 minWidth: "unset",
-                ...defultBindButtonSize,
+                ...defaultBindButtonSize,
               },
               label: null,
             }}
@@ -1217,7 +1217,7 @@ export class FluentUIWidgetManager
           styles={{
             root: {
               minWidth: "unset",
-              ...defultComponentsHeight,
+              ...defaultComponentsHeight,
             },
           }}
           iconProps={{
@@ -1576,7 +1576,7 @@ export class FluentUIWidgetManager
                 },
                 root: {
                   minWidth: "unset",
-                  ...defultBindButtonSize,
+                  ...defaultBindButtonSize,
                 },
               }}
             />
@@ -1699,7 +1699,7 @@ export class FluentUIWidgetManager
                 styles={{
                   root: {
                     minWidth: "unset",
-                    ...defultComponentsHeight,
+                    ...defaultComponentsHeight,
                   },
                 }}
                 text={text}
@@ -1967,7 +1967,7 @@ export class FluentUIWidgetManager
           styles={{
             root: {
               minWidth: "unset",
-              ...defultComponentsHeight,
+              ...defaultComponentsHeight,
             },
           }}
           iconProps={{
diff --git a/src/app/views/panels/widgets/fluentui_value_editor.tsx b/src/app/views/panels/widgets/fluentui_value_editor.tsx
index 8913cb9d0..7d29941bc 100644
--- a/src/app/views/panels/widgets/fluentui_value_editor.tsx
+++ b/src/app/views/panels/widgets/fluentui_value_editor.tsx
@@ -32,8 +32,8 @@ import { strings } from "../../../../strings";
 import {
   defaultLabelStyle,
   defaultStyle,
-  defultBindButtonSize,
-  defultComponentsHeight,
+  defaultBindButtonSize,
+  defaultComponentsHeight,
   FluentTextField,
   labelRender,
 } from "./controls/fluentui_customized_components";
@@ -313,7 +313,7 @@ export class FluentValueEditor extends ContextedComponent<
               ...(defaultStyle as any),
               title: {
                 ...defaultStyle.title,
-                lineHeight: defultBindButtonSize.height,
+                lineHeight: defaultBindButtonSize.height,
               },
             }}
             label={this.props.label}
@@ -347,7 +347,7 @@ export class FluentValueEditor extends ContextedComponent<
               <DefaultButton
                 styles={{
                   root: {
-                    ...defultComponentsHeight,
+                    ...defaultComponentsHeight,
                   },
                   menuIcon: { display: "none !important" },
                 }}
diff --git a/src/app/views/panels/widgets/styles.tsx b/src/app/views/panels/widgets/styles.tsx
index a4cd17d42..2ae1e6caa 100644
--- a/src/app/views/panels/widgets/styles.tsx
+++ b/src/app/views/panels/widgets/styles.tsx
@@ -3,7 +3,7 @@
 
 import { IDropdownOption, IDropdownStyles } from "@fluentui/react";
 import {
-  defultComponentsHeight,
+  defaultComponentsHeight,
   FluentDropdown,
   FluentDropdownWrapper,
 } from "./controls/fluentui_customized_components";
@@ -19,7 +19,7 @@ export const dropdownStyles = (
 ): Partial<IDropdownStyles> => {
   return {
     title: {
-      ...defultComponentsHeight,
+      ...defaultComponentsHeight,
       borderWidth: options.hideBorder ? "0px" : null,
     },
     dropdownItemsWrapper: {
diff --git a/src/app/views/tool_bar.tsx b/src/app/views/tool_bar.tsx
index f9011137a..72783f79f 100644
--- a/src/app/views/tool_bar.tsx
+++ b/src/app/views/tool_bar.tsx
@@ -20,7 +20,7 @@ import { strings } from "../../strings";
 import { LayoutDirection, UndoRedoLocation } from "../main_view";
 import { EditorType } from "../stores/app_store";
 
-const minWidthToColapseButtons = Object.freeze({
+const minWidthToCollapseButtons = Object.freeze({
   guides: 1090,
   plotSegments: 1120,
   scaffolds: 1211,
@@ -459,7 +459,7 @@ export class Toolbar extends ContextedComponent<
             {strings.toolbar.guides}
           </span>
         )}
-        {innerWidth > minWidthToColapseButtons.guides ? (
+        {innerWidth > minWidthToCollapseButtons.guides ? (
           <>
             <ObjectButton
               classID="guide-y"
@@ -506,7 +506,7 @@ export class Toolbar extends ContextedComponent<
             </span>
           </>
         )}
-        {innerWidth > minWidthToColapseButtons.plotSegments ? (
+        {innerWidth > minWidthToCollapseButtons.plotSegments ? (
           <>
             <ObjectButton
               classID="plot-segment.cartesian"
@@ -536,7 +536,7 @@ export class Toolbar extends ContextedComponent<
             {strings.toolbar.scaffolds}
           </span>
         )}
-        {innerWidth > minWidthToColapseButtons.scaffolds ? (
+        {innerWidth > minWidthToCollapseButtons.scaffolds ? (
           <>
             <ScaffoldButton
               type="cartesian-x"
diff --git a/src/container/chart_template.ts b/src/container/chart_template.ts
index 01fd1f865..014b3a6cd 100644
--- a/src/container/chart_template.ts
+++ b/src/container/chart_template.ts
@@ -124,7 +124,7 @@ export class ChartTemplate {
   }
 
   /**
-   * Creates instance of chart object from template. Chart objecty can be loaded into container to display it in canvas
+   * Creates instance of chart object from template. Chart object can be loaded into container to display it in canvas
    * On editing this method ensure that you made correspond changes in template builder ({@link ChartTemplateBuilder}).
    * Any exposed into template objects should be initialized here
    */
@@ -172,7 +172,7 @@ export class ChartTemplate {
           const plotSegment = item.chartElement as Specification.PlotSegment;
           const originalTable = plotSegment.table;
           plotSegment.table = this.tableAssignment[originalTable];
-          // Also fix filter and gropyBy expressions
+          // Also fix filter and groupyBy expressions
           if (plotSegment.filter) {
             if (plotSegment.filter.categories) {
               plotSegment.filter.categories.expression = this.transformExpression(
@@ -389,7 +389,7 @@ export class ChartTemplate {
         ) as Specification.Types.AxisDataBinding;
         axisDataBinding.expression = expression;
         if (inference.autoDomainMin || inference.autoDomainMax) {
-          // disableAuto flag responsible for disabling/enabling configulration scale domains when new data is coming
+          // disableAuto flag responsible for disabling/enabling configuration scale domains when new data is coming
           // If disableAuto is true, the same scales will be used for data
           // Example: If disableAuto is true, axis values will be same for all new data sets.
           let vector = getExpressionVector(
diff --git a/src/container/container.tsx b/src/container/container.tsx
index 3aa031ebb..8ab94f36e 100644
--- a/src/container/container.tsx
+++ b/src/container/container.tsx
@@ -42,7 +42,7 @@ export interface ChartContainerComponentProps {
 export interface LocalizationConfig {
   currency: string;
   thousandsDelimiter: string;
-  decemalDelimiter: string;
+  decimalDelimiter: string;
 }
 
 export interface ChartContainerComponentState {
@@ -214,18 +214,18 @@ export class ChartContainer extends EventEmitter {
     public readonly instance: TemplateInstance,
     public readonly dataset: Dataset.Dataset,
     public renderEvents?: RenderEvents,
-    public localizaiton?: LocalizationConfig
+    public localization?: LocalizationConfig
   ) {
     super();
     this.chart = instance.chart;
     this.defaultAttributes = instance.defaultAttributes;
 
     setFormatOptions({
-      currency: [localizaiton?.currency, ""] ?? defaultCurrency,
+      currency: [localization?.currency, ""] ?? defaultCurrency,
       grouping: defaultDigitsGroup,
-      decimal: localizaiton?.decemalDelimiter ?? defaultNumberFormat.decimal,
+      decimal: localization?.decimalDelimiter ?? defaultNumberFormat.decimal,
       thousands:
-        localizaiton?.thousandsDelimiter ?? defaultNumberFormat.decimal,
+        localization?.thousandsDelimiter ?? defaultNumberFormat.decimal,
     });
   }
 
diff --git a/src/core/common/math.ts b/src/core/common/math.ts
index 98cf0f056..02b1700c5 100644
--- a/src/core/common/math.ts
+++ b/src/core/common/math.ts
@@ -54,12 +54,12 @@ export namespace Geometry {
     return { x: p.x / len, y: p.y / len };
   }
 
-  /** Rotate a vector 90 degrees (counter-clock-wise, but clock-wise in screen coordiantes) */
+  /** Rotate a vector 90 degrees (counter-clock-wise, but clock-wise in screen coordinates) */
   export function vectorRotate90(p: Vector): Vector {
     return { y: p.x, x: -p.y };
   }
 
-  /** Rotate a vector by a angle in radians (counter-clock-wise, but clock-wise in screen coordiantes) */
+  /** Rotate a vector by a angle in radians (counter-clock-wise, but clock-wise in screen coordinates) */
   export function vectorRotate(p: Vector, radians: number): Vector {
     return {
       x: p.x * Math.cos(radians) + p.y * Math.sin(radians),
diff --git a/src/core/common/unique_id.ts b/src/core/common/unique_id.ts
index 28f669522..c7c857691 100644
--- a/src/core/common/unique_id.ts
+++ b/src/core/common/unique_id.ts
@@ -39,14 +39,14 @@ export function uniqueID(): string {
 }
 
 let hashIndex = 1;
-const objectHashs = new WeakMap<Record<string, never>, string>();
+const objectHashes = new WeakMap<Record<string, never>, string>();
 
 export function objectHash(o: Record<string, never>): string {
-  if (objectHashs.has(o)) {
-    return objectHashs.get(o);
+  if (objectHashes.has(o)) {
+    return objectHashes.get(o);
   }
   const newHash = `<#${hashIndex.toString()}>`;
   hashIndex += 1;
-  objectHashs.set(o, newHash);
+  objectHashes.set(o, newHash);
   return newHash;
 }
diff --git a/src/core/common/utils.ts b/src/core/common/utils.ts
index 8450824df..e4cb81821 100644
--- a/src/core/common/utils.ts
+++ b/src/core/common/utils.ts
@@ -590,7 +590,7 @@ export function getSortFunctionByData(values: string[]) {
   return (a: any, b: any) => (a < b ? -1 : 1);
 }
 /**
- * Retunrs sort direction by comparing the first and the last values of string array
+ * Returns sort direction by comparing the first and the last values of string array
  */
 export function getSortDirection(values: string[]): string {
   let direction = "ascending";
@@ -624,7 +624,7 @@ export function compareMarkAttributeNames(a: string, b: string) {
   if (a === b) {
     return true;
   } else {
-    // fill and stroke uses with color. Those preoperties has the same meaning for marks
+    // fill and stroke uses with color. Those properties has the same meaning for marks
     if (colorAttributes.indexOf(b) > -1 && colorAttributes.indexOf(a) > -1) {
       return true;
     }
diff --git a/src/core/dataset/context.ts b/src/core/dataset/context.ts
index e324d7f5f..0b98902a2 100644
--- a/src/core/dataset/context.ts
+++ b/src/core/dataset/context.ts
@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 
 /**
- * Context provideres for expressions ({@link "core/expression/index"})
+ * Context providers for expressions ({@link "core/expression/index"})
  *
  * @packageDocumentation
  * @preferred
diff --git a/src/core/dataset/dsv_parser.ts b/src/core/dataset/dsv_parser.ts
index bb9634a50..c9cf1ef75 100644
--- a/src/core/dataset/dsv_parser.ts
+++ b/src/core/dataset/dsv_parser.ts
@@ -44,11 +44,11 @@ export interface LocaleFileFormat {
 }
 
 /**
- * Parses data from file. Returns converted rows and list of colum names with types.
+ * Parses data from file. Returns converted rows and list of column names with types.
  * Calls {@link inferAndConvertColumn} method from {@link "core/dataset/data_types"} for convert types.
  * @param fileName input file name for parsing
  * @param content data of file
- * @param type type of file. *.csv - text with coma delimeter. *.tsv - tab separated text files
+ * @param type type of file. *.csv - text with coma delimiter. *.tsv - tab separated text files
  */
 export function parseDataset(
   fileName: string,
diff --git a/src/core/dataset/index.ts b/src/core/dataset/index.ts
index 20a2b98cb..35f093df8 100644
--- a/src/core/dataset/index.ts
+++ b/src/core/dataset/index.ts
@@ -14,7 +14,7 @@
  *
  * {@link "core/dataset/context"} provides proxy classes for data and expressions. Expressions module ({@link "core/expression/index"}) classes use data through context.
  *
- * {@link "core/dataset/dataset"} interfaces for describe dataset stuctures of charticulator as Table, Column, Dataset e.t.c.
+ * {@link "core/dataset/dataset"} interfaces for describe dataset structures of charticulator as Table, Column, Dataset e.t.c.
  *
  * @packageDocumentation
  * @preferred
diff --git a/src/core/expression/classes.ts b/src/core/expression/classes.ts
index 88f3e4e61..e29c0fc04 100644
--- a/src/core/expression/classes.ts
+++ b/src/core/expression/classes.ts
@@ -256,7 +256,7 @@ export class FunctionCall extends Expression {
       }
     }
     if (v == undefined) {
-      throw new SyntaxError(`undefiend function ${this.name}`);
+      throw new SyntaxError(`undefined function ${this.name}`);
     } else {
       this.function = v;
     }
diff --git a/src/core/expression/index.ts b/src/core/expression/index.ts
index f68116b79..564cf44fb 100644
--- a/src/core/expression/index.ts
+++ b/src/core/expression/index.ts
@@ -1,7 +1,7 @@
 /**
  * Expressions
  *
- * The module of exressions responsible for data binding or data fetching
+ * The module of expressions responsible for data binding or data fetching
  * Grammar of expression described in [parser.pegjs file](\src\core\expression\index.ts)
  *
  * @packageDocumentation
diff --git a/src/core/expression/parser.pegjs b/src/core/expression/parser.pegjs
index e0d0ab9b8..2cad8bb5c 100644
--- a/src/core/expression/parser.pegjs
+++ b/src/core/expression/parser.pegjs
@@ -94,13 +94,13 @@ level4
         return create_operator(flatten(op), expr);
     }
 
-begin_braket "\"(\"" = "("
-end_braket "\")\"" = ")"
+begin_bracket "\"(\"" = "("
+end_bracket "\")\"" = ")"
 comma "\",\'" = ","
 dot "." = "."
 
-braket_expression
-  = begin_braket sp expr:levelm0 sp end_braket
+bracket_expression
+  = begin_bracket sp expr:levelm0 sp end_bracket
     { return expr; }
 
 item
@@ -109,11 +109,11 @@ item
   / lambda_function
   / fieldaccess
   / variable
-  / braket_expression
+  / bracket_expression
 
 fieldable
   = variable
-  / braket_expression
+  / bracket_expression
 
 fieldaccess
   = expr:fieldable fields:(sp dot sp variable_name)+
@@ -122,7 +122,7 @@ fieldaccess
 funcitem
   = fieldaccess
   / variable
-  / braket_expression
+  / bracket_expression
 
 funcname
   = name:variable_name names:("." variable_name)*
@@ -142,7 +142,7 @@ argitems
     { return [ expr ] }
 
 argitem_list
-  = begin_braket sp source_args:argitems sp end_braket
+  = begin_bracket sp source_args:argitems sp end_bracket
     {
       var args = [];
       for(var i = 0; i < source_args.length; i++) {
@@ -167,7 +167,7 @@ argnames
     { return [ expr ] }
 
 lambda_function
-  = begin_braket sp argNames:argnames sp end_braket sp "=>" sp expr:expression
+  = begin_bracket sp argNames:argnames sp end_bracket sp "=>" sp expr:expression
     { return new Expression.LambdaFunction(expr, argNames); }
   / argName:variable_name sp "=>" sp expr:expression
     { return new Expression.LambdaFunction(expr, [argName]); }
diff --git a/src/core/prototypes/charts/index.ts b/src/core/prototypes/charts/index.ts
index ae4c19275..21c148a23 100644
--- a/src/core/prototypes/charts/index.ts
+++ b/src/core/prototypes/charts/index.ts
@@ -139,7 +139,7 @@ export class RectangleChart extends ChartClass {
   };
   public readonly state: RectangleChartState;
 
-  // Get a list of elemnt attributes
+  // Get a list of element attributes
   public attributeNames: string[] = [
     "x1",
     "y1",
diff --git a/src/core/prototypes/common.ts b/src/core/prototypes/common.ts
index ccad3ce30..0f793550a 100644
--- a/src/core/prototypes/common.ts
+++ b/src/core/prototypes/common.ts
@@ -141,7 +141,7 @@ export namespace Handles {
     y: number;
   }
 
-  /** A line with a x or y coordiante, and a span on the other */
+  /** A line with a x or y coordinate, and a span on the other */
   export interface Line extends Description {
     type: "line";
     axis: "x" | "y";
diff --git a/src/core/prototypes/controls.ts b/src/core/prototypes/controls.ts
index 189800100..03b264ac3 100644
--- a/src/core/prototypes/controls.ts
+++ b/src/core/prototypes/controls.ts
@@ -118,7 +118,7 @@ export interface MappingEditorOptions extends SearchSection {
   openMapping?: boolean;
   /** Enables value selector from mapping */
   allowSelectValue?: boolean;
-  /** Text lael of input */
+  /** Text label of input */
   label?: string;
   stopPropagation?: boolean;
 
diff --git a/src/core/prototypes/dataflow/index.ts b/src/core/prototypes/dataflow/index.ts
index fe30bfe2c..b77670a6c 100644
--- a/src/core/prototypes/dataflow/index.ts
+++ b/src/core/prototypes/dataflow/index.ts
@@ -6,7 +6,7 @@
  *
  * {@link DataflowTable} provides data context for charticulator's expressions, solver, plotsegments.
  *
- * {@link DataflowManager} is a proxy between dateset and other parts of charticualtor.
+ * {@link DataflowManager} is a proxy between dataset and other parts of charticulator.
  *
  * @packageDocumentation
  * @preferred
diff --git a/src/core/prototypes/glyphs/index.ts b/src/core/prototypes/glyphs/index.ts
index 3330db7f4..2f2b78454 100644
--- a/src/core/prototypes/glyphs/index.ts
+++ b/src/core/prototypes/glyphs/index.ts
@@ -80,7 +80,7 @@ export class RectangleGlyph extends GlyphClass {
 
   public readonly state: RectangleGlyphState;
 
-  // Get a list of elemnt attributes
+  // Get a list of element attributes
   public attributeNames: string[] = [
     "x1",
     "y1",
diff --git a/src/core/prototypes/guides/polar_coordinator.ts b/src/core/prototypes/guides/polar_coordinator.ts
index 6dda70b7c..154764c4c 100644
--- a/src/core/prototypes/guides/polar_coordinator.ts
+++ b/src/core/prototypes/guides/polar_coordinator.ts
@@ -248,13 +248,13 @@ export class GuidePolarCoordinatorClass extends ChartElementClass<
 
     // xy
     {
-      const angleVarable: Variable[] = [];
+      const angleVariable: Variable[] = [];
       for (let xindex = 0; xindex < angularX.length; xindex++) {
-        angleVarable.push(solver.attr(attrs, angularX[xindex]));
+        angleVariable.push(solver.attr(attrs, angularX[xindex]));
       }
-      const radialVarable: Variable[] = [];
+      const radialVariable: Variable[] = [];
       for (let yindex = 0; yindex < radialY.length; yindex++) {
-        radialVarable.push(solver.attr(attrs, radialY[yindex]));
+        radialVariable.push(solver.attr(attrs, radialY[yindex]));
       }
 
       for (let xindex = 0; xindex < angularX.length; xindex++) {
@@ -333,8 +333,8 @@ export class GuidePolarCoordinatorClass extends ChartElementClass<
           solver,
           x,
           y,
-          radialVarable,
-          angleVarable,
+          radialVariable,
+          angleVariable,
           attrs,
           chartConstraints,
           this.object._id,
@@ -639,7 +639,7 @@ export class GuidePolarCoordinatorClass extends ChartElementClass<
               )
             )
           ),
-          // uncomment to allow configure raito
+          // uncomment to allow configure ratio
           // manager.row(
           //   strings.objects.guides.radius,
           //   manager.horizontal(
diff --git a/src/core/prototypes/index.ts b/src/core/prototypes/index.ts
index 7429dadc3..14d77cfb0 100644
--- a/src/core/prototypes/index.ts
+++ b/src/core/prototypes/index.ts
@@ -10,15 +10,15 @@
  *
  * * Chart {@link "core/prototypes/charts/index"} highest level element, contains all other elements like plot segments, marks, legends e.t.c
  *
- * * Scales {@link "core/prototypes/plot_segments/index"} map data valus into pixels and sizes of elements(marks)
+ * * Scales {@link "core/prototypes/plot_segments/index"} map data values into pixels and sizes of elements(marks)
  *
  * * Links {@link "core/prototypes/links/index"}
  *
  * * Legends {@link "core/prototypes/legends/index"}
  *
- * * Guides {@link "core/prototypes/guides/index"} helper non visual elements to allign other elements
+ * * Guides {@link "core/prototypes/guides/index"} helper non visual elements to align other elements
  *
- * * Glyphs {@link "core/prototypes/glyphs/index"} is container of other elements on plot segmets
+ * * Glyphs {@link "core/prototypes/glyphs/index"} is container of other elements on plot segments
  *
  * * Dataflow {@link "core/prototypes/dataflow/index"} uses for connecting elements to dataset
  *
diff --git a/src/core/prototypes/marks/anchor.ts b/src/core/prototypes/marks/anchor.ts
index 0c50d11d3..2909478ac 100644
--- a/src/core/prototypes/marks/anchor.ts
+++ b/src/core/prototypes/marks/anchor.ts
@@ -33,7 +33,7 @@ export class AnchorElement extends MarkClass {
 
   public readonly state: AnchorElementState;
 
-  /** Get a list of elemnt attributes */
+  /** Get a list of element attributes */
   public attributeNames: string[] = ["x", "y"];
   public attributes: { [name: string]: AttributeDescription } = {
     x: {
diff --git a/src/core/prototypes/marks/image.ts b/src/core/prototypes/marks/image.ts
index 5266d9abf..1c8ddd760 100644
--- a/src/core/prototypes/marks/image.ts
+++ b/src/core/prototypes/marks/image.ts
@@ -329,7 +329,7 @@ export class ImageElementClass extends EmphasizableMarkClass<
     glyphIndex: number,
     // eslint-disable-next-line
     manager: ChartStateManager,
-    empasized?: boolean
+    emphasized?: boolean
   ): Graphics.Element {
     const attrs = this.state.attributes;
     const props = this.object.properties;
@@ -365,7 +365,7 @@ export class ImageElementClass extends EmphasizableMarkClass<
       );
     }
 
-    // Center in local coordiantes
+    // Center in local coordinates
     const cx = (attrs.x1 + attrs.x2) / 2;
     const cy = (attrs.y1 + attrs.y2) / 2;
 
@@ -438,8 +438,8 @@ export class ImageElementClass extends EmphasizableMarkClass<
         height: imageHeight,
         mode: "stretch",
         style: {
-          ...this.generateEmphasisStyle(empasized),
-          colorFilter: empasized
+          ...this.generateEmphasisStyle(emphasized),
+          colorFilter: emphasized
             ? `alpha(opacity=${DEFAULT_POWER_BI_OPACITY * 100})`
             : null,
         },
diff --git a/src/core/prototypes/marks/index.ts b/src/core/prototypes/marks/index.ts
index 0b4b063d1..76436a5e4 100644
--- a/src/core/prototypes/marks/index.ts
+++ b/src/core/prototypes/marks/index.ts
@@ -4,7 +4,7 @@
 /**
  * # Marks
  *
- * Most of mark elements extends {@link EmphasizableMarkClass} and  {@link MarkClass} clases.
+ * Most of mark elements extends {@link EmphasizableMarkClass} and  {@link MarkClass} classes.
  *
  * Each mark has a property
  *
@@ -42,8 +42,8 @@
  *
  *
  * All marks implement several methods of {@link ObjectClass}
- * for exmaple
- * `{@link ObjectClass.getAttributePanelWidgets}` - the method responsible for displaying widgets in the property panel. Each time when a user selects the mark in the object browser, the charticualtor calls this method to display properties. Charticulator displays the properties for rectangle named `Shape1`
+ * for example
+ * `{@link ObjectClass.getAttributePanelWidgets}` - the method responsible for displaying widgets in the property panel. Each time when a user selects the mark in the object browser, the charticulator calls this method to display properties. Charticulator displays the properties for rectangle named `Shape1`
  *
  * ![Mark widgets](media://mark_widgets.png)
  *
diff --git a/src/core/prototypes/marks/nested_chart.ts b/src/core/prototypes/marks/nested_chart.ts
index 6aa45dedb..085acb41c 100644
--- a/src/core/prototypes/marks/nested_chart.ts
+++ b/src/core/prototypes/marks/nested_chart.ts
@@ -265,7 +265,7 @@ export class NestedChartElementClass extends EmphasizableMarkClass<
     // eslint-disable-next-line
     manager: ChartStateManager,
     // eslint-disable-next-line
-    empasized?: boolean
+    emphasized?: boolean
   ): Graphics.Element {
     const attrs = this.state.attributes;
     if (!attrs.visible || !this.object.properties.visible) {
diff --git a/src/core/prototypes/marks/rect.ts b/src/core/prototypes/marks/rect.ts
index 9b34c17c5..d5efd2846 100644
--- a/src/core/prototypes/marks/rect.ts
+++ b/src/core/prototypes/marks/rect.ts
@@ -36,7 +36,7 @@ export { RectElementAttributes, RectElementProperties };
 export enum ShapeType {
   Rectangle = "rectangle",
   Triangle = "triangle",
-  Ellips = "ellipse",
+  Ellipse = "ellipse",
 }
 
 export class RectElementClass extends EmphasizableMarkClass<
@@ -236,7 +236,7 @@ export class RectElementClass extends EmphasizableMarkClass<
               options: [
                 ShapeType.Rectangle,
                 ShapeType.Triangle,
-                ShapeType.Ellips,
+                ShapeType.Ellipse,
               ],
               searchSection: strings.objects.general,
             }
@@ -404,7 +404,7 @@ export class RectElementClass extends EmphasizableMarkClass<
       this.state.attributes,
       ["x1", "y1", "x2", "y2", "cx", "cy", "width", "height"]
     );
-    // Describes intrinsic relations of reactangle
+    // Describes intrinsic relations of rectangle
     // add constraint x2 - x1 = width
     solver.addLinear(
       ConstraintStrength.HARD,
@@ -477,7 +477,7 @@ export class RectElementClass extends EmphasizableMarkClass<
     glyphIndex = 0,
     // eslint-disable-next-line
     manager: ChartStateManager,
-    empasized?: boolean
+    emphasized?: boolean
   ): Graphics.Element {
     const attrs = this.state.attributes;
     const properties = this.object.properties;
@@ -486,7 +486,7 @@ export class RectElementClass extends EmphasizableMarkClass<
     }
     const helper = new Graphics.CoordinateSystemHelper(cs);
     switch (this.object.properties.shape) {
-      case ShapeType.Ellips: {
+      case ShapeType.Ellipse: {
         return helper.ellipse(
           attrs.x1 + offset.x,
           attrs.y1 + offset.y,
@@ -501,12 +501,12 @@ export class RectElementClass extends EmphasizableMarkClass<
             ),
             fillColor: attrs.fill,
             opacity: attrs.opacity,
-            ...this.generateEmphasisStyle(empasized),
+            ...this.generateEmphasisStyle(emphasized),
           }
         );
       }
       case ShapeType.Triangle: {
-        const path = this.drawTriangleOrCometMarks(helper, offset, empasized);
+        const path = this.drawTriangleOrCometMarks(helper, offset, emphasized);
         return path;
       }
       case ShapeType.Rectangle:
@@ -525,7 +525,7 @@ export class RectElementClass extends EmphasizableMarkClass<
             ),
             fillColor: attrs.fill,
             opacity: attrs.opacity,
-            ...this.generateEmphasisStyle(empasized),
+            ...this.generateEmphasisStyle(emphasized),
           },
           properties.rx,
           properties.ry
@@ -833,7 +833,7 @@ export class RectElementClass extends EmphasizableMarkClass<
   private drawTriangleOrCometMarks(
     helper: Graphics.CoordinateSystemHelper,
     offset: Point,
-    empasized?: boolean
+    emphasized?: boolean
   ) {
     const pathMaker = new Graphics.PathMaker();
     const properties = this.object.properties;
@@ -919,7 +919,7 @@ export class RectElementClass extends EmphasizableMarkClass<
       strokeDasharray: strokeStyleToDashArray(properties.strokeStyle),
       fillColor: attrs.fill,
       opacity: attrs.opacity,
-      ...this.generateEmphasisStyle(empasized),
+      ...this.generateEmphasisStyle(emphasized),
     };
     return path;
   }
diff --git a/src/core/prototypes/marks/text.ts b/src/core/prototypes/marks/text.ts
index f3b4a6008..6c059b497 100644
--- a/src/core/prototypes/marks/text.ts
+++ b/src/core/prototypes/marks/text.ts
@@ -114,7 +114,7 @@ export class TextElementClass extends EmphasizableMarkClass<
     glyphIndex = 0,
     // eslint-disable-next-line
     manager: ChartStateManager,
-    empasized?: boolean
+    emphasized?: boolean
   ): Graphics.Element {
     const attrs = this.state.attributes;
     const props = this.object.properties;
@@ -160,7 +160,7 @@ export class TextElementClass extends EmphasizableMarkClass<
               backgroundColor: attrs.backgroundColor,
               backgroundColorId: attrs.backgroundColorFilterId,
               opacity: attrs.opacity,
-              ...this.generateEmphasisStyle(empasized),
+              ...this.generateEmphasisStyle(emphasized),
             }
           )
         );
@@ -179,7 +179,7 @@ export class TextElementClass extends EmphasizableMarkClass<
           backgroundColor: attrs.backgroundColor,
           backgroundColorId: attrs.backgroundColorFilterId,
           opacity: attrs.opacity,
-          ...this.generateEmphasisStyle(empasized),
+          ...this.generateEmphasisStyle(emphasized),
         }
       );
     }
diff --git a/src/core/prototypes/marks/textbox.ts b/src/core/prototypes/marks/textbox.ts
index 078f7788a..679e4cc4d 100644
--- a/src/core/prototypes/marks/textbox.ts
+++ b/src/core/prototypes/marks/textbox.ts
@@ -859,7 +859,7 @@ export class TextboxElementClass extends EmphasizableMarkClass<
   public getTemplateParameters(): TemplateParameters {
     const properties = [];
     if (
-      this.object.mappings.vistextible &&
+      this.object.mappings.visible &&
       this.object.mappings.text.type === MappingType.value
     ) {
       properties.push({
diff --git a/src/core/prototypes/object.ts b/src/core/prototypes/object.ts
index 7de39ab5a..013f2c52d 100644
--- a/src/core/prototypes/object.ts
+++ b/src/core/prototypes/object.ts
@@ -237,7 +237,7 @@ export class ObjectClasses {
   }
 
   /**
-   * Gets an interator of registered classes.
+   * Gets an iterator of registered classes.
    */
   public static RegisteredClasses(): IterableIterator<ObjectClassConstructor> {
     return this.registeredObjectClasses.values();
diff --git a/src/core/prototypes/plot_segments/axis.ts b/src/core/prototypes/plot_segments/axis.ts
index 631fb6e55..58aacde7f 100644
--- a/src/core/prototypes/plot_segments/axis.ts
+++ b/src/core/prototypes/plot_segments/axis.ts
@@ -47,7 +47,7 @@ import {
   AxisDataBindingType,
   NumericalMode,
 } from "../../specification/types";
-import { VirtualScrollBar, VirtualScrollBarPropertes } from "./virtualScroll";
+import { VirtualScrollBar, VirtualScrollBarProperties } from "./virtualScroll";
 import {
   CategoryItemsWithIds,
   getOnConfirmFunction,
@@ -69,8 +69,8 @@ import React = require("react");
 
 export const defaultAxisStyle: Specification.Types.AxisRenderingStyle = {
   tickColor: { r: 0, g: 0, b: 0 },
-  tickTextBackgroudColor: null,
-  tickTextBackgroudColorId: null,
+  tickTextBackgroundColor: null,
+  tickTextBackgroundColorId: null,
   showTicks: true,
   showBaseline: true,
   lineColor: { r: 0, g: 0, b: 0 },
@@ -135,7 +135,7 @@ export class AxisRenderer {
     } else {
       this.style = fillDefaultAxisStyle(deepClone(style));
     }
-    this.style.tickTextBackgroudColorId =
+    this.style.tickTextBackgroundColorId =
       "axis-tick-filter-" + getRandomNumber();
     return this;
   }
@@ -713,8 +713,8 @@ export class AxisRenderer {
               style.fontSize,
               {
                 fillColor: style.tickColor,
-                backgroundColor: style.tickTextBackgroudColor,
-                backgroundColorId: style.tickTextBackgroudColorId,
+                backgroundColor: style.tickTextBackgroundColor,
+                backgroundColorId: style.tickTextBackgroundColorId,
               }
             );
             lines.push(text);
@@ -745,8 +745,8 @@ export class AxisRenderer {
               style.fontSize,
               {
                 fillColor: style.tickColor,
-                backgroundColor: style.tickTextBackgroudColor,
-                backgroundColorId: style.tickTextBackgroudColorId,
+                backgroundColor: style.tickTextBackgroundColor,
+                backgroundColorId: style.tickTextBackgroundColorId,
               },
               this.plotSegment && this.dataFlow
                 ? {
@@ -788,8 +788,8 @@ export class AxisRenderer {
             style.fontSize,
             {
               fillColor: style.tickColor,
-              backgroundColor: style.tickTextBackgroudColor,
-              backgroundColorId: style.tickTextBackgroudColorId,
+              backgroundColor: style.tickTextBackgroundColor,
+              backgroundColorId: style.tickTextBackgroundColorId,
             },
             this.plotSegment && this.dataFlow
               ? {
@@ -850,8 +850,8 @@ export class AxisRenderer {
               style.fontSize,
               {
                 fillColor: style.tickColor,
-                backgroundColor: style.tickTextBackgroudColor,
-                backgroundColorId: style.tickTextBackgroudColorId,
+                backgroundColor: style.tickTextBackgroundColor,
+                backgroundColorId: style.tickTextBackgroundColorId,
               },
               this.plotSegment && this.dataFlow
                 ? {
@@ -921,8 +921,8 @@ export class AxisRenderer {
                 style.fontSize,
                 {
                   fillColor: style.tickColor,
-                  backgroundColor: style.tickTextBackgroudColor,
-                  backgroundColorId: style.tickTextBackgroudColorId,
+                  backgroundColor: style.tickTextBackgroundColor,
+                  backgroundColorId: style.tickTextBackgroundColorId,
                 },
                 this.plotSegment && this.dataFlow
                   ? {
@@ -980,8 +980,8 @@ export class AxisRenderer {
                 style.fontSize,
                 {
                   fillColor: style.tickColor,
-                  backgroundColor: style.tickTextBackgroudColor,
-                  backgroundColorId: style.tickTextBackgroudColorId,
+                  backgroundColor: style.tickTextBackgroundColor,
+                  backgroundColorId: style.tickTextBackgroundColorId,
                 },
                 this.plotSegment && this.dataFlow
                   ? {
@@ -1046,7 +1046,7 @@ export class AxisRenderer {
       return;
     }
     const g = makeGroup([]);
-    const gridineArcRotate = 90;
+    const gridlineArcRotate = 90;
     const lineStyle: Style = {
       strokeLinecap: "round",
       strokeColor: style.gridlineColor,
@@ -1055,10 +1055,10 @@ export class AxisRenderer {
     };
     for (const tickPosition of this.ticks.map((x) => x.position)) {
       const cos = Math.cos(
-        Geometry.degreesToRadians(-tickPosition + gridineArcRotate)
+        Geometry.degreesToRadians(-tickPosition + gridlineArcRotate)
       );
       const sin = Math.sin(
-        Geometry.degreesToRadians(-tickPosition + gridineArcRotate)
+        Geometry.degreesToRadians(-tickPosition + gridlineArcRotate)
       );
       const tx1 = x + cos * innerRadius;
       const ty1 = y + sin * innerRadius;
@@ -1085,7 +1085,7 @@ export class AxisRenderer {
     const g = makeGroup([]);
     const startCos = Math.cos(Geometry.degreesToRadians(startAngle));
     const startSin = Math.sin(Geometry.degreesToRadians(startAngle));
-    const gridineArcRotate = 90;
+    const gridlineArcRotate = 90;
     const lineStyle: Style = {
       strokeLinecap: "round",
       strokeColor: style.gridlineColor,
@@ -1101,9 +1101,9 @@ export class AxisRenderer {
       arc.polarLineTo(
         x,
         y,
-        -startAngle + gridineArcRotate,
+        -startAngle + gridlineArcRotate,
         tickPosition,
-        -endAngle + gridineArcRotate,
+        -endAngle + gridlineArcRotate,
         tickPosition,
         true
       );
@@ -1140,25 +1140,25 @@ export class AxisRenderer {
       Geometry.degreesToRadians(
         radius * ((rangeMax - rangeMin) / this.ticks.length)
       ) -
-      margins * 2; // lenght of arc for all ticks
+      margins * 2; // length of arc for all ticks
     for (const tick of this.ticks) {
       const angle = tick.position;
       const radians = Geometry.degreesToRadians(angle);
       const tx = Math.sin(radians) * radius;
       const ty = Math.cos(radians) * radius;
 
-      const lablel =
+      const label =
         tick.label && replaceSymbolByTab(replaceSymbolByNewLine(tick.label));
       if (
-        lablel &&
+        label &&
         (style.wordWrap ||
           (typeof tick.label === "string" &&
-            splitStringByNewLine(lablel).length > 1))
+            splitStringByNewLine(label).length > 1))
       ) {
-        let textContent = [lablel];
+        let textContent = [label];
         if (style.wordWrap) {
           textContent = splitByWidth(
-            lablel,
+            label,
             maxTickDistance,
             10000,
             style.fontFamily,
@@ -1190,8 +1190,8 @@ export class AxisRenderer {
             style.fontSize,
             {
               fillColor: style.tickColor,
-              backgroundColor: style.tickTextBackgroudColor,
-              backgroundColorId: style.tickTextBackgroudColorId,
+              backgroundColor: style.tickTextBackgroundColor,
+              backgroundColorId: style.tickTextBackgroundColorId,
             }
           );
           lines.push(gt);
@@ -1219,8 +1219,8 @@ export class AxisRenderer {
           style.showTicks ? line : null,
           makeText(textX, textY, tick.label, style.fontFamily, style.fontSize, {
             fillColor: style.tickColor,
-            backgroundColor: style.tickTextBackgroudColor,
-            backgroundColorId: style.tickTextBackgroudColorId,
+            backgroundColor: style.tickTextBackgroundColor,
+            backgroundColorId: style.tickTextBackgroundColorId,
           }),
         ]);
 
@@ -1267,8 +1267,8 @@ export class AxisRenderer {
         style.showTicks ? line : null,
         makeText(textX, textY, tick.label, style.fontFamily, style.fontSize, {
           fillColor: style.tickColor,
-          backgroundColor: style.tickTextBackgroudColor,
-          backgroundColorId: style.tickTextBackgroudColorId,
+          backgroundColor: style.tickTextBackgroundColor,
+          backgroundColorId: style.tickTextBackgroundColorId,
         }),
       ]);
 
@@ -1353,7 +1353,7 @@ export class AxisRenderer {
       height = AxisRenderer.SCROLL_BAR_SIZE;
     }
 
-    return React.createElement(VirtualScrollBar, <VirtualScrollBarPropertes>{
+    return React.createElement(VirtualScrollBar, <VirtualScrollBarProperties>{
       onScroll,
       handlerBarWidth: AxisRenderer.SCROLL_BAR_SIZE,
       height,
@@ -1593,10 +1593,10 @@ export function buildAxisAppearanceWidgets(
             manager.inputColor(
               {
                 property: axisProperty,
-                field: ["style", "tickTextBackgroudColor"],
+                field: ["style", "tickTextBackgroundColor"],
               },
               {
-                label: strings.objects.axes.tickTextBackgroudColor,
+                label: strings.objects.axes.tickTextBackgroundColor,
                 labelKey: `tick-text-background-color-${axisProperty}`,
                 allowNull: true,
                 searchSection: [
diff --git a/src/core/prototypes/plot_segments/index.ts b/src/core/prototypes/plot_segments/index.ts
index efbeb3c17..eb6a01ed7 100644
--- a/src/core/prototypes/plot_segments/index.ts
+++ b/src/core/prototypes/plot_segments/index.ts
@@ -2,33 +2,33 @@
 // Licensed under the MIT license.
 
 /**
- * Plotsegmets are high level elements of charticulator responsible for layout and arrange other elements (glyph's and marks)
+ * Plotsegments are high level elements of charticulator responsible for layout and arrange other elements (glyph's and marks)
  *
- * ![Plot segmets](media://plotsegmets_scaffolds.png)
+ * ![Plot segments](media://plotsegments_scaffolds.png)
  *
  * Segment can have different sublayouts: stacked x, stacked y, grid, packing e.tc
  *
- * ![Plot segmets sublayout](media://cartesian_plot_segment.png) ![Polar plot segmets sublayout](media://sublayout_polar.png)
+ * ![Plot segments sublayout](media://cartesian_plot_segment.png) ![Polar plot segments sublayout](media://sublayout_polar.png)
  *
- * All plot segmets extends {@link PlotSegmentClass} class.
+ * All plot segments extends {@link PlotSegmentClass} class.
  *
- * Charticulator has different plot segmets:
+ * Charticulator has different plot segments:
  *
  * {@link LineGuide} - puts elements on the one line
  *
- * {@link MapPlotSegment} - special plot segmet to draw a map. Uses {@link StaticMapService} class to workd with Bing and Google services
+ * {@link MapPlotSegment} - special plot segment to draw a map. Uses {@link StaticMapService} class to work with Bing and Google services
  *
- * {@link CartesianPlotSegment} - classic plot segmet with x and y axis coordinates
+ * {@link CartesianPlotSegment} - classic plot segment with x and y axis coordinates
  *
- * ![Cartesian plot segmets](media://cartesian_plot.png)
+ * ![Cartesian plot segments](media://cartesian_plot.png)
  *
- * {@link CurvePlotSegment} - puts elements on cruve drawn by user.
+ * {@link CurvePlotSegment} - puts elements on curve drawn by user.
  *
  * ![Curve plot](media://curve_plot.png)
  *
- * {@link PolarPlotSegment} - plot segmets with polar coordinates
+ * {@link PolarPlotSegment} - plot segments with polar coordinates
  *
- * ![Polar plot segmets](media://polar_plot.png)
+ * ![Polar plot segments](media://polar_plot.png)
  *
  * @packageDocumentation
  * @preferred
diff --git a/src/core/prototypes/plot_segments/line.ts b/src/core/prototypes/plot_segments/line.ts
index 69a8be13b..70c7c2ec0 100644
--- a/src/core/prototypes/plot_segments/line.ts
+++ b/src/core/prototypes/plot_segments/line.ts
@@ -28,7 +28,7 @@ import { AxisDataBinding } from "../../specification/types";
 /**
  * Line plot segment distributes the elements on the line
  *
- *  (y1 and y2 can have diferent values, so line cna have some angle between line and axis lines)
+ *  (y1 and y2 can have different values, so line can have some angle between line and axis lines)
  *  y1 *------#------#------* y2
  *    x1                    x2
  *
diff --git a/src/core/prototypes/plot_segments/region_2d/base.ts b/src/core/prototypes/plot_segments/region_2d/base.ts
index ff8fe7e2a..1325023df 100644
--- a/src/core/prototypes/plot_segments/region_2d/base.ts
+++ b/src/core/prototypes/plot_segments/region_2d/base.ts
@@ -48,7 +48,7 @@ export enum GridStartPosition {
   LeftTop = "LT",
   RightTop = "RT",
   LeftBottom = "LB",
-  RigtBottom = "RB",
+  RightBottom = "RB",
 }
 
 export interface Region2DSublayoutOptions extends Specification.AttributeMap {
@@ -244,7 +244,7 @@ export class DodgingFitters {
 }
 
 /**
- * Describes variables for constraints group. Count of group matches with data cound
+ * Describes variables for constraints group. Count of group matches with data count
  */
 export class SublayoutGroup {
   public group: number[];
@@ -1724,7 +1724,7 @@ export class Region2DConstraintBuilder {
   ) {
     if (
       gridStartPosition === GridStartPosition.LeftBottom ||
-      gridStartPosition === GridStartPosition.RigtBottom
+      gridStartPosition === GridStartPosition.RightBottom
     ) {
       markStates = markStates.reverse();
     }
@@ -1741,7 +1741,7 @@ export class Region2DConstraintBuilder {
 
         if (
           gridStartPosition === GridStartPosition.RightTop ||
-          gridStartPosition === GridStartPosition.RigtBottom
+          gridStartPosition === GridStartPosition.RightBottom
         ) {
           xi = xCount - 1 - xi; // flip X
         }
@@ -2677,7 +2677,7 @@ export class Region2DConstraintBuilder {
                 GridStartPosition.LeftTop,
                 GridStartPosition.RightTop,
                 GridStartPosition.LeftBottom,
-                GridStartPosition.RigtBottom,
+                GridStartPosition.RightBottom,
               ],
               labels: [
                 strings.objects.plotSegment.directionDownRight,
@@ -3027,7 +3027,7 @@ export class Region2DConstraintBuilder {
                   GridStartPosition.LeftTop,
                   GridStartPosition.RightTop,
                   GridStartPosition.LeftBottom,
-                  GridStartPosition.RigtBottom,
+                  GridStartPosition.RightBottom,
                 ],
                 labels: [
                   strings.objects.plotSegment.directionDownRight,
diff --git a/src/core/prototypes/plot_segments/virtualScroll.tsx b/src/core/prototypes/plot_segments/virtualScroll.tsx
index 5a2e0200e..792d42cb3 100644
--- a/src/core/prototypes/plot_segments/virtualScroll.tsx
+++ b/src/core/prototypes/plot_segments/virtualScroll.tsx
@@ -7,7 +7,7 @@ import { useEffect } from "react";
 import { ZoomInfo } from "../..";
 import { AxisDataBindingType } from "../../specification/types";
 
-export interface VirtualScrollBarPropertes {
+export interface VirtualScrollBarProperties {
   initialPosition: number;
   onScroll: (position: number) => void;
   x: number;
@@ -22,7 +22,7 @@ export interface VirtualScrollBarPropertes {
   dataType: AxisDataBindingType;
 }
 
-export const VirtualScrollBar: React.FC<VirtualScrollBarPropertes> = ({
+export const VirtualScrollBar: React.FC<VirtualScrollBarProperties> = ({
   handlerBarWidth, // AxisRenderer.SCROLL_BAR_SIZE
   vertical,
   height,
diff --git a/src/core/prototypes/scales/categorical.ts b/src/core/prototypes/scales/categorical.ts
index d42cf4036..d1ebb818c 100644
--- a/src/core/prototypes/scales/categorical.ts
+++ b/src/core/prototypes/scales/categorical.ts
@@ -244,7 +244,7 @@ export class CategoricalScaleColor extends ScaleClass<
           }
         });
 
-        // Find unused mapping and save them, if count if new mapping domain is less thant old.
+        // Find unused mapping and save them, if count if new mapping domain is less than old.
         const newMappingKeys = Object.keys(mapping);
         const oldMappingKeys = Object.keys(props.mapping);
         if (newMappingKeys.length < oldMappingKeys.length) {
diff --git a/src/core/prototypes/state.ts b/src/core/prototypes/state.ts
index cfaea5f97..328de89c0 100644
--- a/src/core/prototypes/state.ts
+++ b/src/core/prototypes/state.ts
@@ -151,10 +151,10 @@ export class ChartStateManager {
       return true;
     } else {
       for (let index = 0; index < origin.constraints.length; index++) {
-        const originConstringts = origin.constraints[index];
+        const originConstraints = origin.constraints[index];
         const current = chart.constraints[index];
         expect_deep_approximately_equals(
-          originConstringts,
+          originConstraints,
           current,
           defaultDifferenceApproximation,
           true
@@ -165,7 +165,7 @@ export class ChartStateManager {
     const chartElements = [...forEachObject(chart)];
     const originElements = [...forEachObject(origin)];
 
-    // forEachObject retuns all objects in the chart
+    // forEachObject returns all objects in the chart
     // if any object was added or removed to the chart it means chart has changes
     // don't need to compare in details
     if (chartElements.length != originElements.length) {
@@ -391,7 +391,7 @@ export class ChartStateManager {
 
     // Build the state hierarchy
     const elementStates = chart.elements.map((element) => {
-      // Initialie the element state
+      // Initialize the element state
       const elementState: Specification.ChartElementState = {
         attributes: {},
       };
@@ -1175,7 +1175,7 @@ export class ChartStateManager {
   }
 
   /** Get glyph-level data context for the glyphIndex-th glyph */
-  public getGlpyhDataContext(
+  public getGlyphDataContext(
     plotSegment: Specification.PlotSegment,
     glyphIndex: number
   ): Expression.Context {
@@ -1188,7 +1188,7 @@ export class ChartStateManager {
   }
 
   /** Get all glyph-level data contexts for a given plot segment */
-  public getGlpyhDataContexts(
+  public getGlyphDataContexts(
     plotSegment: Specification.PlotSegment,
     // eslint-disable-next-line
     glyphIndex: number
diff --git a/src/core/solver/abstract.ts b/src/core/solver/abstract.ts
index 899f4fda9..da57ccbde 100644
--- a/src/core/solver/abstract.ts
+++ b/src/core/solver/abstract.ts
@@ -81,7 +81,7 @@ export abstract class ConstraintSolver {
     return s;
   }
 
-  /** Add a constraint that enfoces a = b */
+  /** Add a constraint that enforces a = b */
   public addEquals(strength: ConstraintStrength, a: Variable, b: Variable) {
     this.addLinear(strength, 0, [
       [1, a],
@@ -89,7 +89,7 @@ export abstract class ConstraintSolver {
     ]);
   }
 
-  /** Add a constraint that enfoces a = value */
+  /** Add a constraint that enforces a = value */
   public addEqualToConstant(
     strength: ConstraintStrength,
     a: Variable,
diff --git a/src/core/solver/plugins/polar_coordinator.ts b/src/core/solver/plugins/polar_coordinator.ts
index f730be130..743696040 100644
--- a/src/core/solver/plugins/polar_coordinator.ts
+++ b/src/core/solver/plugins/polar_coordinator.ts
@@ -10,7 +10,7 @@ import { snapToAttribute } from "../../prototypes/update_attribute";
 import { ConstraintPlugin, ConstraintSolver, Variable } from "../abstract";
 
 // eslint-disable-next-line
-export interface PolarCoordinatorPluginOptions {}
+export interface PolarCoordinatorPluginOptions { }
 
 // Converts Polar coordinates to cartesian coordinates
 export class PolarCoordinatorPlugin extends ConstraintPlugin {
@@ -19,33 +19,33 @@ export class PolarCoordinatorPlugin extends ConstraintPlugin {
   public cy: Variable;
   public an: Variable[];
   attrs: PolarGuideCoordinatorAttributesExtend;
-  radialVarable: Variable[];
-  angleVarable: Variable[];
+  radialVariable: Variable[];
+  angleVariable: Variable[];
   chartConstraints: Specification.Constraint[];
-  coordinatoObjectID: string;
-  chartMananger: ChartStateManager;
+  coordinatorObjectID: string;
+  chartManager: ChartStateManager;
 
   constructor(
     solver: ConstraintSolver,
     cx: Variable,
     cy: Variable,
-    radialVarable: Variable[],
-    angleVarable: Variable[],
+    radialVariable: Variable[],
+    angleVariable: Variable[],
     attrs: PolarGuideCoordinatorAttributesExtend,
     chartConstraints: Specification.Constraint[],
-    coordinatoObjectID: string,
-    chartMananger: ChartStateManager
+    coordinatorObjectID: string,
+    chartManager: ChartStateManager
   ) {
     super();
     this.solver = solver;
     this.cx = cx;
     this.cy = cy;
-    this.radialVarable = radialVarable;
-    this.angleVarable = angleVarable;
+    this.radialVariable = radialVariable;
+    this.angleVariable = angleVariable;
     this.attrs = attrs;
     this.chartConstraints = chartConstraints;
-    this.coordinatoObjectID = coordinatoObjectID;
-    this.chartMananger = chartMananger;
+    this.coordinatorObjectID = coordinatorObjectID;
+    this.chartManager = chartManager;
   }
 
   public apply() {
@@ -53,22 +53,22 @@ export class PolarCoordinatorPlugin extends ConstraintPlugin {
     const cy = this.solver.getValue(this.cy);
 
     const attrs = this.attrs;
-    for (let i = 0; i < this.angleVarable.length; i++) {
+    for (let i = 0; i < this.angleVariable.length; i++) {
       const angleAttr = this.solver.attr(
         attrs,
-        (<any>this.angleVarable[i]).name,
+        (<any>this.angleVariable[i]).name,
         {
           edit: false,
         }
       );
 
-      for (let j = 0; j < this.radialVarable.length; j++) {
+      for (let j = 0; j < this.radialVariable.length; j++) {
         const attrXname = getPointValueName(i, j, "X");
         const attrYname = getPointValueName(i, j, "Y");
 
         const radialAttr = this.solver.attr(
           attrs,
-          (<any>this.radialVarable[j]).name,
+          (<any>this.radialVariable[j]).name,
           {
             edit: false,
           }
@@ -94,16 +94,16 @@ export class PolarCoordinatorPlugin extends ConstraintPlugin {
 
         // take snapped attributes and apply new value
         snapToAttribute(
-          this.chartMananger,
+          this.chartManager,
           this.chartConstraints,
-          this.coordinatoObjectID,
+          this.coordinatorObjectID,
           attrXname,
           cx + tx
         );
         snapToAttribute(
-          this.chartMananger,
+          this.chartManager,
           this.chartConstraints,
-          this.coordinatoObjectID,
+          this.coordinatorObjectID,
           attrYname,
           cy + ty
         );
diff --git a/src/core/specification/types.ts b/src/core/specification/types.ts
index c0d09369a..939c21cf7 100644
--- a/src/core/specification/types.ts
+++ b/src/core/specification/types.ts
@@ -72,7 +72,7 @@ export interface AxisDataBinding extends AttributeMap {
   orderMode?: OrderMode;
 
   /** scrolling options */
-  // allCategories contsins all data set and categories property uses to display current content
+  // allCategories contains all data set and categories property uses to display current content
   allowScrolling?: boolean;
   allCategories?: string[];
   scrollPosition?: number;
@@ -103,8 +103,8 @@ export interface AxisRenderingStyle extends AttributeMap {
   fontFamily: string;
   fontSize: number;
   tickSize: number;
-  tickTextBackgroudColor: Color;
-  tickTextBackgroudColorId: string;
+  tickTextBackgroundColor: Color;
+  tickTextBackgroundColorId: string;
   wordWrap: boolean;
   gridlineStyle: StrokeStyle;
   gridlineColor: Color;
diff --git a/src/index.ts b/src/index.ts
index 0b130cde7..b06dbb710 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -57,7 +57,7 @@
  * A linear least square solver using the Conjugate Gradient method.
  *
  * * Solve sparse linear least square problems.
- * * Solve sparse constrained linear least square problems using a lagrange method.
+ * * Solve sparse constrained linear least square problems using a Lagrange method.
  * * Decompose dense matrices with full pivot LU to obtain solution and kernel (null space).
  * * Uses the Eigen library for sparse matrix computation and the conjugate gradient method.
  * * Compiled into WebAssembly for performance.
diff --git a/src/strings.ts b/src/strings.ts
index a489bd285..c84d9980f 100644
--- a/src/strings.ts
+++ b/src/strings.ts
@@ -187,12 +187,12 @@ export const strings = {
     loadSample: "Load Sample Dataset...",
     links: "Links",
     messageNoID: (keyColumn: string) =>
-      `No ${keyColumn} colum are specified in main table`,
+      `No ${keyColumn} column are specified in main table`,
     messageNoSourceOrTargetID: (
       linkSourceKeyColumn: string,
       linkTargetKeyColumn: string
     ) =>
-      `No ${linkSourceKeyColumn} or ${linkTargetKeyColumn} colums are specified in links table`,
+      `No ${linkSourceKeyColumn} or ${linkTargetKeyColumn} columns are specified in links table`,
     removeButtonText: "Remove",
     removeButtonTitle: "Remove this table",
   },
@@ -296,9 +296,9 @@ export const strings = {
     save: "Save mapping",
     tableName: "Table name",
     title: "Map your data",
-    usbtitleImportTemplate:
+    subtitleImportTemplate:
       "Map the columns from your data source to the corresponding template fields",
-    usbtitleImportData:
+    subtitleImportData:
       "Map the columns from new data to the corresponding fields in the current chart design",
     unmapped: "Unmapped",
   },
@@ -432,7 +432,7 @@ export const strings = {
       dataExpressions: "Data Expressions",
       lineColor: "Line Color",
       tickColor: "Tick Label Color",
-      tickTextBackgroudColor: "Tick background color",
+      tickTextBackgroundColor: "Tick background color",
       showTickLine: "Show Tick Line",
       showBaseline: "Show Baseline",
       verticalText: "Vertical text",
diff --git a/src/tests/karma/application_ui.test.ts b/src/tests/karma/application_ui.test.ts
index 31d138186..21570d841 100644
--- a/src/tests/karma/application_ui.test.ts
+++ b/src/tests/karma/application_ui.test.ts
@@ -57,7 +57,7 @@ describe("Charticulator", () => {
         {
           currency: "$",
           thousandsDelimiter: ",",
-          decemalDelimiter: ".",
+          decimalDelimiter: ".",
         }
       )
       .then(() => {
@@ -168,7 +168,7 @@ describe("Charticulator", () => {
     const columns = dataColumnsSelector.querySelectorAll<HTMLSpanElement>(
       "span.el-text"
     );
-    // select all coulmns
+    // select all columns
     columns.forEach((column) => column.click());
 
     //click to create legend button
diff --git a/src/tests/unit/charts/200_Mushrooms.chart b/src/tests/unit/charts/200_Mushrooms.chart
index 3f12006e7..01fe1eceb 100644
--- a/src/tests/unit/charts/200_Mushrooms.chart
+++ b/src/tests/unit/charts/200_Mushrooms.chart
@@ -1631,8 +1631,8 @@
                   "g": 0,
                   "b": 0
                 },
-                "tickTextBackgroudColor": null,
-                "tickTextBackgroudColorId": null,
+                "tickTextBackgroundColor": null,
+                "tickTextBackgroundColorId": null,
                 "showTicks": true,
                 "showBaseline": true,
                 "lineColor": {
@@ -1705,8 +1705,8 @@
                   "g": 0,
                   "b": 0
                 },
-                "tickTextBackgroudColor": null,
-                "tickTextBackgroudColorId": null,
+                "tickTextBackgroundColor": null,
+                "tickTextBackgroundColorId": null,
                 "showTicks": true,
                 "showBaseline": true,
                 "lineColor": {
diff --git a/src/tests/unit/charts/World_Population_2017.chart b/src/tests/unit/charts/World_Population_2017.chart
index b38df8454..b5049758b 100644
--- a/src/tests/unit/charts/World_Population_2017.chart
+++ b/src/tests/unit/charts/World_Population_2017.chart
@@ -272,8 +272,8 @@
                       "g": 0,
                       "b": 0
                     },
-                    "tickTextBackgroudColor": null,
-                    "tickTextBackgroudColorId": null,
+                    "tickTextBackgroundColor": null,
+                    "tickTextBackgroundColorId": null,
                     "showTicks": true,
                     "showBaseline": true,
                     "lineColor": {
@@ -421,8 +421,8 @@
                       "g": 0,
                       "b": 0
                     },
-                    "tickTextBackgroudColor": null,
-                    "tickTextBackgroudColorId": null,
+                    "tickTextBackgroundColor": null,
+                    "tickTextBackgroundColorId": null,
                     "showTicks": true,
                     "showBaseline": true,
                     "lineColor": {
@@ -638,8 +638,8 @@
                   "g": 0,
                   "b": 0
                 },
-                "tickTextBackgroudColor": null,
-                "tickTextBackgroudColorId": null,
+                "tickTextBackgroundColor": null,
+                "tickTextBackgroundColorId": null,
                 "showTicks": true,
                 "showBaseline": true,
                 "lineColor": {
diff --git a/src/tests/unit/utils.ts b/src/tests/unit/utils.ts
index d8909019f..7c339cfae 100644
--- a/src/tests/unit/utils.ts
+++ b/src/tests/unit/utils.ts
@@ -130,8 +130,8 @@ export function parseSVGTransform(a: any) {
 export const pathPrefix = "tests/unit/charts";
 
 export async function loadJSON(url: string) {
-  const responce = await fetch(url);
-  const json = await responce.text();
+  const response = await fetch(url);
+  const json = await response.text();
   return JSON.parse(json);
 }