diff --git a/docs/content/api/_index.md b/docs/content/api/_index.md
new file mode 100644
index 0000000..904b5cf
--- /dev/null
+++ b/docs/content/api/_index.md
@@ -0,0 +1,5 @@
++++
+title = "API documentation"
+template = "api.html"
+page_template = "api-page.html"
++++
diff --git a/docs/content/api/l-image-overlay.md b/docs/content/api/l-image-overlay.md
new file mode 100644
index 0000000..d462f8e
--- /dev/null
+++ b/docs/content/api/l-image-overlay.md
@@ -0,0 +1,54 @@
++++
+title = "Image overlay"
++++
+
+HTML equivalent to `L.imageOverlay` function.
+Can be a child of `l-map` or `l-layer-group` elements.
+
+## Example
+
+A standard way to initialise an image overlay.
+
+```html
+
+```
+
+More elaborate example, based on a Leaflet tutorial.
+
+```html
+
+```
+
+## Parameters
+
+Mandatory HTML properties to successfully instantiate.
+
+| Attribute | Example | Description |
+| -- | -- | -- |
+| url | /path/to/image.png | HTTP URL to image |
+| bounds | [[0, 0], [45, 45]] | LatLngBounds to define the image extent |
+
+## Properties
+
+| Attribute | Type | Description |
+| -- | -- | -- |
+| alt | string | Alt text related to image |
+| opacity | float | Value to control transparency |
+
+## Events
+
+| Event key | Detail | Description |
+| -- | -- | -- |
+| l:layer:connected | | Triggered when connected to the document |
+
+
diff --git a/docs/content/api/l-map.md b/docs/content/api/l-map.md
new file mode 100644
index 0000000..8dab756
--- /dev/null
+++ b/docs/content/api/l-map.md
@@ -0,0 +1,52 @@
++++
+title = "Map"
++++
+
+HTML equivalent to `L.map` function. Can call methods, e.g. `map.fitWorld()`.
+
+## Example
+
+A standard way to initialise a map is with a center and a zoom level.
+
+```html
+
+```
+
+To detect mobile device location, zoom to it and enable location event handlers.
+
+```html
+
+ ...
+
+```
+
+## Parameters
+
+Mandatory HTML properties to successfully instantiate a map.
+
+| Attribute | Example | Description |
+| -- | -- | -- |
+| center | [0, 0] | LatLng position |
+| zoom | 0 | Zoom level |
+
+OR
+
+| Attribute | Example | Description |
+| -- | -- | -- |
+| fit-world | | Existence of this property calls `map.fitWorld()` |
+
+## Properties
+
+| Attribute | Value | Description |
+| -- | -- | -- |
+| fit-world | | Auto-fits map to world extent |
+| on | | Used to connect `map.on` Leaflet event handler to HTML CusomEvent |
+| locate | | `map.locate` method call options |
+
+## Events
+
+| Event key | Detail | Description |
+| -- | -- | -- |
+| ready | | Triggered by `map.whenReady` method |
+| l:layer:connected | | Triggered by child elements when a layer is connected to the document |
+
diff --git a/docs/static/style.css b/docs/static/style.css
index 088f306..48bbdb2 100644
--- a/docs/static/style.css
+++ b/docs/static/style.css
@@ -25,11 +25,14 @@ body {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr;
+ grid-template-rows: auto 1fr auto;
+ row-gap: 1ch;
}
h1,
h2,
-h3 {
+h3,
+th {
font-family: var(--font-family);
font-weight: 400;
font-style: normal;
@@ -109,3 +112,21 @@ footer {
font-family: var(--font-family);
}
}
+
+table {
+ inline-size: 100%;
+ background-color: var(--gray-2);
+ border-radius: var(--size-1);
+ border-collapse: collapse;
+ overflow: hidden;
+}
+
+th {
+ background-color: var(--gray-9);
+ color: var(--gray-1);
+}
+
+td, th {
+ padding: var(--size-2);
+ text-align: left;
+}
diff --git a/docs/templates/api-page.html b/docs/templates/api-page.html
new file mode 100644
index 0000000..71f3c63
--- /dev/null
+++ b/docs/templates/api-page.html
@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+ {{ page.title }}
+ {{ page.content | safe }}
+
+{% endblock %}
diff --git a/docs/templates/api.html b/docs/templates/api.html
new file mode 100644
index 0000000..a8882eb
--- /dev/null
+++ b/docs/templates/api.html
@@ -0,0 +1,12 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+ {{section.title}}
+
+
+{% endblock content %}
diff --git a/docs/templates/base.html b/docs/templates/base.html
index 9247342..a5b0525 100644
--- a/docs/templates/base.html
+++ b/docs/templates/base.html
@@ -36,6 +36,7 @@