# Documentation for AI agents

This file is generated at build time from the Markdown documentation. Use it to choose the most relevant page before reading the canonical HTML documentation.

## Markup by Before Semicolon

URL: https://markup.beforesemicolon.com/
Source: docs/index.md
Description: Markup is an under-8KB gzip reactive HTML templating system for building web-standard JavaScript user interfaces with state, effects, components, and no build step.

::: layout landing-hero version=v1.18.3 title="Reactive DOM." title2="Zero build." primaryLabel="Get Started" secondaryLabel="npm i @beforesemicolon/markup" === copy A tiny, web-standards-first templating system that brings reactivity, state, and components to vanilla JavaScript. No bundlers. No JSX. No magic. === stat

## Markup Documentation - Reactive HTML Templating for JavaScript

URL: https://markup.beforesemicolon.com/documentation/
Source: docs/documentation/index.md
Description: Learn what Markup is, why it exists, and how it uses JavaScript template literals, functions, and web standards to build reactive user interfaces.

What is Markup? Markup is a JavaScript reactive templating system built to simplify how you build Web user interfaces using web standards with minimal enhancements to the native web APIs as possible. It consists of 3 main APIs with additional utilities to simplify things even further: - html A JavaScript tagged functio

## Get Started with Markup - Install and Render Your First Template

URL: https://markup.beforesemicolon.com/documentation/get-started
Source: docs/documentation/get-started.md
Description: Start using Markup with a simple HTML page, load it from a CDN, create reactive state, and render your first JavaScript template without a build step.

Get Started Markup is a plug and play library, which means, you don't need to build or compile it into anything to be able to see what you build. What you write is what is shipped to the client. Nothing more, nothing less. Additionally, you can run it on the client and server to produce any type of application. Try Exa

## Installation - Markup by Before Semicolon

URL: https://markup.beforesemicolon.com/documentation/installation
Source: docs/documentation/installation.md
Description: Install Markup from a CDN or package manager, pin versions, import the JavaScript APIs, and use the TypeScript definitions included with the package.

Installation Markup is a plug-and-play package that does not need to be built. There is no need to any additional setup or requirements to get started. Simply add it to your project and start writing your code. Via CDN This method is the quickest loading option and can be placed in the head tag of the document. You may

## AI Guide - Markup by Before Semicolon

URL: https://markup.beforesemicolon.com/documentation/ai
Source: docs/documentation/ai.md
Description: AI-first guide to Markup APIs, package boundaries, rendering rules, state patterns, companion packages, and common implementation mistakes.

AI Guide Use this page first if you are an AI agent scanning the docs. Read first - What is Markup? - Get Started - Guide & Best Practices What each package owns - @beforesemicolon/markup: templates, state, effect, and helpers like when, repeat, pick, is, isNot, visible, and, or, oneOf, element, and suspense - @befores

## Markup Guide and Best Practices - JavaScript Reactive UI

URL: https://markup.beforesemicolon.com/documentation/guide
Source: docs/documentation/guide.md
Description: Comprehensive Markup guide covering installation, html templates, state, effects, utilities, WebComponent integration, Router patterns, and best practices.

Guide & Best Practices This guide outlines core conventions, code design patterns, and common refactoring workflows for writing declarative, clean, and high-performance reactive applications with @beforesemicolon/markup. Core Rules 1. Prefer Declarative Helpers Over Branching: Avoid writing inline JavaScript ternary op

## Function Components with Markup - JavaScript Template Factories

URL: https://markup.beforesemicolon.com/documentation/capabilities/function-component
Source: docs/documentation/capabilities/function-component.md
Description: Learn how to build reusable Markup components as plain JavaScript functions that return HTML templates with props, state, lifecycle hooks, and events.

Function Component Markup does not ship with a dedicated component API. Components are simply functions that return a HTMLTemplate instance. It is totally up to you what these functions can do or look like. From the example above, you can simply render your component using the render method. Inputs (Props) Since its fu

## State Store - Markup by Before Semicolon

URL: https://markup.beforesemicolon.com/documentation/capabilities/state-store
Source: docs/documentation/capabilities/state-store.md
Description: Build shared state stores with Markup state, derived getters, update functions, effects, and repeat rendering patterns for application state management.

State Store The great thing about Markup state is the fact that it is a standalone API that works great witht the template itself. What this allows you to do is manage shared/global state away from the component and inject them directly into the template or perform side effects where needed. All that without worrying a

## Server Side Rendering - Markup by Before Semicolon

URL: https://markup.beforesemicolon.com/documentation/capabilities/server-side-rendering
Source: docs/documentation/capabilities/server-side-rendering.md
Description: Render Markup templates on the server in JavaScript environments, serialize HTML output, and understand how Markup can support server-side rendering workflows.

