:memo: Direct users to external docs at pkg.hayleigh.dev

7 files changed, 86 insertions, 529 deletions

diff --git a/lib/src/lustre.gleam b/lib/src/lustre.gleam
index 209af29..840b82a 100644
--- a/lib/src/lustre.gleam
+++ b/lib/src/lustre.gleam
@@ -1,4 +1,5 @@
-//// Lustre is a declarative framework for building Web apps in Gleam. 
+//// To read the full documentation for this module, please visit
+//// [https://pkg.hayleigh.dev/lustre/api/lustre](https://pkg.hayleigh.dev/lustre/api/lustre)
 
 // IMPORTS ---------------------------------------------------------------------
 
@@ -9,43 +10,6 @@ import lustre/element.{Element}
 
 // TYPES -----------------------------------------------------------------------
 
-/// An `App` describes a Lustre application: what state it holds and what kind
-/// of actions get dispatched to update that model. The only useful thing you can
-/// do with an `App` is pass it to [`start`](#start).
-///
-/// You can construct an `App` from the two constructors exposed in this module:
-/// [`basic`](#basic) and [`application`](#application). Although you can't do
-/// anything but [`start`](#start) them, the constructors are separated in case
-/// you want to set up an application but defer starting it until some later point
-/// in time.
-///
-/// ```text
-///                                          +--------+
-///                                          |        |
-///                                          | update |
-///                                          |        |
-///                                          +--------+
-///                                            ^    |
-///                                            |    | 
-///                                        Msg |    | #(Model, Effect(Msg))
-///                                            |    |
-///                                            |    v
-/// +------+                         +------------------------+
-/// |      |  #(Model, Effect(Msg))  |                        |
-/// | init |------------------------>|     Lustre Runtime     |
-/// |      |                         |                        |
-/// +------+                         +------------------------+
-///                                            ^    |
-///                                            |    |
-///                                        Msg |    | Model
-///                                            |    |
-///                                            |    v
-///                                          +--------+
-///                                          |        |
-///                                          | view |
-///                                          |        |
-///                                          +--------+
-/// ```
 ///
 pub type App(flags, model, msg)
 
