Skip to main content

Get Started

Learn how to use xnew in less than 10 minutes.

What is xnew?​

xnew is a lightweight JavaScript library for building interactive web applications. It provides a simple way to create components, manage state, and handle events using a functional approach.

Setup​

Choose one of the following methods to include xnew in your project:

Include the following script in your HTML file:

<script src="https://unpkg.com/xnew@5.0.x/dist/xnew.js"></script>

Via CDN (ESM)​

Use the ES module version with an import map:

<script type="importmap">
{
  "imports": {
    "xnew": "https://unpkg.com/xnew@5.0.x/dist/xnew.mjs"
  }
}
</script>

<script type="module">
import xnew from 'xnew';

// Your code here
</script>

Via npm​

Install xnew using npm:

npm install xnew@5.0.x

Then import it in your JavaScript file:

import xnew from 'xnew';

Tutorial​

Units and Components​

  • unit: When you call xnew(), it creates a "unit" - a building block of your application
  • Component: A function that defines what a unit does and how it behaves
  • self: The first parameter passed to your component function, representing the unit itself

Basic Syntax​

There are two main ways to use xnew:

1. Creating Components​

const unit = xnew(Component, props);

function Component(self, props) {
  // Define behavior here
  // self = the unit itself
  // props = data passed to the component
}

2. Creating HTML Elements​

const unit = xnew('<div class="my-class">', 'inner text');
unit.element; // Access the created DOM element

Example 1: Your First Component​

Let's start with a simple example. This creates a basic component that displays some text:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/xnew@5.0.x/dist/xnew.js"></script>
</head>
<body>
  <script>
    // Create your first component
    xnew(MyFirstComponent);

    function MyFirstComponent(self) {
      // Create a simple paragraph element
      xnew('<p>', 'Hello, xnew!');
    }
  </script>
</body>
</html>

This will generate:

<body>
  <p>Hello, xnew!</p>
</body>

Example 2: Creating Multiple Elements​

Now let's create multiple elements and organize them using xnew.nest:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/xnew@5.0.x/dist/xnew.js"></script>
</head>
<body>
  <script>
    // Create main component
    xnew(MainComponent);

    function MainComponent(self) {
      // Create a paragraph element
      xnew('<p>', 'Create new HTML elements.');
    
      // Create a child component
      xnew(ColorBoxes);
    }

    function ColorBoxes(self) {
      // Create a container and nest child elements inside it
      xnew.nest('<div style="display: flex;">');

      // The following elements will be nested inside the container
      xnew('<div style="width: 160px; height: 36px; background: #d66;">', '1');
      xnew('<div style="width: 160px; height: 36px; background: #6d6;">', '2');
      xnew('<div style="width: 160px; height: 36px; background: #66d;">', '3');
    }
  </script>
</body>
</html>

This generates:

<body>
  <p>Create new HTML elements.</p>
  <div style="display: flex;">
    <div style="width: 160px; height: 36px; background: #d66;">1</div>
    <div style="width: 160px; height: 36px; background: #6d6;">2</div>
    <div style="width: 160px; height: 36px; background: #66d;">3</div>
  </div>
</body>

Key concepts:

  • xnew.nest() creates a container element and nests subsequent elements inside it
  • Components can call other components to organize your code
  • Each component is a reusable function

Example 3: Adding Interactivity​

Now let's add events and animations! This example creates an interactive rotating box:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/xnew@5.0.x/dist/xnew.js"></script>
</head>
<body>
  <script>
    xnew(RotatingBox);

    function RotatingBox(self) {
      // Create a centered blue box and nest content inside it
      xnew.nest('<div style="position: absolute; width: 200px; height: 200px; inset: 0; margin: auto; background: #08F; cursor: pointer;">');
      
      // Add text inside the box
      const text = xnew('<span style="color: white; font-size: 24px; display: flex; justify-content: center; align-items: center; height: 100%;">');

      // Handle click events - toggle start/stop
      self.on('click', (event) => {
        self.state === 'started' ? self.stop() : self.start();
      });

      // When animation starts
      self.on('start', () => {
        text.element.textContent = 'Stop';
      });

      // Update animation frame
      self.on('update', (count) => {
        self.element.style.transform = `rotate(${count}deg)`;
      });
      
      // When animation stops
      self.on('stop', () => {
        text.element.textContent = 'Start';
      });
    }
  </script>
</body>
</html>

Key concepts:

  • self.on() adds event listeners to your component
  • self.start() and self.stop() control animations
  • self.state tracks the current state ('started' or 'stopped')
  • The 'update' event fires continuously during animation, providing a frame count

Next Steps​

Now that you understand the basics:

  1. Explore the examples - Check out more complex examples in the sidebar
  2. Read the manual - Learn about advanced features like timers, contexts, and addons
  3. Try the addons - Integrate with popular libraries like PixiJS and Three.js

Happy coding with xnew! 🚀