Server Side Rendering Markup can run in any JavaScript environment which means you can also server-side render the templates for your pages. Take for example this simple page created with Markup. We can follow by creating a simple express app and serve our HomePage. Notice that we are calling the .toString() on the tem

## Capabilities - Markup by Before Semicolon

URL: https://markup.beforesemicolon.com/documentation/capabilities/
Source: docs/documentation/capabilities/index.md
Description: Explore what you can build with Markup, including function components, companion Web Components, companion Router, state stores, and server-rendered templates.

Capabilities Markup is a highly flexible, performant, and lightweight templating system that can serve as the core of anything from quick single-file widgets to large-scale, enterprise-ready systems. From Tiny Solutions to Enterprise Systems Because Markup requires no compile or build step and is only 7.6KB gzip, it ha

## Markup Templating - Create, Render, Replace, and Nest Templates

URL: https://markup.beforesemicolon.com/documentation/templating/
Source: docs/documentation/templating/index.md
Description: Learn how the Markup html tagged template creates templates, renders DOM, replaces content, nests templates, and updates reactive values.

Templating Markup uses tagged template literals called html to describe the HTML you want to render. The html returns an HTMLTemplate instance containing methods and properties you can use to access or perform many actions. Rendering There are few ways to render a template after you define it: - render: Takes a HTMLEle

## Template Lifecycles - Markup by Before Semicolon

URL: https://markup.beforesemicolon.com/documentation/templating/lifecycles
Source: docs/documentation/templating/lifecycles.md
Description: Use Markup template lifecycle hooks such as onMount and onUpdate to run setup, cleanup, and side effects when templates render or change.

Lifecycles Markup exposes few methods you can use to tap into the lifecycles of the template: - onMount: method that takes a function to call when the template is mounted that can return another function to be called when the template is unmounted; - onUpdate: method that takes a function to call when something in the 

## Template Values - Markup by Before Semicolon

URL: https://markup.beforesemicolon.com/documentation/templating/values
Source: docs/documentation/templating/values.md
Description: Understand how Markup renders template values including strings, numbers, DOM nodes, arrays, functions, state getters, nested templates, and object values.

Values If you ever worked with JavaScript template literals you may already know you can inject values. Since markup templates are just template literals, you can inject whatever you want and Markup will handle each value for you. Parsing Before we jump into specific values, lets talk about how Markup parses the HTML s

## HTML Attributes - Markup by Before Semicolon

URL: https://markup.beforesemicolon.com/documentation/templating/html-attributes
Source: docs/documentation/templating/html-attributes.md
Description: Work with Markup template attributes, boolean attributes, dynamic values, object attributes, refs, classes, and native inline event attributes.

HTML Attributes HTML attributes in Markup templates are just HTML attributes. One specific behavior change is related to boolean attributes and besides that, your knowledge about HTML attributes transfer as is. Boolean attributes Boolean attributes in HTML are attributes that represent true or false values. The issue w

## Template DOM References - Markup by Before Semicolon

URL: https://markup.beforesemicolon.com/documentation/templating/ref
Source: docs/documentation/templating/ref.md
Description: Use the Markup ref attribute to capture DOM element references from rendered templates and safely access elements created by the html template.

Ref Markup templates will handle all DOM elements rendering for you but if you really need to access the element rendered by the templates, you can use the ref attribute to provide a handle key that you can then use to grab the elements. Multiple references The ref attribute always return an array. Therefore, you can u

## HTML Events - Markup by Before Semicolon

URL: https://markup.beforesemicolon.com/documentation/templating/events
Source: docs/documentation/templating/events.md
Description: Attach native event handlers in Markup templates with inline on* attributes, pass listener options, use AbortController, and handle DOM events safely.

Events HTML allows you set inline event listeners using on attributes. This is pretty much how you set event listeners on tags in Markup. The big difference with Markup is that these attributes are not rendered and behind the scenes Markup is using the addEventListener to set event listeners on your tags. This allows y

## State - Markup by Before Semicolon

URL: https://markup.beforesemicolon.com/documentation/state/
Source: docs/documentation/state/index.md
Description: Learn Markup state getter, setter, and unsubscribe behavior for reactive rendering, direct reads, functional updates, subscriptions, and template updates.

State Something that is truly missing in web APIs is reactivity, the ability to react to changes instead of listening to events. A big promise is the tc39 proposal which is attempting to bring signals to JavaScript. Until then, Markup exposes a standalone API that gives you that capability called state. The state API c

## State Effect - Markup by Before Semicolon

URL: https://markup.beforesemicolon.com/documentation/state/effect
Source: docs/documentation/state/effect.md
Description: Use Markup effect to track state dependencies, react to multiple state changes, clean up subscriptions, debounce async work, and control nested effects.

Effect The effect API complements the state API by providing a better way to react to multiple state changes based on what you need to be executed. The state API allows you to subscribe to changes of its value. This is great if you want to perform side effects related to a single state. To perform side effects for mult

