https://github.com/davesnx/html_of_jsx

Render HTML with JSX
https://github.com/davesnx/html_of_jsx

Last synced: 7 days ago
JSON representation

Render HTML with JSX

• Host: GitHub
• URL: https://github.com/davesnx/html_of_jsx
• Owner: davesnx
• License: mit
• Created: 2023-11-04T23:23:55.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-04-08T01:45:47.000Z (3 months ago)
• Last Synced: 2024-04-14T09:31:50.766Z (3 months ago)
• Language: OCaml
• Homepage:
• Size: 743 KB
• Stars: 25
• Watchers: 2
• Forks: 1
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGES.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md

Lists

• awesome-reasonml - html_of_jsx - Render HTML with JSX (Reason / Libraries)

README

        
![Html_of_jsx logo](./docs/logo-white.png#gh-dark-mode-only)

![Html_of_jsx logo](./docs/logo-black.png#gh-light-mode-only)

### Render HTML with JSX

**html_of_jsx** is a JSX transformation to write HTML declaratively in [OCaml](https://ocaml.org), [Reason](https://reasonml.github.io) and [mlx](https://github.com/ocaml-mlx/mlx).

## Features

- Brings the component model to HTML

- Supports most of features from [JSX](https://reasonml.github.io/docs/en/jsx) (uppercase components, fragments, optional attributes, punning)

- but with a few improvements (lowercase components, no need to add annotations)

- No React idioms (no `className`, no `htmlFor`, no `onChange`, etc...)

- Integrates well with [htmx](https://htmx.org)

- Type-safe, validates attributes and their types ([it can be better thought](https://github.com/davesnx/html_of_jsx/issues/2))

- Works with [OCaml](https://ocaml.org), [Reason](https://reasonml.github.io) and [mlx](https://github.com/ocaml-mlx/mlx)

- Minimal

  - `JSX.render` to render a JSX element to a HTML string

  - `JSX.*` to construct DOM Elements and DOM nodes (`JSX.string`, `JSX.int`, `JSX.null`, `JSX.list`)

- Created to work on the server-side, but can be used on the client-side as well (with [Melange](https://melange.re) or [jsoo](https://ocsigen.org/js_of_ocaml/))

## Installation

```sh

opam install html_of_jsx

```

```diff

+ (library html_of_jsx)

+ (preprocess (pps html_of_jsx.ppx))

```

## Usage

```reason

let element: JSX.element = 

   {"Click me!"} 



let html: string = JSX.render(element);

```

Check the [demo/server.re](./demo/server.re) file to see a full example.

## [Documentation](https://davesnx.github.io/html_of_jsx/html_of_jsx/index.html)

Check the [Documentation](https://davesnx.github.io/html_of_jsx/html_of_jsx/index.html) to know more about the API and [features](https://davesnx.github.io/html_of_jsx/html_of_jsx/features.html).

## Credits

This library was extracted from [server-reason-react](https://github.com/ml-in-barcelona/server-reason-react) and later simplified to work only with HTML5.