Dream_html
include module type of Pure_html
These are the types of the final values which get rendered.
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.
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.
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.
A 'void element': https://developer.mozilla.org/en-US/docs/Glossary/Void_element with no children.
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"
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&b=2%203&c=4%3C5&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.
Add an attribute to a tag.
let toast msg = p [id "toast"] [txt "%s" msg]
let toast_oob = toast "ok." +@ Hx.swap_oob "true"
val (.@[]) : node -> string -> string
Get the value of an existing attribute.
let toast = p [id "toast"] [txt "OK."]
let toast_id = toast.@["id"]
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.
val is_null_ : attr -> bool
Get whether an attribute is null (empty) or not.
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
module Aria : sig ... end
module Hx : sig ... end
htmx support https://htmx.org/reference/
val respond :
?status:[< Dream.status ] ->
?code:int ->
?headers:(string * string) list ->
node ->
Dream.response Dream.promise
val send :
?text_or_binary:[< Dream.text_or_binary ] ->
?end_of_message:[< Dream.end_of_message ] ->
Dream.websocket ->
node ->
unit Dream.promise
Type-safe wrapper for Dream.send
.
val set_body : Dream.response -> node -> unit
Type-safe wrapper for Dream.set_body
. Sets the body to the given node
and sets the Content-Type
header to text/html
.
val write : Dream.stream -> node -> unit Dream.promise
Type-safe wrapper for Dream.write
.
val csrf_tag : Dream.request -> node
Convenience to add a CSRF token generated by Dream into your form. Type-safe wrapper for Dream.csrf_tag
.
form
[action "/foo"]
[csrf_tag req; input [name "bar"]; input [type_ "submit"]]
module Livereload : sig ... end
Live reload script injection and handling. Adapted from Dream.livereload
middleware. This version is not a middleware so it's not as plug-and-play as that, but on the other hand it's much simpler to implement because it uses type-safe dream-html nodes rather than parsing and printing raw HTML. See below for the 3-step process to use it.