package html_of_jsx

  1. Overview
  2. Docs

Module JSXSource

JSX module

The JSX module provides a set of functions and render HTML elements in a declarative manner

  let html: string = JSX.render(
    <div>
      <h1> {JSX.string("Hello, World!")} </h1>
    </div>
  );
Sourcetype element

An abstract type that represents a JSX.element

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

  let html: string = JSX.render(
    <div>
      <h1> {JSX.string("Hello, World!")} </h1>
    </div>
  );

  Printf.printf "%s" html; /* <div><h1>Hello, World!</h1></div> */
Sourceval render_to_channel : 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>
  );
Sourceval render_streaming : (string -> unit) -> element -> unit

Render a JSX.element using a streaming callback function.

This function renders the element and passes the result to the callback function, useful for frameworks that support streaming responses.

  JSX.render_streaming (fun html -> Dream.write stream html) (
    <div>
      <h1> {JSX.string("Hello, World!")} </h1>
    </div>
  );
Sourceval float : float -> element

Helper to render a float.

This function helps in rendering a float value as a JSX element.

  let element : JSX.element = JSX.float 3.14
Sourceval fragment : element list -> element
  • deprecated Use JSX.list instead
Sourceval 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
Sourceval 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" ]
Sourceval array : element array -> element

Helper to render an array of elements.

This function takes a array of JSX elements and returns a single JSX element that contains all of them. This is useful for rendering dynamic array of elements.

  let element : JSX.element =
    JSX.array
      [| JSX.string "Item 1"; JSX.string "Item 2"; JSX.string "Item 3" |]
Sourcetype 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.

Sourceval 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" ] )
Sourceval 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
Sourceval 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!"
Sourceval 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.text "Hello, World!"
  • deprecated Use JSX.string instead
Sourceval 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 o style tag.

  let content: string = "Raw HTML" in
  let script: JSX.element = <script> content </script>
Sourceval escape : 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 used internally by the PPX for optimized rendering.

  let buf = Buffer.create 256 in
  JSX.escape buf "<script>";
  Buffer.contents buf (* "&lt;script&gt;" *)
Sourceval write : Buffer.t -> element -> unit

Write an element directly to a buffer. This is used internally by the ppx for optimized rendering when building HTML strings incrementally.

  let buf = Buffer.create 256 in
  JSX.write buf (JSX.string "Hello");
  Buffer.contents buf (* "Hello" *)