Module JSX
JSX module
The JSX module provides functions to render HTML elements in a declarative style.
let html: string = JSX.render(
<div>
<h1> {JSX.string("Hello, World!")} </h1>
</div>
);
let html : string =
JSX.render
<div>
<h1>(JSX.string "Hello, World!")</h1>
</div>
type element
An abstract type that represents a JSX.element
val pp : ?width:int -> element -> string
Pretty-print a JSX.element as a formatted HTML string.
The width parameter (default 80) controls the target page width: elements that fit within the width stay on one line, while longer content is broken across lines with 2-space indentation.
pp is a formatter for reading and debugging, not for serving pages: use render for output you send to clients. The output is the same as render except for whitespace between elements and after newlines in string and text content, which pp indents.
The content of pre, textarea, script and style is printed exactly as render prints it. Inline elements (a, b, span, code, img, ...) stay on one line, and pp adds no breaks or spaces around them or around text, so <p>Hello <b>world</b>!</p> keeps the same visible text at any width.
Raises Invalid_argument when an attribute name is invalid, like render.
let html: string = JSX.pp(
<div>
<h1> {JSX.string("Hello, World!")} </h1>
</div>
);
Printf.printf("%s", html);
/* <div>
<h1>Hello, World!</h1>
</div> */
let html: string = JSX.pp (
<div>
<h1>(JSX.string "Hello, World!")</h1>
</div>
)
Printf.printf "%s" html
(* <div>
<h1>Hello, World!</h1>
</div> *)
val render : element -> string
Render a JSX.element as a string.
This function takes a JSX.element and converts it into its corresponding HTML string representation.
Raises Invalid_argument when an attribute name is empty or contains whitespace, a control character, a double quote, a single quote, or one of >, / and =. render_to_channel, render_streaming, write and pp raise the same way. Attribute names are not escaped: pass names from trusted code.
let html: string = JSX.render(
<div>
<h1> {JSX.string("Hello, World!")} </h1>
</div>
);
Printf.printf("%s", html); /* <div><h1>Hello, World!</h1></div> */
let html : string =
JSX.render
<div>
<h1>(JSX.string "Hello, World!")</h1>
</div>
in
print_string html (* <div><h1>Hello, World!</h1></div> *)
val render_to_channel : Stdlib.out_channel -> element -> unit
Render a JSX.element directly to an output channel.
This function writes the HTML representation directly to the channel, avoiding the intermediate string allocation that render requires.
JSX.render_to_channel(stdout,
<div>
<h1> {JSX.string("Hello, World!")} </h1>
</div>
);
JSX.render_to_channel stdout
<div>
<h1>(JSX.string "Hello, World!")</h1>
</div>
val render_streaming : ?chunk_size:int -> (string -> unit) -> element -> unit
Render a JSX.element incrementally, invoking the callback with HTML chunks as soon as they are available.
Chunks are emitted whenever the internal buffer reaches chunk_size bytes (default: 4096), so large documents start streaming before rendering has finished instead of being buffered whole. Useful for frameworks that support streaming responses.
Raises Invalid_argument, before it writes anything, when chunk_size is zero or negative.
JSX.render_streaming(html => Dream.write(stream, html),
<div>
<h1> {JSX.string("Hello, World!")} </h1>
</div>
);
JSX.render_streaming
(fun html -> Dream.write stream html)
<div>
<h1>(JSX.string "Hello, World!")</h1>
</div>
val float : float -> element
Helper to render a float.
This function helps in rendering a float value as a JSX element.
The value is printed with Float.to_string: 5.0 renders as 5. and the output keeps 12 significant digits. Use JSX.format when you need exact control, for example JSX.format "%g" x or JSX.format "%.17g" x.
let element : JSX.element = JSX.float(3.14);
let element : JSX.element = JSX.float 3.14
val fragment : children:element -> unit -> element
Return children as a fragment component.
Component children are already a single element: the JSX ppx wraps multiple siblings with list. This function primarily enables explicit fragment syntax in mlx.
let element : JSX.element =
<JSX.fragment>
<span>"First"</span>
<span>"Second"</span>
</JSX.fragment>
val int : int -> element
Helper to render an integer.
This function helps in rendering an integer value as a JSX element.
let element : JSX.element = JSX.int(42);
let element : JSX.element = JSX.int 42
val list : element list -> element
Helper to render a list of elements.
This function takes a list of JSX elements and returns a single JSX element that contains all of them. This is useful for rendering dynamic lists of elements.
let element : JSX.element =
JSX.list([ JSX.string("Item 1"), JSX.string("Item 2"), JSX.string("Item 3") ]);
let element : JSX.element =
JSX.list
[ JSX.string "Item 1"; JSX.string "Item 2"; JSX.string "Item 3" ]
val array : element array -> element
Helper to render an array of elements.
This function takes an array of JSX elements and returns a single JSX element that contains all of them. This is useful for rendering dynamic arrays of elements.
let element : JSX.element =
JSX.array
[| JSX.string("Item 1"), JSX.string("Item 2"), JSX.string("Item 3") |]
let element : JSX.element =
JSX.array
[| JSX.string "Item 1"; JSX.string "Item 2"; JSX.string "Item 3" |]
type attribute =
string
* [ `Bool of bool | `Int of int | `Float of float | `String of string ]
Represents an attribute of an HTML element. It consists of a name and a value which can be of several types.
This is used by the ppx to create the attributes of the HTML element, and rarely used directly.
val node : string -> attribute list -> element list -> element
The function to create an HTML DOM Node.
It takes a tag name, a list of attributes, and a list of child elements to create an HTML node.
let link : JSX.element =
JSX.node("a",
[ ("href", `String("https://ocaml.org") ],
[ JSX.string("OCaml") ]);
let link : JSX.element =
JSX.node "a"
[ ("href", `String "https://ocaml.org") ]
[ JSX.string "OCaml" ]
val null : element
Helper to represent nullability in JSX.
This is useful to represent and pattern match against null or empty elements.
let element : JSX.element = JSX.null;
let element : JSX.element = JSX.null
val string : string -> element
Helper to represent an element as a string.
This function allows you to directly render a string as a JSX element.
let element : JSX.element = JSX.string("Hello, World!");
let element : JSX.element = JSX.string "Hello, World!"
val text : string -> element
A deprecated function to render a text string.
This function is deprecated in favor of JSX.string.
let element : JSX.element = JSX.string("Hello, World!");
let element : JSX.element = JSX.string "Hello, World!"
deprecated Use JSX.string instead
val format : ('a, unit, string, element) Stdlib.format4 -> 'a
Helper to render formatted text as a JSX element.
This formats a string using Printf-style directives and then renders the result as escaped text, just like JSX.string.
let element : JSX.element = JSX.format("Hello %s #%i", name, count);
let element : JSX.element = JSX.format "Hello %s #%i" name count
val unsafe : string -> element
Helper to bypass HTML encoding and treat output as unsafe. This can lead to HTML escaping problems, XSS injections, and other security concerns. Use with caution.
A common use case for bypassing the HTML encoding is to render a script or style tag.
let content: string = "console.log('Hello')";
let script: JSX.element = <script> {JSX.unsafe(content)} </script>;
let content : string = "console.log('Hello')"
let script : JSX.element = <script>(JSX.unsafe content)</script>
val escape : Stdlib.Buffer.t -> string -> unit
Escape a string and write it directly to a buffer.
This escapes ampersand, less-than, greater-than, apostrophe, and double-quote characters.
This is an advanced function used mostly by the PPX for optimized rendering. Most users should prefer JSX.string.
let buf = Buffer.create(256);
JSX.escape(buf, "<script>");
Buffer.contents(buf); /* "<script>" */
let buf = Buffer.create 256 in
JSX.escape buf "<script>";
Buffer.contents buf (* "<script>" *)
val write_int : Stdlib.Buffer.t -> int -> unit
Write an integer's decimal digits directly to a buffer.
This is an advanced function used mostly by the PPX for optimized rendering: it writes digits straight into the buffer instead of allocating an intermediate string.
let buf = Buffer.create(256);
JSX.write_int(buf, 42);
Buffer.contents(buf); /* "42" */
let buf = Buffer.create 256 in
JSX.write_int buf 42;
Buffer.contents buf (* "42" *)
val write : Stdlib.Buffer.t -> element -> unit
Write an element directly to a buffer.
This is an advanced function used mostly by the PPX for optimized rendering when building HTML strings incrementally.
let buf = Buffer.create(256);
JSX.write(buf, (JSX.string "Hello"));
Buffer.contents(buf); /* "Hello" */
let buf = Buffer.create 256 in
JSX.write buf (JSX.string "Hello");
Buffer.contents buf (* "Hello" *)
val writer : int -> (Stdlib.Buffer.t -> unit) -> element
Create an element that writes directly into a caller-supplied buffer.
This is an advanced function used mostly by the PPX for optimized rendering: it lets a child element write into whatever buffer its parent is already using, instead of building its own string that the parent then has to copy. size is the estimated number of bytes the write will produce; it is used to preallocate a buffer when the element is rendered on its own (e.g. with render).
let element: JSX.element =
JSX.writer(16, buf => Buffer.add_string(buf, "Hello"));
let element : JSX.element =
JSX.writer 16 (fun buf -> Buffer.add_string buf "Hello")