VEF Framework React

An opinionated React 19 framework for building enterprise internal platforms.

A typed API client, an antd v6 + Emotion component library, reusable hooks, pure utilities, an expression engine, and visual form & approval-flow editors.

Documentation | Quick Start | Packages

VEF Framework React is a pnpm-workspace monorepo of composable packages for building data-heavy internal platforms — API access, UI, state, and form/flow tooling that you would otherwise assemble yourself.

This README is intentionally brief. Full guides and reference material live on the documentation site.

Development status: actively developed. We prefer additive changes, but some releases may still include breaking changes — see the release notes.

Why VEF

• A typed API client over TanStack Query + axios, with business-error handling and automatic token refresh
• 100+ antd v6 + Emotion components, with TanStack Form wrappers (FormModal / FormDrawer / Crud)
• State utilities for Jotai, Zustand, and XState — pick the tool that fits the complexity
• A GoRules ZEN expression runtime for form linkage plus shared condition-operator vocabulary
• Visual form and approval-flow editors designed for forms with hundreds of fields
• Ships as dual ESM/CJS with TypeScript declarations

Packages

Package	Description
@vef-framework-react/core	API client (TanStack Query + axios), HttpClient with business errors & token refresh, state utilities, resumable chunked uploads, and an SSE client
@vef-framework-react/components	antd v6 + Emotion component library (100+ components), TanStack Form integration, and a semantic color/scene system
@vef-framework-react/hooks	Reusable React hooks — permission, event, code-set, upload, deep-compare, and more
@vef-framework-react/shared	Dependency-free utilities — tree, chrono, color, equality, path, string, event, task, and format helpers
@vef-framework-react/expression	GoRules ZEN expression runtime for form linkage plus shared condition-operator vocabulary
@vef-framework-react/starter	Ready-to-use layouts and auth components built on TanStack Router
@vef-framework-react/form-editor	Visual form-schema editor with ZEN-powered linkage expressions
@vef-framework-react/approval-flow-editor	Visual approval-flow editor on @xyflow/react with elkjs auto-layout
@vef-framework-react/dev	Shared ESLint / Stylelint / Commitlint configs, Vite plugins, and TypeScript configs

Quick Start

Requirements: React 19 or newer.

pnpm add @vef-framework-react/core @vef-framework-react/components @vef-framework-react/hooks @vef-framework-react/shared

Wrap your app in the framework providers, then compose API resources, forms, and views on top. See the documentation site for the full setup guide and examples.

Protected API Bodies

Configure the core HTTP client to exchange authenticated, non-plaintext JSON bodies with VEF Framework Go:

const http = createHttpClient({
  baseUrl: "/api",
  protectedBodyEncoding: {
    encoding: "aes-gcm+base64",
    key: "<standard-base64-key>"
  }
});

The key must decode to 16, 24, or 32 bytes. Requests and responses use X-Body-Encoding: aes-gcm+base64 with a raw Base64(12-byte random nonce || ciphertext || 16-byte tag) body. Multipart and binary bodies remain unchanged. The Go backend also supports sm4-gcm+base64; the browser client intentionally uses native Web Crypto AES-GCM only. Keep HTTPS enabled because a symmetric key shipped to browser code is extractable.

Development

This repository is a pnpm workspace and requires Node 22+ and pnpm.

pnpm install        # install dependencies
pnpm playground     # start the playground dev server
pnpm test           # run the test suite
pnpm typecheck      # typecheck all packages
pnpm lint           # lint and auto-fix
pnpm build          # build all packages

License

Apache-2.0