What our documents can do

The living style guide — every v1-core component and declarative block, rendered in the house look. Charts, a Mermaid diagram, a live calculator, a bilingual toggle, a gallery, callouts, stat tiles and working anchors — all prose, no author JavaScript.

By Czesio

Living style guide

What our documents can do

Everything on this page is prose: sanitized, indexable HTML enriched with declarative, trusted-rendered components. No author JavaScript runs — the platform hydrates safe, data-only markup. Copy any block from here into your own document.

prose-first no author JS on-brand by construction

Components

Stat tiles, callouts, a verdict box, a formula card, a step flow, phase cards and a win/lose comparison table — all class-keyed markup that passes the sanitizer untouched.^[1]

19legacy docs

0need canvas

100%route to prose

Tip

Author code never runs in prose — a strictly stronger safety story than "runs but isolated".

Info

Every id is slugified, namespaced and de-duplicated, and fragment links are rewritten to match — so the table of contents above actually works.

Watch out

Content hiding in data-* attributes (especially translations) is the classic silent-loss trap. Use data-en/data-zh so both halves stay indexed.

Danger

Never hand-author a <script> or an on* handler — the sanitizer strips them, but the intent is what the escape hatch is for (owner-only).

TL;DR

Write declarative data; the platform renders it on-brand. Author code never runs in prose.

Verdict. Richness lives in declarative components; the injection surface the sanitizer closes stays closed.

Style should follow the brand guidelines; content must stay flexible and rich.

bonus pool = (net profit − public fee) × usage share ÷ 100

Scan QR Upload AI verify Coupon issued

Stop the bleeding
Ship the MVP that removes today's pain.
Build the base
Harden the workflows that just proved out.
Compound the edge
Layer bespoke advantages on the stable base.

Aspect	Rent	Buy
Up-front cost	$0	$3,999
Elastic scale	On demand	Fixed
Offline use	No	Yes

<div class="ww-chart">
  <pre class="ww-chart-spec">{ "type": "line", ... }</pre>
  <p class="ww-chart-fallback">takeaway in prose</p>
</div>

Charts & diagrams

Authors supply only the data; the trusted renderer draws it, on-brand.

{ "type": "line", "title": "Rent vs. buy — cumulative cost",
  "data": { "labels": ["0", "12", "24"],
    "datasets": [
      { "label": "Buy (one-off)", "data": [3999, 3999, 3999] },
      { "label": "Rent (monthly)", "data": [0, 1400, 2800] } ] } }

Buying is a one-off $3,999; renting reaches about $2,800 by month 24.

{ "type": "bar", "title": "Estimated effort per phase (weeks)",
  "data": { "labels": ["Phase 1", "Phase 2", "Phase 3"],
    "datasets": [ { "label": "Weeks", "data": [6, 4.5, 3] } ] } }

Phase 1 ≈ 6 weeks, Phase 2 ≈ 4.5, Phase 3 ≈ 3.

flowchart LR
  A[Customer] -- Write --> B[Front of house]
  B -- Read --> C[POS back office]
  C -- Webhook --> B

Live calculator

Inputs → formulas → outputs, computed live by a safe evaluator (never eval).

{ "inputs": [
    { "name": "netProfit", "label": "Net profit", "type": "number", "default": 120000 },
    { "name": "publicFee", "label": "Public fee", "type": "number", "default": 18000 },
    { "name": "usageShare", "label": "Usage share (%)", "type": "range", "min": 0, "max": 100, "default": 60 } ],
  "outputs": [
    { "name": "pool", "label": "Bonus pool", "formula": "(netProfit - publicFee) * usageShare / 100" } ],
  "checks": [ { "expr": "usageShare <= 100", "message": "Usage share cannot exceed 100%." } ],
  "chart": { "type": "stacked-bar", "series": ["pool"] } }

Example: net profit 120,000, public fee 18,000, usage 60% → pool 61,200.

Bilingual EN ⇄ 中文

Both languages ride on the node as plain-text attributes; a trusted toggle swaps them and flips the document language. Both halves are indexed, so a missing translation is findable.

The reservation assistant replies 24/7, no app install required.