# yamlform

> JavaScript library to create forms using YAML. Allows you to update YAML based on page interactions.

Latest version **0.0.9** (published 2024-07-23) · SEE LICENSE IN LICENSE license · 0 weekly downloads

## Install

```sh
npm install yamlform
pnpm add yamlform
yarn add yamlform
bun add yamlform
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.9 |
| Published | 2024-07-23 |
| First published | 2023-11-26 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 103.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Faraz Farukh Tamboli |
| Maintainers | tamboli |
| Keywords | yamlform, yaml, form, dynamic, javascript, generate, automated, update, webpage |

## Links

- npm: https://www.npmjs.com/package/yamlform
- Repository: https://github.com/alpharithmic/yamlform
- Homepage: https://github.com/alpharithmic/yamlform#readme
- Issues: https://github.com/alpharithmic/yamlform/issues
- npm.io page: https://npm.io/package/yamlform

## Dependencies (1)

- [jquery](https://npm.io/package/jquery.md) ^3.5.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.9 (latest) — 2024-07-23
- 0.0.8 — 2024-06-13
- 0.0.7 — 2024-06-08
- 0.0.6 — 2023-12-14
- 0.0.5 — 2023-12-05
- 0.0.4 — 2023-12-01
- 0.0.3 — 2023-11-30
- 0.0.2 — 2023-11-26
- 0.0.1 — 2023-11-26
- 0.0.0 — 2023-11-26

## README

# yamlform

JavaScript library to create forms using YAML.

YAMLForm allows you to create HTML5 forms using simple YAML syntax. The dynamic forms will keep the underlying YAML data in sync with the form contents. YAMLForm will create forms as nested as the underlying YAML data is. It understands lists, objects, list of objects and multi-level nestings.


####Installation instructions

```
npm install yamlform
```

####Sample JavaScript client

#### index.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>YAMLForm Test Page</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript"></script>
    <script type="module">
      import { YAMLForm } from 'https://unpkg.com/yamlform@version/build/yamlform.js';

      const yaml_form = new YAMLForm('#settings-form', '#result');

      window.onload = function() {
            let yaml_data = `form:
      id: 3
      formula: "{Security.Ticker}.b"
      life: 1000`;

            let yaml_def = `form:
      id: textbox
      formula: textbox{"required":true}
      life: spinner{"min":20}`;

            let yaml_style = `form:
      id: background-color:gray
      formula: background-color:green
      life: background-color:red`;

            yaml_form.updateData(yaml_data);
            yaml_form.updateDefinition(yaml_def);
            yaml_form.updateStyle(yaml_style);
            yaml_form.render();
      }

      $('#settings-form').submit(function(event){
        event.preventDefault();
        console.log(yaml_form.getResultYamlData());
      });

      yaml_form.on('post_update', function(json_data) {
          console.log(json_data);
      });
    </script>
</head>
<body>
    <form action="" id="settings-form">
        <div id="result"></div>
        <input type="submit" value="Update" id="btn-update">
    </form>
</body>
</html>

```

---
_Source: https://npm.io/package/yamlform · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
