API Reference

Lightview provides a small but powerful API. Everything you need, nothing you don't. Keep it light, remember?

Lightview Overview

Function	Description
`signal(value, optionsOrName?)` `signal.get(name)`	Create reactive state that triggers updates when changed. Optional name or options object allows global access and persistence.
`computed(fn)`	Derive values from signals automatically
`effect(fn)`	Run side effects when dependencies change
`tags.*`	Shorthand element creators (div, span, button, etc.)
`$(selector)`	Query the DOM and return a native element enhanced with a `.content(node, location?)` method. The `location` can be `'inner'` (default), `'outer'`, `'shadow'`, `'beforebegin'`, `'afterbegin'`, `'beforeend'`, or `'afterend'`. The `node` argument is polymorphic and can be a real DOM node, a virtual node (vDOM), Object DOM, or an array of these.
`enhance(selector, options)`	Add reactivity to existing DOM elements. Perfect for progressive enhancement of traditional HTML pages.

Lightview X Overview

Lightview X automatically enhances the core Lightview instance when loaded, adding hypermedia capabilities, template literal support, and deep reactive state. Object DOM syntax is now always available in core Lightview.

Feature / Function	Description
`state(obj, optionsOrName?)` `state.get(name)`	Create deep reactive state for complex objects/arrays. Optional name or options object allows global access and persistence.
`registerStyleSheet(id, css)`	Register a named stylesheet for use in Shadow DOM components. Can take a CSS string, a URL, or a selector to a `<style>` tag.
`registerThemeSheet(url)`	Register a global theme stylesheet that is automatically applied to all Shadow DOM components.
`src="..."`	Attribute to automatically fetch HTML or JSON representing HTML and inject it into the element.
`href="..."`	Attribute for SPA navigation and src injection on any element. Supports targeting content before, at the start of, and the end of or after other elements via CSS selectors.
`<div>${signal.get('count').value}</div>` `<span>${state.get('user').name}</span>`	Syntax support for using signals and state directly inside string templates in HTML or JSON representation of HTML.

Using Lightview

<!-- Core only -->
<script src="lightview.js"></script>

<!-- Full power -->
<script src="lightview.js"></script>
<script src="lightview-x.js"></script>

// Destructure what you need from the global instances
const { signal, computed, effect, element, tags, $, enhance } = Lightview;
const { state } = LightviewX; // Deep state (lightview-x)

Core Modules

Signals

The foundation. Reactive primitives that make everything tick.

Computed

Derived state. Values that update themselves.

Effects

Side effects. Do things when state changes.

Elements

Three ways to build UI, tag functions, vDOM, and Object DOM. Pick your favorite.

Enhance

Add reactivity to existing HTML. Progressive enhancement made easy.

Hypermedia

Fetch content with src. HTMX vibes, built in.