Getting Started

Install RenderJS and render your first chainable DOM element or RJS template.

Prerequisites

• A modern browser with ES2022 support (IntersectionObserver, navigator.clipboard, fetch)
• Node.js (build/development only; no Node runtime dependency at execution time)
• No other runtime dependencies

Installation

Install via npm

npm i @pardnchiu/renderjs

Include via CDN

<!-- Version 2.0.0 and above -->
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/renderjs@[VERSION]/dist/RenderJS.js"></script>

<!-- Version 1.5.2 and below (formerly PDRenderKit) -->
<script src="https://cdn.jsdelivr.net/npm/pdrenderkit@[VERSION]/dist/PDRenderKit.js"></script>

First Render: Chainable DOM Construction

"tag.class#id"._(attrs, children) builds a real DOM element from a tag-selector string, handling SVG namespace and input/textarea type parsing automatically.

document.body._child(
    "section#test"._([
        "button"._({
            style: {
                width: "10rem",
                height: "2rem",
                backgroundColor: "steelblue",
                color: "#fff"
            }
        }, [
            "span"._("test"),
            " button"
        ])._click(function () {
            alert("test");
        }),
        "img"._({ lazyload: "https://xxxxxx" }),
        "input@email type"._()
    ])
);

// Enable SVG inlining and image lazyload listeners
_Listener({
    svg: true,
    lazyload: true
});

Element Querying

"test".$;          // document.getElementById("test")
"div.test".$;       // document.querySelector("div.test")
"div.test".$all;    // [...document.querySelectorAll("div.test")]

First RJS Template

RJS renders a template once (no vDOM diffing) and lets you trigger the next render manually with renew(). See Core Concepts for how the directive pipeline works.

const app = "#app".RJS({
    data: {
        // Define data
    },
    event: {
        // Define event methods
    },
    when: {
        before_render: function () {
            // Runs before rendering; return false to cancel
        },
        rendered: function () {
            // Runs after rendering completes
        }
    }
});

// Update: only include the items to update; unmentioned items retain their initial values
app.renew({
    data: { /* ... */ },
    event: { /* ... */ },
    when: { /* ... */ }
});

Networking

"url".$req(body) is a fetch wrapper with JSON/FormData support and automatic response parsing — see API Reference for the full URL/String extension list.

const result = await "/api/x".$req({
    method: "POST",
    json: { key: "value" },
    header: { "X-Token": "..." }
});

Next Steps

• Core Concepts — how the RJS directive parser processes :if/:for/:model/{{ }}
• API Reference — every prototype method RenderJS adds
• Listener System — lazyload and SVG inlining internals