FormKrafter
MIT · Web Components · React · Vue · React Native

Construisez vos formulaires
une fois, exécutez-les partout

Un builder de formulaires drag & drop et son renderer, utilisables en HTML pur, React, Vue ou React Native — avec validation, règles dynamiques, formulaires imbriqués et i18n intégrés.

Commencer →Voir la démo live

$ bun add @streamline-pulse/formkrafter-react

Comment ça marche

Un spec JSON. Trois étapes. Zéro divergence.

  1. 01

    Décrire

    Chaque formulaire est un arbre JSON de bricks — champs, panels, validations, règles. Exportable, diffable, stockable où vous voulez.

    { id: 'email', validations: [required] }
  2. 02

    Valider

    Le même spec compile un schéma Ajv — côté client en temps réel, côté serveur avec exactement le même verdict.

    validateFormData(spec, data, 'fr')
  3. 03

    Afficher

    Un seul spec, quatre renderers : Web Components nus, React, Vue ou React Native — au choix par app, une seule source de vérité.

    <FkFormRender spec={spec} />
Intégrations

Un comportement, quatre façons de le brancher.

Web Components

Custom elements purs (Stencil). Aucune dépendance de framework.

bun add @streamline-pulse/formkrafter-wc

React

Wrappers fins générés depuis les web components — props et événements typés.

bun add @streamline-pulse/formkrafter-react

Vue 3

Même surface, composants Vue natifs.

bun add @streamline-pulse/formkrafter-vue

React Native

Renderer en primitives natives pour React Native et Expo. Mêmes specs, mêmes règles, même validation.

bun add @streamline-pulse/formkrafter-react-native
Atouts

Pourquoi FormKrafter.

🧩

Agnostique du framework

Web Components à la base ; wrappers React et Vue générés depuis la même source.

⚡

Léger, vraiment

~130 Ko gzippés pour une page qui fait tourner le builder complet. Éditeur de code en lazy, zéro framework CSS.

🛡️

Règles sans eval

JSON Logic ou JS sandboxé par un interpréteur AST : compatible CSP, budget d’exécution.

📄

Des specs, pas des composants

Formulaires en JSON portable. Patches RFC 6902 bidirectionnels, undo/redo intégré.

🔁

Convertisseur Form.io

convertFormioForm migre champs, wizards, validations et uploads — et signale le reste.

🌍

i18n de bout en bout

Contenu et chrome du builder localisés ; anglais et français fournis, extensible.

En pratique

Un builder, un renderer, un événement.

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

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

  return (
    <>
      <FkFormBuilder onSpecChange={(e) => setSpec(e.detail.spec)} />
      {spec && (
        <FkFormRender
          spec={spec}
          onFormSubmit={(e) => console.log(e.detail.data)}
        />
      )}
    </>
  )
}
Migration

Vous venez de Form.io ?

Divisez par ~3,5 le poids gzippé de votre stack, abandonnez Bootstrap, et voyez vos définitions stockées fondre de 3 à 5,5× sur des exports de production réels.

470 Ko → 130 Kospecs ÷ 3–5,5
Guide de migration →
Cas d’usage

Là où ça sert, vraiment.

Outils internes & back-office

Gestion de dossiers, approbations, consoles d'admin — les formulaires que votre équipe ops touche chaque jour.

Services citoyens

Formulaires publics multilingues, documents officiels, règles d’éligibilité conditionnelles.

Onboarding & enquêtes

KYC, onboarding produit, feedback — des wizards avec validation par étape.

Builder embarqué

Donnez à vos propres clients un builder de formulaires — palette en marque blanche, votre modèle de données.

Prêt à construire ?

Ajoutez FormKrafter à l’app que vous avez déjà.

Commencer →Star sur GitHub

$ bun add @streamline-pulse/formkrafter-react