VanRS

VanRS provides bindings for VanJS, which is lightest, zero-dependency reactive UI framework in the JavaScript ecosystem. By taking the advantage of the strongly-typed system of the ReScript programming language.

Supported Versions:

• Seamless integration of ReScript with VanJS.
• Type-safe bindings for VanJS functionality.
• Reactive UI components with minimal overhead.
• Easy-to-use API for creating dynamic web applications.

First, create a new ReScript application using one of the following commands:

npm create rescript-app@latest

📝 Note: For more information on setting up a ReScript project, refer to the official ReScript documentation.

Add the required dependencies to your project:

npm i vanjs-core vanrs

In your rescript.json file, add the following dependency:

{
  "bs-dependencies": ["vanrs"]
}

Here's a simple example of how to use VanRS to create a reactive UI component:

1. Create a file named Main.res in your src folder.
2. Add the following code to Main.res:

@val @scope("document") @return(nullable)
external getElementById: string => option<Dom.element> = "getElementById"

let root = switch getElementById("root") {
| Some(el) => el
| None => Exn.raiseError("Root element not found")
}

let hello: unit => Dom.element = () => {
  Van.Tag.make("div")
  ->Van.Tags.addChild(Text("Hello, World!"))
  ->Van.Tags.build
}

Van.add(root, [Dom(hello())])->ignore

To build and run your ReScript application, see the Compile and Run section.

• Check out the VanJS documentation for more information on how to use VanJS effectively.
• Explore the ReScript documentation for a deeper understanding of ReScript.

Contributions are welcome! Please feel free to submit a Pull Request.

VanJS

ReScript

Released under MIT by @MetalbolicX.