## Markup Utilities - Conditional, Async, Repeated, and Lazy Rendering

URL: https://markup.beforesemicolon.com/documentation/utilities/
Source: docs/documentation/utilities/index.md
Description: Overview of Markup helper utilities for conditional rendering, repeated rendering, async suspense, visibility-based lazy rendering, DOM elements, and state selection.

Utilities Markup offers many utility functions that aid you in templating or work with the DOM in general: - element: allows you to easily create DOM elements; - suspense: allows you to lazy render content; - repeat: allows you to handle lists or repeat content; - when: allows you to conditionally render content; - vis

## Element Utility - Markup by Before Semicolon

URL: https://markup.beforesemicolon.com/documentation/utilities/element
Source: docs/documentation/utilities/element.md
Description: Use the Markup element utility to create DOM elements programmatically with attributes, children, refs, and event handlers when a static template is not enough.

Element Utility The element attribute is simply a function that allows you to create DOM elements in one call. Normally, when working with DOM elements we create and piece them together after. This is a lot of steps to create a simple button. Here is the same thing using element: The element uses addEventListener behin

## Suspense Utility - Markup by Before Semicolon

URL: https://markup.beforesemicolon.com/documentation/utilities/suspense
Source: docs/documentation/utilities/suspense.md
Description: Use the Markup suspense utility to render async content with loading templates, error templates, lazy data fetches, and template replacement.

Suspense Utility The suspense utility allows you to lazy render content by using the replace method in the template instances while allowing you to handle the loading and error state. Loading state You can pass a custom loading content to render while the asynchronous work is being performed. The suspense has a default

## When Utility - Markup by Before Semicolon

URL: https://markup.beforesemicolon.com/documentation/utilities/when
Source: docs/documentation/utilities/when.md
Description: Use the Markup when helper for conditional rendering with state getters, fallback templates, lazy branches, and reactive UI decisions.

When Utility The when helper is Markup out of the box utility to do conditional rendering in or outside templates. It mimics an if-and-else statement with the else being conditional. Condition The condition is the first argument and it can be a static value or a function for something that will change like a StateGette

## Repeat Utility - Markup by Before Semicolon

URL: https://markup.beforesemicolon.com/documentation/utilities/repeat
Source: docs/documentation/utilities/repeat.md
Description: Render lists with the Markup repeat utility, including arrays, sets, maps, objects, numeric ranges, empty states, keys, and cached item templates.

Repeat Utility The repeat utility is Markup recommended way to render iterable data or repeating content. It handles things like caching and tracking for the template ensuring list changes only happen to the items that need them. Why use repeat? Markup templates already handle arrays but like any other injected value, 

## Is & IsNot Utility - Markup by Before Semicolon

URL: https://markup.beforesemicolon.com/documentation/utilities/is-&-isnot
Source: docs/documentation/utilities/is-&-isnot.md
Description: Use the Markup is and isNot helpers to render content from truthy or falsy state values with concise reactive conditional logic.

Is & IsNot Utilities The is and isNot are one of the simplest utilities that allows you to quickly check truthiness about values, especially states. Both the is and isNot take two arguments, a state or some data, and a value or a checker. They will always return a boolean as the result. The second argument is optional 

## Visible Utility - Markup by Before Semicolon

URL: https://markup.beforesemicolon.com/documentation/utilities/visible
Source: docs/documentation/utilities/visible.md
Description: Use the Markup visible utility to defer rendering until content enters the viewport with IntersectionObserver-powered lazy UI.

Visible Utility The visible utility allows you to defer the rendering of content until its placeholder element enters or is about to enter the viewport (using IntersectionObserver under the hood). This is incredibly useful for improving page load speed and memory consumption when rendering large lists of complex items,

## OneOf, And & Or Utility - Markup by Before Semicolon

URL: https://markup.beforesemicolon.com/documentation/utilities/and-or-&-oneof
Source: docs/documentation/utilities/and-or-&-oneof.md
Description: Use the Markup and, or, and oneOf helpers to combine reactive boolean conditions and render templates when multiple state checks pass.

OneOf, And & Or Utilities Markup comes with additional utilities that work as operators and allows you to check a value from a bunch. This comes in form of and, or, and oneOf utilities. oneOf The oneOf works like the is and isNot utilities but instead of checking a one value, it checks many. It takes the value/state yo

## Pick Utility - Markup by Before Semicolon

URL: https://markup.beforesemicolon.com/documentation/utilities/pick
Source: docs/documentation/utilities/pick.md
Description: Use the Markup pick utility to select deep object state paths while preserving reactivity for nested properties and derived template values.

Pick Utility The pick utility simplifies working with object states by allowing you to read deep property values while keeping the reactivity of the states. Why use pick utility? Let's look at a simple user object state. The user data model looks something like this: Now we can try to display this user information that