@@ -61,29 +25,6 @@ pub type Error {
 // CONSTRUCTORS ----------------------------------------------------------------
 
 @target(javascript)
-/// Create a basic lustre app that just views some element on the page.
-/// Note that this doesn't mean the content is static! With `element.stateful`
-/// you can still create components with local state.
-///
-/// Basic lustre apps don't have any *global* application state and so the
-/// plumbing is a lot simpler. If you find yourself passing lots of state around,
-/// you might want to consider using [`simple`](#simple) or [`application`](#application)
-/// instead.
-///
-/// ```gleam
-/// import lustre
-/// import lustre/element
-/// 
-/// pub fn main () {
-///   let app = lustre.element(
-///     element.h1([], [
-///       element.text("Hello, world!") 
-///     ])
-///   )
-/// 
-///   assert Ok(_) = lustre.start(app, "#root")
-/// }
-/// ```
 ///
 pub fn element(element: Element(msg)) -> App(Nil, Nil, msg) {
   let init = fn(_) { #(Nil, effect.none()) }
@@ -94,54 +35,6 @@ pub fn element(element: Element(msg)) -> App(Nil, Nil, msg) {
 }
 
 @target(javascript)
-/// If you start off with a simple `[element`](#element) app, you may find
-/// yourself leaning on [`stateful`](./lustrel/element.html#stateful) elements
-/// to manage model used throughout your app. If that's the case or if you know
-/// you need some global model from the get-go, you might want to construct a 
-/// [`simple`](#simple) app instead.
-///
-/// This is one app constructor that allows your HTML elements to dispatch actions
-/// to update your program model. 
-///
-/// ```gleam
-/// import gleam/int
-/// import lustre
-/// import lustre/element
-/// import lustre/event
-/// 
-/// type Msg {
-///   Decr
-///   Incr
-/// }
-/// 
-/// pub fn main () {
-///   let init = 0
-///
-///   let update = fn (model, msg) {
-///     case msg {
-///       Decr -> model - 1
-///       Incr -> model + 1
-///     }
-///   }
-///
-///   let view = fn (model) {
-///     element.div([], [
-///       element.button([ event.on_click(Decr) ], [
-///         element.text("-")
-///       ]),
-///
-///       element.text(int.to_string(model)),
-///
-///       element.button([ event.on_click(Incr) ], [
-///         element.text("+")
-///       ])
-///     ])
-///   }
-/// 
-///   let app = lustre.simple(init, update, view)
-///   assert Ok(_) = lustre.start(app, "#root")
-/// }
-/// ```
 ///
 pub fn simple(
   init: fn(flags) -> model,
@@ -155,47 +48,6 @@ pub fn simple(
 }
 
 @target(javascript)
-/// An evolution of a [`simple`](#simple) app that allows you to return a
-/// [`Effect`](./lustre/effect.html#Effect) from your `init` and `update`s. Commands give
-/// us a way to perform side effects like sending an HTTP request or running a
-/// timer and then dispatch actions back to the runtime to trigger an `update`.
-///
-///```
-/// import lustre
-/// import lustre/effect
-/// import lustre/element
-/// 
-/// pub fn main () {
-///   let init = #(0, tick())
-///
-///   let update = fn (model, msg) {
-///     case msg {
-///       Tick -> #(model + 1, tick())
-///     }
-///   }
-///
-///   let view = fn (model) {
-///     element.div([], [
-///       element.text("Time elapsed: ")
-///       element.text(int.to_string(model))
-///     ])
-///   }
-///   
-///   let app = lustre.simple(init, update, view)
-///   assert Ok(_) = lustre.start(app, "#root")   
-/// }
-/// 
-/// fn tick () -> Effect(Msg) {
-///   effect.from(fn (dispatch) {
-///     setInterval(fn () {
-///       dispatch(Tick)
-///     }, 1000)
-///   })
-/// }
-/// 
-/// external fn set_timeout (f: fn () -> a, delay: Int) -> Nil 
-///   = "" "window.setTimeout"
-///```
 ///
 @external(javascript, "./lustre.ffi.mjs", "setup")
 pub fn application(
@@ -217,29 +69,6 @@ pub fn component(
 // EFFECTS ---------------------------------------------------------------------
 
 @target(javascript)
-/// Once you have created a app with either `basic` or `application`, you 
-/// need to actually start it! This function will mount your app to the DOM
-/// node that matches the query selector you provide.
-///
-/// If everything mounted OK, we'll get back a dispatch function that you can 
-/// call to send actions to your app and trigger an update. 
-///
-///```
-/// import lustre
-///
-/// pub fn main () {
-///   let app = lustre.appliation(init, update, view)
-///   assert Ok(dispatch) = lustre.start(app, "#root")
-/// 
-///   dispatch(Incr)
-///   dispatch(Incr)
-///   dispatch(Incr)
-/// }
-///```
-///
-/// This may not seem super useful at first, but by returning this dispatch
-/// function from your `main` (or elsewhere) you can get events into your Lustre
-/// app from the outside world.
 ///
 @external(javascript, "./lustre.ffi.mjs", "start")
 pub fn start(
@@ -253,11 +82,13 @@ pub fn destroy(app: App(flags, model, msg)) -> Result(Nil, Error)
 
 // UTILS -----------------------------------------------------------------------
 
+///
 @external(javascript, "./lustre.ffi.mjs", "is_browser")
 pub fn is_browser() -> Bool {
   False
 }
 
+///
 @external(javascript, "./lustre.ffi.mjs", "is_registered")
 pub fn is_registered(_name: String) -> Bool {
   False
diff --git a/lib/src/lustre/attribute.gleam b/lib/src/lustre/attribute.gleam
index 7c4aadf..2b55486 100644
--- a/lib/src/lustre/attribute.gleam
+++ b/lib/src/lustre/attribute.gleam
@@ -1,3 +1,6 @@
+//// To read the full documentation for this module, please visit
+//// [https://pkg.hayleigh.dev/lustre/api/lustre/attribute](https://pkg.hayleigh.dev/lustre/api/lustre/attribute)
+
 // IMPORTS ---------------------------------------------------------------------
 
 import gleam/dynamic.{Dynamic}
@@ -10,8 +13,6 @@ import gleam/string_builder.{StringBuilder}
 
 // TYPES -----------------------------------------------------------------------
 
-/// Attributes are attached to specific elements. They're either key/value pairs
-/// or event handlers.
 ///
 pub opaque type Attribute(msg) {
   Attribute(String, Dynamic, as_property: Bool)
@@ -40,7 +41,6 @@ pub fn on(
 
 // MANIPULATIONS ---------------------------------------------------------------
 
-///
 /// 
 pub fn map(attr: Attribute(a), f: fn(a) -> b) -> Attribute(b) {
   case attr {
@@ -78,7 +78,6 @@ pub fn to_string(attr: Attribute(msg)) -> String {
 }
 
 ///
-///
 pub fn to_string_builder(attr: Attribute(msg)) -> StringBuilder {
   case attr {
     Attribute(name, value, as_property: True) -> {
diff --git a/lib/src/lustre/effect.gleam b/lib/src/lustre/effect.gleam
index 1f91e09..964ddd2 100644
--- a/lib/src/lustre/effect.gleam
+++ b/lib/src/lustre/effect.gleam
@@ -1,12 +1,12 @@
+//// To read the full documentation for this module, please visit
+//// [https://pkg.hayleigh.dev/lustre/api/lustre/effect](https://pkg.hayleigh.dev/lustre/api/lustre/effect)
+
 // IMPORTS ---------------------------------------------------------------------
 
 import gleam/list
 
 // TYPES -----------------------------------------------------------------------
 
-/// A `Effect` represents some side effect we want the Lustre runtime to perform.
-/// It is parameterised by our app's `action` type because some effects need to
-/// get information back into your program.
 ///
 pub opaque type Effect(msg) {
   Effect(List(fn(fn(msg) -> Nil) -> Nil))
@@ -14,26 +14,6 @@ pub opaque type Effect(msg) {
 
 // CONSTRUCTORS ----------------------------------------------------------------
 
-/// Create a `Effect` from some custom side effect. This is mostly useful for 
-/// package authors, or for integrating other libraries into your Lustre app.
-///
-/// We pass in a function that recieves a `dispatch` callback that can be used
-/// to send messages to the Lustre runtime. We could, for example, create a `tick`
-/// command that uses the `setTimeout` JavaScript API to send a message to the
-/// runtime every second:
-///
-/// ```gleam
-/// import lustre/effect.{Effect}
-/// 
-/// external fn set_interval(callback: fn() -> any, interval: Int) =
-///   "" "window.setInterval"
-/// 
-/// pub fn every_second(msg: msg) -> Effect(msg) {
-///   use dispatch <- effect.from
-/// 
-///   set_interval(fn() { dispatch(msg) }, 1000)
-/// }
-/// ```
 ///
 pub fn from(effect: fn(fn(msg) -> Nil) -> Nil) -> Effect(msg) {
   Effect([effect])
@@ -49,7 +29,6 @@ pub fn none() -> Effect(msg) {
 
 // MANIPULATIONS ---------------------------------------------------------------
 
-/// 
 ///
 pub fn batch(effects: List(Effect(msg))) -> Effect(msg) {
   Effect({
@@ -58,6 +37,7 @@ pub fn batch(effects: List(Effect(msg))) -> Effect(msg) {
   })
 }
 
+///
 pub fn map(effect: Effect(a), f: fn(a) -> b) -> Effect(b) {
   let Effect(l) = effect
   Effect(list.map(
diff --git a/lib/src/lustre/element.gleam b/lib/src/lustre/element.gleam
index 4e8abee..69217f0 100644
--- a/lib/src/lustre/element.gleam
+++ b/lib/src/lustre/element.gleam
@@ -1,3 +1,6 @@
+//// To read the full documentation for this module, please visit
+//// [https://pkg.hayleigh.dev/lustre/api/lustre/element](https://pkg.hayleigh.dev/lustre/api/lustre/element)
+
 // IMPORTS ---------------------------------------------------------------------
 
 import gleam/list
@@ -7,7 +10,6 @@ import lustre/attribute.{Attribute}
 
 // TYPES -----------------------------------------------------------------------
 
-///
 /// 
 pub opaque type Element(msg) {
   Text(String)
@@ -17,7 +19,6 @@ pub opaque type Element(msg) {
 
 // CONSTRUCTORS ----------------------------------------------------------------
 
-///
 /// 
 pub fn element(
   tag: String,
@@ -28,7 +29,6 @@ pub fn element(
 }
 
 ///
-///
 pub fn namespaced(
   namespace: String,
   tag: String,
@@ -38,7 +38,6 @@ pub fn namespaced(
   ElementNs(tag, attrs, children, namespace)
 }
 
-///
 /// 
 pub fn text(content: String) -> Element(msg) {
   Text(content)
@@ -58,7 +57,6 @@ fn escape(escaped: String, content: String) -> String {
 
 // MANIPULATIONS ---------------------------------------------------------------
 
-///
 /// 
 pub fn map(element: Element(a), f: fn(a) -> b) -> Element(b) {
   case element {
@@ -81,14 +79,12 @@ pub fn map(element: Element(a), f: fn(a) -> b) -> Element(b) {
 
 // CONVERSIONS -----------------------------------------------------------------
 
-///
 /// 
 pub fn to_string(element: Element(msg)) -> String {
   to_string_builder(element)
   |> string_builder.to_string
 }
 
-///
 /// 
 pub fn to_string_builder(element: Element(msg)) -> StringBuilder {
   case element {
diff --git a/lib/src/lustre/element/html.gleam b/lib/src/lustre/element/html.gleam
index 9eb4f5e..70ec6c6 100644
--- a/lib/src/lustre/element/html.gleam
+++ b/lib/src/lustre/element/html.gleam
@@ -1,19 +1,13 @@
+//// To read the full documentation for this module, please visit
+//// [https://pkg.hayleigh.dev/lustre/api/lustre/element/html](https://pkg.hayleigh.dev/lustre/api/lustre/element/html)
+
 // IMPORTS ---------------------------------------------------------------------
 
 import lustre/element.{Element, element, namespaced, text}
 import lustre/attribute.{Attribute}
 
-// The doc comments (and order) for functions in this module are taken from the
-// MDN Element reference:
-//
-//   https://developer.mozilla.org/en-US/docs/Web/HTML/Element
-//
-
 // HTML ELEMENTS: MAIN ROOT ----------------------------------------------------
 
-/// Represents the root (top-level element) of an HTML document, so it is also
-/// referred to as the root element. All other elements must be descendants of
-/// this element.
 /// 
 pub fn html(
   attrs: List(Attribute(msg)),
@@ -24,45 +18,31 @@ pub fn html(
 
 // HTML ELEMENTS: DOCUMENT METADATA --------------------------------------------
 
-/// Specifies the base URL to use for all relative URLs in a document. There can
-/// be only one such element in a document.
 /// 
 pub fn base(attrs: List(Attribute(msg))) -> Element(msg) {
   element("base", attrs, [])
 }
 
-/// Contains machine-readable information (metadata) about the document, like its
-/// title, scripts, and style sheets.
 /// 
 pub fn head(attrs: List(Attribute(msg))) -> Element(msg) {
   element("head", attrs, [])
 }
 
-/// Specifies relationships between the current document and an external resource.
-/// This element is most commonly used to link to CSS but is also used to establish
-/// site icons (both "favicon" style icons and icons for the home screen and apps
-/// on mobile devices) among other things.
 /// 
 pub fn link(attrs: List(Attribute(msg))) -> Element(msg) {
   element("link", attrs, [])
 }
 
-/// Represents metadata that cannot be represented by other HTML meta-related
-/// elements, like <base>, <link>, <script>, <style> and <title>.
 /// 
 pub fn meta(attrs: List(Attribute(msg))) -> Element(msg) {
   element("meta", attrs, [])
 }
 
-/// Contains style information for a document or part of a document. It contains
-/// CSS, which is applied to the contents of the document containing this element.
 /// 
 pub fn style(attrs: List(Attribute(msg)), css: String) -> Element(msg) {
   element("style", attrs, [text(css)])
 }
 
-/// Defines the document's title that is shown in a browser's title bar or a
-/// page's tab. It only contains text; tags within the element are ignored.
 /// 
 pub fn title(attrs: List(Attribute(msg)), content: String) -> Element(msg) {
   element("title", attrs, [text(content)])
@@ -70,8 +50,6 @@ pub fn title(attrs: List(Attribute(msg)), content: String) -> Element(msg) {
 
 // HTML ELEMENTS: SECTIONING ROOT -----------------------------------------------
 
-/// Represents the content of an HTML document. There can be only one such element
-/// in a document.
 /// 
 pub fn body(
   attrs: List(Attribute(msg)),
@@ -82,8 +60,6 @@ pub fn body(
 
 // HTML ELEMENTS: CONTENT SECTIONING -------------------------------------------
 
-/// Indicates that the enclosed HTML provides contact information for a person or
-/// people, or for an organization.
 /// 
 pub fn address(
   attrs: List(Attribute(msg)),
@@ -92,11 +68,6 @@ pub fn address(
   element("address", attrs, children)
 }
 
-/// Represents a self-contained composition in a document, page, application, or
-/// site, which is intended to be independently distributable or reusable (e.g.,
-/// in syndication). Examples include a forum post, a magazine or newspaper article,
-/// a blog entry, a product card, a user-submitted comment, an interactive widget
-/// or gadget, or any other independent item of content.
 /// 
 pub fn article(
   attrs: List(Attribute(msg)),
@@ -105,9 +76,6 @@ pub fn article(
   element("article", attrs, children)
 }
 
-/// Represents a portion of a document whose content is only indirectly related
-/// to the document's main content. Asides are frequently presented as sidebars
-/// or call-out boxes.
 /// 
 pub fn aside(
   attrs: List(Attribute(msg)),
@@ -116,9 +84,6 @@ pub fn aside(
   element("aside", attrs, children)
 }
 
-/// Represents a footer for its nearest ancestor sectioning content or sectioning
-/// root element. A <footer> typically contains information about the author of
-/// the section, copyright data, or links to related documents.
 /// 
 pub fn footer(
   attrs: List(Attribute(msg)),
@@ -127,9 +92,6 @@ pub fn footer(
   element("footer", attrs, children)
 }
 
-/// Represents introductory content, typically a group of introductory or navigational
-/// aids. It may contain some heading elements but also a logo, a search form, an
-/// author name, and other elements.
 /// 
 pub fn header(
   attrs: List(Attribute(msg)),
@@ -138,8 +100,6 @@ pub fn header(
   element("header", attrs, children)
 }
 
-/// Represent six levels of section headings. <h1> is the highest section level
-/// and <h6> is the lowest.
 /// 
 pub fn h1(
   attrs: List(Attribute(msg)),
@@ -148,8 +108,6 @@ pub fn h1(
   element("h1", attrs, children)
 }
 
-/// Represent six levels of section headings. <h1> is the highest section level
-/// and <h6> is the lowest.
 /// 
 pub fn h2(
   attrs: List(Attribute(msg)),
@@ -158,8 +116,6 @@ pub fn h2(
   element("h2", attrs, children)
 }
 
-/// Represent six levels of section headings. <h1> is the highest section level
-/// and <h6> is the lowest.
 /// 
 pub fn h3(
   attrs: List(Attribute(msg)),
@@ -168,8 +124,6 @@ pub fn h3(
   element("h3", attrs, children)
 }
 
-/// Represent six levels of section headings. <h1> is the highest section level
-/// and <h6> is the lowest.
 /// 
 pub fn h4(
   attrs: List(Attribute(msg)),
@@ -178,8 +132,6 @@ pub fn h4(
   element("h4", attrs, children)
 }
 
-/// Represent six levels of section headings. <h1> is the highest section level
-/// and <h6> is the lowest.
 /// 
 pub fn h5(
   attrs: List(Attribute(msg)),
@@ -188,8 +140,6 @@ pub fn h5(
   element("h5", attrs, children)
 }
 
-/// Represent six levels of section headings. <h1> is the highest section level
-/// and <h6> is the lowest.
 /// 
 pub fn h6(
   attrs: List(Attribute(msg)),
@@ -198,8 +148,6 @@ pub fn h6(
   element("h6", attrs, children)
 }
 
-/// Represents a heading grouped with any secondary content, such as subheadings,
-/// an alternative title, or a tagline.
 /// 
 pub fn hgroup(
   attrs: List(Attribute(msg)),
@@ -208,9 +156,6 @@ pub fn hgroup(
   element("hgroup", attrs, children)
 }
 
-/// Represents the dominant content of the body of a document. The main content
-/// area consists of content that is directly related to or expands upon the
-/// central topic of a document, or the central functionality of an application.
 /// 
 pub fn main(
   attrs: List(Attribute(msg)),
@@ -219,9 +164,6 @@ pub fn main(
   element("main", attrs, children)
 }
 
-/// Represents a section of a page whose purpose is to provide navigation links,
-/// either within the current document or to other documents. Common examples of
-/// navigation sections are menus, tables of contents, and indexes.
 /// 
 pub fn nav(
   attrs: List(Attribute(msg)),
@@ -230,9 +172,6 @@ pub fn nav(
   element("nav", attrs, children)
 }
 
-/// Represents a generic standalone section of a document, which doesn't have a
-/// more specific semantic element to represent it. Sections should always have
-/// a heading, with very few exceptions.
 /// 
 pub fn section(
   attrs: List(Attribute(msg)),
@@ -241,8 +180,6 @@ pub fn section(
   element("section", attrs, children)
 }
 
-/// Represents a part that contains a set of form controls or other content related
-/// to performing a search or filtering operation.
 /// 
 pub fn search(
   attrs: List(Attribute(msg)),
@@ -253,10 +190,6 @@ pub fn search(
 
 // HTML ELEMENTS: TEXT CONTENT -------------------------------------------------
 
-/// Indicates that the enclosed text is an extended quotation. Usually, this is
-/// rendered visually by indentation. A URL for the source of the quotation may
-/// be given using the cite attribute, while a text representation of the source
-/// can be given using the <cite> element.
 /// 
 pub fn blockquote(
   attrs: List(Attribute(msg)),
@@ -265,8 +198,6 @@ pub fn blockquote(
   element("blockquote", attrs, children)
 }
 
-/// Provides the description, definition, or value for the preceding term (<dt>)
-/// in a description list (<dl>).
 /// 
 pub fn dd(
   attrs: List(Attribute(msg)),
@@ -275,10 +206,6 @@ pub fn dd(
   element("dd", attrs, children)
 }
 
-/// The generic container for flow content. It has no effect on the content or
-/// layout until styled in some way using CSS (e.g., styling is directly applied
-/// to it, or some kind of layout model like flexbox is applied to its parent
-/// element).
 /// 
 pub fn div(
   attrs: List(Attribute(msg)),
@@ -287,10 +214,6 @@ pub fn div(
   element("div", attrs, children)
 }
 
-/// Represents a description list. The element encloses a list of groups of terms
-/// (specified using the <dt> element) and descriptions (provided by <dd> elements).
-/// Common uses for this element are to implement a glossary or to display metadata
-/// (a list of key-value pairs).
 /// 
 pub fn dl(
   attrs: List(Attribute(msg)),
@@ -299,10 +222,6 @@ pub fn dl(
   element("dl", attrs, children)
 }
 
-/// Specifies a term in a description or definition list, and as such must be
-/// used inside a <dl> element. It is usually followed by a <dd> element;
-/// however, multiple <dt> elements in a row indicate several terms that are
-/// all defined by the immediate next <dd> element.
 /// 
 pub fn dt(
   attrs: List(Attribute(msg)),
@@ -311,8 +230,6 @@ pub fn dt(
   element("dt", attrs, children)
 }
 
-/// Represents a caption or legend describing the rest of the contents of its
-/// parent <figure> element.
 /// 
 pub fn figcaption(
   attrs: List(Attribute(msg)),
@@ -321,9 +238,6 @@ pub fn figcaption(
   element("figcaption", attrs, children)
 }
 
-/// Represents self-contained content, potentially with an optional caption,
-/// which is specified using the <figcaption> element. The figure, its caption,
-/// and its contents are referenced as a single unit.
 /// 
 pub fn figure(
   attrs: List(Attribute(msg)),
@@ -332,18 +246,11 @@ pub fn figure(
   element("figure", attrs, children)
 }
 
-/// Represents a thematic break between paragraph-level elements: for example,
-/// a change of scene in a story, or a shift of topic within a section.
 /// 
 pub fn hr(attrs: List(Attribute(msg))) -> Element(msg) {
   element("hr", attrs, [])
 }
 
-/// Represents an item in a list. It must be contained in a parent element: an
-/// ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>). In menus
-/// and unordered lists, list items are usually displayed using bullet points.
-/// In ordered lists, they are usually displayed with an ascending counter on
-/// the left, such as a number or letter.
 /// 
 pub fn li(
   attrs: List(Attribute(msg)),
@@ -352,9 +259,6 @@ pub fn li(
   element("li", attrs, children)
 }
 
-/// A semantic alternative to <ul>, but treated by browsers (and exposed through
-/// the accessibility tree) as no different than <ul>. It represents an unordered
-/// list of items (which are represented by <li> elements).
 /// 
 pub fn menu(
   attrs: List(Attribute(msg)),
@@ -363,7 +267,6 @@ pub fn menu(
   element("menu", attrs, children)
 }
 
-/// Represents an ordered list of items — typically rendered as a numbered list.
 ///
 pub fn ol(
   attrs: List(Attribute(msg)),
@@ -372,10 +275,6 @@ pub fn ol(
   element("ol", attrs, children)
 }
 
-/// Represents a paragraph. Paragraphs are usually represented in visual media
-/// as blocks of text separated from adjacent blocks by blank lines and/or
-/// first-line indentation, but HTML paragraphs can be any structural grouping
-/// of related content, such as images or form fields.
 /// 
 pub fn p(
   attrs: List(Attribute(msg)),
@@ -384,9 +283,6 @@ pub fn p(
   element("p", attrs, children)
 }
 
-/// Represents preformatted text which is to be presented exactly as written in
-/// the HTML file. The text is typically rendered using a non-proportional, or
-/// monospaced, font. Whitespace inside this element is displayed as written.
 /// 
 pub fn pre(
   attrs: List(Attribute(msg)),
@@ -395,7 +291,6 @@ pub fn pre(
   element("pre", attrs, children)
 }
 
-/// Represents an unordered list of items, typically rendered as a bulleted list.
 /// 
 pub fn ul(
   attrs: List(Attribute(msg)),
@@ -406,9 +301,6 @@ pub fn ul(
 
 // HTML ELEMENTS: INLINE TEXT SEMANTICS ----------------------------------------
 
-/// Together with its href attribute, creates a hyperlink to web pages, files,
-/// email addresses, locations within the current page, or anything else a URL
-/// can address.
 /// 
 pub fn a(
   attrs: List(Attribute(msg)),
@@ -417,7 +309,6 @@ pub fn a(
   element("a", attrs, children)
 }
 
-/// Represents an abbreviation or acronym.
 /// 
 pub fn abbr(
   attrs: List(Attribute(msg)),
@@ -426,13 +317,6 @@ pub fn abbr(
   element("abbr", attrs, children)
 }
 
-/// Used to draw the reader's attention to the element's contents, which are not
-/// otherwise granted special importance. This was formerly known as the Boldface
-/// element, and most browsers still draw the text in boldface. However, you
-/// should not use <b> for styling text or granting importance. If you wish to
-/// create boldface text, you should use the CSS font-weight property. If you
-/// wish to indicate an element is of special importance, you should use the
-/// strong element.
 /// 
 pub fn b(
   attrs: List(Attribute(msg)),
@@ -441,10 +325,6 @@ pub fn b(
   element("b", attrs, children)
 }
 
-/// Tells the browser's bidirectional algorithm to treat the text it contains in
-/// isolation from its surrounding text. It's particularly useful when a website
-/// dynamically inserts some text and doesn't know the directionality of the
-/// text being inserted.
 /// 
 pub fn bdi(
   attrs: List(Attribute(msg)),
@@ -453,8 +333,6 @@ pub fn bdi(
   element("bdi", attrs, children)
 }
 
-/// Overrides the current directionality of text, so that the text within is
-/// rendered in a different direction.
 /// 
 pub fn bdo(
   attrs: List(Attribute(msg)),
@@ -463,16 +341,11 @@ pub fn bdo(
   element("bdo", attrs, children)
 }
 
-/// Produces a line break in text (carriage-return). It is useful for writing a
-/// poem or an address, where the division of lines is significant.
 /// 
 pub fn br(attrs: List(Attribute(msg))) -> Element(msg) {
   element("br", attrs, [])
 }
 
-/// Used to mark up the title of a cited creative work. The reference may be in
-/// an abbreviated form according to context-appropriate conventions related to
-/// citation metadata.
 /// 
 pub fn cite(
   attrs: List(Attribute(msg)),
@@ -481,9 +354,6 @@ pub fn cite(
   element("cite", attrs, children)
 }
 
-/// Displays its contents styled in a fashion intended to indicate that the text
-/// is a short fragment of computer code. By default, the content text is
-/// displayed using the user agent's default monospace font.
 /// 
 pub fn code(
   attrs: List(Attribute(msg)),
@@ -492,8 +362,6 @@ pub fn code(
   element("code", attrs, children)
 }
 
-/// Links a given piece of content with a machine-readable translation. If the
-/// content is time- or date-related, the<time> element must be used.
 /// 
 pub fn data(
   attrs: List(Attribute(msg)),
@@ -502,10 +370,6 @@ pub fn data(
   element("data", attrs, children)
 }
 
-/// Used to indicate the term being defined within the context of a definition
-/// phrase or sentence. The ancestor <p> element, the <dt>/<dd> pairing, or the
-/// nearest section ancestor of the <dfn> element, is considered to be the
-/// definition of the term.
 /// 
 pub fn dfn(
   attrs: List(Attribute(msg)),
@@ -514,8 +378,6 @@ pub fn dfn(
   element("dfn", attrs, children)
 }
 
-/// Marks text that has stress emphasis. The <em> element can be nested, with
-/// each nesting level indicating a greater degree of emphasis.
 /// 
 pub fn em(
   attrs: List(Attribute(msg)),
@@ -524,10 +386,6 @@ pub fn em(
   element("em", attrs, children)
 }
 
-/// Represents a range of text that is set off from the normal text for some
-/// reason, such as idiomatic text, technical terms, and taxonomical designations,
-/// among others. Historically, these have been presented using italicized type,
-/// which is the original source of the <i> naming of this element.
 /// 
 pub fn i(
   attrs: List(Attribute(msg)),
@@ -536,10 +394,6 @@ pub fn i(
   element("i", attrs, children)
 }
 
-/// Represents a span of inline text denoting textual user input from a keyboard,
-/// voice input, or any other text entry device. By convention, the user agent 
-/// defaults to rendering the contents of a <kbd> element using its default
-/// monospace font, although this is not mandated by the HTML standard.
 /// 
 pub fn kbd(
   attrs: List(Attribute(msg)),
@@ -548,8 +402,6 @@ pub fn kbd(
   element("kbd", attrs, children)
 }
 
-/// Represents text which is marked or highlighted for reference or notation
-/// purposes due to the marked passage's relevance in the enclosing context.
 /// 
 pub fn mark(
   attrs: List(Attribute(msg)),
@@ -558,10 +410,6 @@ pub fn mark(
   element("mark", attrs, children)
 }
 
-/// Indicates that the enclosed text is a short inline quotation. Most modern
-/// browsers implement this by surrounding the text in quotation marks. This
-/// element is intended for short quotations that don't require paragraph
-/// breaks; for long quotations use the <blockquote> element.
 /// 
 pub fn q(
   attrs: List(Attribute(msg)),
@@ -570,10 +418,6 @@ pub fn q(
   element("q", attrs, children)
 }
 
-/// Used to provide fall-back parentheses for browsers that do not support the
-/// display of ruby annotations using the <ruby> element. One <rp> element
-/// should enclose each of the opening and closing parentheses that wrap the
-/// <rt> element that contains the annotation's text.
 /// 
 pub fn rp(
   attrs: List(Attribute(msg)),
@@ -582,10 +426,6 @@ pub fn rp(
   element("rp", attrs, children)
 }
 
-/// Specifies the ruby text component of a ruby annotation, which is used to
-/// provide pronunciation, translation, or transliteration information for East
-/// Asian typography. The <rt> element must always be contained within a <ruby> 
-/// element.
 /// 
 pub fn rt(
   attrs: List(Attribute(msg)),
@@ -594,10 +434,6 @@ pub fn rt(
   element("rt", attrs, children)
 }
 
-/// Represents small annotations that are rendered above, below, or next to base
-/// text, usually used for showing the pronunciation of East Asian characters.
-/// It can also be used for annotating other kinds of text, but this usage is
-/// less common.
 /// 
 pub fn ruby(
   attrs: List(Attribute(msg)),
@@ -606,10 +442,6 @@ pub fn ruby(
   element("ruby", attrs, children)
 }
 
-/// Renders text with a strikethrough, or a line through it. Use the <s> element
-/// to represent things that are no longer relevant or no longer accurate.
-/// However, <s> is not appropriate when indicating document edits; for that,
-/// use the del and ins elements, as appropriate.
 /// 
 pub fn s(
   attrs: List(Attribute(msg)),
@@ -618,9 +450,6 @@ pub fn s(
   element("s", attrs, children)
 }
 
-/// Used to enclose inline text which represents sample (or quoted) output from
-/// a computer program. Its contents are typically rendered using the browser's
-/// default monospaced font (such as Courier or Lucida Console).
 /// 
 pub fn samp(
   attrs: List(Attribute(msg)),
@@ -629,9 +458,6 @@ pub fn samp(
   element("samp", attrs, children)
 }
 
-/// Represents side-comments and small print, like copyright and legal text,
-/// independent of its styled presentation. By default, it renders text within
-/// it one font size smaller, such as from small to x-small.
 /// 
 pub fn small(
   attrs: List(Attribute(msg)),
@@ -640,12 +466,6 @@ pub fn small(
   element("small", attrs, children)
 }
 
-/// A generic inline container for phrasing content, which does not inherently
-/// represent anything. It can be used to group elements for styling purposes
-/// (using the class or id attributes), or because they share attribute values,
-/// such as lang. It should be used only when no other semantic element is
-/// appropriate. <span> is very much like a div element, but div is a block-level
-/// element whereas a <span> is an inline-level element.
 /// 
 pub fn span(
   attrs: List(Attribute(msg)),
@@ -654,8 +474,6 @@ pub fn span(
   element("span", attrs, children)
 }
 
-/// Indicates that its contents have strong importance, seriousness, or urgency.
-/// Browsers typically render the contents in bold type.
 /// 
 pub fn strong(
   attrs: List(Attribute(msg)),
@@ -664,9 +482,6 @@ pub fn strong(
   element("strong", attrs, children)
 }
 
-/// Specifies inline text which should be displayed as subscript for solely
-/// typographical reasons. Subscripts are typically rendered with a lowered
-/// baseline using smaller text.
 /// 
 pub fn sub(
   attrs: List(Attribute(msg)),
@@ -675,9 +490,6 @@ pub fn sub(
   element("sub", attrs, children)
 }
 
-/// Specifies inline text which is to be displayed as superscript for solely
-/// typographical reasons. Superscripts are usually rendered with a raised
-/// baseline using smaller text.
 /// 
 pub fn sup(
   attrs: List(Attribute(msg)),
@@ -686,9 +498,6 @@ pub fn sup(
   element("sup", attrs, children)
 }
 
-/// Represents a specific period in time. It may include the datetime attribute
-/// to translate dates into machine-readable format, allowing for better search
-/// engine results or custom features such as reminders.
 /// 
 pub fn time(
   attrs: List(Attribute(msg)),
@@ -697,9 +506,6 @@ pub fn time(
   element("time", attrs, children)
 }
 
-/// Represents a span of inline text which should be rendered in a way that
-/// indicates that it has a non-textual annotation. This is rendered by default
-/// as a simple solid underline but may be altered using CSS.
 /// 
 pub fn u(
   attrs: List(Attribute(msg)),
@@ -708,9 +514,6 @@ pub fn u(
   element("u", attrs, children)
 }
 
-/// Represents the name of a variable in a mathematical expression or a
-/// programming context. It's typically presented using an italicized version of
-/// the current typeface, although that behavior is browser-dependent.
 /// 
 pub fn var(
   attrs: List(Attribute(msg)),
@@ -719,9 +522,6 @@ pub fn var(
   element("var", attrs, children)
 }
 
-/// Represents the name of a variable in a mathematical expression or a
-/// programming context. It's typically presented using an italicized version of
-/// the current typeface, although that behavior is browser-dependent.
 /// 
 pub fn wbr(attrs: List(Attribute(msg))) -> Element(msg) {
   element("wbr", attrs, [])
@@ -729,16 +529,11 @@ pub fn wbr(attrs: List(Attribute(msg))) -> Element(msg) {
 
 // HTML ELEMENTS: IMAGE AND MULTIMEDIA -----------------------------------------
 
-/// Represents a word break opportunity—a position within text where the browser
-/// may optionally break a line, though its line-breaking rules would not
-/// otherwise create a break at that location.
 /// 
 pub fn area(attrs: List(Attribute(msg))) -> Element(msg) {
   element("area", attrs, [])
 }
 
-/// Defines an area inside an image map that has predefined clickable areas. An
-/// image map allows geometric areas on an image to be associated with hyperlink.
 /// 
 pub fn audio(
   attrs: List(Attribute(msg)),
@@ -747,10 +542,6 @@ pub fn audio(
   element("audio", attrs, children)
 }
 
-/// Used to embed sound content in documents. It may contain one or more audio
-/// sources, represented using the src attribute or the source element: the
-/// browser will choose the most suitable one. It can also be the destination
-/// for streamed media, using a MediaStream.
 /// 
 pub fn img(attrs: List(Attribute(msg))) -> Element(msg) {
   element("img", attrs, [])
@@ -765,18 +556,11 @@ pub fn map(
   element("map", attrs, children)
 }
 
-/// Used as a child of the media elements, audio and video. It lets you specify
-/// timed text tracks (or time-based data), for example to automatically handle
-/// subtitles. The tracks are formatted in WebVTT format (.vtt files)—Web Video
-/// Text Tracks.
 /// 
 pub fn track(attrs: List(Attribute(msg))) -> Element(msg) {
   element("track", attrs, [])
 }
 
-/// Embeds a media player which supports video playback into the document. You
-/// can also use <video> for audio content, but the audio element may provide a
-/// more appropriate user experience.
 /// 
 pub fn video(
   attrs: List(Attribute(msg)),
@@ -787,30 +571,21 @@ pub fn video(
 
 // HTML ELEMENTS: EMBEDDED CONTENT ---------------------------------------------
 
-/// Embeds external content at the specified point in the document. This content 
-///is provided by an external application or other source of interactive content
-/// such as a browser plug-in.
 /// 
 pub fn embed(attrs: List(Attribute(msg))) -> Element(msg) {
   element("embed", attrs, [])
 }
 
-/// Represents a nested browsing context, embedding another HTML page into the
-/// current one.
 /// 
 pub fn iframe(attrs: List(Attribute(msg))) -> Element(msg) {
   element("iframe", attrs, [])
 }
 
-/// Represents an external resource, which can be treated as an image, a nested
-/// browsing context, or a resource to be handled by a plugin.
 /// 
 pub fn object(attrs: List(Attribute(msg))) -> Element(msg) {
   element("object", attrs, [])
 }
 
-/// Contains zero or more <source> elements and one <img> element to offer
-/// alternative versions of an image for different display/device scenarios.
 /// 
 pub fn picture(
   attrs: List(Attribute(msg)),
@@ -819,19 +594,11 @@ pub fn picture(
   element("picture", attrs, children)
 }
 
-/// Enables the embedding of another HTML page into the current one to enable
-/// smoother navigation into new pages.
 /// 
 pub fn portal(attrs: List(Attribute(msg))) -> Element(msg) {
   element("portal", attrs, [])
 }
 
-/// Specifies multiple media resources for the picture, the audio element, or
-/// the video element. It is a void element, meaning that it has no content and
-/// does not have a closing tag. It is commonly used to offer the same media
-/// content in multiple file formats in order to provide compatibility with a
-/// broad range of browsers given their differing support for image file formats
-/// and media file formats.
 /// 
 pub fn source(attrs: List(Attribute(msg))) -> Element(msg) {
   element("source", attrs, [])
@@ -839,9 +606,6 @@ pub fn source(attrs: List(Attribute(msg))) -> Element(msg) {
 
 // HTML ELEMENTS: SVG AND MATHML -----------------------------------------------
 
-/// Container defining a new coordinate system and viewport. It is used as the
-/// outermost element of SVG documents, but it can also be used to embed an SVG
-/// fragment inside an SVG or HTML document.
 /// 
 pub fn svg(
   attrs: List(Attribute(msg)),
@@ -850,9 +614,6 @@ pub fn svg(
   namespaced("http://www.w3.org/2000/svg", "svg", attrs, children)
 }
 
-/// The top-level element in MathML. Every valid MathML instance must be wrapped
-/// in it. In addition, you must not nest a second <math> element in another,
-/// but you can have an arbitrary number of other child elements in it.
 /// 
 pub fn math(
   attrs: List(Attribute(msg)),
@@ -863,15 +624,11 @@ pub fn math(
 
 // HTML ELEMENTS: SCRIPTING ----------------------------------------------------
 
-/// Container element to use with either the canvas scripting API or the WebGL
-/// API to draw graphics and animations.
 /// 
 pub fn canvas(attrs: List(Attribute(msg))) -> Element(msg) {
   element("canvas", attrs, [])
 }
 
-/// Defines a section of HTML to be inserted if a script type on the page is
-/// unsupported or if scripting is currently turned off in the browser.
 /// 
 pub fn noscript(
   attrs: List(Attribute(msg)),
@@ -880,9 +637,6 @@ pub fn noscript(
   element("noscript", attrs, children)
 }
 
-/// Used to embed executable code or data; this is typically used to embed or
-/// refer to JavaScript code. The <script> element can also be used with other
-/// languages, such as WebGL's GLSL shader programming language and JSON.
 /// 
 pub fn script(attrs: List(Attribute(msg)), js: String) -> Element(msg) {
   element("script", attrs, [text(js)])
@@ -890,10 +644,6 @@ pub fn script(attrs: List(Attribute(msg)), js: String) -> Element(msg) {
 
 // HTML ELEMENTS: DEMARCATING EDITS ---------------------------------------------
 
-/// Represents a range of text that has been deleted from a document. This can
-/// be used when rendering "track changes" or source code diff information, for
-/// example. The <ins> element can be used for the opposite purpose: to indicate
-/// text that has been added to the document.
 /// 
 pub fn del(
   attrs: List(Attribute(msg)),
@@ -902,9 +652,6 @@ pub fn del(
   element.element("del", attrs, children)
 }
 
-/// Represents a range of text that has been added to a document. You can use the
-/// <del> element to similarly represent a range of text that has been deleted
-/// from the document.
 /// 
 pub fn ins(
   attrs: List(Attribute(msg)),
@@ -915,7 +662,6 @@ pub fn ins(
 
 // HTML ELEMENTS: TABLE CONTENT ------------------------------------------------
 
-/// Specifies the caption (or title) of a table.
 /// 
 pub fn caption(
   attrs: List(Attribute(msg)),
@@ -924,14 +670,11 @@ pub fn caption(
   element.element("caption", attrs, children)
 }
 
-/// Defines a column within a table and is used for defining common semantics on
-/// all common cells. It is generally found within a <colgroup> element.
 /// 
 pub fn col(attrs: List(Attribute(msg))) -> Element(msg) {
   element.element("col", attrs, [])
 }
 
-/// Defines a group of columns within a table.
 /// 
 pub fn colgroup(
   attrs: List(Attribute(msg)),
@@ -940,8 +683,6 @@ pub fn colgroup(
   element.element("colgroup", attrs, children)
 }
 
-/// Represents tabular data — that is, information presented in a two-dimensional
-/// table comprised of rows and columns of cells containing data.
 /// 
 pub fn table(
   attrs: List(Attribute(msg)),
@@ -950,8 +691,6 @@ pub fn table(
   element.element("table", attrs, children)
 }
 
-/// Encapsulates a set of table rows (<tr> elements), indicating that they
-/// comprise the body of the table (<table>).
 /// 
 pub fn tbody(
   attrs: List(Attribute(msg)),
@@ -960,8 +699,6 @@ pub fn tbody(
   element.element("tbody", attrs, children)
 }
 
-/// Defines a cell of a table that contains data. It participates in the table
-/// model.
 /// 
 pub fn td(
   attrs: List(Attribute(msg)),
@@ -970,7 +707,6 @@ pub fn td(
   element.element("td", attrs, children)
 }
 
-/// Defines a set of rows summarizing the columns of the table.
 /// 
 pub fn tfoot(
   attrs: List(Attribute(msg)),
@@ -979,8 +715,6 @@ pub fn tfoot(
   element.element("tfoot", attrs, children)
 }
 
-/// Defines a cell as a header of a group of table cells. The exact nature of
-/// this group is defined by the scope and headers attributes.
 /// 
 pub fn th(
   attrs: List(Attribute(msg)),
@@ -989,7 +723,6 @@ pub fn th(
   element.element("th", attrs, children)
 }
 
-/// Defines a set of rows defining the head of the columns of the table.
 /// 
 pub fn thead(
   attrs: List(Attribute(msg)),
@@ -998,8 +731,6 @@ pub fn thead(
   element.element("thead", attrs, children)
 }
 
-/// Defines a row of cells in a table. The row's cells can then be established
-/// using a mix of <td> (data cell) and <th> (header cell) elements.
 /// 
 pub fn tr(
   attrs: List(Attribute(msg)),
@@ -1010,9 +741,6 @@ pub fn tr(
 
 // HTML ELEMENTS: FORMS --------------------------------------------------------
 
-/// An interactive element activated by a user with a mouse, keyboard, finger,
-/// voice command, or other assistive technology. Once activated, it performs an
-/// action, such as submitting a form or opening a dialog.
 /// 
 pub fn button(
   attrs: List(Attribute(msg)),
@@ -1021,8 +749,6 @@ pub fn button(
   element.element("button", attrs, children)
 }
 
-/// Contains a set of <option> elements that represent the permissible or
-/// recommended options available to choose from within other controls.
 /// 
 pub fn datalist(
   attrs: List(Attribute(msg)),
@@ -1031,7 +757,6 @@ pub fn datalist(
   element.element("datalist", attrs, children)
 }
 
-/// Used to group several controls as well as labels (<label>) within a web form.
 /// 
 pub fn fieldset(
   attrs: List(Attribute(msg)),
@@ -1040,8 +765,6 @@ pub fn fieldset(
   element.element("fieldset", attrs, children)
 }
 
-/// Represents a document section containing interactive controls for submitting
-/// information.
 /// 
 pub fn form(
   attrs: List(Attribute(msg)),
@@ -1050,17 +773,11 @@ pub fn form(
   element.element("form", attrs, children)
 }
 
-/// Used to create interactive controls for web-based forms to accept data from 
-/// he user; a wide variety of types of input data and control widgets are
-/// available, depending on the device and user agent. The <input> element is
-/// one of the most powerful and complex in all of HTML due to the sheer number
-/// of combinations of input types and attributes.
 /// 
 pub fn input(attrs: List(Attribute(msg))) -> Element(msg) {
   element.element("input", attrs, [])
 }
 
-/// Represents a caption for an item in a user interface.
 /// 
 pub fn label(
   attrs: List(Attribute(msg)),
@@ -1069,7 +786,6 @@ pub fn label(
   element.element("label", attrs, children)
 }
 
-/// Represents a caption for the content of its parent <fieldset>.
 /// 
 pub fn legend(
   attrs: List(Attribute(msg)),
@@ -1078,7 +794,6 @@ pub fn legend(
   element.element("legend", attrs, children)
 }
 
-/// Represents either a scalar value within a known range or a fractional value.
 /// 
 pub fn meter(
   attrs: List(Attribute(msg)),
@@ -1087,7 +802,6 @@ pub fn meter(
   element.element("meter", attrs, children)
 }
 
-/// Creates a grouping of options within a <select> element.
 /// 
 pub fn optgroup(
   attrs: List(Attribute(msg)),
@@ -1096,16 +810,11 @@ pub fn optgroup(
   element.element("optgroup", attrs, children)
 }
 
-/// Used to define an item contained in a select, an <optgroup>, or a <datalist>
-/// element. As such, <option> can represent menu items in popups and other lists
-/// of items in an HTML document.
 /// 
 pub fn option(attrs: List(Attribute(msg))) -> Element(msg) {
   element.element("option", attrs, [])
 }
 
-/// Container element into which a site or app can inject the results of a
-/// calculation or the outcome of a user action.
 /// 
 pub fn output(
   attrs: List(Attribute(msg)),
@@ -1114,8 +823,6 @@ pub fn output(
   element.element("output", attrs, children)
 }
 
-/// Displays an indicator showing the completion progress of a task, typically
-/// displayed as a progress bar.
 /// 
 pub fn progress(
   attrs: List(Attribute(msg)),
@@ -1124,7 +831,6 @@ pub fn progress(
   element.element("progress", attrs, children)
 }
 
-/// Represents a control that provides a menu of options.
 /// 
 pub fn select(
   attrs: List(Attribute(msg)),
@@ -1133,9 +839,6 @@ pub fn select(
   element.element("select", attrs, children)
 }
 
-/// Represents a multi-line plain-text editing control, useful when you want to
-/// allow users to enter a sizeable amount of free-form text, for example, a 
-/// comment on a review or feedback form.
 /// 
 pub fn textarea(attrs: List(Attribute(msg))) -> Element(msg) {
   element.element("textarea", attrs, [])
@@ -1143,9 +846,6 @@ pub fn textarea(attrs: List(Attribute(msg))) -> Element(msg) {
 
 // HTML ELEMENTS: INTERACTIVE ELEMENTS -----------------------------------------
 
-/// Creates a disclosure widget in which information is visible only when the
-/// widget is toggled into an "open" state. A summary or label must be provided
-/// using the <summary> element.
 /// 
 pub fn details(
   attrs: List(Attribute(msg)),
@@ -1154,8 +854,6 @@ pub fn details(
   element.element("details", attrs, children)
 }
 
-/// Represents a dialog box or other interactive component, such as a dismissible
-/// alert, inspector, or subwindow.
 /// 
 pub fn dialog(
   attrs: List(Attribute(msg)),
@@ -1164,9 +862,6 @@ pub fn dialog(
   element.element("dialog", attrs, children)
 }
 
-/// Specifies a summary, caption, or legend for a details element's disclosure box.
-/// Clicking the <summary> element toggles the state of the parent <details> element
-/// open and closed.
 /// 
 pub fn summary(
   attrs: List(Attribute(msg)),
@@ -1177,17 +872,11 @@ pub fn summary(
 
 // HTML ELEMENTS: WEB COMPONENTS -----------------------------------------------
 
-/// Part of the Web Components technology suite, this element is a placeholder
-/// inside a web component that you can fill with your own markup, which lets you
-/// create separate DOM trees and present them together.
 ///
 pub fn slot(attrs: List(Attribute(msg))) -> Element(msg) {
   element.element("slot", attrs, [])
 }
 
-/// A mechanism for holding HTML that is not to be rendered immediately when a
-/// page is loaded but may be instantiated subsequently during runtime using
-/// JavaScript.
 /// 
 pub fn template(
   attrs: List(Attribute(msg)),
diff --git a/lib/src/lustre/element/svg.gleam b/lib/src/lustre/element/svg.gleam
index f9776ca..a1fc0ce 100644
--- a/lib/src/lustre/element/svg.gleam
+++ b/lib/src/lustre/element/svg.gleam
@@ -1,3 +1,6 @@
+//// To read the full documentation for this module, please visit
+//// [https://pkg.hayleigh.dev/lustre/api/lustre/element/svg](https://pkg.hayleigh.dev/lustre/api/lustre/element/svg)
+
 // IMPORTS ---------------------------------------------------------------------
 
 import lustre/element.{Element, namespaced, text as inline_text}
@@ -15,54 +18,66 @@ const namespace = "http://www.w3.org/2000/svg"
 
 // SVG ELEMENTS: ANIMATION ELEMENTS --------------------------------------------
 
+///
 pub fn animate(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "animate", attrs, [])
 }
 
+///
 pub fn animate_motion(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "animateMotion", attrs, [])
 }
 
+///
 pub fn animate_transform(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "animateTransform", attrs, [])
 }
 
+///
 pub fn mpath(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "mpath", attrs, [])
 }
 
+///
 pub fn set(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "set", attrs, [])
 }
 
 // SVG ELEMENTS: BASIC SHAPES --------------------------------------------------
 
+///
 pub fn circle(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "circle", attrs, [])
 }
 
+///
 pub fn ellipse(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "ellipse", attrs, [])
 }
 
+///
 pub fn line(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "line", attrs, [])
 }
 
+///
 pub fn polygon(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "polygon", attrs, [])
 }
 
+///
 pub fn polyline(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "polyline", attrs, [])
 }
 
+///
 pub fn rect(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "rect", attrs, [])
 }
 
 // SVG ELEMENTS: CONTAINER ELEMENTS --------------------------------------------
 
+///
 pub fn a(
   attrs: List(Attribute(msg)),
   children: List(Element(msg)),
@@ -70,6 +85,7 @@ pub fn a(
   namespaced(namespace, "a", attrs, children)
 }
 
+///
 pub fn defs(
   attrs: List(Attribute(msg)),
   children: List(Element(msg)),
@@ -77,6 +93,7 @@ pub fn defs(
   namespaced(namespace, "defs", attrs, children)
 }
 
+///
 pub fn g(
   attrs: List(Attribute(msg)),
   children: List(Element(msg)),
@@ -84,6 +101,7 @@ pub fn g(
   namespaced(namespace, "g", attrs, children)
 }
 
+///
 pub fn marker(
   attrs: List(Attribute(msg)),
   children: List(Element(msg)),
@@ -91,6 +109,7 @@ pub fn marker(
   namespaced(namespace, "marker", attrs, children)
 }
 
+///
 pub fn mask(
   attrs: List(Attribute(msg)),
   children: List(Element(msg)),
@@ -98,6 +117,7 @@ pub fn mask(
   namespaced(namespace, "mask", attrs, children)
 }
 
+///
 pub fn missing_glyph(
   attrs: List(Attribute(msg)),
   children: List(Element(msg)),
@@ -105,6 +125,7 @@ pub fn missing_glyph(
   namespaced(namespace, "missing-glyph", attrs, children)
 }
 
+///
 pub fn pattern(
   attrs: List(Attribute(msg)),
   children: List(Element(msg)),
@@ -112,6 +133,7 @@ pub fn pattern(
   namespaced(namespace, "pattern", attrs, children)
 }
 
+///
 pub fn svg(
   attrs: List(Attribute(msg)),
   children: List(Element(msg)),
@@ -119,6 +141,7 @@ pub fn svg(
   namespaced(namespace, "svg", attrs, children)
 }
 
+///
 pub fn switch(
   attrs: List(Attribute(msg)),
   children: List(Element(msg)),
@@ -126,6 +149,7 @@ pub fn switch(
   namespaced(namespace, "switch", attrs, children)
 }
 
+///
 pub fn symbol(
   attrs: List(Attribute(msg)),
   children: List(Element(msg)),
@@ -135,6 +159,7 @@ pub fn symbol(
 
 // SVG ELEMENTS: DESCRIPTIVE ELEMENTS ------------------------------------------
 
+///
 pub fn desc(
   attrs: List(Attribute(msg)),
   children: List(Element(msg)),
@@ -142,6 +167,7 @@ pub fn desc(
   namespaced(namespace, "desc", attrs, children)
 }
 
+///
 pub fn metadata(
   attrs: List(Attribute(msg)),
   children: List(Element(msg)),
@@ -149,6 +175,7 @@ pub fn metadata(
   namespaced(namespace, "metadata", attrs, children)
 }
 
+///
 pub fn title(
   attrs: List(Attribute(msg)),
   children: List(Element(msg)),
@@ -158,26 +185,32 @@ pub fn title(
 
 // SVG ELEMENTS: FILTER EFFECTS ------------------------------------------------
 
+///
 pub fn fe_blend(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "feBlend", attrs, [])
 }
 
+///
 pub fn fe_color_matrix(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "feColorMatrix", attrs, [])
 }
 
+///
 pub fn fe_component_transfer(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "feComponentTransfer", attrs, [])
 }
 
+///
 pub fn fe_composite(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "feComposite", attrs, [])
 }
 
+///
 pub fn fe_convolve_matrix(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "feConvolveMatrix", attrs, [])
 }
 
+///
 pub fn fe_diffuse_lighting(
   attrs: List(Attribute(msg)),
   children: List(Element(msg)),
@@ -185,42 +218,52 @@ pub fn fe_diffuse_lighting(
   namespaced(namespace, "feDiffuseLighting", attrs, children)
 }
 
+///
 pub fn fe_displacement_map(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "feDisplacementMap", attrs, [])
 }
 
+///
 pub fn fe_drop_shadow(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "feDropShadow", attrs, [])
 }
 
+///
 pub fn fe_flood(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "feFlood", attrs, [])
 }
 
+///
 pub fn fe_func_a(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "feFuncA", attrs, [])
 }
 
+///
 pub fn fe_func_b(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "feFuncB", attrs, [])
 }
 
+///
 pub fn fe_func_g(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "feFuncG", attrs, [])
 }
 
+///
 pub fn fe_func_r(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "feFuncR", attrs, [])
 }
 
+///
 pub fn fe_gaussian_blur(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "feGaussianBlur", attrs, [])
 }
 
+///
 pub fn fe_image(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "feImage", attrs, [])
 }
 
+///
 pub fn fe_merge(
   attrs: List(Attribute(msg)),
   children: List(Element(msg)),
@@ -228,18 +271,22 @@ pub fn fe_merge(
   namespaced(namespace, "feMerge", attrs, children)
 }
 
+///
 pub fn fe_merge_node(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "feMergeNode", attrs, [])
 }
 
+///
 pub fn fe_morphology(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "feMorphology", attrs, [])
 }
 
+///
 pub fn fe_offset(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "feOffset", attrs, [])
 }
 
+///
 pub fn fe_specular_lighting(
   attrs: List(Attribute(msg)),
   children: List(Element(msg)),
@@ -247,6 +294,7 @@ pub fn fe_specular_lighting(
   namespaced(namespace, "feSpecularLighting", attrs, children)
 }
 
+///
 pub fn fe_tile(
   attrs: List(Attribute(msg)),
   children: List(Element(msg)),
@@ -254,12 +302,14 @@ pub fn fe_tile(
   namespaced(namespace, "feTile", attrs, children)
 }
 
+///
 pub fn fe_turbulence(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "feTurbulence", attrs, [])
 }
 
 // SVG ELEMENTS: GRADIENT ELEMENTS ---------------------------------------------
 
+///
 pub fn linear_gradient(
   attrs: List(Attribute(msg)),
   children: List(Element(msg)),
@@ -267,6 +317,7 @@ pub fn linear_gradient(
   namespaced(namespace, "linearGradient", attrs, children)
 }
 
+///
 pub fn radial_gradient(
   attrs: List(Attribute(msg)),
   children: List(Element(msg)),
@@ -274,44 +325,53 @@ pub fn radial_gradient(
   namespaced(namespace, "radialGradient", attrs, children)
 }
 
+///
 pub fn stop(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "stop", attrs, [])
 }
 
 // SVG ELEMENTS: GRAPHICAL ELEMENTS --------------------------------------------
 
+///
 pub fn image(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "image", attrs, [])
 }
 
+///
 pub fn path(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "path", attrs, [])
 }
 
+///
 pub fn text(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "text", attrs, [])
 }
 
+///
 pub fn use_(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "use", attrs, [])
 }
 
 // SVG ELEMENTS: LIGHTING ELEMENTS ---------------------------------------------
 
+///
 pub fn fe_distant_light(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "feDistantLight", attrs, [])
 }
 
+///
 pub fn fe_point_light(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "fePointLight", attrs, [])
 }
 
+///
 pub fn fe_spot_light(attrs: List(Attribute(msg))) -> Element(msg) {
   namespaced(namespace, "feSpotLight", attrs, [])
 }
 
 // SVG ELEMENTS: NEVER-RENDERED ELEMENTS ---------------------------------------
 
+///
 pub fn clip_path(
   attrs: List(Attribute(msg)),
   children: List(Element(msg)),
@@ -319,16 +379,19 @@ pub fn clip_path(
   namespaced(namespace, "clipPath", attrs, children)
 }
 
+///
 pub fn script(attrs: List(Attribute(msg)), js: String) -> Element(msg) {
   namespaced(namespace, "script", attrs, [inline_text(js)])
 }
 
+///
 pub fn style(attrs: List(Attribute(msg)), css: String) -> Element(msg) {
   namespaced(namespace, "style", attrs, [inline_text(css)])
 }
 
 // SVG ELEMENTS: RENDERABLE ELEMENTS -------------------------------------------
 
+///
 pub fn foreign_object(
   attrs: List(Attribute(msg)),
   children: List(Element(msg)),
@@ -336,6 +399,7 @@ pub fn foreign_object(
   namespaced(namespace, "foreignObject", attrs, children)
 }
 
+///
 pub fn text_path(
   attrs: List(Attribute(msg)),
   children: List(Element(msg)),
@@ -343,6 +407,7 @@ pub fn text_path(
   namespaced(namespace, "textPath", attrs, children)
 }
 
+///
 pub fn tspan(
   attrs: List(Attribute(msg)),
   children: List(Element(msg)),
diff --git a/lib/src/lustre/event.gleam b/lib/src/lustre/event.gleam
index f56e5f8..e0b42b9 100644
--- a/lib/src/lustre/event.gleam
+++ b/lib/src/lustre/event.gleam
@@ -1,4 +1,5 @@
-////
+//// To read the full documentation for this module, please visit
+//// [https://pkg.hayleigh.dev/lustre/api/lustre/event](https://pkg.hayleigh.dev/lustre/api/lustre/event)
 
 // IMPORTS ---------------------------------------------------------------------
 
@@ -15,11 +16,13 @@ type Decoded(a) =
 // EFFECTS ---------------------------------------------------------------------
 
 @target(javascript)
+///
 @external(javascript, "../lustre.ffi.mjs", "emit")
 pub fn emit(event: String, data: any) -> Effect(msg)
 
 // CUSTOM EVENTS ---------------------------------------------------------------
 
+///
 pub fn on(
   name: String,
   handler: fn(Dynamic) -> Result(msg, error),
@@ -143,24 +146,18 @@ pub fn on_blur(msg: msg) -> Attribute(msg) {
 
 // DECODERS --------------------------------------------------------------------
 
-/// A helpful decoder to extract the `value` from an event object. This is handy
-/// for getting the value as a string from an input event, for example.
 ///
 pub fn value(event: Dynamic) -> Decoded(String) {
   event
   |> dynamic.field("target", dynamic.field("value", dynamic.string))
 }
 
-/// A helpful decoder to extract the `checked` property from an event triggered
-/// by a checkbox.
 ///
 pub fn checked(event: Dynamic) -> Decoded(Bool) {
   event
   |> dynamic.field("target", dynamic.field("checked", dynamic.bool))
 }
 
-/// A helpful decoder to grab the mouse's current x and y position in the
-/// viewport from an event object.
 ///
 pub fn mouse_position(event: Dynamic) -> Decoded(#(Float, Float)) {
   use x <- result.then(dynamic.field("clientX", dynamic.float)(event))