Introduction #

Start quickly with the syntax

Look up the full grammar

What is FORMKL? #

FORMKL is a markup language for creating forms, an open-source DSL (Domain Specific Language) to define form schemas and generate the corresponding HTML code. It is designed to be easy to learn and use, and to be consistent and highly readable as natural language.

Learn about features #

⚡️ Build forms in seconds

🍡 Mutiple responses

💪 Validation using operations and regex

💄 Styling with Element Plus

🎨 Custom themes

Demo #

You can visit the playground here: https://sandbox.formkl.org

The following syntax will be loaded to JavaScript object and can be rendered into UI using our Formkl Adapter.

formkl {
  "Personal Information" has {
    "Fullname" text;
    "Bio" paragraph;
  }
}

"Just the parser" example #

Install the parser

# install the package
npm install formkl

# with yarn
yarn add formkl

# with pnpm
pnpm add formkl

import FormklParser from "formkl";

const yourFormklSyntax = `
  formkl {
    "Personal Information" has {
      "Fullname" text;
      "Bio" paragraph;
    }
  }
`;

const parsedForm = FormklParser.parse(yourFormklSyntax);

The above formkl will be parsed into

{
  "sections": [
    {
      "title": "Personal Information",
      "key": "personal-information2",
      "multiple": false,
      "fields": [
        {
          "type": "text",
          "label": "Fullname",
          "require": false,
          "key": "fullname",
          "multiple": false
        },
        {
          "type": "paragraph",
          "label": "Bio",
          "require": false,
          "key": "bio",
          "multiple": false
        }
      ]
    }
  ]
}

This piece of JSON can be rendered into UI using our Formkl Adapter Or you can just use this to implement your own render logic.

Result:

Techstack #

We are currently working on Vue 3 support. React and Svelte support will be available soon.

❤️ If you want to help us, please contact us. We are looking for contributors.