Module Tw_htmlSource

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.

Sourcetype t

The abstract type for an HTML node.

Sourcetype tw = Tw.t

Type alias for Tailwind styles for convenience.

Sourcetype attr

The abstract type for an HTML attribute.

Sourcemodule At : sig ... end

Functions for creating HTML attributes.

Text helpers

Sourceval txt : string -> t

txt s creates a text node from string s.

Sourceval txtf : string list -> t

txtf strs concatenates strs and creates a text node.

Sourceval raw : string -> t

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

Sourceval rawf : string list -> t

rawf strs concatenates strs and creates a raw HTML node.

Sourceval empty : t

empty is the empty element, equivalent to no content.

Sourcemodule Aria : sig ... end

Conversion functions

Sourceval 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.

Sourceval to_tw : t -> tw list

to_tw t extracts all styling classes from an HTML tree.

Sourceval 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

Sourcetype tw_css =
  1. | Inline
    (*

    Embed the CSS directly in the document inside a <style> tag.

    *)

How a page delivers its generated CSS.

Sourcetype 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.

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

page ?lang ?meta ?title ?charset ?tw_css ?forms 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 controls how the CSS is delivered (see tw_css). Defaults to Link "tw.css", which references the CSS through a cache-busted <link> tag in the HTML head. Use Inline to embed the CSS in the document and avoid an extra HTTP request.
  • forms explicitly enables the \@tailwindcss/forms plugin base layer, mirroring Tailwind's \@plugin opt-in. When omitted, the forms base is auto-detected from forms utility usage (like prose styling).
  • head is additional content for the head section
  • body is the body content

Use html to get the HTML string and css to get the CSS filename and stylesheet.

Sourceval html : page -> string

html page extracts the HTML string from a page result.

Sourceval css : page -> string option * Tw.Css.t

css page extracts the CSS filename and stylesheet from a page result. The filename is Some file when the page links to an external stylesheet (Link file) and None when the CSS is inlined (Inline).

Sourcemodule Livereload : sig ... end

HTML Elements

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

div ?at ?tw children is a div element.

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

span ?at ?tw children is a span element.

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

p ?at ?tw children is a paragraph element.

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

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

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

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

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

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

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

nav ?at ?tw children is a navigation element.

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

section ?at ?tw children is a section element.

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

article ?at ?tw children is an article element.

Sourceval 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

script ?at ?tw children is a script element.

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

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

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

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

title ?at ?tw children is a title element.

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

head ?at ?tw children is a head element.

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

body ?at ?tw children is a body element.

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

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

Sourceval void : t

void is an empty void element.

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

option ?at ?tw children is an option element.

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

select ?at ?tw children is a select element.

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

main ?at ?tw children is a main element.

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

aside ?at ?tw children is an aside element.

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

time ?at ?tw children is a time element.

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

dialog ?at ?tw children is a dialog element.

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

data ?at ?tw children is a data element.

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

picture ?at ?tw children is a picture element.

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

slot ?at ?tw children is a slot element.

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

template ?at ?tw children is a template element.

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

form ?at ?tw children is a form element.

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

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

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

textarea ?at ?tw children is a textarea element.

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

button ?at ?tw children is a button element.

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

label ?at ?tw children is a label element.

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

fieldset ?at ?tw children is a fieldset element.

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

legend ?at ?tw children is a legend element.

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

details ?at ?tw children is a details element.

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

summary ?at ?tw children is a summary element.

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

pre ?at ?tw children is a pre element.

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

code ?at ?tw children is a code element.

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

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

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

em ?at ?tw children is an emphasis element.

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

strong ?at ?tw children is a strong element.

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

small ?at ?tw children is a small element.

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

mark ?at ?tw children is a mark element.

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

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

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

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

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

table ?at ?tw children is a table element.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

blockquote ?at ?tw children is a blockquote element.

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

figure ?at ?tw children is a figure element.

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

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

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

video ?at ?tw children is a video element.

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

audio ?at ?tw children is an audio element.

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

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

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

canvas ?at ?tw children is a canvas element.

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

iframe ?at ?tw children is an iframe element.

SVG Support

SVG Elements

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

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

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

g ?at ?tw children creates a group element.

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

circle ?at ?tw children creates a circle element.

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

rect ?at ?tw children creates a rectangle element.

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

path ?at ?tw children creates a path element.

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

line ?at ?tw children creates a line element.

Sourceval pp : t -> string

pp t pretty-prints HTML element t.