Deleight

Why Choose Deleight?

Ultra Lightweight

Deleight is optimized for speed and efficiency, with a small footprint.

Native-Like Performance

With efficient updates, Deleight delivers smooth interactions.

Simple & Flexible

No complex dependencies. Just pure JavaScript, optimized.

Easy Integrations

Deleight easily integrates into your existing codebase, allowing you to build or migrate without hassle.

Scalable Architecture

Whether you're building a small app or a large-scale system, Deleight scales seamlessly without introducing unnecessary complexity.

Native Event Handling

With Deleight's native event handling system, you can easily manage user interactions without relying on external libraries.

Modular and Expandable

Each module in Deleight is completely independent, allowing you to only use what you need, and extend it when required.

Zero Dependencies

Deleight is dependency-free, ensuring fewer bugs, better performance, and fewer maintenance headaches.

Cross-browser Support

Deleight works flawlessly across modern browsers, ensuring your application runs smoothly for all users.

Reduced Boilerplate Code

Deleight’s concise syntax reduces repetitive code, making it quicker and easier to develop and maintain.

Flexible Data Binding

Deleight supports advanced data binding mechanisms that allow for easier state management, even with complex applications.

Full Control Over Rendering

With Deleight, you get full control over how and when the UI gets updated, giving you more flexibility in optimization.

Getting Started

Step 1: Setting Up Your Project

First, you need to set up a new Deleight project. Follow these steps:

Create a new directory for your project.
Run npm init to create a new package.json file.
Install Deleight using npm install deleight.

Step 2: Creating Your First Component

Next, let's create a simple component. Deleight components are modular and reusable. Here's how to create one:

import { hh } from 'deleight/dom/builder';
const MyComponent = hh.h1('Hello, Deleight!');
export default MyComponent;

This component renders a simple "Hello, Deleight!" message to the screen.

Step 3: Rendering Your Component

Now that you've created your component, let's render it to the screen. Add the following code to your main application file:

import MyComponent from './MyComponent';
MyComponent.appendTo(document.getElementById('app'));

This will render your component inside the element with the ID of "app".

Congratulations

Congratulations! You've just created your first Deleight app. From here, you can explore more advanced features like reactivity, state management, and component patterns. Check out our other tutorials to take your skills further!

Faster, Lighter, and More Powerful than React