Brand logoloom
  1. docs
  2. getting started

Getting Started

loom is a reactive, components-first JavaScript framework. Components are tagged templates, reactivity is a small pub/sub primitive called an activity, and the same render path runs in the browser, on a server, and at build time.

Feature highlights Copy link

  • Micro-updates on rerenders - updates are made at the attribute & node-levels.

  • Self-cleanup leveraging native JS garbage collection & WeakMap to release dead nodes from memory.

  • Reactivity to rerender any number of components used within a component template - see Activities.

  • Tagged Templates for performant processing of component templates - see Components.

  • Custom elements (defineElement) - consume loom components from any page as <some-element> - see Custom Elements.

  • Client-side Routing for dynamic rendering of components based on Location data - see Routing.

  • Lazy-loading of routes & content (lazyImport), tracked by the settlement signal - see Lazy Imports.

  • Server rendering (@loom-js/core/server) - render to an HTML string for SSR & SSG through the same code path the browser runs - see Server Rendering.

  • Client hydration (hydrate) - invisible takeover of pre-rendered pages: one atomic swap once the app has settled, no content flashes - see Client Hydration.

  • Dehydrated state (resource → dehydrate → primeResources) - hand the server's fetched data to the client, so a primed hydration never refetches - see Dehydrated State.

  • 0 Dependencies (you're welcome)

  • Typescript Types included.

Install Copy link

bash
Copy code
npm i @loom-js/core

Inclusion Copy link

ts Copy code
import * as Loom from '@loom-js/core';

Where next Copy link

The side navigation is ordered as a learning path. Start with Bootstrapping to mount your first app, then work through Components and Activities — the foundations the later concepts build on. Configuration and Diagnostics are reference stops you can return to any time.