Getting started

By the end of this page you will have a form built visually, rendered in your framework, and validated on your server — all from the same file. It takes one install and about twenty lines of code.

Install

Pick the package matching your app. The framework wrappers pull in the Web Components and the core transitively.

React

npm

npm install @streamline-pulse/formkrafter-react

bun

bun add @streamline-pulse/formkrafter-react

pnpm

pnpm add @streamline-pulse/formkrafter-react

yarn

yarn add @streamline-pulse/formkrafter-react

Vue

npm

npm install @streamline-pulse/formkrafter-vue

bun

bun add @streamline-pulse/formkrafter-vue

pnpm

pnpm add @streamline-pulse/formkrafter-vue

yarn

yarn add @streamline-pulse/formkrafter-vue

Web Components

npm

npm install @streamline-pulse/formkrafter-wc

bun

bun add @streamline-pulse/formkrafter-wc

pnpm

pnpm add @streamline-pulse/formkrafter-wc

yarn

yarn add @streamline-pulse/formkrafter-wc

Tip

Install @streamline-pulse/formkrafter-core on its own only where there is no UI — a Node or Bun backend that validates submitted payloads. See packages for what each one contains.

Build and render a form

The builder produces a spec; the renderer consumes it. Wiring the two together is the whole integration:

1. Mount the builder and keep the spec it emits. Every edit fires specChange with the new spec — plus the RFC 6902 patches that produced it, if you want undo/redo or an audit trail.

2. Feed that spec to the renderer. It is plain JSON: store it, version it, fetch it back later.

3. Import the stylesheet once. It is opt-in and about 6 KB — skip it and style the .fk-* classes yourself if you prefer.

React

FormStudio.tsx

import { useState } from 'react'
import { FkFormBuilder, FkFormRender } from '@streamline-pulse/formkrafter-react'
import '@streamline-pulse/formkrafter-wc/styles.css'
import type { BrickSpec } from '@streamline-pulse/formkrafter-core'

export function FormStudio() {
  const [spec, setSpec] = useState<BrickSpec>()

  return (
    <>
      <FkFormBuilder onSpecChange={(e) => setSpec(e.detail.spec)} />

      {spec && (
        <FkFormRender
          spec={spec}
          onFormSubmit={(e) => console.log(e.detail.data)}
        />
      )}
    </>
  )
}

Vue

FormStudio.vue

<script setup lang="ts">
import { ref } from 'vue'
import { FkFormBuilder, FkFormRender } from '@streamline-pulse/formkrafter-vue'
import '@streamline-pulse/formkrafter-wc/styles.css'
import type { BrickSpec } from '@streamline-pulse/formkrafter-core'

const spec = ref<BrickSpec>()

function onSubmit(data: Record<string, unknown>) {
  console.log(data)
}
</script>

<template>
  <FkFormBuilder @spec-change="spec = $event.detail.spec" />

  <FkFormRender
    v-if="spec"
    :spec="spec"
    @form-submit="onSubmit($event.detail.data)"
  />
</template>

Web Components

index.html

<fk-form-builder></fk-form-builder>
<fk-form-render></fk-form-render>

<script type="module">
  import '@streamline-pulse/formkrafter-wc/dist/formkrafter-wc/formkrafter-wc.esm.js'
  import '@streamline-pulse/formkrafter-wc/styles.css'

  const builder = document.querySelector('fk-form-builder')
  const preview = document.querySelector('fk-form-render')

  builder.addEventListener('specChange', (e) => {
    preview.spec = e.detail.spec
  })

  preview.addEventListener('formSubmit', (e) => {
    console.log(e.detail.data)
  })
</script>

Validate on the server

The browser verdict is a convenience for your users; the server verdict is the one that counts. Both come from the same spec:

server/submit.ts

import { validateFormData } from '@streamline-pulse/formkrafter-core'
import type { BrickSpec } from '@streamline-pulse/formkrafter-core'

export async function submit(spec: BrickSpec, payload: unknown) {
  const { valid, errors } = validateFormData(spec, payload, 'en')

  if (!valid) {
    // { fullName: 'This field is required', 'contacts[0].email': 'Invalid email' }
    return { status: 422, errors }
  }

  return { status: 200, data: payload }
}

Caution

Fields hidden by a rule are excluded from validation on both sides, and empty strings count as missing. That is why re-implementing this check by hand on the backend tends to disagree with the frontend — use validateFormData.

Next steps

Form specsThe BrickSpec shape, the ops that edit it, and patches for undo/redo.

BricksThe 30 built-in bricks, and how to register bricks of your own.

Components referenceEvery prop, event and method of the builder and the renderer.

Dynamic rulesConditional visibility and computed values, without eval.

Live demoThe real builder running in the page, plus the full demo apps.

Coming from Form.ioConvert existing definitions and see what the migration buys you.