diff --git a/src/component/Component.ts b/src/component/Component.ts
index b396343b..13fb6134 100644
--- a/src/component/Component.ts
+++ b/src/component/Component.ts
@@ -5,6 +5,9 @@ import {EventEmitter} from "../Utils";
 import * as rx from "rx";
 
 export abstract class Component extends EventEmitter {
+    /**
+     * Component name. Used when interacting with component through the Viewer's API.
+     */
     public static componentName: string = "not_worthy";
 
     protected _activated: boolean;
@@ -41,6 +44,22 @@ export abstract class Component extends EventEmitter {
         this._configuration$.subscribe();
     }
 
+    public get activated(): boolean {
+        return this._activated;
+    }
+
+    public get activated$(): rx.Observable<boolean> {
+        return this._activated$;
+    }
+
+    public get defaultConfiguration(): IComponentConfiguration {
+        return {};
+    }
+
+    public get configuration$(): rx.Observable<IComponentConfiguration> {
+        return this._configuration$;
+    }
+
     public activate(conf?: IComponentConfiguration): void {
         if (this._activated) {
             return;
@@ -55,7 +74,9 @@ export abstract class Component extends EventEmitter {
         this._activated$.onNext(true);
     };
 
-    protected abstract _activate(): void;
+    public configure(conf: IComponentConfiguration): void {
+        this._configurationSubject$.onNext(conf);
+    }
 
     public deactivate(): void {
         if (!this._activated) {
@@ -69,29 +90,15 @@ export abstract class Component extends EventEmitter {
         this._activated$.onNext(false);
     };
 
+    /**
+     * Detect the viewer's new width and height and resize the component's
+     * rendered elements accordingly if applicable.
+     */
     public resize(): void { return; }
 
+    protected abstract _activate(): void;
+
     protected abstract _deactivate(): void;
-
-    public get activated(): boolean {
-        return this._activated;
-    }
-
-    public get activated$(): rx.Observable<boolean> {
-        return this._activated$;
-    }
-
-    public configure(conf: IComponentConfiguration): void {
-        this._configurationSubject$.onNext(conf);
-    }
-
-    public get defaultConfiguration(): IComponentConfiguration {
-        return {};
-    }
-
-    public get configuration$(): rx.Observable<IComponentConfiguration> {
-        return this._configuration$;
-    }
 }
 
 export default Component;
diff --git a/src/component/direction/DirectionComponent.ts b/src/component/direction/DirectionComponent.ts
index 578a84d3..db2fff29 100644
--- a/src/component/direction/DirectionComponent.ts
+++ b/src/component/direction/DirectionComponent.ts
@@ -13,7 +13,12 @@ import {Node} from "../../Graph";
 import {IVNodeHash, RenderCamera} from "../../Render";
 import {Container, Navigator} from "../../Viewer";
 
+/**
+ * @class DirectionComponent
+ * @classdesc Component showing navigation arrows for steps and turns.
+ */
 export class DirectionComponent extends Component {
+    /** @inheritdoc */
     public static componentName: string = "direction";
 
     private _renderer: DirectionDOMRenderer;
@@ -68,31 +73,78 @@ export class DirectionComponent extends Component {
             .share();
     }
 
+   /**
+    * Get default configuration.
+    *
+    * @returns {IDirectionConfiguration}
+    */
     public get defaultConfiguration(): IDirectionConfiguration {
         return {
             distinguishSequence: false,
             maxWidth: 460,
             minWidth: 260,
-            offsetScale: 1,
         };
     }
 
+    /**
+     * Get hovered key observable.
+     *
+     * @description An observable emitting the key of the node for the direction
+     * arrow that is being hovered. When the mouse leaves a direction arrow null
+     * is emitted.
+     *
+     * @returns {Observable<string>}
+     */
     public get hoveredKey$(): rx.Observable<string> {
         return this._hoveredKey$;
     }
 
+    /**
+     * Set highlight key.
+     *
+     * @description The arrow pointing towards the node corresponding to the
+     * highlight key will be highlighted.
+     *
+     * @param {string} highlightKey Key of node to be highlighted if existing
+     * among arrows.
+     */
     public setHighlightKey(highlightKey: string): void {
         this.configure({ highlightKey: highlightKey });
     }
 
+    /**
+     * Set min width of container element.
+     *
+     * @description  Set min width of the non transformed container element holding
+     * the navigation arrows. If the min width is larger than the max width the
+     * min width value will be used.
+     *
+     * The container element is automatically resized when the resize
+     * method on the Viewer class is called.
+     *
+     * @param {number} minWidth
+     */
     public setMinWidth(minWidth: number): void {
         this.configure({ minWidth: minWidth });
     }
 
+    /**
+     * Set max width of container element.
+     *
+     * @description Set max width of the non transformed container element holding
+     * the navigation arrows. If the min width is larger than the max width the
+     * min width value will be used.
+     *
+     * The container element is automatically resized when the resize
+     * method on the Viewer class is called.
+     *
+     * @param {number} minWidth
+     */
     public setMaxWidth(maxWidth: number): void {
         this.configure({ maxWidth: maxWidth });
     }
 
+    /** @inheritdoc */
     public resize(): void {
         this._renderer.resize(this._container.element);
     }
diff --git a/src/component/direction/DirectionDOMCalculator.ts b/src/component/direction/DirectionDOMCalculator.ts
index 83d75405..79ec81e9 100644
--- a/src/component/direction/DirectionDOMCalculator.ts
+++ b/src/component/direction/DirectionDOMCalculator.ts
@@ -1,6 +1,10 @@
 import {IDirectionConfiguration} from "../../Component";
 import {Spatial} from "../../Geo";
 
+/**
+ * @class DirectionDOMCalculator
+ * @classdesc Helper class for calculating DOM CSS properties.
+ */
 export class DirectionDOMCalculator {
     private _spatial: Spatial;
 
diff --git a/src/component/direction/DirectionDOMRenderer.ts b/src/component/direction/DirectionDOMRenderer.ts
index c1d00604..2b9373eb 100644
--- a/src/component/direction/DirectionDOMRenderer.ts
+++ b/src/component/direction/DirectionDOMRenderer.ts
@@ -11,6 +11,10 @@ import {RenderCamera} from "../../Render";
 import {IRotation} from "../../State";
 import {Navigator} from "../../Viewer";
 
+/**
+ * @class DirectionDOMRenderer
+ * @classdesc DOM renderer for direction arrows.
+ */
 export class DirectionDOMRenderer {
     private _spatial: Spatial;
     private _calculator: DirectionDOMCalculator;
diff --git a/src/component/interfaces/ICacheConfiguration.ts b/src/component/interfaces/ICacheConfiguration.ts
index 470e4011..aee0e260 100644
--- a/src/component/interfaces/ICacheConfiguration.ts
+++ b/src/component/interfaces/ICacheConfiguration.ts
@@ -1,5 +1,10 @@
 import {IComponentConfiguration} from "../../Component";
 
+/**
+ * Interface for configuration of cache depth.
+ *
+ * @interface
+ */
 export interface ICacheDepth {
     /**
      * Cache depth in the sequence directions.
@@ -38,7 +43,15 @@ export interface ICacheDepth {
     turn: number;
 }
 
+/**
+ * Interface for configuration of cache component.
+ *
+ * @interface
+ */
 export interface ICacheConfiguration extends IComponentConfiguration {
+    /**
+     * Cache depth struct.
+     */
     depth?: ICacheDepth;
 }
 
diff --git a/src/component/interfaces/IDirectionConfiguration.ts b/src/component/interfaces/IDirectionConfiguration.ts
index 32f59e20..10bed9d0 100644
--- a/src/component/interfaces/IDirectionConfiguration.ts
+++ b/src/component/interfaces/IDirectionConfiguration.ts
@@ -1,7 +1,7 @@
 import {IComponentConfiguration} from "../../Component";
 
 /**
- * Interface for configuration of direction Component
+ * Interface for configuration of direction component.
  *
  * @interface
  */
@@ -10,14 +10,18 @@ export interface IDirectionConfiguration extends IComponentConfiguration {
      * Determines if the sequence arrow appearance should be different from
      * the non sequence arrows.
      *
-     * @description Needs to be set for the sequence suffixed classes to be
-     * applied to the navigation elements. Additional calculations will be
+     * @description Needs to be set to true for the sequence suffixed classes
+     * to be applied to the navigation elements. Additional calculations will be
      * performed resulting in a performance cost.
+     *
+     * @default false
      */
     distinguishSequence?: boolean;
 
     /**
      * The node key representing the direction arrow to be highlighted.
+     *
+     * @default undefined
      */
     highlightKey?: string;
 
@@ -27,6 +31,7 @@ export interface IDirectionConfiguration extends IComponentConfiguration {
      *
      * @description If the min width is larger than the max width the
      * min width value will be used.
+     *
      * @default 260
      */
     minWidth?: number;
@@ -37,17 +42,10 @@ export interface IDirectionConfiguration extends IComponentConfiguration {
      *
      * @description If the min width is larger than the max width the
      * min width value will be used.
+     *
      * @default 460
      */
     maxWidth?: number;
-
-    /**
-     * The scale for the offset of the direction arrows.
-     *
-     * @description Minimum value is 1.
-     * @default 1
-     */
-    offsetScale?: number;
 }
 
 export default IDirectionConfiguration;
diff --git a/src/component/interfaces/IPlayerConfiguration.ts b/src/component/interfaces/IPlayerConfiguration.ts
deleted file mode 100644
index 3cc8bd69..00000000
--- a/src/component/interfaces/IPlayerConfiguration.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import {IComponentConfiguration} from "../../Component";
-import {EdgeDirection} from "../../Edge";
-
-export interface IPlayerConfiguration extends IComponentConfiguration {
-    playing?: boolean;
-    direction?: EdgeDirection;
-}
-
-export default IPlayerConfiguration;
diff --git a/src/component/interfaces/ISequenceConfiguration.ts b/src/component/interfaces/ISequenceConfiguration.ts
index 77d33100..e31eb867 100644
--- a/src/component/interfaces/ISequenceConfiguration.ts
+++ b/src/component/interfaces/ISequenceConfiguration.ts
@@ -1,8 +1,26 @@
 import {IComponentConfiguration} from "../../Component";
 import {EdgeDirection} from "../../Edge";
 
+/**
+ * Interface for configuration of sequence component.
+ *
+ * @interface
+ */
 export interface ISequenceConfiguration extends IComponentConfiguration {
+    /**
+     * Set the direction to follow when playing.
+     *
+     * @default EdgeDirection.Next
+     */
     direction?: EdgeDirection;
+
+    /**
+     * The node key representing the direction arrow to be highlighted.
+     *
+     * @description When set to null no direction will be highlighted.
+     *
+     * @default undefined
+     */
     highlightKey?: string;
 
     /**
@@ -23,7 +41,18 @@ export interface ISequenceConfiguration extends IComponentConfiguration {
      */
     minWidth?: number;
 
+    /**
+     * Indicating wheter the component is playing.
+     *
+     * @default false
+     */
     playing?: boolean;
+
+    /**
+     * Determine if the component should be visible.
+     *
+     * @default true
+     */
     visible?: boolean;
 }
 
diff --git a/src/component/interfaces/ISliderConfiguration.ts b/src/component/interfaces/ISliderConfiguration.ts
index 41e868a0..e417a101 100644
--- a/src/component/interfaces/ISliderConfiguration.ts
+++ b/src/component/interfaces/ISliderConfiguration.ts
@@ -1,13 +1,41 @@
 import {IComponentConfiguration} from "../../Component";
 
+/**
+ * Interface for configuration of slider keys.
+ *
+ * @interface
+ */
 export interface ISliderKeys {
+    /**
+     * Key for the image plane in the background.
+     */
     background: string;
+
+    /**
+     * Key for the image plane in the foreground.
+     */
     foreground: string;
 }
 
+/**
+ * Interface for configuration of slider component.
+ *
+ * @interface
+ */
 export interface ISliderConfiguration extends IComponentConfiguration {
+    /**
+     * Initial position of the slider on the interval [0, 1].
+     */
     initialPosition?: number;
+
+    /**
+     * Slider keys.
+     */
     keys?: ISliderKeys;
+
+    /**
+     * Value indicating whether the slider should be visible.
+     */
     sliderVisible?: boolean;
 }
 
diff --git a/src/component/interfaces/ITagConfiguration.ts b/src/component/interfaces/ITagConfiguration.ts
index eea99041..022c1da5 100644
--- a/src/component/interfaces/ITagConfiguration.ts
+++ b/src/component/interfaces/ITagConfiguration.ts
@@ -1,7 +1,22 @@
 import {IComponentConfiguration} from "../../Component";
 
+/**
+ * Interface for configuration of tag component.
+ *
+ * @interface
+ */
 export interface ITagConfiguration extends IComponentConfiguration {
+    /**
+     * Value indicating whether the component is in create mode.
+     *
+     * @default false
+     */
     creating?: boolean;
+
+    /**
+     * String literal determining the geometry type the component
+     * will create in create mode.
+     */
     createType?: "polygon" | "rect";
 }
 
diff --git a/src/component/interfaces/interfaces.ts b/src/component/interfaces/interfaces.ts
index b45a74af..58d91b2a 100644
--- a/src/component/interfaces/interfaces.ts
+++ b/src/component/interfaces/interfaces.ts
@@ -2,7 +2,6 @@ export {ICacheConfiguration, ICacheDepth} from "./ICacheConfiguration";
 export {ICoverConfiguration} from "./ICoverConfiguration";
 export {IDirectionConfiguration} from "./IDirectionConfiguration";
 export {IMarkerConfiguration} from "./IMarkerConfiguration";
-export {IPlayerConfiguration} from "./IPlayerConfiguration";
 export {IRouteConfiguration, IRoutePath, IRouteInfoKey} from "./IRouteConfiguration";
 export {ISliderConfiguration, ISliderKeys} from "./ISliderConfiguration";
 export {IComponentConfiguration} from "./IComponentConfiguration";
diff --git a/src/component/sequence/SequenceComponent.ts b/src/component/sequence/SequenceComponent.ts
index d559302c..8e911aaf 100644
--- a/src/component/sequence/SequenceComponent.ts
+++ b/src/component/sequence/SequenceComponent.ts
@@ -20,7 +20,13 @@ interface IConfigurationOperation {
     (configuration: ISequenceConfiguration): ISequenceConfiguration;
 }
 
+/**
+ * @class SequenceComponent
+ * @classdesc Component showing navigation arrows for sequence directions
+ * as well as playing button. Exposes an API to start and stop play.
+ */
 export class SequenceComponent extends Component {
+    /** @inheritdoc */
     public static componentName: string = "sequence";
 
     /**
@@ -75,6 +81,11 @@ export class SequenceComponent extends Component {
             .share();
     }
 
+   /**
+    * Get default configuration.
+    *
+    * @returns {ISequenceConfiguration}
+    */
     public get defaultConfiguration(): ISequenceConfiguration {
         return {
             direction: EdgeDirection.Next,
@@ -85,6 +96,15 @@ export class SequenceComponent extends Component {
         };
     }
 
+    /**
+     * Get hovered key observable.
+     *
+     * @description An observable emitting the key of the node for the direction
+     * arrow that is being hovered. When the mouse leaves a direction arrow null
+     * is emitted.
+     *
+     * @returns {Observable<string>}
+     */
     public get hoveredKey$(): rx.Observable<string> {
         return this._hoveredKey$;
     }
@@ -116,10 +136,19 @@ export class SequenceComponent extends Component {
         this.configure({ direction: direction });
     }
 
+    /**
+     * Set highlight key.
+     *
+     * @description The arrow pointing towards the node corresponding to the
+     * highlight key will be highlighted.
+     *
+     * @param {string} highlightKey Key of node to be highlighted if existing.
+     */
     public setHighlightKey(highlightKey: string): void {
         this.configure({ highlightKey: highlightKey });
     }
 
+    /** @inheritdoc */
     public resize(): void {
         this._configuration$
             .first()
diff --git a/src/component/tag/TagComponent.ts b/src/component/tag/TagComponent.ts
index 50b9a702..62545a14 100644
--- a/src/component/tag/TagComponent.ts
+++ b/src/component/tag/TagComponent.ts
@@ -40,10 +40,11 @@ interface ITagGLRendererOperation extends Function {
 }
 
 /**
- * @class TagCompoennt
- * @classdesc Component for showing and editing tags with rectangle geometries.
+ * @class TagComponent
+ * @classdesc Component for showing and editing tags with different geometries.
  */
 export class TagComponent extends Component {
+    /** @inheritdoc */
     public static componentName: string = "tag";
 
     /**