nice

NICE.js

Short for Neat Interface for Creating Elements, NICE is a lightweight JavaScript library for dynamically creating DOM elements in a simple and intuitive way. Inspired by hyperscript and hyperscript-helpers.

🚀 Features

• Minimalistic API – Create complex DOM structures with ease.
• Class and ID shorthand – Use #id and .class notation.
• Event Handling – Attach event listeners directly.
• Supports attributes and styles – Pass objects to configure elements.
• Global Tag Functions – Use div(), span(), button(), etc., directly.

📦 Installation

Simply include the script in your project:

<script src="https://cdn.jsdelivr.net/gh/GCSBOSS/nice@0.0.1/dist/nice.min.js"></script>

📖 Usage

Creating elements

const myDiv = div("Hello, world!");
document.body.appendChild(myDiv);

Adding classes and IDs

const buttonEl = button(".btn-primary", "Click Me");
document.body.appendChild(buttonEl);

Nesting elements

const card = div(".card", [
    h1(".title", "Welcome"),
    p("This is a simple example."),
    button(".btn", { onclick: () => alert("Clicked!") }, "OK")
]);
document.body.appendChild(card);

Adding styles

const styledDiv = div("#myDiv", { style: { color: "red", fontSize: "20px" } }, "Styled Text");
document.body.appendChild(styledDiv);

Event Listeners

const btn = button("Click Me", { onclick: () => alert("Hello!") });
document.body.appendChild(btn);

🎯 Why Use This Library?

• No dependencies
• Tiny footprint
• Improves readability and reduces boilerplate code
• Flexible and powerful

🛠 Contributing

Feel free to open issues and submit pull requests! Your contributions are welcome.

📄 License

This project is licensed under the MIT License.

This site is open source. Improve this page.