Reachable Web State for Small Teams

Active Tags

Active Tags is the flagship workflow runtime in the M7 frontend stack. It makes medium and high complexity web targets reachable for small teams by compiling DOM-declared behavior into deterministic runtime tickets instead of ad-hoc glue.

Discuss Active Tags Adoption See m7.js Library Read the Article Series View GitHub Repo
Compile-first Deterministic tickets DOM-declared jobs Mixed-stack ready

Overview

Active Tags is a compile-first workflow orchestration runtime for DOM components. It normalizes semantic roots and per-job policy, then executes tickets through an explicit compiler + VM spine with visible status transitions.

It is framework-capable, not framework-imposed. The runtime fits into legacy PHP sites, framework-hosted pages, and mixed JavaScript systems without forcing a rewrite of the whole product.

What It Solves

  • State governance gaps: route changes, click events, async data, and feature flags resolve through one policy path.
  • Boundary collapse: behavior stays out of template soup and markup keeps semantic roots.
  • Glue-driven architecture: pipelines replace handler chains and repeated request plumbing.
  • Poor operability: hooks, tickets, and trace surfaces make the runtime explainable.
  • Scale pressure: deterministic boundaries keep complexity from collapsing into handler spaghetti.
  • Framework dependency debt: add runtime governance without locking the product to a platform-owning framework.

The point is reachability. Medium and high complexity web targets become something a small team can keep healthy over time instead of something that only survives while one person remembers all the glue.

Article Series

The three-part series below is the longform version of the product story. Read them in order, then come back to the runtime details.

Part I

From Unreachable to Reachable

Why web UI state architecture breaks small teams and turns the browser into a glue factory.

Problem model and reachability thesis.

 Part II

Designing Active Tags

How the runtime solves the failure model with deterministic tickets, pipelines, and explicit hooks.

System answer and runtime design.

 Part III

From Theory to Practice

A readable tutorial walkthrough that shows how the runtime works in actual code.

Tutorial, builtins, and observable execution.

How It Works

  1. Declare semantic roots with data-activetag and at-name.
  2. Point to config via at-at, DOM attrs, JSON, or imports.
  3. Compile each discovered element into a job before it executes.
  4. Register event, interval, and observer controllers to enqueue tickets.
  5. Execute through Engine, Tick, and VM with explicit status transitions.
  6. Inspect the run with hooks and stable runtime anchors.

Active Tags also leans on m7.js for utility depth, which keeps common browser chores off the custom-glue path.

What It Does Not Solve

  • backend observability infrastructure
  • business or domain model design
  • transport and retry strategy for every API shape
  • full-system complexity across every layer

Active Tags solves the UI state-governance layer with deterministic runtime behavior and observable execution.

Delivery

For normal integration, use the versioned standalone bundle. It includes m7.js, Active Tags, and the required primitive installers in one artifact. If you need manual control, source-level install and prebundle entry points remain available.

The recommended path is bundle-first: ship the minified distribution, start with install({ conf }), and let the runtime manage discovery, triggers, and deterministic execution. The repo also documents multiple concrete implementations and a readable tutorial path.