Module Tw_html

A library for building HTML documents programmatically.

This module provides a type-safe and declarative API for creating HTML elements and attributes. It is designed to be used for generating static HTML pages.

type t

The abstract type for an HTML node.

type tw = Tw.t

Type alias for Tailwind styles for convenience.

type attr

The abstract type for an HTML attribute.

module At : sig ... end

Functions for creating HTML attributes.

Text helpers

val txt : string -> t

txt s creates a text node from string s.

val txtf : string list -> t

txtf ["a"; "b"] is equivalent to txt "ab".

val raw : string -> t

raw html creates a node from raw HTML string. Use with caution.

val rawf : string list -> t

rawf ["a"; "b"] is equivalent to raw "ab".

val empty : t

empty is the empty element, equivalent to no content.

module Aria : sig ... end

Conversion functions

val to_string : ?doctype:bool -> t -> string

to_string ?doctype element converts HTML element to string representation. If doctype is true (default: false), includes the HTML5 doctype declaration.

val to_tw : t -> tw list

to_tw t extracts all styling classes from an HTML tree.

val has_forms : t -> bool

has_forms t returns true if the HTML tree contains form elements (input, select, textarea) that benefit from the forms plugin base styles.

Page generation

type page

Complete HTML page with integrated CSS.

A page value represents a complete, self-contained HTML document with all required CSS automatically generated from the Tailwind utilities used in the HTML structure. This ensures consistency between your markup and styles without manual CSS management.

Design rationale: The type is abstract to enforce the invariant that the CSS contains exactly the styles needed for the HTML content. Direct construction would break this guarantee.

val page : ?lang:string -> ?meta:(string * string) list -> ?title:string -> ?charset:string -> ?tw_css:string -> t list -> t list -> page

page ?lang ?meta ?title ?charset ?tw_css head body generates a complete HTML page and its corresponding CSS.

  • lang defaults to "en"
  • charset defaults to "utf-8"
  • meta is a list of (name, content) pairs for meta tags
  • title is the page title
  • tw_css defaults to "tw.css" - the filename for the CSS, automatically included as a <link> tag in HTML head
  • head is additional content for the head section
  • body is the body content

The HTML automatically includes a <link rel="stylesheet" href="{tw_css}"> tag. Use html to get the HTML string and css to get the CSS filename and stylesheet.

val html : page -> string

html page extracts the HTML string from a page result.

val css : page -> string * Tw.Css.t

css page extracts the CSS filename and stylesheet from a page result.

module Livereload : sig ... end

HTML Elements

val div : ?at:attr list -> ?tw:tw list -> t list -> t

div ?at ?tw children is a div element.

val span : ?at:attr list -> ?tw:tw list -> t list -> t

span ?at ?tw children is a span element.

val p : ?at:attr list -> ?tw:tw list -> t list -> t

p ?at ?tw children is a paragraph element.

val a : ?at:attr list -> ?tw:tw list -> t list -> t

a ?at ?tw children is an anchor/link element.

val ul : ?at:attr list -> ?tw:tw list -> t list -> t

ul ?at ?tw children is an unordered list element.

val li : ?at:attr list -> ?tw:tw list -> t list -> t

li ?at ?tw children is a list item element.

val nav : ?at:attr list -> ?tw:tw list -> t list -> t

nav ?at ?tw children is a navigation element.

val section : ?at:attr list -> ?tw:tw list -> t list -> t

section ?at ?tw children is a section element.

val article : ?at:attr list -> ?tw:tw list -> t list -> t

article ?at ?tw children is an article element.

val header : ?at:attr list -> ?tw:tw list -> t list -> t

header ?at ?tw children is a header element.

footer ?at ?tw children is a footer element.

val h1 : ?at:attr list -> ?tw:tw list -> t list -> t

h1 ?at ?tw children is an h1 heading element.

val h2 : ?at:attr list -> ?tw:tw list -> t list -> t

h2 ?at ?tw children is an h2 heading element.

val h3 : ?at:attr list -> ?tw:tw list -> t list -> t

h3 ?at ?tw children is an h3 heading element.

val h4 : ?at:attr list -> ?tw:tw list -> t list -> t

h4 ?at ?tw children is an h4 heading element.

val h5 : ?at:attr list -> ?tw:tw list -> t list -> t

h5 ?at ?tw children is an h5 heading element.

val h6 : ?at:attr list -> ?tw:tw list -> t list -> t

h6 ?at ?tw children is an h6 heading element.

val img : ?at:attr list -> ?tw:tw list -> unit -> t

img ?at ?tw () is an img element.

val script : ?at:attr list -> ?tw:tw list -> t list -> t

script ?at ?tw children is a script element.

val meta : ?at:attr list -> ?tw:tw list -> unit -> t

meta ?at ?tw () is a meta element.

link ?at ?tw () is a link element.

val title : ?at:attr list -> ?tw:tw list -> t list -> t

title ?at ?tw children is a title element.

val head : ?at:attr list -> ?tw:tw list -> t list -> t

head ?at ?tw children is a head element.

val body : ?at:attr list -> ?tw:tw list -> t list -> t

body ?at ?tw children is a body element.

val root : ?at:attr list -> ?tw:tw list -> t list -> t

root ?at ?tw children is the root <html> element of a document.

val void : t

void is an empty void element.

val option : ?at:attr list -> ?tw:tw list -> t list -> t

option ?at ?tw children is an option element.

val select : ?at:attr list -> ?tw:tw list -> t list -> t

select ?at ?tw children is a select element.

val main : ?at:attr list -> ?tw:tw list -> t list -> t

main ?at ?tw children is a main element.

val aside : ?at:attr list -> ?tw:tw list -> t list -> t

aside ?at ?tw children is an aside element.

