diff --git a/docs/content/api/l-circle.md b/docs/content/api/l-circle.md
new file mode 100644
index 0000000..9a0ddbf
--- /dev/null
+++ b/docs/content/api/l-circle.md
@@ -0,0 +1,51 @@
++++
+title = "Circle"
++++
+
+HTML equivalent to `L.circle` function.
+Can be a child of `l-map` or `l-layer-group` elements.
+
+## Example
+
+A standard way to initialise.
+
+```html
+<l-circle lat-lng="[0,0]"></l-circle>
+```
+
+## Parameters
+
+Mandatory HTML properties to successfully instantiate.
+
+| Attribute | Example | Description |
+| -- | -- | -- |
+| lat-lng | [45, 45] | LatLng position to define circle center location |
+
+## Properties
+
+| Attribute    | Type    | Description |
+| --           | --      | --          |
+| radius       | number  |             |
+| stroke       | boolean | true        |
+| color        | string  | #3388ff     |
+| weight       | number  | 3           |
+| opacity      | number  | 1.0         |
+| lineCap      | string  | round       |
+| lineJoin     | string  | round       |
+| dashArray    | string  | null        |
+| dashOffset   | string  | null        |
+| fill         | boolean | true        |
+| fillColor    | string  | #3388ff     |
+| fillOpacity  | number  | 0.2         |
+| smoothFactor | number  | 1.0         |
+| noClip       | boolean | false       |
+| interactive  | boolean | true        |
+
+## Events
+
+| Event key | Detail | Description |
+| -- | -- | -- |
+| l:layer:connected | | Triggered when connected to the document |
+
+
+
diff --git a/docs/content/api/l-polygon.md b/docs/content/api/l-polygon.md
new file mode 100644
index 0000000..1d4fd8d
--- /dev/null
+++ b/docs/content/api/l-polygon.md
@@ -0,0 +1,48 @@
++++
+title = "Polygon"
++++
+
+HTML equivalent to `L.polygon` function.
+Can be a child of `l-map` or `l-layer-group` elements.
+
+## Example
+
+A standard way to initialise.
+
+```html
+<l-polygon lat-lngs="[[0,0], [1,0], [1, 1]]"></l-polygon>
+```
+
+## Parameters
+
+Mandatory HTML properties to successfully instantiate.
+
+| Attribute | Example | Description |
+| -- | -- | -- |
+| lat-lngs | [[0, 0], [1, 0], [1, 1]] | LatLngs to define extent |
+
+## Properties
+
+| Attribute    | Type    | Description |
+| --           | --      | --          |
+| stroke       | boolean | true        |
+| color        | string  | #3388ff     |
+| weight       | number  | 3           |
+| opacity      | number  | 1.0         |
+| lineCap      | string  | round       |
+| lineJoin     | string  | round       |
+| dashArray    | string  | null        |
+| dashOffset   | string  | null        |
+| fill         | boolean | true        |
+| fillColor    | string  | #3388ff     |
+| fillOpacity  | number  | 0.2         |
+| smoothFactor | number  | 1.0         |
+| noClip       | boolean | false       |
+| interactive  | boolean | true        |
+
+## Events
+
+| Event key | Detail | Description |
+| -- | -- | -- |
+| l:layer:connected | | Triggered when connected to the document |
+
diff --git a/docs/content/api/l-polyline.md b/docs/content/api/l-polyline.md
new file mode 100644
index 0000000..90b1fae
--- /dev/null
+++ b/docs/content/api/l-polyline.md
@@ -0,0 +1,48 @@
++++
+title = "Polyline"
++++
+
+HTML equivalent to `L.polyline` function.
+Can be a child of `l-map` or `l-layer-group` elements.
+
+## Example
+
+A standard way to initialise.
+
+```html
+<l-polyline lat-lngs="[[0,0], [1,0], [1, 1]]"></l-polyline>
+```
+
+## Parameters
+
+Mandatory HTML properties to successfully instantiate.
+
+| Attribute | Example | Description |
+| -- | -- | -- |
+| lat-lngs | [[0, 0], [1, 0], [1, 1]] | LatLngs to define extent |
+
+## Properties
+
+| Attribute    | Type    | Description |
+| --           | --      | --          |
+| stroke       | boolean | true        |
+| color        | string  | #3388ff     |
+| weight       | number  | 3           |
+| opacity      | number  | 1.0         |
+| lineCap      | string  | round       |
+| lineJoin     | string  | round       |
+| dashArray    | string  | null        |
+| dashOffset   | string  | null        |
+| fill         | boolean | true        |
+| fillColor    | string  | #3388ff     |
+| fillOpacity  | number  | 0.2         |
+| smoothFactor | number  | 1.0         |
+| noClip       | boolean | false       |
+| interactive  | boolean | true        |
+
+## Events
+
+| Event key | Detail | Description |
+| -- | -- | -- |
+| l:layer:connected | | Triggered when connected to the document |
+
diff --git a/docs/content/api/l-rectangle.md b/docs/content/api/l-rectangle.md
new file mode 100644
index 0000000..da0933f
--- /dev/null
+++ b/docs/content/api/l-rectangle.md
@@ -0,0 +1,50 @@
++++
+title = "Rectangle"
++++
+
+HTML equivalent to `L.rectangle` function.
+Can be a child of `l-map` or `l-layer-group` elements.
+
+## Example
+
+A standard way to initialise.
+
+```html
+<l-rectangle lat-lng-bounds="[[0,0], [1,1]]"></l-rectangle>
+```
+
+## Parameters
+
+Mandatory HTML properties to successfully instantiate.
+
+| Attribute | Example | Description |
+| -- | -- | -- |
+| lat-lng-bounds | [[0, 0], [5, 5]] | LatLngBounds to define extent |
+
+## Properties
+
+| Attribute    | Type    | Description |
+| --           | --      | --          |
+| stroke       | boolean | true        |
+| color        | string  | #3388ff     |
+| weight       | number  | 3           |
+| opacity      | number  | 1.0         |
+| lineCap      | string  | round       |
+| lineJoin     | string  | round       |
+| dashArray    | string  | null        |
+| dashOffset   | string  | null        |
+| fill         | boolean | true        |
+| fillColor    | string  | #3388ff     |
+| fillOpacity  | number  | 0.2         |
+| smoothFactor | number  | 1.0         |
+| noClip       | boolean | false       |
+| interactive  | boolean | true        |
+
+## Events
+
+| Event key | Detail | Description |
+| -- | -- | -- |
+| l:layer:connected | | Triggered when connected to the document |
+
+
+