Home › Start

Quick start

Install AngeLite, write your first component and choose how to ship it: a single script, or precompiled for the smallest size.

What AngeLite is#

It is a user-interface framework built from three ideas:

• Signals (signal, computed, effect): state lives in reactive values; when one changes, only what depends on it is updated. There is no global change detection and no Zone.js.
• Angular-style templates: HTML with {{ }}, [prop], (event), @if and @for. Templates are compiled once into a list of instructions; there is no virtual DOM.
• Optional modules: the core is small and everything else (router, forms, HTTP, i18n, animations, SSR) is imported only if you use it.

Installation#

There are two paths. The fastest needs no tools at all: a <script>.

With a script (no build)#

Include the bundle and write your app. Templates are compiled in the browser on startup (about 10 KB gzip in total, optional modules included in the full bundle).

<div id="app"></div>
<script src="https://duvanjamid.github.io/angelite-docs/angelite.min.js"></script>
<script>
  const { signal, component, mount } = AngeLite;

  class Hello {
    name = signal('world');
  }
  component(Hello, {
    template: `<input [(ngModel)]="name"> <p>Hello, {{ name() }}</p>`
  });
  mount(Hello, document.getElementById('app'));
</script>

With npm and a bundler#

npm install github:duvanjamid/angelite

import { signal, component, mount } from '@duvanjamid/angelite';

With a bundler (esbuild, Vite, Rollup) every module you do not import disappears from the output. For the smallest size, precompile the templates: the app ships only the runtime (about 6 KB), without the compiler.

Your first component#

A component is a JavaScript class plus component(Class, { selector, template }). The class fields are available in the template; signals are read by calling them (count()) and written with set or update.

const { signal, computed, component, mount } = AngeLite;

class Counter {
  count = signal(1);
  double = computed(() => this.count() * 2);
  add(n) { this.count.update(v => v + n); }
}
component(Counter, {
  template: `
    <button (click)="add(-1)">−</button>
    <b>{{ count() }}</b>
    <button (click)="add(1)">+</button>
    <span> × 2 = {{ double() }}</span>`
});
mount(Counter, root);

How to ship it#

The usual path is to start with the script and move to precompiling when the app grows. The component code does not change.

Next steps#