users.js

Documentation

Learn the fundamentals and advanced patterns of users.js with practical examples, guides, and API references.

Start Learning View Code Examples 
usersjs(() => {
  input.text('Hello', { class: 'p-3 rounded bg-white' }),
  button('Submit', { 
    onClick: () => alert('Sent!') 
  })
});

Table of Contents

Getting Started

Installation, setup, and first steps with users.js
Core Concepts

Fundamental patterns and architecture principles
API Reference

Detailed guide to every function and method
Advanced Tips

Performance optimization and best practices

Getting Started

Start building apps with users.js in just a few minutes using our simple setup instructions.

1

Install

npx degit usersjs/usersjs-boilerplate my-app

Create a new project folder from our ready-made template.

2

Start

cd my-app
npm start

Launch the development server and begin building your app.

Core Concepts

users.js introduces a modern approach to JavaScript development with simple yet powerful constructs.

Reactivity

State changes automatically update the UI. users.js uses a declarative model to simplify data flow. 

let count = 0;

usersjs(() => {
  div(() => {
    text(`Count: ${count}`);
    button('Increment', {
      onClick: () => count++
    });
  });
});

Components

Build encapsulated components with their own logic and styles using users.js's modular system. 

const MyButton = (props) => {
  return button(props.text, {
    onClick: props.onClick
  });
};

API Reference

Comprehensive documentation of all methods and utilities available in users.js

usersjs()

Main entry point for creating user interfaces.

function usersjs(callback)

input()

Create input fields with validation and binding.

function input({ type: string, placeholder?: string })

button()

Create buttons with event handlers and styling.

function button(text, { onClick?, class? })

Advanced Tips

Level up your skills with expert strategies for building performant applications.

Performance Optimization

  • Use memo() to avoid unnecessary re-renders
  • Optimize with async() for data fetching
  • Use batch() for grouped updates

Best Practices

  • Follow component-based architecture for scalability
  • Use use() for dependency injection
  • Keep your codebase clean with organize() imports