Module Pure_html

Use this module for constructing HTML without any dependency on the Dream web framework.

Core types

These are the types of the final values which get rendered.

type attr

E.g. id="toast".

type node

Either a tag, a comment, or text data in the markup.

Output

val to_string : node -> string
val to_xml : ?header:bool -> node -> string

Same as to_string but render void tags as XML-style self-closing tags.

  • parameter header

    print the XML header string if true. This is to allow both use cases where the XML code is embedded inside HTML, and standalone XML documents. Default is false. Since 3.6.0.

  • since 3.3.0.
val pp : Stdlib.Format.formatter -> node -> unit
val pp_xml : Stdlib.Format.formatter -> ?header:bool -> node -> unit

Same as pp but render void tags as XML-style self-closing tags.

  • parameter header

    print the XML header string if true. This is to allow both use cases where the XML code is embedded inside HTML, and standalone XML documents. Default is false. Since 3.6.0.

  • since 3.3.0.

Constructing nodes and attributes

type 'a to_attr = 'a -> attr

Attributes can be created from typed values.

type 'a string_attr = ('a, unit, string, attr) Stdlib.format4 -> 'a

Special handling for string-value attributes so they can use format strings i.e. string interpolation.

type std_tag = attr list -> node list -> node

A 'standard' tag with attributes and children.

type void_tag = attr list -> node

A 'void element': https://developer.mozilla.org/en-US/docs/Glossary/Void_element with no children.

type 'a text_tag = attr list -> ('a, unit, string, node) Stdlib.format4 -> 'a

Tags which can have attributes but can contain only text. The text can be formatted.

val attr : string -> attr

attr name is a new attribute which does not carry any payload. E.g.

let required = attr "required"
  • since 0.1.0.
val string_attr : string -> ?raw:bool -> _ string_attr

string_attr name fmt is a new string-valued attribute which allows formatting i.e. string interpolation of the value. Note, the fmt argument is required due to the value restriction.

val uri_attr : string -> _ string_attr

Convenience for attributes whose values should be URIs. Takes care of both URI-encoding and attribute escaping, as recommended in https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html#common-mistake.

Examples

a [href "/blog?tags=iamsafe\"></a><script>alert('Pwned')</script>"] [txt "Tags: tag1 | tag2"]
==>
<a href="/blog?tags=iamsafe%22%3E%3C/a%3E%3Cscript%3Ealert('Pwned')%3C/script%3E">Tags: tag1 | tag2</a>

a [href "/foo?a=1&b=2 3&c=4<5&d=6>5"] [txt "Test"]
==>
<a href="/foo?a=1&amp;b=2%203&amp;c=4%3C5&amp;d=6%3E5">Test</a>
val bool_attr : string -> bool to_attr
val float_attr : string -> float to_attr
val int_attr : string -> int to_attr
val std_tag : string -> std_tag
val void_tag : string -> void_tag
val text_tag : string -> ?raw:bool -> _ text_tag

Build a tag which can contain only text.

val txt : ?raw:bool -> ('a, unit, string, node) Stdlib.format4 -> 'a

A text node inside the DOM e.g. the 'hi' in <b>hi</b>. Allows string interpolation using the same formatting features as Printf.sprintf:

b [] [txt "Hello, %s!" name]

Or without interpolation:

b [] [txt "Bold of you."]

HTML-escapes the text value. You can use the ~raw param to bypass escaping:

let user_input = "<script>alert('I like HTML injection')</script>" in
txt ~raw:true "%s" user_input
val comment : string -> node

A comment that will be embedded in the rendered HTML, i.e. <!-- comment -->. The text is HTML-escaped.

Accessors for tags

val (+@) : node -> attr -> node

Add an attribute to a tag.

let toast msg = p [id "toast"] [txt "%s" msg]
let toast_oob = toast "ok." +@ Hx.swap_oob "true"
  • raises Invalid_argument

    if the node is not a tag (i.e. if it is a text or comment node).

  • since 0.0.3.
val (-@) : node -> string -> node

Remove an attribute from a tag.

  • raises Invalid_argument

    if the node is not a tag (i.e. if it is a text or comment node).

  • since 0.0.3.
val (.@[]) : node -> string -> string

Get the value of an existing attribute.

let toast = p [id "toast"] [txt "OK."]
let toast_id = toast.@["id"]
  • raises Invalid_argument

    if the node is not a tag (i.e. if it is a text or comment node).

  • raises Not_found

    if the tag does not have the given attribute.

  • since 0.0.3.
val is_null : node -> bool

Get whether a node is null (empty) or not. Useful for conditional rendering of UIs when you are passed in a node and you don't know if it's empty or not.

  • since 1.2.0.
val is_null_ : attr -> bool

Get whether an attribute is null (empty) or not.

  • since 1.2.0.

Standard attributes and tags

module HTML : sig ... end

All standard HTML attributes and tags. Some attributes and tags have the same name, e.g. style. To disambiguate them, attributes have a _ (underscore) suffix.

module SVG : sig ... end
module MathML : sig ... end

ARIA support

module Aria : sig ... end

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/

htmx support

module Hx : sig ... end

htmx support https://htmx.org/reference/