A curated collection of developer-first UI components, design tokens, and workflow pattern blocks modeled after Supabase. Never write raw, repetitive layout code again — use standard NativeBPM design tokens and components. Коллекция компонентов, дизайн-токенов и паттернов для NativeBPM в стиле Supabase. Забудьте о ручной верстке с нуля — используйте стандартизированные токены и готовые компоненты на русском и английском языках.
How components adapt to language switching, text expansion, and localized templates. Как компоненты автоматически адаптируются к переключению языков, удлинению текста и локализованным шаблонам.
Language state is preserved in localStorage and synchronized with ?lang=ru/en in the URL without page reloads.
Состояние языка сохраняется в localStorage и синхронизируется с параметром URL ?lang=ru/en без перезагрузки страницы.
Russian is 20-30% longer than English. Components use min-width and dynamic flex layouts instead of fixed widths.
Русский текст на 20-30% длиннее английского. Все компоненты используют min-width и гибкие флекс-контейнеры вместо жесткой ширины.
CSS class names (.nb-btn, .nb-badge) and code tokens remain strictly in English to ensure 100% copy-paste reliability.
Имена CSS-классов (.nb-btn, .nb-badge) и токены не переводятся, гарантируя безошибочный копипаст в верстку.
Foundational colors configured in CSS variables (--nb-*).
Базовые цвета темной темы, заданные через CSS-переменные (--nb-*).
Two distinct aesthetic personalities designed for cloud & developer workflows: Manrope (Soft, humanized tech sans) and JetBrains Mono (Hyper-precise code style with ligatures). Два характера шрифтов для облачных сервисов и платформ автоматизации: Manrope (Мягкий, округлый современный гротеск) и JetBrains Mono (Плотный monospace в стиле кода с лигатурами).
Soft Personality — Manrope
Rounded, geometric grotesque with generous apertures and open counters. Gentle on the eyes, human, and modern. Perfect for SaaS dashboards, landing pages, and executive reporting. Мягкий геометрический гротеск с округлыми формами и открытыми апертурами. Дружелюбный, технологичный, отлично читается на темном фоне в интерфейсах и посадочных страницах.
font-family: var(--nb-font-soft);
Code Style — JetBrains Mono
Engineered specifically for developers: increased lowercase height, distinctive character oval shapes, and programming ligatures (!=, =>, :=).
Создан для разработчиков: увеличенная высота строчных знаков, четкие овалы, максимальная различимость символов (0/O, 1/l/I) и лигатуры кода (!=, =>, :=).
font-family: var(--nb-font-code);
const instance = await engine.startProcess("order-fulfillment", { id: 4810, amount: 250.0 });
/* NativeBPM Typography Tokens */
:root {
--nb-font-soft: 'Manrope', 'Inter', sans-serif;
--nb-font-code: 'JetBrains Mono', monospace;
}
/* Switch modes globally on body or container */
body.font-mode-soft { --nb-font-headers: var(--nb-font-soft); --nb-font-body: var(--nb-font-soft); }
body.font-mode-code { --nb-font-headers: var(--nb-font-code); --nb-font-body: var(--nb-font-code); }
/* Or apply directly to elements */
.my-soft-title { font-family: var(--nb-font-soft); }
.my-code-widget { font-family: var(--nb-font-code); }
Used for workflow status indicators, engine versions, and categorization. Используются для индикации состояний процессов, версий движка и категорий.
<span class="nb-badge nb-badge-emerald">
<span class="nb-dot nb-dot-emerald nb-dot-pulse"></span>
<span>Active</span>
</span>
Side-by-side developer window and interactive visualizer container (from the landing page). Side-by-side окно редактора кода SDK и интерактивный визуализатор BPMN 2.0 (как на главной странице).
<div class="nb-dual-pane">
<div class="nb-code-window">...</div>
<div class="nb-bpmn-viewer-card">...</div>
</div>
Drop-in, zero-build widgets that embed into any frontend (HTML, React, Vue, Webflow, WordPress) without recompilation or bundlers. Distributed via Cloudflare Pages edge CDN or downloadable as an offline static package. Готовые виджеты без пересборки проекта, встраиваемые в любой фронтенд (HTML, React, Vue, Webflow, WordPress) без бандлеров и npm. Раздаются через глобальный CDN Cloudflare Pages или скачиваются в виде автономного статического архива.
<!-- 1. Include styles and Web Components SDK (from Cloudflare Pages or self-hosted) --> <link rel="stylesheet" href="https://nativebpm.pages.dev/static/design-system.css"> <script src="https://nativebpm.pages.dev/static/nativebpm-widgets.js" defer></script> <!-- 2. Drop in the widgets anywhere without rebuilding! --> <nativebpm-status process="order-process" instance-id="inst-8921" status="running"></nativebpm-status> <nativebpm-trigger process-id="instant-settlement" label="⚡ Start Settlement"></nativebpm-trigger> <nativebpm-viewer height="240px" highlight-node="ValidateInventory"></nativebpm-viewer>
import { useEffect } from 'react';
export default function OrderWorkflowWidget({ instanceId }) {
useEffect(() => {
// Dynamic import without bundler rebuild
import('https://nativebpm.pages.dev/static/nativebpm-widgets.js');
}, []);
return (
<div className="workflow-card">
{/* @ts-ignore custom Web Component */}
<nativebpm-status process="order-fulfillment" instance-id={instanceId} status="running" />
<nativebpm-trigger process-id="order-fulfillment" label="⚡ Retry Step" />
</div>
);
}
<template>
<div class="p-4">
<nativebpm-status :process="currentProcess" :instance-id="orderId" status="running" />
<nativebpm-trigger :process-id="currentProcess" label="⚡ Launch" />
</div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
const orderId = ref('inst-84910');
const currentProcess = ref('payment-gateway');
onMounted(() => {
import('https://nativebpm.pages.dev/static/nativebpm-widgets.js');
});
</script>
# Cloudflare Pages _headers configuration /static/nativebpm-widgets.js Cache-Control: public, max-age=31536000, immutable Access-Control-Allow-Origin: * /static/design-system.css Cache-Control: public, max-age=31536000, immutable Access-Control-Allow-Origin: * /downloads/nativebpm-widgets-bundle.zip Cache-Control: public, max-age=86400, stale-while-revalidate=604800 Content-Disposition: attachment; filename="nativebpm-widgets-bundle.zip"
To guarantee zero-build embed security and prevent malicious third-party tampering or widget substitution on client websites, NativeBPM employs a defense-in-depth security model combining Subresource Integrity (SRI), Shadow DOM style & DOM isolation, and Origin Domain Whitelisting: Чтобы гарантировать безопасность встраивания без пересборки и исключить подмену кода виджета (widget substitution/hijacking) на клиентских сайтах, NativeBPM применяет эшелонированную модель защиты: криптографические хэши SRI (Subresource Integrity), изоляцию Shadow DOM и белый список доверенных доменов (Origin Whitelisting):
Exact SHA-384 cryptographic digests verify that files fetched from edge CDNs match official NativeBPM builds byte-for-byte. If modified by a proxy or MITM attacker, browsers immediately reject execution. Контрольная сумма SHA-384 гарантирует побайтовое совпадение с официальной сборкой NativeBPM. При попытке подменить скрипт через прокси или скомпрометированный CDN браузер блокирует выполнение.
When using mode="shadow", widgets encapsulate their DOM tree and CSS. Host page scripts and external browser extensions cannot intercept click handlers, tamper with input payloads, or leak sensitive tokens.
При атрибуте mode="shadow" виджет изолирует дерево DOM и CSS в теневом корне. Внешние скрипты хост-страницы не могут перехватывать клики кнопок, подменять данные или внедрять вредоносные стили.
Configure allowed-origins="https://app.example.com" to lock down execution. If an unauthorized phishing site embeds the widget, it halts and reports a security violation banner.
Атрибут allowed-origins="https://app.example.com" разрешает запуск виджета только на доверенных доменах. При попытке внедрения на фишинговый ресурс виджет блокируется.
<!-- 1. Cryptographically verified styles & Web Components SDK -->
<link rel="stylesheet"
href="https://nativebpm.pages.dev/static/design-system.css"
integrity="sha384-oGZ3qH231S3lziZqxLNdZi1XhV9L5fyn447pYaD/aP/n7PxkgBbF4lWgLd6sx+hc"
crossorigin="anonymous">
<script src="https://nativebpm.pages.dev/static/nativebpm-widgets.js"
integrity="sha384-0YXAGggb9MLUpJO+LxbsLlDfbAH+gn0+dLqoQSH/g3Pm/Fpo/R+mgtuLDa3Yg1qD"
crossorigin="anonymous"
defer></script>
<!-- 2. Isolated Shadow DOM widget with domain lock -->
<nativebpm-status
process="order-settlement"
instance-id="inst-98231"
mode="shadow"
allowed-origins="https://app.example.com,https://dashboard.example.com"
status="running">
</nativebpm-status>
BPMN diagrams are an integral, first-class citizen of the NativeBPM interface. Standardized presets and topologies ensure zero node collisions, deterministic column alignment, and semantic color coding across business processes, cloud infrastructure, and microservice sagas. BPMN-схемы — неотъемлемая часть интерфейса NativeBPM. Стандартизированные пресеты топологий гарантируют полное отсутствие наложений (Zero-Overlap ≥ 25px), строгое колоночное центрирование и цветовую семантику для бизнес-процессов, сетевых топологий и саг.
Linear-Tiered topology with risk gate branching and boundary timer escalation for dispatch fulfillment SLA. Иерархическая топология с шлюзом проверки рисков, таймером контроля SLA и симметричным вертикальным центрированием.
package main
import (
"time"
"gitlab.com/nativebpm/nativebpm/internal/bpmn"
)
// BuildOrderFulfillmentProcess creates a zero-overlap, tiered business process.
func BuildOrderFulfillmentProcess() *bpmn.Builder {
return bpmn.NewBuilder("order_fulfillment", "Enterprise Order Fulfillment").
SetLayoutPreset(bpmn.LayoutTiered).
StartEvent("order_placed").Next("check_kyc").
ServiceTask("check_kyc", "Verify KYC & Risk", "kyc_verifier").
RetryPolicy(bpmn.RetryPolicy{
InitialInterval: bpmn.Duration(5 * time.Second),
MaximumAttempts: 3,
}).Next("risk_gateway").
ExclusiveGateway("risk_gateway", "Risk Score OK?").
Condition("capture_payment", "risk_score < 0.25").
Default("order_denied").
Builder().
ServiceTask("capture_payment", "Capture Payment", "stripe_processor").Next("dispatch_3pl").
ServiceTask("dispatch_3pl", "Dispatch Carrier", "logistics_3pl").Next("order_fulfilled").
EndEvent("order_fulfilled", "Order Fulfilled Successfully").
EndEvent("order_denied", "Order Cancelled")
}
<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL"
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC"
xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI"
id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn">
<process id="order_fulfillment" name="Enterprise Order Fulfillment" isExecutable="true">
<startEvent id="order_placed" name="Order Placed"><outgoing>flow_1</outgoing></startEvent>
<serviceTask id="check_kyc" name="Verify KYC & Risk"><incoming>flow_1</incoming><outgoing>flow_2</outgoing></serviceTask>
<exclusiveGateway id="risk_gateway" name="Risk Score OK?">...</exclusiveGateway>
</process>
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="order_fulfillment">
<bpmndi:BPMNShape id="order_placed_di" bpmnElement="order_placed">
<omgdc:Bounds x="150" y="200" width="36" height="36" />
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="check_kyc_di" bpmnElement="check_kyc">
<omgdc:Bounds x="390" y="160" width="100" height="80" />
</bpmndi:BPMNShape>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</definitions>
<!-- Drop-in zero-build interactive diagram -->
<nativebpm-viewer
template="business-fulfillment"
height="280px"
highlight-node="check_kyc"
mode="shadow">
</nativebpm-viewer>
Hub-and-spoke radial fan-out: Cloudflare Edge Ingress → Argo Tunnel Hub → 4 Microservice Workers → YugabyteDB Global Cluster Sink with Camunda xmlns:bioc color coding.
Радиально-веерная топология Center-Hub: Cloudflare Edge → шлюз Argo Tunnel Hub → 4 параллельных воркера → отказоустойчивый кластер YugabyteDB. Семантические цвета Camunda xmlns:bioc.
package main
import "gitlab.com/nativebpm/nativebpm/internal/bpmn"
func BuildHighAvailabilityNetworkTopology() *bpmn.Builder {
b := bpmn.NewBuilder("ha_network_topology", "Global High-Availability Network Topology").
SetLayoutPreset(bpmn.LayoutCenterHub).
SetCenterHub("argo_tunnel_hub")
// Semantic colors: Cyan Ingress, Amber Hub, Emerald Workers, Purple DB Sink
b.SetNodeColor("cloudflare_edge", "#0284c7", "#082f49").
SetNodeColor("argo_tunnel_hub", "#f59e0b", "#451a03").
SetNodeColor("worker_auth", "#10b981", "#064e3b").
SetNodeColor("worker_billing", "#10b981", "#064e3b").
SetNodeColor("worker_telemetry", "#10b981", "#064e3b").
SetNodeColor("worker_audit", "#10b981", "#064e3b").
SetNodeColor("yugabyte_cluster_sink", "#a855f7", "#3b0764")
// Wire Topology Graph
b.StartEvent("cloudflare_edge").Next("argo_tunnel_hub")
b.ExclusiveGateway("argo_tunnel_hub", "Argo Smart Routing Hub")
workers := []string{"worker_auth", "worker_billing", "worker_telemetry", "worker_audit"}
for _, w := range workers {
b.ServiceTask(w, w, "worker_pool_topic")
b.SequenceFlow("argo_tunnel_hub", w)
b.SequenceFlow(w, "yugabyte_cluster_sink")
}
b.EndEvent("yugabyte_cluster_sink", "YugabyteDB Global Cluster Sink")
return b
}
<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL"
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC"
xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI"
xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0"
id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn">
...
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="ha_network_topology">
<bpmndi:BPMNShape id="argo_tunnel_hub_di" bpmnElement="argo_tunnel_hub" bioc:stroke="#f59e0b" bioc:fill="#451a03">
<omgdc:Bounds x="390" y="200" width="50" height="50" />
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="worker_auth_di" bpmnElement="worker_auth" bioc:stroke="#10b981" bioc:fill="#064e3b">
<omgdc:Bounds x="630" y="105" width="100" height="80" />
</bpmndi:BPMNShape>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</definitions>
<!-- Drop-in network topology visualizer -->
<nativebpm-viewer
template="network-topology"
height="280px"
mode="shadow">
</nativebpm-viewer>
Distributed transaction saga orchestration: sequential forward execution (Stock → Payment → Ticket) with backward compensation handlers (Release Stock, Refund Payment) attached to boundary compensation events. Оркестрация распределенной саги (Saga Pattern): прямое пошаговое выполнение (склад → оплата → билет) с компенсационными обработчиками отката (возврат товара, возврат средств).
package main
import "gitlab.com/nativebpm/nativebpm/internal/bpmn"
func BuildCheckoutSagaProcess() *bpmn.Builder {
return bpmn.NewBuilder("checkout_saga", "E-Commerce Distributed Checkout Saga").
SetLayoutPreset(bpmn.LayoutLinear).
StartEvent("saga_started").Next("reserve_stock").
ServiceTask("reserve_stock", "1. Reserve Stock", "inventory_service").
Next("debit_account").
ServiceTask("debit_account", "2. Debit Account", "ledger_service").
Next("issue_ticket").
ServiceTask("issue_ticket", "3. Issue Ticket", "ticketing_service").
Next("saga_complete").
EndEvent("saga_complete", "Saga Completed Successfully")
}
<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL"
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC"
xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI"
id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn">
<process id="checkout_saga" isExecutable="true">
<startEvent id="saga_started" name="Saga Started" />
<serviceTask id="reserve_stock" name="1. Reserve Stock" />
<boundaryEvent id="comp_stock" attachedToRef="reserve_stock">
<compensateEventDefinition />
</boundaryEvent>
<serviceTask id="release_stock" name="Release Stock" isForCompensation="true" />
<association sourceRef="comp_stock" targetRef="release_stock" />
</process>
</definitions>
<!-- Drop-in microservice saga diagram -->
<nativebpm-viewer
template="saga-compensation"
height="280px"
mode="shadow">
</nativebpm-viewer>
Space-depth cosmic observability for 30–50+ node distributed clusters, consensus quorums (≥ 3/5), and TiDB data region shard clouds rendered at 60 FPS in WebAssembly. Космическая визуализация распределенной инфраструктуры (Cloudflare Ingress, FastCGI воркеры, KeyDB mesh и 5-узелковый TiKV Multi-Raft с поясом регионов данных TiDB) на 60 FPS через WebAssembly.
Специализированные иконки вместо стандартной нотации BPMN
При отображении сетевой топологии и СУБД стандартные прямоугольные блоки BPMN заменяются векторными пиктограммами цилиндров баз данных, туннелей и воркеров с помощью методов-обёрток в Go SDK:
Отрисовывает многоуровневый цилиндр шардированной БД с сегментами реплик и консенсусом. Поддерживает db-tikv-raft, db-tidb-sql, db-yugabyte, db-postgres.
Отрисовывает двунаправленный высокоскоростной сетевой туннель с пиктограммой QUIC или шлюза. Поддерживает net-cloudflare-edge, net-argo-quic, net-load-balancer.
Отрисовывает 6-зубчатую шестерню рабочего пула FastCGI/PHP-FPM или ядра воркера с сателлитами-дочерними процессами (Moons).
g := nativebpm.NewGalaxy("sre_cluster", "Production SRE Galactic Cluster")
// 1. Cloudflare Anycast Ingress
g.StarSystem("edge_galaxy", "Cloudflare Edge").
AsSupernova("cf_anycast", "Cloudflare Anycast Core").
WithOrbit(140.0, 0.02).
Planet("tunnel_1", "Argo QUIC Hamina", "fin-1").AsNetworkNode("net-argo-quic").
Planet("tunnel_2", "Argo QUIC Hamina", "fin-2").AsNetworkNode("net-argo-quic")
// 2. TiKV Multi-Raft with Quorum Shield and TiDB Data Regions
g.StarSystem("storage_galaxy", "TiKV Multi-Raft & TiDB Regions").
AsRaftLeader("tikv_fin_1", "TiKV Master Leader :20160").
WithQuorumShield(3, 5).
WithOrbit(220.0, 0.015).
Planet("tikv_fin_2", "TiKV Follower", "fin-2").AsDatabaseNode("db-tikv-raft").
Planet("tikv_fin_3", "TiKV Follower", "fin-3").AsDatabaseNode("db-tikv-raft").
Planet("tikv_fin_4", "TiKV Follower", "fin-4").AsDatabaseNode("db-tikv-raft").
Planet("tikv_fin_5", "TiKV Follower", "fin-5").AsDatabaseNode("db-tikv-raft").
WithRegionAsteroidBelt(1000 /* count */, 96.0 /* sizeMB */)
// 3. Interstellar Hyperlane with Telemetry
g.Hyperlane("hl_edge_compute", "edge_galaxy", "compute_galaxy").
WithProtocol("QUIC :7844 (0 WAN Drop)").
WithTelemetryRate(15000.0).
WithLatency(0.4)
// Export to JSON or execute layout
jsonBytes, err := g.ToJSON()<!-- 1. Include NativeBPM Widgets SDK (WASM accelerated) -->
<script src="https://cdn.nativebpm.com/static/nativebpm-widgets.js" defer></script>
<!-- 2. Drop-in Planetary Galaxy Element -->
<nativebpm-galaxy
universe-id="sre_cluster"
speed="1.0"
mode="shadow"
allowed-origins="https://app.company.com">
</nativebpm-galaxy>
Elevated containers with obsidian background, glowing borders, and hover micro-interactions. Контейнеры с глубоким темным фоном, эффектами свечения границ и микроанимациями.
Dark form inputs with focus rings and toggles. Темные поля ввода, выпадающие списки и переключатели с неоновым кольцом фокуса.
Feedback messages for confirmations, tips, warnings, and errors. Информационные плашки для подтверждений, советов, предупреждений и критических ошибок.
High-impact numerical statistics for dashboards and marketing pages. Числовые показатели для дашбордов и маркетинговых страниц.
Dark data tables with clean borders and hover states. Таблицы данных с чистыми границами, подсветкой строк при наведении и статусами.
| inst-849201 | Wasm Engine | |||
| inst-849199 | Go Native | |||
| inst-849195 | Go Native |