Packages

All five packages are published under the @streamline-pulse scope with synchronized versions — a release bumps them together, so mixing versions is never something you have to reason about.

Which ones do I need?

I am building…	Install
A React app	formkrafter-react
A Vue 3 app	formkrafter-vue
Plain HTML, or another framework	formkrafter-wc
A React Native or Expo app	formkrafter-react-native
A backend that validates submissions	formkrafter-core

Tip

The UI packages depend on formkrafter-core transitively — you never install it alongside them just to get types. Install it directly only where there is no DOM.

formkrafter-core

Headless TypeScript: no DOM, no framework. Runs in browsers, Node, Bun and workers.

Area	Exports
Spec ops	addBrick, removeBrick, moveBrick, duplicateBrick, updateBrickConfigs, updateBrickStyles, updateBrickValidations, updateBrickRules, SpecHistory
Addressing	getBrickAt, pointerFromPath, iterateBricks, iterateSchemaBricks
Validation	validateFormData, validateBrickSpecData, validateBrickSpecDataDetailed, buildValidationSchema, registerValidationMessages, defaultValidationMessage
Spec health	lintSpec, SpecIssue, SpecIssueCode
Custom bricks	getBrickData, wrapBrickData, normalizeOptions, interpolateTemplate, parseHeaderLines, appendSearchParam
Rules	runSandboxed, evalBrickCode, getAffectedProperties, SandboxJsRunnerService, UnsafeEvalJsRunnerService
Services	services, FetchDataSourceService, Base64FileUploadService, UrlFileUploadService, FetchSpecSourceService, FetchOptionSourceService
Nested forms	expandSpec, hasNestedForms
Form.io	convertFormioForm
i18n helpers	resolveLocalizedText, resolveLocalizedRecord, isLocalizedObject
Types	BrickSpec, BrickType, Validation, Validator, Rule, Effect, ValidationResult, SpecUpdate, Operation

import { validateFormData, expandSpec } from '@streamline-pulse/formkrafter-core'

formkrafter-wc

The UI as Stencil Web Components. The package entry is the custom elements build — tree-shakeable and ESM-only:

Bundler

import '@streamline-pulse/formkrafter-wc'            // registers the elements
import '@streamline-pulse/formkrafter-wc/styles.css' // opt-in, 1.6 KB gzipped

Script tag / CDN

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@streamline-pulse/formkrafter-wc@0.21.0/dist/formkrafter-wc/formkrafter-wc.css"
/>
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@streamline-pulse/formkrafter-wc@0.21.0/dist/formkrafter-wc/formkrafter-wc.esm.js"
></script>

A lazy-loading bundle that registers the elements on demand. Pin a version: an unpinned CDN URL resolves to the latest release, so a major bump would reach your page unannounced. The plain HTML demo is built exactly this way.

Beyond the components it also exports the brick registry and the chrome translations:

Area	Exports
Registry	registerBrick, registerBricks, getBrick, getBrickMolds, getBrickMoldsGroupedByCategory, newBrickSpec, createBrick, h
Built-in bricks	registerDefaultBricks, plus all 30 brick instances (textInputBrick, selectBrick, dataGridBrick, …)
i18n	setFkTranslations, frFkTranslations, fkT, fkTOr
Event types	SpecChangeDetail, DataChangeDetail, BrickConfigsChangeDetail, …

formkrafter-react and formkrafter-vue

Thin wrappers generated from the same Web Components, with typed props and events. They export the components only — types come from -core, styles from -wc.

React

import { FkFormBuilder, FkFormRender } from '@streamline-pulse/formkrafter-react'

Props are camelCase; events are onSpecChange, onFormDataChange, onFormSubmit.

Vue

import { FkFormBuilder, FkFormRender } from '@streamline-pulse/formkrafter-vue'

Vue 3 camelizes event names, so @spec-change and @specChange both work.

See components for the full prop, event and method reference.

formkrafter-react-native

A renderer-only package for React Native and Expo — no Web Components involved, so no builder either. It shares core’s validation, rules engine and option parsing with the web renderer, and renders the bricks with native primitives.

Area	Exports
Rendering	FormRenderer (with validate()/submit() through a ref), BrickRenderer
Engine	FormEngine, useFormEngine — the renderer’s state machine, usable standalone
Registry	createNativeBrick, registerNativeBrick, registerNativeBricks, getNativeBrick, registerDefaultNativeBricks, Field
Theming	FkThemeProvider, useFkTheme, fkLightTheme, fkDarkTheme

Brick coverage: text variants, number, checkbox, select and multi-select with the same option sources as the web (static, remote HTTP with search and {token} interpolation, catalog, dataMap, sandboxed JS), radio, select boxes, tags, address, content, hidden, the data grid (rows as cards, per-row validation), the recap summary (same collectRecapItems walk as the web brick) the stepper wizard with per-step validation and the tabs layout with its validate-before-leaving gate, plus the column/row/group layouts — and grid rows count in the global validate() verdict. Two entry points carry the bricks that need a native module, so applications opt in and everyone else never resolves it: formkrafter-react-native/date (@react-native-community/datetimepicker, registerNativeDateBricks()) and formkrafter-react-native/file (expo-document-picker, registerNativeFileBrick(), uploads through core’s fileUploadService). Still web-only: signature and code. Bricks without a native renderer show an explicit placeholder rather than failing.

Versioning and releases

Releases are automated with Changesets: one PR per release, all packages bumped together, published from CI. Each package’s changelog lists exactly what shipped in its version.

Next steps

Components referenceProps, events and methods of the builder and the renderer.

Form specsThe types and operations exported by the core, in context.

ServicesThe five injection points and their default implementations.