DOCSEARCHbyAlgolia
Submit Docs

Gen-Z.js Documentation

website·Indexed 30 days ago

https://genz-js.vercel.app

A JavaScript library that enables interactive UI and state management through HTML attributes. It features a suite of 'z' attributes for visibility (hidez, showz, togglez), state management (letz, setz, getz), form controls (submitz, clearz), and network requests (fetchz), allowing developers to build dynamic functionality with minimal manual JavaScript.

Tokens
8.7K
Snippets
58
Records
73
Agent score
70%

What's inside Gen-Z.js

  1. Overview of Gen-Z.js

    Gen-Z.js is a lightweight JavaScript library that allows developers to build interactive web applications using HTML attributes instead of writing traditional JavaScript. It follows an 'HTML-First' philosophy, removing the need for complex build processes, heavy frameworks, or deep JS expertise. Interactivity is added via intuitive attributes that end with the letter 'z'.

  2. Target elements using CSS selectors in Gen-Z.js

    Gen-Z.js uses standard CSS selector syntax to target elements across its functional attributes. This allows developers to use familiar selectors (ID, Class, Tag, and Attribute) to define which elements should be affected by a Gen-Z.js action.

  3. Access nested object properties with getz

    The getz attribute supports dot notation to access properties of objects or deeply nested structures stored in the global state.
    <!-- Define an object variable using letz -->
<div letz="user:Object" hidez>
  {"name": "Alex", "job": "Developer", "age": 28}
</div>

<!-- Display specific object properties -->
<p>Name: <span getz="user.name"></span></p>
<p>Job: <span getz="user.job"></span></p>

<!-- Deeply nested access -->
<div letz="config:Object" hidez>
  { "app": { "settings": { "language": "en" } } }
</div>
<p>Language: <span getz="config.app.settings.language"></span></p>

  4. Create a new GenZ.js project using the CLI

    The recommended way to start a new GenZ.js project is via the official scaffolding tool. This sets up a complete development environment including a Vite dev server with hot module replacement, a starter template, and the latest version of GenZ.js.

    Requirements:

    • Node.js 14.0.0 or higher
    • npm 6.0.0 or higher (or yarn 1.22.0+)
    # Create the project
npx create-genz-app my-app

# Navigate to project directory
cd my-app

# Start development server
npm run dev

  5. Apply CSS classes on hover using the hoverz attribute

    The hoverz attribute enables interactive visual effects by automatically adding a specified CSS class to an element when the mouse enters and removing it when the mouse leaves. To apply multiple classes, separate them with spaces within the attribute value.
    <!-- Single class -->
<div hoverz="hover-effect">Hover over me!</div>

<!-- Multiple classes -->
<div hoverz="highlighted active">Hover for multiple effects</div>

  6. Toggle element visibility using the togglez attribute

    The togglez attribute allows you to show or hide elements when the element containing the attribute is clicked. It works by toggling the CSS display property: it applies display: none to hide visible elements and restores the original display property to show hidden elements.
    <div id="myDiv">Toggle me!</div>
<button togglez="#myDiv">Toggle</button>

  7. Display state variables using the getz attribute

    The getz attribute is used to display the value of a state variable in an HTML element. It automatically updates the element's textContent whenever the associated variable changes, enabling real-time data display without manual JavaScript. If a variable does not exist, getz displays an empty string; if a nested property is missing, it displays undefined.
    <element getz="variableName"></element>

  8. Target multiple elements with comma-separated selectors

    To perform an action on multiple elements simultaneously, provide a comma-separated list of CSS selectors within the Gen-Z.js attribute.
    <div id="panel1">Panel 1</div>
<div id="panel2">Panel 2</div>
<button hidez="#panel1, #panel2">Hide Both Panels</button>

  9. Submit a form using the submitz attribute

    The submitz attribute allows you to trigger a form submission when an element is clicked. This provides an alternative to traditional <button type="submit"> elements and allows the trigger to be placed anywhere in the DOM, even outside the target form.

    How it works:

    • Trigger: Activates on a click event.
    • Submission: Triggers the standard submit event on the target form.
    • Validation: Browser-native HTML5 validation is executed before the form is submitted.
    • Compatibility: Works with all form methods (GET, POST, etc.) and attributes (action, enctype).
    <form id="myForm">
  <input name="username" type="text" required />
  <input name="email" type="email" required />
  <!-- This button is outside the form's default submit behavior -->
  <button type="button" submitz="#myForm">Submit</button>
</form>

  10. Update state variables using the setz attribute

    The setz attribute updates a state variable when the element it is attached to is clicked. It follows the syntax setz="variableName:value" or setz="variableName:expression". When a variable is updated via setz, all elements displaying that variable via getz are automatically refreshed in the UI.
    <!-- Static value assignment -->
<button setz="username:JohnDoe">Set to JohnDoe</button>

<!-- Expression evaluation -->
<button setz="count:count + 1">Increment</button>

  11. Best practices for using setz expressions

    To ensure maintainability and stability when using setz:

    • Do: Use descriptive variable names, keep expressions simple, and combine with getz for immediate visual feedback.
    • Don't: Write overly complex expressions (break them into multiple steps), use expressions that might throw errors (e.g., accessing properties of null/undefined), or attempt to modify the DOM directly within the expression.

  12. Install GenZ.js via CDN for quick setup

    Use a CDN for quick prototypes, learning, or adding GenZ.js to existing projects without a build step. Add the script tag to your HTML file before the closing </body> tag. jsDelivr is the recommended provider.
    <!-- Recommended: jsDelivr -->
<script src="https://cdn.jsdelivr.net/gh/Nebulaz7/gen-z.js@1.1.0/dist/gen-z.min.js"></script>

<!-- Alternative: unpkg -->
<script src="https://unpkg.com/gen-z.js@1.1.0/dist/gen-z.min.js"></script>

<!-- Alternative: GitHub Raw (Development only) -->
<script src="https://raw.githubusercontent.com/Nebulaz7/gen-z.js/main/dist/gen-z.min.js"></script>