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 has zero package friction. This makes it a perfect fit for a wide spectrum of applications:

1. Lightweight & Specialized Environments

Modern web frameworks often carry a heavy penalty in bundle size and setup complexity. Markup's footprint is small enough that it simplifies development in resource-constrained or specialized environments:

Browser Extensions: Build Manifest V3 content scripts, side panels, and popups without packaging a massive runtime or fighting complex bundler settings.
Embeddable Widgets: Create chat widgets, calculators, feedback forms, or interactive cards that can be injected into any client website without bloating their page load times.
CMS Plugins & Themes: Add rich reactivity to Shopify, WordPress, or custom headless CMS templates seamlessly.
Micro-frontends: Ship independent, highly isolated components that initialize instantly and share almost zero overhead.

2. Large‑Scale & Enterprise Applications

At the other end of the spectrum, Markup’s simplicity and flexibility scale cleanly to large-scale codebases. Because it relies entirely on native JavaScript primitives and standard APIs, it integrates naturally with professional architecture patterns:

Composition: Build scalable UI using Function Components or standard Web Components.
State Management: Create robust, predictable unidirectional data flows using State Stores.
Declarative Routing: Power complex Single Page Applications (SPAs) using the @beforesemicolon/router Router.
Performance: Surgical DOM reconciliation ensures that enterprise dashboards, complex forms, and data-heavy tables remain extremely fast and responsive.
Server-Side Rendering (SSR): Boost SEO and initial load times for massive web apps with native Server Side Rendering capabilities.

Before Semicolon offers additional libraries built on top of Markup to provide full framework-like capabilities:

Web Components Integration — Enhance custom elements with automatic reactive rendering.
SPA Router — Manage path matching, query state, and route-aware template switches.

Additionally, here are examples of architecture patterns you can build using only core Markup APIs:

Examples

Here are more examples you can draw inspiration from:

edit this doc