Home | Domy

Lightweight and Fast

DOMY.js is a minimalistic UI framework, perfect for small projects or embedding in larger applications.

Native Components

Define components using plain HTML and simple logic, making your code clean and readable.

Reactive by Design

Inspired by Vue and Alpine, DOMY.js offers seamless reactivity out of the box without complex APIs.

No Virtual DOM

DOMY.js doesn't use any virtual DOM for rendering your content. It directly interacts with the real DOM.

Directive-Based Syntax

Build your UI declaratively using familiar directives like d-if, d-for, and d-scope.

Zero Dependencies

DOMY.js runs with zero external dependencies, making it ideal for embedding, performance, and portability.

Quick Example

This is a simple counter example with DOMY.js:

<script src="https://unpkg.com/@domyjs/core@1.x.x"></script>

<p>Count: {{ count }}</p>
<button @click="count++">Increment</button>
<button @click="count--">Decrement</button>

<script>
  const { signal, watch } = DOMY;
  DOMY.createApp(() => {
    const count = signal(0);

    watch(
      ({ prevValue, newValue }) => {
        if (newValue < 0) count.value = prevValue;
      },
      () => count
    );

    return {
      count
    };
  }).mount();
</script>

Or a basic implementation with d-scope:

<script src="https://unpkg.com/@domyjs/core@1.x.x"></script>

<div d-scope="{ count: 0 }">
  <p>Count: {{ count }}</p>
  <button @click="count++">Increment</button>
  <button @click="count--">Decrement</button>
</div>

<script>
  DOMY.createApp().mount();
</script>