FrontMark

FrontMark is the enriched Markdown layer used around sigMAX to publish documentation, examples, and lightweight frontend content. It keeps authoring close to Markdown while adding richer rendering patterns for pages that need more structure than plain prose.

In sigMAX, FrontMark is referenced as an associated frontend component, but it is a separate part of the project. This page keeps only the context needed from the sigMAX documentation and sends detailed usage, syntax, and implementation notes to the dedicated FrontMark space.

Open the detailed FrontMark space View the FrontMark repository

A small publishing layer, not another runtime

FrontMark gives sigMAX a concise way to turn Markdown into richer frontend documentation: readable source, structured rendering, visual callouts, and clear links back to the project pieces that own the actual behavior.

Role in sigMAX

FrontMark provides a lightweight way to expose human-readable content around sigMAX without turning that content into a generated application frontend. It is useful for documentation pages, examples, tutorials, visual explanations, and small interactive documentation blocks.

Its role is deliberately narrow:

Publish enriched Markdown content for sigMAX-related pages.
Keep detailed syntax, examples, and implementation notes in the dedicated FrontMark space.
Let the frontend/documentation layer evolve separately from the sigMAX generator and runtime.
Preserve a low-friction writing workflow for technical content.

What FrontMark Adds

FrontMark starts from Markdown and adds a rendering layer for richer documentation patterns. The exact syntax reference lives in /frontmark, but the intent can be summarized from the sigMAX point of view:

Need	FrontMark contribution
Explain architecture	Diagrams, visual blocks, structured sections, and callouts.
Show examples	Highlighted code, tabs, annotated snippets, and copyable blocks.
Present lightweight UI content	Forms, cards, media blocks, and frontend-oriented containers.
Keep content portable	Markdown remains the authoring base instead of a custom page builder.
Separate concerns	FrontMark handles documentation rendering, while sigMAX handles generation, contracts, and runtime behavior.

How It Fits

sigMAX focuses on contract-first generation, agreements, deterministic artifacts, and controlled execution. FrontMark sits next to that core system as the content surface for explanations and lightweight frontend material.

%%{init: {"theme": "base", "flowchart": {"nodeSpacing": 78, "rankSpacing": 90, "padding": 18, "curve": "basis"}, "themeVariables": {"fontFamily": "Inter, ui-sans-serif, system-ui", "fontSize": "14px", "primaryTextColor": "#0f172a", "lineColor": "#dff7ff"}, "themeCSS": ".cluster-label p{font-size:15px!important;font-weight:900!important;letter-spacing:0!important}.flowchart-link{stroke:#dff7ff!important;stroke-width:3.5px!important;stroke-linecap:round!important;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}.marker{fill:#dff7ff!important;stroke:#dff7ff!important}.edgeLabel,.labelBkg,.edgeLabel span{background:transparent!important}.edgeLabel p{background:transparent!important;color:#f8fafc!important;font-family:Inter,ui-sans-serif,system-ui!important;font-size:14px!important;font-style:normal!important;font-weight:500!important;line-height:1.15!important;padding:0!important;text-shadow:none!important}"}}%%
flowchart LR
  classDef source fill:#ecfeff,stroke:#0891b2,stroke-width:2px,color:#0f172a,font-weight:800;
  classDef frontmark fill:#dcfce7,stroke:#16a34a,stroke-width:3px,color:#052e16,font-weight:900;
  classDef surface fill:#eff6ff,stroke:#2563eb,stroke-width:2px,color:#172554,font-weight:800;
  classDef core fill:#fef3c7,stroke:#d97706,stroke-width:2px,color:#451a03,font-weight:800;
  classDef runtime fill:#f5f3ff,stroke:#7c3aed,stroke-width:2px,color:#2e1065,font-weight:800;
  subgraph Authoring["Authoring"]
    direction TB
    Markdown["Markdown source"]:::source
    Enrichment["FrontMark directives"]:::source
  end
  subgraph Layer["FrontMark layer"]
    direction TB
    Renderer{{"Renderer"}}:::frontmark
    Patterns["Callouts · tabs · diagrams · containers"]:::frontmark
  end
  subgraph Surfaces["Published surfaces"]
    direction TB
    Docs["Documentation pages"]:::surface
    Guides["Examples and guides"]:::surface
    LightUI["Lightweight frontend content"]:::surface
  end
  subgraph Sigmax["sigMAX core"]
    direction TB
    Contracts["Contracts"]:::core
    Agreements["Agreements"]:::core
    Runtime["Controlled runtime"]:::runtime
  end
  Markdown -->|"authored as text"| Renderer
  Enrichment -->|"adds structure"| Renderer
  Renderer -->|"renders"| Patterns
  Patterns --> Docs
  Patterns --> Guides
  Patterns --> LightUI
  Docs -. "explains" .-> Contracts
  Guides -. "illustrates" .-> Agreements
  LightUI -. "presents" .-> Runtime
  style Authoring fill:#0e7490,fill-opacity:.22,stroke:#67e8f9,stroke-width:2px,color:#f8fafc
  style Layer fill:#16a34a,fill-opacity:.20,stroke:#86efac,stroke-width:2px,color:#f8fafc
  style Surfaces fill:#2563eb,fill-opacity:.18,stroke:#93c5fd,stroke-width:2px,color:#f8fafc
  style Sigmax fill:#7c2d12,fill-opacity:.18,stroke:#fbbf24,stroke-width:2px,color:#f8fafc

FrontMark can describe a sigMAX concept, show a contract example, or publish a walkthrough. It should not be confused with the generated services, runtime sandbox, or Enterprise deployment infrastructure.

When to Use It

Use FrontMark when a sigMAX page needs more than plain paragraphs but does not need to become a standalone application.

Good uses include:

A concept page with callouts, diagrams, and examples.
A tutorial that mixes explanations, commands, screenshots, and warnings.
A frontend-facing documentation page with tabs, media, or structured blocks.
A compact visual explanation of a generated artifact or runtime boundary.

Avoid using FrontMark as the place to define core sigMAX behavior. Contracts, agreements, runtime rules, and generation boundaries should remain documented in the core sigMAX sections and source repositories.