7 files changed, 2433 insertions, 0 deletions
diff --git a/docs/src/app/page/api/lustre.gleam b/docs/src/app/page/api/lustre.gleam
new file mode 100644
index 0000000..63f8547
--- /dev/null
+++ b/docs/src/app/page/api/lustre.gleam
@@ -0,0 +1,116 @@
+// IMPORTS ---------------------------------------------------------------------
+
+import app/layout
+import gleam/string
+import lustre/element.{Element}
+
+// PAGE ------------------------------------------------------------------------
+
+pub fn view() -> Element(msg) {
+  [title, applications, components, utilities]
+  |> string.join("\n")
+  |> layout.docs
+}
+
+// CONTENT: TITLE --------------------------------------------------------------
+
+const title: String = "
+# lustre
+"
+
+const applications: String = "
+## Applications
+
+### App | erlang javascript
+
+```gleam
+pub type App(flags, model, msg)
+```
+
+### Error | erlang javascript
+
+```gleam
+pub type Error {
+  AppAlreadyStarted
+  AppNotYetStarted
+  ComponentAlreadyRegistered
+  ElementNotFound
+  NotABrowser
+}
+```
+
+### element | javascript
+
+```gleam
+pub fn element(el: Element(msg)) -> App(Nil, Nil, msg)
+```
+
+### simple | javascript
+
+```gleam
+pub fn simple(
+  init: fn(flags) -> model,
+  update: fn(model, msg) -> model,
+  view: fn(model) -> Element(msg)
+) -> App(flags, model, msg)
+```
+
+### application | javascript
+
+```gleam
+pub fn application(
+  init: fn(flags) -> #(model, Effect(msg)),
+  update: fn(model, msg) -> #(model, Effect(msg)),
+  view: fn(model) -> Element(msg)
+) -> App(flags, model, msg)
+```
+
+### start | javascript
+
+```gleam
+pub fn start(
+  app: App(flags, model, msg),
+  selector: String,
+  flags: flags,
+) -> Result(fn(msg) -> Nil, Error)
+```
+
+### destroy | javascript
+
+```gleam
+pub fn destroy(app: App(flags, model, msg)) -> Nil
+```
+"
+
+const components: String = "
+## Components
+
+### component | javascript
+
+```gleam
+pub fn component(
+  name: String,
+  init: fn() -> #(model, Effect(msg)),
+  update: fn(model, msg) -> #(model, Effect(msg)),
+  view: fn(model) -> Element(msg),
+  on_attribute_change: Map(String, Decoder(msg)),
+) -> Result(Nil, Error)
+```
+"
+
+const utilities: String = "
+## Utilities
+
+### is_browser | erlang javascript
+
+```gleam
+pub fn is_browser() -> Bool
+```
+
+### is_registered | erlang javascript
+
+```gleam
+pub fn is_registered(_name: String) -> Bool
+```
+
+"
diff --git a/docs/src/app/page/api/lustre/attribute.gleam b/docs/src/app/page/api/lustre/attribute.gleam
new file mode 100644
index 0000000..4578e46
--- /dev/null
+++ b/docs/src/app/page/api/lustre/attribute.gleam
@@ -0,0 +1,365 @@
+// IMPORTS ---------------------------------------------------------------------
+
+import app/layout
+import gleam/string
+import lustre/element.{Element}
+
+// PAGE ------------------------------------------------------------------------
+
+pub fn view() -> Element(msg) {
+  [
+    title,
+    constructing_attributes,
+    mapping_attributes,
+    conversions,
+    common_attributes,
+    input_attributes,
+    more_input_attributes,
+    range_attributes,
+    textarea_attributes,
+    link_attributes,
+    embedded_content,
+    audio_and_video,
+  ]
+  |> string.join("\n")
+  |> layout.docs
+}
+
+// CONTENT: TITLE --------------------------------------------------------------
+
+const title: String = "
+# lustre/attribute
+"
+
+// CONTENT: CONSTRUCTING ATTRIBUTES --------------------------------------------
+
+const constructing_attributes: String = "
+## Constructing attributes
+
+### Attribute | erlang javascript
+
+```gleam
+pub opaque type Attribute(msg)
+```
+
+### attribute | erlang javascript
+
+```gleam
+pub fn attribute(name: String, value: String) -> Attribute(msg)
+```
+
+### property | erlang javascript
+
+```gleam
+pub fn property(name: String, value: any) -> Attribute(msg)
+```
+
+### on | erlang javascript
+
+```gleam
+pub fn on(name: String, handler: fn(Dynamic) -> Option(msg)) -> Attribute(msg)
+```
+"
+
+// CONTENT: MAPPING ATTRIBUTES -------------------------------------------------
+
+const mapping_attributes: String = "
+## Mapping attributes
+
+### map | erlang javascript
+
+```gleam
+pub fn map(attr: Attribute(a), f: fn(a) -> b) -> Attribute(b)
+```
+"
+
+// CONTENT: CONVERSIONS --------------------------------------------------------
+
+const conversions: String = "
+## Conversions
+
+### to_string | erlang javascript
+
+```gleam
+pub fn to_string(attr: Attribute(msg)) -> String
+```
+
+### to_string_builder | erlang javascript
+
+```gleam
+pub fn to_string_builder(attr: Attribute(msg)) -> StringBuilder
+```
+"
+
+// CONTENT: COMMON ATTRIBUTES --------------------------------------------------
+
+const common_attributes: String = "
+## Common attributes
+
+### style | erlang javascript
+
+```gleam
+pub fn style(properties: List(#(String, String))) -> Attribute(msg)
+```
+
+### class | erlang javascript
+
+```gleam
+pub fn class(name: String) -> Attribute(msg)
+```
+
+### classes | erlang javascript
+
+```gleam
+pub fn classes(names: List(#(String, Bool))) -> Attribute(msg) 
+```
+
+### id | erlang javascript
+
+```gleam
+pub fn id(name: String) -> Attribute(msg)
+```
+"
+
+// CONTENT: INPUT ATTRIBUTES ---------------------------------------------------
+
+const input_attributes: String = "
+## Input attributes
+
+### type_ | erlang javascript
+
+```gleam
+pub fn type_(name: String) -> Attribute(msg)
+```
+
+### value | erlang javascript
+
+```gleam
+pub fn value(val: Dynamic) -> Attribute(msg)
+```
+
+### checked | erlang javascript
+
+```gleam
+pub fn checked(is_checked: Bool) -> Attribute(msg)
+```
+
+### placeholder | erlang javascript
+
+```gleam
+pub fn placeholder(text: String) -> Attribute(msg)
+```
+
+### selected | erlang javascript
+
+```gleam
+pub fn selected(is_selected: Bool) -> Attribute(msg
+```
+"
+
+// CONTENT: MORE INPUT ATTRIBUTES ----------------------------------------------
+
+const more_input_attributes: String = "
+## More input attributes
+
+### accept | erlang javascript
+
+```gleam
+pub fn accept(types: List(String)) -> Attribute(msg)
+```
+
+### accept_charset | erlang javascript
+
+```gleam
+pub fn accept_charset(types: List(String)) -> Attribute(msg)
+```
+
+### msg | erlang javascript
+
+```gleam
+pub fn msg(uri: String) -> Attribute(msg)
+```
+
+### autocomplete | erlang javascript
+
+```gleam
+pub fn autocomplete(name: String) -> Attribute(msg)
+```
+
+### autofocus | erlang javascript
+
+```gleam
+pub fn autofocus(should_autofocus: Bool) -> Attribute(msg)
+```
+
+### disabled | erlang javascript
+
+```gleam
+pub fn disabled(is_disabled: Bool) -> Attribute(msg)
+```
+
+### name | erlang javascript
+
+```gleam
+pub fn name(name: String) -> Attribute(msg)
+```
+
+### pattern | erlang javascript
+
+```gleam
+pub fn pattern(regex: String) -> Attribute(msg)
+```
+
+### readonly | erlang javascript
+
+```gleam
+pub fn readonly(is_readonly: Bool) -> Attribute(msg)
+```
+
+### required | erlang javascript
+
+```gleam
+pub fn required(is_required: Bool) -> Attribute(msg)
+```
+
+### for | erlang javascript
+
+```gleam
+pub fn for(id: String) -> Attribute(msg)
+```
+"
+
+// CONTENT: RANGE ATTRIBUTES ---------------------------------------------------
+
+const range_attributes: String = "
+## Range attributes
+
+### max | erlang javascript
+
+```gleam
+pub fn max(val: String) -> Attribute(msg)
+```
+
+### min | erlang javascript
+
+```gleam
+pub fn min(val: String) -> Attribute(msg)
+```
+
+### step | erlang javascript
+
+```gleam
+pub fn step(val: String) -> Attribute(msg)
+```
+"
+
+// CONTENT: TEXTAREA ATTRIBUTES ------------------------------------------------
+
+const textarea_attributes: String = "
+## Textarea attributes
+
+### cols | erlang javascript
+
+```gleam
+pub fn cols(val: Int) -> Attribute(msg)
+```
+
+### rows | erlang javascript
+
+```gleam
+pub fn rows(val: Int) -> Attribute(msg)
+```
+
+### wrap | erlang javascript
+
+```gleam
+pub fn wrap(mode: String) -> Attribute(msg)
+```
+"
+
+// CONTENT: LINK ATTRIBUTES ----------------------------------------------------
+
+const link_attributes: String = "
+## Link attributes
+
+### href | erlang javascript
+
+```gleam
+pub fn href(uri: String) -> Attribute(msg)
+```
+
+### target | erlang javascript
+
+```gleam
+pub fn target(target: String) -> Attribute(msg)
+```
+
+### download | erlang javascript
+
+```gleam
+pub fn download(filename: String) -> Attribute(msg)
+```
+
+### rel | erlang javascript
+
+```gleam
+pub fn rel(relationship: String) -> Attribute(msg)
+```
+"
+
+// CONTENT: EMBEDDED CONTENT ---------------------------------------------------
+
+const embedded_content: String = "
+## Embedded content
+
+### gleam | erlang javascript
+
+```gleam
+pub fn src(uri: String) -> Attribute(msg)
+```
+
+### gleam | erlang javascript
+
+```gleam
+pub fn height(val: Int) -> Attribute(msg)
+```
+
+### gleam | erlang javascript
+
+```gleam
+pub fn width(val: Int) -> Attribute(msg)
+```
+
+### gleam | erlang javascript
+
+```gleam
+pub fn alt(text: String) -> Attribute(msg)
+```
+"
+
+// CONTENT: AUDIO AND VIDEO ATTRIBUTES -----------------------------------------
+
+const audio_and_video: String = "
+## Audio and video attributes
+
+
+### autoplay | erlang javascript
+
+```gleam
+pub fn autoplay(should_autoplay: Bool) -> Attribute(msg)
+```
+
+
+### controls | erlang javascript
+
+```gleam
+pub fn controls(visible: Bool) -> Attribute(msg)
+```
+
+
+### loop | erlang javascript
+
+```gleam
+pub fn loop(should_loop: Bool) -> Attribute(msg)
+```
+"
diff --git a/docs/src/app/page/api/lustre/effect.gleam b/docs/src/app/page/api/lustre/effect.gleam
new file mode 100644
index 0000000..ea3e1af
--- /dev/null
+++ b/docs/src/app/page/api/lustre/effect.gleam
@@ -0,0 +1,61 @@
+// IMPORTS ---------------------------------------------------------------------
+
+import app/layout
+import gleam/string
+import lustre/element.{Element}
+
+// PAGE ------------------------------------------------------------------------
+
+pub fn view() -> Element(msg) {
+  [title, constructing_effects, manipulating_effects]
+  |> string.join("\n")
+  |> layout.docs
+}
+
+// CONTENT: TITLE --------------------------------------------------------------
+
+const title: String = "
+# lustre/effect
+"
+
+// CONTENT: CONSTRUCTING EFFECTS ------------------------------------------------
+
+const constructing_effects: String = "
+## Constructing Effects
+
+### Effect | erlang javascript
+
+```gleam
+pub opaque type Effect(action) 
+```
+
+### from | erlang javascript
+
+```gleam
+pub fn from(effect: fn(fn(action) -> Nil) -> Nil) -> Effect(action)
+```
+
+### none | erlang javascript
+
+```gleam
+pub fn none() -> Effect(action)
+```
+
+### batch | erlang javascript
+
+```gleam
+pub fn batch(effects: List(Effect(action))) -> Effect(action)
+```
+"
+
+// CONTENT: MANIPULATING EFFECTS -----------------------------------------------
+
+const manipulating_effects: String = "
+## Manipulating Effects
+
+### map | erlang javascript
+
+```gleam
+pub fn map(effect: Effect(a), f: fn(a) -> b) -> Effect(b)
+```
+"
diff --git a/docs/src/app/page/api/lustre/element.gleam b/docs/src/app/page/api/lustre/element.gleam
new file mode 100644
index 0000000..69a1273
--- /dev/null
+++ b/docs/src/app/page/api/lustre/element.gleam
@@ -0,0 +1,88 @@
+// IMPORTS ---------------------------------------------------------------------
+
+import app/layout
+import gleam/string
+import lustre/element.{Element}
+
+// PAGE ------------------------------------------------------------------------
+
+pub fn view() -> Element(msg) {
+  [title, constructing_elements, mapping_elements, conversions]
+  |> string.join("\n")
+  |> layout.docs
+}
+
+// CONTENT: TITLE --------------------------------------------------------------
+
+const title: String = "
+# lustre/element
+"
+
+// CONTENT: CONSTRUCTING ELEMENTS ----------------------------------------------
+
+const constructing_elements: String = "
+## Constructing elements
+
+### Element | erlang javascript
+
+```gleam
+pub opaque type Element(msg)
+```
+
+### element | erlang javascript
+
+```gleam
+pub fn element(
+  tag: String,
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### namespaced | erlang javascript
+
+```gleam
+pub fn namespaced(
+  namespace: String,
+  tag: String,
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### text | erlang javascript
+
+```gleam
+pub fn text(content: String) -> Element(msg) 
+```
+"
+
+// CONTENT: MAPPING ELEMENTS ---------------------------------------------------
+
+const mapping_elements: String = "
+## Mapping elements
+
+### map | erlang javascript
+
+```gleam
+pub fn map(element: Element(a), f: fn(a) -> b) -> Element(b)
+```
+"
+
+// CONTENT: CONVERSIONS --------------------------------------------------------
+
+const conversions: String = "
+## Conversions
+
+### to_string | erlang javascript
+
+```gleam
+pub fn to_string(element: Element(msg)) -> String
+```
+
+### to_string_builder | erlang javascript
+
+```gleam
+pub fn to_string_builder(element: Element(msg)) -> StringBuilder
+```
+"
diff --git a/docs/src/app/page/api/lustre/element/html.gleam b/docs/src/app/page/api/lustre/element/html.gleam
new file mode 100644
index 0000000..6688195
--- /dev/null
+++ b/docs/src/app/page/api/lustre/element/html.gleam
@@ -0,0 +1,1083 @@
+// IMPORTS ---------------------------------------------------------------------
+
+import app/layout
+import gleam/string
+import lustre/element.{Element}
+
+// PAGE ------------------------------------------------------------------------
+
+pub fn view() -> Element(msg) {
+  [
+    title,
+    main_root,
+    document_metadata,
+    sectioning_root,
+    content_sectioning,
+    text_content,
+    inline_text_semantics,
+    image_and_multimedia,
+    embedded_content,
+    svg_and_mathml,
+    scripting,
+    demarcating_edits,
+    table_content,
+    forms,
+    interactive_elements,
+    web_components,
+  ]
+  |> string.join("\n")
+  |> layout.docs
+}
+
+// CONTENT: TITLE --------------------------------------------------------------
+
+const title: String = "
+# lustre/element/html
+"
+
+// CONTENT: MAIN ROOT ---------------------------------------------------------
+
+const main_root: String = "
+## Main Root
+
+### html | erlang javascript
+
+```gleam
+pub fn html(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+"
+
+// CONTENT: DOCUMENT METADATA --------------------------------------------------
+
+const document_metadata: String = "
+## Document Metadata
+
+### base | erlang javascript
+
+```gleam
+pub fn base(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### head | erlang javascript
+
+```gleam
+pub fn head(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### link | erlang javascript
+
+```gleam
+pub fn link(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### meta | erlang javascript
+
+```gleam
+pub fn meta(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### style | erlang javascript
+
+```gleam
+pub fn style(attrs: List(Attribute(msg)), css: String) -> Element(msg)
+```
+
+### title | erlang javascript
+
+```gleam
+pub fn title(attrs: List(Attribute(msg)), content: String) -> Element(msg)
+```
+"
+
+// CONTENT: SECTIONING ROOT ----------------------------------------------------
+
+const sectioning_root: String = "
+## Sectioning root
+
+### body | erlang javascript
+
+```gleam
+pub fn body(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+"
+
+// CONTENT: CONTENT SECTIONING -------------------------------------------------
+
+const content_sectioning: String = "
+## Content sectioning
+
+### address | erlang javascript
+
+```gleam
+pub fn address(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### article | erlang javascript
+
+```gleam
+pub fn article(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### aside | erlang javascript
+
+```gleam
+pub fn aside(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### footer | erlang javascript
+
+```gleam
+pub fn footer(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### header | erlang javascript
+
+```gleam
+pub fn header(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### h1 | erlang javascript
+
+```gleam
+pub fn h1(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### h2 | erlang javascript
+
+```gleam
+pub fn h2(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### h3 | erlang javascript
+
+```gleam
+pub fn h3(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### h4 | erlang javascript
+
+```gleam
+pub fn h4(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### h5 | erlang javascript
+
+```gleam
+pub fn h5(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### h6 | erlang javascript
+
+```gleam
+pub fn h6(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### hgroup | erlang javascript
+
+```gleam
+pub fn hgroup(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### main | erlang javascript
+
+```gleam
+pub fn main(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### nav | erlang javascript
+
+```gleam
+pub fn nav(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### section | erlang javascript
+
+```gleam
+pub fn section(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### search | erlang javascript
+
+```gleam
+pub fn search(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+"
+
+// CONTENT: TEXT CONTENT -------------------------------------------------------
+
+const text_content: String = "
+## Text content
+
+### blockquote | erlang javascript
+
+```gleam
+pub fn blockquote(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### dd | erlang javascript
+
+```gleam
+pub fn dd(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### div | erlang javascript
+
+```gleam
+pub fn div(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### dl | erlang javascript
+
+```gleam
+pub fn dl(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### dt | erlang javascript
+
+```gleam
+pub fn dt(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### figcaption | erlang javascript
+
+```gleam
+pub fn figcaption(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### figure | erlang javascript
+
+```gleam
+pub fn figure(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### hr | erlang javascript
+
+```gleam
+pub fn hr(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### li | erlang javascript
+
+```gleam
+pub fn li(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### menu | erlang javascript
+
+```gleam
+pub fn menu(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### ol | erlang javascript
+
+```gleam
+pub fn ol(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### p | erlang javascript
+
+```gleam
+pub fn p(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### pre | erlang javascript
+
+```gleam
+pub fn pre(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### ul | erlang javascript
+
+```gleam
+pub fn ul(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+"
+
+// CONTENT: INLINE TEXT SEMANTICS ----------------------------------------------
+const inline_text_semantics: String = "
+## Inline text semantics
+
+### a | erlang javascript
+
+```gleam
+pub fn a(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### abbr | erlang javascript
+
+```gleam
+pub fn abbr(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### b | erlang javascript
+
+```gleam
+pub fn b(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### bdi | erlang javascript
+
+```gleam
+pub fn bdi(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### bdo | erlang javascript
+
+```gleam
+pub fn bdo(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### br | erlang javascript
+
+```gleam
+pub fn br(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### cite | erlang javascript
+
+```gleam
+pub fn cite(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### code | erlang javascript
+
+```gleam
+pub fn code(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### data | erlang javascript
+
+```gleam
+pub fn data(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### dfn | erlang javascript
+
+```gleam
+pub fn dfn(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### em | erlang javascript
+
+```gleam
+pub fn em(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### i | erlang javascript
+
+```gleam
+pub fn i(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### kbd | erlang javascript
+
+```gleam
+pub fn kbd(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### mark | erlang javascript
+
+```gleam
+pub fn mark(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### q | erlang javascript
+
+```gleam
+pub fn q(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### rp | erlang javascript
+
+```gleam
+pub fn rp(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### rt | erlang javascript
+
+```gleam
+pub fn rt(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### ruby | erlang javascript
+
+```gleam
+pub fn ruby(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### s | erlang javascript
+
+```gleam
+pub fn s(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### samp | erlang javascript
+
+```gleam
+pub fn samp(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### small | erlang javascript
+
+```gleam
+pub fn small(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### span | erlang javascript
+
+```gleam
+pub fn span(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### strong | erlang javascript
+
+```gleam
+pub fn strong(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### sub | erlang javascript
+
+```gleam
+pub fn sub(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### sup | erlang javascript
+
+```gleam
+pub fn sup(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### time | erlang javascript
+
+```gleam
+pub fn time(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### u | erlang javascript
+
+```gleam
+pub fn u(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### var | erlang javascript
+
+```gleam
+pub fn var(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### wbr | erlang javascript
+
+```gleam
+pub fn wbr(attrs: List(Attribute(msg))) -> Element(msg)
+```
+"
+
+// CONTENT: IMAGE AND MULTIMEDIA -----------------------------------------------
+const image_and_multimedia: String = "
+## Image and multimedia
+
+### area | erlang javascript
+
+```gleam
+pub fn area(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### audio | erlang javascript
+
+```gleam
+pub fn audio(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### img | erlang javascript
+
+```gleam
+pub fn img(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### map | erlang javascript
+
+```gleam
+pub fn map(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### track | erlang javascript
+
+```gleam
+pub fn track(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### video | erlang javascript
+
+```gleam
+pub fn video(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+"
+
+// CONTENT: EMBEDDED CONTENT ---------------------------------------------------
+
+const embedded_content: String = "
+## Embedded content
+
+### embed | erlang javascript
+
+```gleam
+pub fn embed(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### iframe | erlang javascript
+
+```gleam
+pub fn iframe(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### object | erlang javascript
+
+```gleam
+pub fn object(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### picture | erlang javascript
+
+```gleam
+pub fn picture(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### portal | erlang javascript
+
+```gleam
+pub fn portal(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### source | erlang javascript
+
+```gleam
+pub fn source(attrs: List(Attribute(msg))) -> Element(msg)
+```
+"
+
+// CONTENT: SVG AND MATHML -----------------------------------------------------
+
+const svg_and_mathml: String = "
+## SVG and MathML
+
+### svg | erlang javascript
+
+```gleam
+pub fn svg(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+
+### math | erlang javascript
+
+```gleam
+pub fn math(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+"
+
+// CONTENT: SCRIPTING ----------------------------------------------------------
+
+const scripting: String = "
+## Scripting
+
+### canvas | erlang javascript
+
+```gleam
+pub fn canvas(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### noscript | erlang javascript
+
+```gleam
+pub fn noscript(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### script | erlang javascript
+
+```gleam
+pub fn script(attrs: List(Attribute(msg)), js: String) -> Element(msg)
+```
+"
+
+// CONTENT: DEMARCATING EDITS --------------------------------------------------
+
+const demarcating_edits: String = "
+## Demarcating edits
+
+### del | erlang javascript
+
+```gleam
+pub fn del(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### ins | erlang javascript
+
+```gleam
+pub fn ins(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+"
+
+// CONTENT: TABLE CONTENT ------------------------------------------------------
+
+const table_content: String = "
+## Table content
+
+### caption | erlang javascript
+
+```gleam
+pub fn caption(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### col | erlang javascript
+
+```gleam
+pub fn col(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### colgroup | erlang javascript
+
+```gleam
+pub fn colgroup(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### table | erlang javascript
+
+```gleam
+pub fn table(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### tbody | erlang javascript
+
+```gleam
+pub fn tbody(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### td | erlang javascript
+
+```gleam
+pub fn td(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### tfoot | erlang javascript
+
+```gleam
+pub fn tfoot(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### th | erlang javascript
+
+```gleam
+pub fn th(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### thead | erlang javascript
+
+```gleam
+pub fn thead(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### tr | erlang javascript
+
+```gleam
+pub fn tr(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+"
+
+// CONTENT: FORMS --------------------------------------------------------------
+const forms: String = "
+## Forms
+
+### button | erlang javascript
+
+```gleam
+pub fn button(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### datalist | erlang javascript
+
+```gleam
+pub fn datalist(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### fieldset | erlang javascript
+
+```gleam
+pub fn fieldset(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### form | erlang javascript
+
+```gleam
+pub fn form(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### input | erlang javascript
+
+```gleam
+pub fn input(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### label | erlang javascript
+
+```gleam
+pub fn label(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### legend | erlang javascript
+
+```gleam
+pub fn legend(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### meter | erlang javascript
+
+```gleam
+pub fn meter(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### optgroup | erlang javascript
+
+```gleam
+pub fn optgroup(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### option | erlang javascript
+
+```gleam
+pub fn option(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### output | erlang javascript
+
+```gleam
+pub fn output(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### progress | erlang javascript
+
+```gleam
+pub fn progress(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### select | erlang javascript
+
+```gleam
+pub fn select(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### textarea | erlang javascript
+
+```gleam
+pub fn textarea(attrs: List(Attribute(msg))) -> Element(msg)
+```
+"
+
+// CONTENT: INTERACTIVE ELEMENTS -----------------------------------------------
+const interactive_elements: String = "
+## Interactive elements
+
+### details | erlang javascript
+
+```gleam
+pub fn details(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### dialog | erlang javascript
+
+```gleam
+pub fn dialog(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### summary | erlang javascript
+
+```gleam
+pub fn summary(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+"
+
+// CONTENT: WEB COMPONENTS -----------------------------------------------------
+const web_components: String = "
+## Web components
+
+### slot | erlang javascript
+
+```gleam
+pub fn slot(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### template | erlang javascript
+
+```gleam
+pub fn template(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+"
diff --git a/docs/src/app/page/api/lustre/element/svg.gleam b/docs/src/app/page/api/lustre/element/svg.gleam
new file mode 100644
index 0000000..eb4011c
--- /dev/null
+++ b/docs/src/app/page/api/lustre/element/svg.gleam
@@ -0,0 +1,532 @@
+// IMPORTS ---------------------------------------------------------------------
+
+import app/layout
+import gleam/string
+import lustre/element.{Element}
+
+// PAGE ------------------------------------------------------------------------
+
+pub fn view() -> Element(msg) {
+  [
+    title,
+    animation_elements,
+    basic_shapes,
+    container_elements,
+    descriptive_elements,
+    filter_effects,
+    gradient_elements,
+    graphical_elements,
+    lighting_elements,
+    non_rendered_elements,
+    renderable_elements,
+  ]
+  |> string.join("\n")
+  |> layout.docs
+}
+
+// CONTENT: TITLE --------------------------------------------------------------
+
+const title: String = "
+# lustre/element/svg
+"
+
+// CONTENT: ANIMATION ELEMENTS  ------------------------------------------------
+
+const animation_elements: String = "
+## Animation elements
+
+### animate | erlang javascript
+
+```
+pub fn animate(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### animate_motion | erlang javascript
+
+```
+pub fn animate_motion(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### animate_transform | erlang javascript
+
+```
+pub fn animate_transform(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### mpath | erlang javascript
+
+```
+pub fn mpath(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### set | erlang javascript
+
+```
+pub fn set(attrs: List(Attribute(msg))) -> Element(msg)
+```
+"
+
+// CONTENT: BASIC SHAPES -------------------------------------------------------
+
+const basic_shapes: String = "
+## Basic shapes
+
+### circle | erlang javascript
+
+```
+pub fn circle(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### ellipse | erlang javascript
+
+```
+pub fn ellipse(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### line | erlang javascript
+
+```
+pub fn line(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### polygon | erlang javascript
+
+```
+pub fn polygon(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### polyline | erlang javascript
+
+```
+pub fn polyline(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### rect | erlang javascript
+
+```
+pub fn rect(attrs: List(Attribute(msg))) -> Element(msg)
+```
+"
+
+// CONTENT: CONTAINER ELEMENTS -------------------------------------------------
+
+const container_elements: String = "
+## Container elements
+
+### a | erlang javascript
+
+```gleam
+pub fn a(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### defs | erlang javascript
+
+```gleam
+pub fn defs(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### g | erlang javascript
+
+```gleam
+pub fn g(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### marker | erlang javascript
+
+```gleam
+pub fn marker(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### mask | erlang javascript
+
+```gleam
+pub fn mask(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### missing_glyph | erlang javascript
+
+```gleam
+pub fn missing_glyph(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### pattern | erlang javascript
+
+```gleam
+pub fn pattern(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### svg | erlang javascript
+
+```gleam
+pub fn svg(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### switch | erlang javascript
+
+```gleam
+pub fn switch(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### symbol | erlang javascript
+
+```gleam
+pub fn symbol(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+"
+
+// CONTENT: DESCRIPTIVE ELEMENTS -----------------------------------------------
+
+const descriptive_elements: String = "
+## Descriptive elements
+
+### desc | erlang javascript
+
+```gleam
+pub fn desc(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### metadata | erlang javascript
+
+```gleam
+pub fn metadata(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### title | erlang javascript
+
+```gleam
+pub fn title(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+"
+
+// CONTENT: FILTER EFFECTS -----------------------------------------------------
+
+const filter_effects: String = "
+## Filter effects
+
+### fe_blend | erlang javascript
+
+```
+pub fn fe_blend(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### fe_color_matrix | erlang javascript
+
+```
+pub fn fe_color_matrix(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### fe_component_transfer | erlang javascript
+
+```
+pub fn fe_component_transfer(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### fe_composite | erlang javascript
+
+```
+pub fn fe_composite(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### fe_convolve_matrix | erlang javascript
+
+```
+pub fn fe_convolve_matrix(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### fe_diffuse_lighting | erlang javascript
+
+```gleam
+pub fn fe_diffuse_lighting(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### fe_displacement_map | erlang javascript
+
+```
+pub fn fe_displacement_map(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### fe_drop_shadow | erlang javascript
+
+```
+pub fn fe_drop_shadow(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### fe_flood | erlang javascript
+
+```
+pub fn fe_flood(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### fe_func_a | erlang javascript
+
+```
+pub fn fe_func_a(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### fe_func_b | erlang javascript
+
+```
+pub fn fe_func_b(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### fe_func_g | erlang javascript
+
+```
+pub fn fe_func_g(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### fe_func_r | erlang javascript
+
+```
+pub fn fe_func_r(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### fe_gaussian_blur | erlang javascript
+
+```
+pub fn fe_gaussian_blur(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### fe_image | erlang javascript
+
+```
+pub fn fe_image(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### fe_merge | erlang javascript
+
+```gleam
+pub fn fe_merge(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### fe_merge_node | erlang javascript
+
+```
+pub fn fe_merge_node(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### fe_morphology | erlang javascript
+
+```
+pub fn fe_morphology(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### fe_offset | erlang javascript
+
+```
+pub fn fe_offset(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### fe_specular_lighting | erlang javascript
+
+```gleam
+pub fn fe_specular_lighting(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### fe_tile | erlang javascript
+
+```gleam
+pub fn fe_tile(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### fe_turbulence | erlang javascript
+
+```
+pub fn fe_turbulence(attrs: List(Attribute(msg))) -> Element(msg)
+```
+"
+
+// CONTENT: GRADIENT ELEMENTS -------------------------------------------------- 
+
+const gradient_elements: String = "
+## Gradient elements
+
+### linear_gradient | erlang javascript
+
+```gleam
+pub fn linear_gradient(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### radial_gradient | erlang javascript
+
+```gleam
+pub fn radial_gradient(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### stop | erlang javascript
+
+```
+pub fn stop(attrs: List(Attribute(msg))) -> Element(msg)
+```
+"
+
+// CONTENT: GRAPHICAL ELEMENTS -------------------------------------------------
+
+const graphical_elements: String = "
+## Graphical elements
+
+### image | erlang javascript
+
+```
+pub fn image(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### path | erlang javascript
+
+```
+pub fn path(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### text | erlang javascript
+
+```
+pub fn text(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### use_ | erlang javascript
+
+```
+pub fn use_(attrs: List(Attribute(msg))) -> Element(msg)
+```
+"
+
+// CONTENT: LIGHTING ELEMENTS --------------------------------------------------
+
+const lighting_elements: String = "
+## Lighting elements
+
+### fe_distant_light | erlang javascript
+
+```
+pub fn fe_distant_light(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### fe_point_light | erlang javascript
+
+```
+pub fn fe_point_light(attrs: List(Attribute(msg))) -> Element(msg)
+```
+
+### fe_spot_light | erlang javascript
+
+```
+pub fn fe_spot_light(attrs: List(Attribute(msg))) -> Element(msg)
+```
+"
+
+// CONTENT: NON-RENDERED ELEMENTS ----------------------------------------------
+
+const non_rendered_elements: String = "
+## Non-rendered elements 
+
+### clip_path | erlang javascript
+
+```gleam
+pub fn clip_path(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### script | erlang javascript
+
+```
+pub fn script(attrs: List(Attribute(msg)), js: String) -> Element(msg)
+```
+
+### style | erlang javascript
+
+```
+pub fn style(attrs: List(Attribute(msg)), css: String) -> Element(msg)
+```
+"
+
+// CONTENT: RENDERABLE ELEMENTS ------------------------------------------------
+
+const renderable_elements: String = "
+## Renderable elements
+
+### foreign_object | erlang javascript
+
+```gleam
+pub fn foreign_object(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### text_path | erlang javascript
+
+```gleam
+pub fn text_path(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+
+### tspan | erlang javascript
+
+```gleam
+pub fn tspan(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg)
+```
+"
diff --git a/docs/src/app/page/api/lustre/event.gleam b/docs/src/app/page/api/lustre/event.gleam
new file mode 100644
index 0000000..4b098e5
--- /dev/null
+++ b/docs/src/app/page/api/lustre/event.gleam
@@ -0,0 +1,188 @@
+// IMPORTS ---------------------------------------------------------------------
+
+import app/layout
+import gleam/string
+import lustre/element.{Element}
+
+// PAGE ------------------------------------------------------------------------
+
+pub fn view() -> Element(msg) {
+  [
+    title,
+    mouse_events,
+    keyboard_events,
+    form_messages,
+    focus_events,
+    custom_events,
+  ]
+  |> string.join("\n")
+  |> layout.docs
+}
+
+// CONTENT: TITLE --------------------------------------------------------------
+
+const title: String = "
+# lustre/event
+"
+
+// CONTENT: MOUSE EVENTS -------------------------------------------------------
+
+const mouse_events: String = "
+## Mouse events
+
+### on_click | erlang javascript
+
+```gleam
+pub fn on_click(msg: msg) -> Attribute(msg)
+```
+
+### on_mouse_down | erlang javascript
+
+```gleam
+pub fn on_mouse_down(msg: msg) -> Attribute(msg)
+```
+
+### on_mouse_up | erlang javascript
+
+```gleam
+pub fn on_mouse_up(msg: msg) -> Attribute(msg)
+```
+
+### on_mouse_enter | erlang javascript
+
+```gleam
+pub fn on_mouse_enter(msg: msg) -> Attribute(msg)
+```
+
+### on_mouse_leave | erlang javascript
+
+```gleam
+pub fn on_mouse_leave(msg: msg) -> Attribute(msg)
+```
+
+### on_mouse_over | erlang javascript
+
+```gleam
+pub fn on_mouse_over(msg: msg) -> Attribute(msg)
+```
+
+### on_mouse_out | erlang javascript
+
+```gleam
+pub fn on_mouse_out(msg: msg) -> Attribute(msg)
+```
+"
+
+// CONTENT: KEYBOARD EVENTS ----------------------------------------------------
+
+const keyboard_events: String = "
+## Keyboard events
+
+### on_keypress | erlang javascript
+
+```gleam
+pub fn on_keypress(msg: fn(String) -> msg) -> Attribute(msg)
+```
+
+### on_keydown | erlang javascript
+
+```gleam
+pub fn on_keydown(msg: fn(String) -> msg) -> Attribute(msg)
+```
+
+### on_keyup | erlang javascript
+
+```gleam
+pub fn on_keyup(msg: fn(String) -> msg) -> Attribute(msg)
+```
+"
+
+// CONTENT: FORM MESSAGES ------------------------------------------------------
+
+const form_messages: String = "
+## Form messages
+
+### on_input | erlang javascript
+
+```gleam
+pub fn on_input(msg: fn(String) -> msg) -> Attribute(msg)
+```
+
+### on_change | erlang javascript
+
+```gleam
+pub fn on_change(msg: fn(Bool) -> msg) -> Attribute(msg)
+```
+
+### on_submit | erlang javascript
+
+```gleam
+pub fn on_submit(msg: msg) -> Attribute(msg)
+```
+"
+
+// CONTENT: FOCUS EVENTS -------------------------------------------------------
+
+const focus_events: String = "
+## Focus events
+
+### on_focus | erlang javascript
+
+```gleam
+pub fn on_focus(msg: msg) -> Attribute(msg)
+```
+
+### on_blur | erlang javascript
+
+```gleam
+pub fn on_blur(msg: msg) -> Attribute(msg)
+```
+"
+
+// CONTENT: CUSTOM EVENTS ------------------------------------------------------
+
+const custom_events: String = "
+## Custom events
+
+### on | erlang javascript
+
+```gleam
+pub fn on(name: String, handler: fn(Dynamic) -> Option(msg)) -> Attribute(msg)
+```
+
+### prevent_default | javascript
+
+```gleam
+pub fn prevent_default(event: Dynamic) -> Nil
+```
+
+### stop_propagation | javascript
+
+```gleam
+pub fn stop_propagation(event: Dynamic) -> Nil
+```
+
+### value | erlang javascript
+
+```gleam
+pub fn value(event: Dynamic) -> Decoded(String)
+```
+
+### checked | erlang javascript
+
+```gleam
+pub fn checked(event: Dynamic) -> Decoded(Bool)
+```
+
+### mouse_position | erlang javascript
+
+```gleam
+pub fn mouse_position(event: Dynamic) -> Decoded(#(Float, Float)) 
+```
+
+### emit | javascript
+
+```gleam
+pub fn emit(event: String, data: any) -> Effect(msg)
+```
+"