Schema Builder

Jouw formulier is een JSON-object.
Zo simpel.

Definieer complexe datastructuur in je editor. Onze parser verandert JSON direct in valid HTML5. Geen drag-and-drop, puur code-first.

Bekijk schema's API Referentie

Formly Schema Builder editor interface met JSON structuur

JSON Syntax Highlighting

Live preview & Editor

Schrijf je schema, zie de resultaten direct. Wij zorgen voor de transformatie naar HTML5.

schema-editor.json

const schema = {
  "key": "kenteken-formulier",
  "components": [
    {
      "key": "merk",
      "type": "input",
      "templateOptions": {
        "label": "Merk",
        "placeholder": "Bijv. Toyota"
      }
    },
    {
      "key": "model",
      "type": "select",
      "templateOptions": {
        "label": "Model",
        "options": [
          { "label": "Corolla", "value": "corolla" },
          { "label": "Yaris", "value": "yaris" }
        ]
      }
    }
  ]
};

Live Preview

Veldtypes

Van simpel tot complex

Onze bibliotheek bevat 40+ standaard veldtypes die je direct kunt hergebruiken.

Input & Textarea

Standaard tekstvelden met geavanceerde validatie via JSON-schema definities.

"type": "input"

E-mail & URL

Type specifieke velden met ingebouwde regex-validatie en feedback.

"type": "email"

Select & Multi-select

Dynamische optielijsten uit een array of API-endpoint. Perfect voor A/B testing.

"type": "select"

Date & Time

Gebruiksvriendelijke datumbereiken, kalenders en tijdselectoren.

"type": "date"

Wysiwyg Editor

Vrij bewerkbare tekstgebieden met rich text mogelijkheden voor lange teksten.

"type": "wysiwyg"

Dynamic Arrays

Voeg dynamisch items toe aan een lijst, zoals factuurregels of e-mailadressen.

"type": "dynamic-list"

Logica & Flow

Conditionele logica op basis van data

Gebruik expressionProperties om velden te tonen of verbergen op basis van eerdere antwoorden. Formly bouwt hier een efficiënte beslisboom voor.

Stel je formulier heeft een vraag over "Verblijfplaats". Afhankelijk van of de gebruiker "Nederland" of "Buitenland" kiest, verschijnen daaropvolgende velden.

Start: Verblijfplaats?

Nederland
BTW-nummer

→ Toon

Buitenland
Landcode

→ Toon

Schema management

Git-vriendelijk versiebeheer

Schema versieing

Elk schema is een JSON-bestand. Push je schema naar GitHub of GitLab en beheer het net als je code. Formly slaat metadata op over de maker en timestamp.

Back & Rollback

Maak fouten? Geen zorgen. Formly ondersteunt snapshots. Rollback naar een vorige versie van je schema binnen één API-call.

Onboarding

Van legacy HTML naar Formly

Heb je al bestaande formulieren in HTML? Onze migratie-tool scant je bestanden, identificeert velden en genereert een JSON-schema.

De tool is volledig backwards compatible, zodat je formulieren na de migratie onmiddellijk beschikbaar zijn voor gebruikers. Ondersteund voor <form>, <input> en standaard validatie-attributes.

Start met schema's

Download de quickstart gids en bouw je eerste JSON-formulier in 5 minuten.

Download Quickstart API Referentie

Jouw formulier is een JSON-object. Zo simpel.