XynHTML

XynHTML is a lightweight, reactive library for building web applications using a declarative syntax. With inspiration taken from React, Vue, and jQuery; but with a focus on simplicity and performance. It is designed to be easy to use, with a minimal API and a small footprint. Additionally, designed to be easy to integrate with existing projects, and to work well with other libraries.

XynHTML Features

The examples below demonstrate the core features of XynHTML, notice how the examples are written in a declarative style, and how the library handles updates to the DOM automatically.

Importing XynHTML

// Import the XynHTML library functions
import { 
    signal, 
    effect, 
    derived, 
    tag, 
    text, 
    XynSwitch 
} from "./xyn_html.js"

// Alternative: Import the main class and use static methods
import XynHTML from "./xyn_html.js";
const mySignal = XynHTML.signal("Hello");

// Available exports:
// - signal: Create reactive signals
// - effect: Create side effects that react to signal changes
// - derived: Create computed signals
// - tag: Create HTML elements
// - text: Create reactive text nodes
// - XynSwitch: Create conditional rendering components

Output Function

The output function is used to display the results of the examples. It is a simple function that takes a message and appends it to the output container. There are also helper functions for appending elements and tracking signal updates.

This function is what is being passed to the examples as the output parameter.