val time : ?at:attr list -> ?tw:tw list -> t list -> t

time ?at ?tw children is a time element.

val dialog : ?at:attr list -> ?tw:tw list -> t list -> t

dialog ?at ?tw children is a dialog element.

val data : ?at:attr list -> ?tw:tw list -> t list -> t

data ?at ?tw children is a data element.

val picture : ?at:attr list -> ?tw:tw list -> t list -> t

picture ?at ?tw children is a picture element.

val slot : ?at:attr list -> ?tw:tw list -> t list -> t

slot ?at ?tw children is a slot element.

val template : ?at:attr list -> ?tw:tw list -> t list -> t

template ?at ?tw children is a template element.

val form : ?at:attr list -> ?tw:tw list -> t list -> t

form ?at ?tw children is a form element.

val input : ?at:attr list -> ?tw:tw list -> unit -> t

input ?at ?tw () is an input element.

val textarea : ?at:attr list -> ?tw:tw list -> t list -> t

textarea ?at ?tw children is a textarea element.

val button : ?at:attr list -> ?tw:tw list -> t list -> t

button ?at ?tw children is a button element.

val label : ?at:attr list -> ?tw:tw list -> t list -> t

label ?at ?tw children is a label element.

val fieldset : ?at:attr list -> ?tw:tw list -> t list -> t

fieldset ?at ?tw children is a fieldset element.

val legend : ?at:attr list -> ?tw:tw list -> t list -> t

legend ?at ?tw children is a legend element.

val details : ?at:attr list -> ?tw:tw list -> t list -> t

details ?at ?tw children is a details element.

val summary : ?at:attr list -> ?tw:tw list -> t list -> t

summary ?at ?tw children is a summary element.

val pre : ?at:attr list -> ?tw:tw list -> t list -> t

pre ?at ?tw children is a pre element.

val code : ?at:attr list -> ?tw:tw list -> t list -> t

code ?at ?tw children is a code element.

val kbd : ?at:attr list -> ?tw:tw list -> t list -> t

kbd ?at ?tw children is a keyboard input element.

val em : ?at:attr list -> ?tw:tw list -> t list -> t

em ?at ?tw children is an emphasis element.

val strong : ?at:attr list -> ?tw:tw list -> t list -> t

strong ?at ?tw children is a strong element.

val small : ?at:attr list -> ?tw:tw list -> t list -> t

small ?at ?tw children is a small element.

val mark : ?at:attr list -> ?tw:tw list -> t list -> t

mark ?at ?tw children is a mark element.

val br : ?at:attr list -> ?tw:tw list -> unit -> t

br ?at ?tw () is a br (line break) element.

val hr : ?at:attr list -> ?tw:tw list -> unit -> t

hr ?at ?tw () is a hr (horizontal rule) element.

val table : ?at:attr list -> ?tw:tw list -> t list -> t

table ?at ?tw children is a table element.

val thead : ?at:attr list -> ?tw:tw list -> t list -> t

thead ?at ?tw children is a table head element.

val tbody : ?at:attr list -> ?tw:tw list -> t list -> t

tbody ?at ?tw children is a table body element.

val tfoot : ?at:attr list -> ?tw:tw list -> t list -> t

tfoot ?at ?tw children is a table footer element.

val tr : ?at:attr list -> ?tw:tw list -> t list -> t

tr ?at ?tw children is a table row element.

val th : ?at:attr list -> ?tw:tw list -> t list -> t

th ?at ?tw children is a table header cell element.

val td : ?at:attr list -> ?tw:tw list -> t list -> t

td ?at ?tw children is a table data cell element.

val ol : ?at:attr list -> ?tw:tw list -> t list -> t

ol ?at ?tw children is an ordered list element.

val dl : ?at:attr list -> ?tw:tw list -> t list -> t

dl ?at ?tw children is a description list element.

val dt : ?at:attr list -> ?tw:tw list -> t list -> t

dt ?at ?tw children is a description term element.

val dd : ?at:attr list -> ?tw:tw list -> t list -> t

dd ?at ?tw children is a description definition element.

val blockquote : ?at:attr list -> ?tw:tw list -> t list -> t

blockquote ?at ?tw children is a blockquote element.

val figure : ?at:attr list -> ?tw:tw list -> t list -> t

figure ?at ?tw children is a figure element.

val figcaption : ?at:attr list -> ?tw:tw list -> t list -> t

figcaption ?at ?tw children is a figure caption element.

val video : ?at:attr list -> ?tw:tw list -> t list -> t

video ?at ?tw children is a video element.

val audio : ?at:attr list -> ?tw:tw list -> t list -> t

audio ?at ?tw children is an audio element.

val source : ?at:attr list -> ?tw:tw list -> unit -> t

source ?at ?tw () is a source element.

val canvas : ?at:attr list -> ?tw:tw list -> t list -> t

canvas ?at ?tw children is a canvas element.

val iframe : ?at:attr list -> ?tw:tw list -> t list -> t

iframe ?at ?tw children is an iframe element.

SVG Support

SVG Elements

val svg : ?at:attr list -> ?tw:tw list -> t list -> t

svg ?at ?tw children creates an SVG root element.

val g : ?at:attr list -> ?tw:tw list -> t list -> t

g ?at ?tw children creates a group element.

val circle : ?at:attr list -> ?tw:tw list -> t list -> t

circle ?at ?tw children creates a circle element.

val rect : ?at:attr list -> ?tw:tw list -> t list -> t

rect ?at ?tw children creates a rectangle element.

val path : ?at:attr list -> ?tw:tw list -> t list -> t

path ?at ?tw children creates a path element.

val line : ?at:attr list -> ?tw:tw list -> t list -> t

line ?at ?tw children creates a line element.

val pp : t -> string

pp t pretty-prints HTML element t.