open-index/open-npm huggingface dataset:
npm package: @formloom/schema
Description: Schema spec and validator for Formloom - LLM-driven dynamic form generation
Latest version: 0.1.0

# @formloom/schema

The core schema specification for Formloom. TypeScript types, constants, and a validator. Zero runtime dependencies.

## Installation

```bash
npm install @formloom/schema
```

## Schema Spec

A Formloom schema is a JSON object with this shape:

```json
{
  "version": "1.0",
  "title": "Contact Form",
  "description": "Please fill out your details",
  "submitLabel": "Send",
  "fields": [
    {
      "id": "email",
      "type": "text",
      "label": "Email Address",
      "placeholder": "you@example.com",
      "validation": {
        "required": true,
        "pattern": "^[^@]+@[^@]+\\.[^@]+$",
        "patternMessage": "Must be a valid email"
      }
    },
    {
      "id": "plan",
      "type": "radio",
      "label": "Plan",
      "options": [
        { "value": "free", "label": "Free" },
        { "value": "pro", "label": "Pro ($10/mo)" }
      ],
      "defaultValue": "free"
    }
  ]
}
```

### Field Types

These are **rendering primitives**, not semantic types. A text field with an email regex IS an email field.

| Type | Description | Extra Properties |
|------|-------------|-----------------|
| `text` | Single-line text input | `placeholder`, `defaultValue` (string) |
| `boolean` | Yes/no toggle | `defaultValue` (boolean) |
| `radio` | Pick one from options | `options` (required), `defaultValue` (string) |
| `select` | Dropdown / multi-select | `options` (required), `multiple`, `placeholder`, `defaultValue` (string or string[]) |
| `date` | Date picker | `placeholder`, `defaultValue` (ISO 8601 string) |

### Validation Rules

| Property | Type | Description |
|----------|------|-------------|
| `required` | boolean | Field must be filled |
| `pattern` | string | Regex (no delimiters) |
| `patternMessage` | string | Error message on pattern failure |

## Validator

```ts
import { validateSchema } from "@formloom/schema";

const result = validateSchema(maybeSchema);

if (result.valid) {
  // result.errors is []
} else {
  // result.errors is ValidationError[]
  // Each error has { path: string, message: string }
  console.log(result.errors);
}
```

The validator collects **all** errors rather than failing on the first one, so you can fix LLM output comprehensively.

## TypeScript Types

```ts
import type {
  FormloomSchema,
  FormField,
  TextField,
  BooleanField,
  RadioField,
  SelectField,
  DateField,
  FormloomData,
  FieldOption,
  ValidationRule,
  RenderHints,
} from "@formloom/schema";
```

## License

MIT
npm package: @formml/client
Description: The client to evaluate formml files for frontend
Author: Jindong Zhang
Latest version: 0.1.1

<p align="center">
  <a href="https://github.com/formml/formml">
    <picture>
      <source srcset="https://raw.githubusercontent.com/formml/formml/main/docs/logo/logo-bg.svg" media="(prefers-color-scheme: dark)">
      <img src="https://raw.githubusercontent.com/formml/formml/main/docs/logo/logo-color.svg" alt="FormML Logo" width="300">
    </picture>
  </a>
</p>

<h1 align="center">@formml/client</h1>

<p align="center">
  <a href="https://www.npmjs.com/package/@formml/client"><img src="https://img.shields.io/npm/v/@formml/client.svg" alt="npm version"></a>
  <a href="https://www.npmjs.com/package/@formml/client"><img src="https://img.shields.io/npm/dm/@formml/client.svg" alt="npm downloads"></a>
  <a href="https://github.com/formml/formml/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@formml/client.svg" alt="license"></a>
</p>

Core client-side implementation for [**FormML**](https://github.com/formml/formml), providing form state management, validation, and type-safe APIs for building UI framework bindings.

## Documentation

- [FormML Documentation](https://github.com/formml/formml#readme)
- [API Reference](./docs/globals.md)

## License

MIT © [Jindong Zhang](https://github.com/jindong-zhannng)
npm package: @formml/core
Description: The core package of formml which provides APIs to evaluate formml schema files.
Author: Jindong Zhang
Latest version: 0.1.1

<p align="center">
  <a href="https://github.com/formml/formml">
    <picture>
      <source srcset="https://raw.githubusercontent.com/formml/formml/main/docs/logo/logo-bg.svg" media="(prefers-color-scheme: dark)">
      <img src="https://raw.githubusercontent.com/formml/formml/main/docs/logo/logo-color.svg" alt="FormML Logo" width="300">
    </picture>
  </a>
</p>

<h1 align="center">@formml/core</h1>

<p align="center">
  <a href="https://www.npmjs.com/package/@formml/core"><img src="https://img.shields.io/npm/v/@formml/core.svg" alt="npm version"></a>
  <a href="https://www.npmjs.com/package/@formml/core"><img src="https://img.shields.io/npm/dm/@formml/core.svg" alt="npm downloads"></a>
  <a href="https://github.com/formml/formml/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@formml/core.svg" alt="license"></a>
</p>

Core package of [**FormML**](https://github.com/formml/formml), providing APIs for evaluating FormML Models in both browser and Node.js environments.

## Quick Start

```java
// sign-up.fml
form SignUp {
  @required("Let me know your cool name!")
  text     name
  @required @email
  text     email
  @required @minLength(8)
  text     password
  datetime birthday
}
```

```ts
// server.ts
import express from 'express'
import { parse } from '@formml/core'
import SignUp from './sign-up.fml'

const app = express()

app.post('/sign-up', (req, res) => {
  // Validate & parse plain object into rich object
  const data = parse(req.body, SignUp)
  // data is now:
  // {
  //   name: "John",
  //   email: "john@example.com",
  //   password: "password",
  //   birthday: Date("1999-12-31T00:00:00.000Z"),
  // }
  res.status(201).end()
})
```

## Documentation

- [FormML Documentation](https://github.com/formml/formml#readme)
- [API Reference](./docs/globals.md)

## License

MIT © [Jindong Zhang](https://github.com/jindong-zhannng)
npm package: @formml/dsl
Description: The parser of formml schema language
Author: Jindong Zhang
Latest version: 0.1.1

<p align="center">
  <a href="https://github.com/formml/formml">
    <picture>
      <source srcset="https://raw.githubusercontent.com/formml/formml/main/docs/logo/logo-bg.svg" media="(prefers-color-scheme: dark)">
      <img src="https://raw.githubusercontent.com/formml/formml/main/docs/logo/logo-color.svg" alt="FormML Logo" width="300">
    </picture>
  </a>
</p>

<h1 align="center">@formml/dsl</h1>

<p align="center">
  <a href="https://www.npmjs.com/package/@formml/dsl"><img src="https://img.shields.io/npm/v/@formml/dsl.svg" alt="npm version"></a>
  <a href="https://www.npmjs.com/package/@formml/dsl"><img src="https://img.shields.io/npm/dm/@formml/dsl.svg" alt="npm downloads"></a>
  <a href="https://github.com/formml/formml/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@formml/dsl.svg" alt="license"></a>
</p>

The domain-specific language (DSL) implementation for [**FormML**](https://github.com/formml/formml), providing the parser, type system, and language utilities for FormML Model files.

## Quick Start

```java
// sign-up.fml
form SignUp {
  @required("Let me know your cool name!")
  text     name
  @required @email
  text     email
  @required @minLength(8)
  text     password
  datetime birthday
}
```

## Documentation

- [FormML Documentation](https://github.com/formml/formml#readme)

## License

MIT © [Jindong Zhang](https://github.com/jindong-zhannng)
npm package: @formml/react
Description: The React bindings for FormML
Author: Jindong Zhang
Latest version: 0.1.1

<p align="center">
  <a href="https://github.com/formml/formml">
    <picture>
      <source srcset="https://raw.githubusercontent.com/formml/formml/main/docs/logo/logo-bg.svg" media="(prefers-color-scheme: dark)">
      <img src="https://raw.githubusercontent.com/formml/formml/main/docs/logo/logo-color.svg" alt="FormML Logo" width="300">
    </picture>
  </a>
</p>

<h1 align="center">@formml/react</h1>

<p align="center">
  <a href="https://www.npmjs.com/package/@formml/react"><img src="https://img.shields.io/npm/v/@formml/react.svg" alt="npm version"></a>
  <a href="https://www.npmjs.com/package/@formml/react"><img src="https://img.shields.io/npm/dm/@formml/react.svg" alt="npm downloads"></a>
  <a href="https://github.com/formml/formml/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@formml/react.svg" alt="license"></a>
</p>

React bindings for [**FormML**](https://github.com/formml/formml), providing hooks and components for seamless integration of FormML Models in React applications.

## Quick Start

```java
// sign-up.fml
form SignUp {
  @required("Let me know your cool name!")
  text     name
  @required @email
  text     email
  @required @minLength(8)
  text     password
  datetime birthday
}
```

```jsx
// SignUpForm.tsx
import { Field, ErrorMessage, useFormML } from '@formml/react'

import SignUpModel from './sign-up.fml'

function SignUpForm() {
  const { $form, FormML, handleSubmit } = useFormML(SignUpModel)

  const onSubmit = handleSubmit((data) => {
    console.log('Form submitted:', data)
  })

  return (
    <FormML>
      <form onSubmit={onSubmit}>
        <Field $bind={$form.name} />
        <ErrorMessage $bind={$form.name} />

        <Field $bind={$form.email} />
        <ErrorMessage $bind={$form.email} />

        <Field $bind={$form.password} />
        <ErrorMessage $bind={$form.password} />

        <Field $bind={$form.birthday} />
        <ErrorMessage $bind={$form.birthday} />

        <button>Sign Up</button>
      </form>
    </FormML>
  )
}
```

## Documentation

- [FormML Documentation](https://github.com/formml/formml#readme)
- [API Reference](./docs/globals.md)

## License

MIT © [Jindong Zhang](https://github.com/jindong-zhannng)
npm package: @formml/ts-plugin
Description: A TypeScript plugin for importing FormML files
Author: Jindong Zhang
Latest version: 0.1.1

<p align="center">
  <a href="https://github.com/formml/formml">
    <picture>
      <source srcset="https://raw.githubusercontent.com/formml/formml/main/docs/logo/logo-bg.svg" media="(prefers-color-scheme: dark)">
      <img src="https://raw.githubusercontent.com/formml/formml/main/docs/logo/logo-color.svg" alt="FormML Logo" width="300">
    </picture>
  </a>
</p>

<h1 align="center">@formml/ts-plugin</h1>

<p align="center">
  <a href="https://www.npmjs.com/package/@formml/ts-plugin"><img src="https://img.shields.io/npm/v/@formml/ts-plugin.svg" alt="npm version"></a>
  <a href="https://www.npmjs.com/package/@formml/ts-plugin"><img src="https://img.shields.io/npm/dm/@formml/ts-plugin.svg" alt="npm downloads"></a>
  <a href="https://github.com/formml/formml/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@formml/ts-plugin.svg" alt="license"></a>
</p>

A [TypeScript Language Service Plugin](https://github.com/microsoft/TypeScript/wiki/Writing-a-Language-Service-Plugin) that enables real-time type inference and IntelliSense for FormML Models imported in TypeScript files.

## Features

- Real-time type inference for FormML Models
- IntelliSense support (autocompletion, hover info)
- Seamless integration with TypeScript projects
- No code generation required

## Installation

1. Install the plugin:

```bash
npm install @formml/ts-plugin --save-dev
```

2. Configure TypeScript to use the plugin in your `tsconfig.json`:

```json
{
  "compilerOptions": {
    "plugins": [{ "name": "@formml/ts-plugin" }]
  }
}
```

3. (For VSCode users) Configure VSCode to [use the workspace version of TypeScript](https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-the-workspace-version-of-typescript)

## Usage

Once installed and configured, you can import FormML files directly in your TypeScript code:

```ts
import SignUp from './sign-up.fml'

// Full type information available!
const { $form } = useFormML(SignUp)
```

## Documentation

For more detailed information about FormML and `@formml/ts-plugin`:

- [FormML Documentation](https://github.com/formml/formml#readme)
- [Why not code generation?](https://github.com/formml/formml#why-not-code-generation)
- [Using `tsc` to check FormML Model types](https://github.com/formml/formml#using-tsc-to-check-formml-model-types)

## License

MIT © [Jindong Zhang](https://github.com/jindong-z)
npm package: @formml/utils
Description: The utility package for formml.
Author: Jindong Zhang
Latest version: 0.1.0

<p align="center">
  <a href="https://github.com/formml/formml">
    <picture>
      <source srcset="https://raw.githubusercontent.com/formml/formml/main/docs/logo/logo-bg.svg" media="(prefers-color-scheme: dark)">
      <img src="https://raw.githubusercontent.com/formml/formml/main/docs/logo/logo-color.svg" alt="FormML Logo" width="300">
    </picture>
  </a>
</p>

<h1 align="center">@formml/utils</h1>

<p align="center">
  <a href="https://www.npmjs.com/package/@formml/utils"><img src="https://img.shields.io/npm/v/@formml/utils.svg" alt="npm version"></a>
  <a href="https://www.npmjs.com/package/@formml/utils"><img src="https://img.shields.io/npm/dm/@formml/utils.svg" alt="npm downloads"></a>
  <a href="https://github.com/formml/formml/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@formml/utils.svg" alt="license"></a>
</p>

Utility functions and shared code for FormML packages.

## Documentation

For full documentation, visit the [FormML Documentation](https://github.com/formml/formml#readme).

## License

MIT © [Jindong Zhang](https://github.com/jindong-zhannng)
npm package: @formmy.app/chat
Description: Official React SDK for Formmy Chat - AI chatbot widgets and headless hooks
Author: Formmy
Latest version: 0.0.23

# @formmy.app/chat

AI agents that sell, support, and convert. RAG + Voice + Chat — drop-in React SDK.

## Installation

```bash
npm install @formmy.app/chat react ai @ai-sdk/react
```

## Quick Start

```tsx
import { FormmyProvider, ChatBubble } from "@formmy.app/chat/react";

function App() {
  return (
    <FormmyProvider publishableKey="formmy_pk_live_xxx">
      <YourApp />
      <ChatBubble agentId="agent_xxx" />
    </FormmyProvider>
  );
}
```

## Keys

| Key | Prefix | Use |
|-----|--------|-----|
| Secret | `formmy_sk_live_` | Backend — full API access |
| Publishable | `formmy_pk_live_` | Frontend — chat & voice only |

Get your keys at [formmy.app/dashboard/api-keys](https://formmy.app/dashboard/api-keys).

## Documentation

- **[Getting Started](./docs/getting-started.md)** — installation, auth, chat widget & headless hook
- **[Voice API](./docs/voice-api.md)** — real-time voice conversations over WebSocket

## API Reference

### Backend Client

```typescript
import { Formmy } from "@formmy.app/chat";

const formmy = new Formmy({ secretKey: "formmy_sk_live_xxx" });

formmy.agents.list();
formmy.agents.get(agentId);
formmy.agents.create({ name, instructions, welcomeMessage?, model? });
formmy.agents.update(agentId, { name?, instructions?, model? });
formmy.agents.delete(agentId);

formmy.chat.stream({ agentId, message, conversationId? }); // streaming Response
formmy.chat.send({ agentId, message, conversationId? });  // complete response

formmy.conversations.list(agentId, { limit?, cursor? });
formmy.conversations.get(agentId, conversationId);

// Documents (RAG Knowledge Base)
formmy.documents.create(agentId, { title, content, metadata? });
formmy.documents.list(agentId, { limit?, cursor? });
formmy.documents.get(agentId, documentId);
formmy.documents.update(agentId, documentId, { title?, content, metadata? });
formmy.documents.delete(agentId, documentId);
formmy.documents.bulkCreate(agentId, documents[]); // max 20
formmy.documents.search(agentId, query, { topK?, contextType? });
```

### React Components

```tsx
<FormmyProvider publishableKey="formmy_pk_live_xxx">
  <ChatBubble
    agentId="agent_xxx"
    position="bottom-right"   // bottom-right | bottom-left
    theme="light"             // light | dark
    welcomeMessage="Hello!"   // optional override
  />
</FormmyProvider>
```

### Headless Hook

```typescript
const { messages, input, setInput, handleSubmit, isLoading, error, reload, stop } =
  useFormmyChat({ agentId });
```

## TypeScript

```typescript
import type { Message, Agent, FormmyConfig } from "@formmy.app/chat";
```

## License

MIT
npm package: @formmy/core
Description: 一个简单但是够用的表单核心库
Author: MiseryLee
Latest version: 1.1.1

# `@formmy/core`

formmy 是一个简单够用的表单辅助库，它具有以下特性：
- 完善的类型推导能力，能够根据至多下钻 5 层结构并正确推导字段数据类型
- 灵活的校验器配置，可以在表单维度或者字段维度进行配置，支持配置值依赖、异步校验等
- 支持订阅表单或字段的值、校验错误变化事件，拓展定制化的回调逻辑
- 完善且友好的 api 设计，几乎零门槛上手使用
- UI 无关，可以在任何支持 js 运行的环境下使用

## Usage

```typescript
import { FormApi } from '@formmy/core';

interface FormValues {
  username: string;
  password: string;
}

const form = new FormApi({
  initialValues: {
    username: '',
    password: '',
  },
  validators: {
    username: [
      {
        validate: (v) => (!v ? 'username is required' : undefined),
        deps: [],
      },
    ],
    password: [
      {
        validate: (v) => (!v ? 'password is required' : undefined),
        deps: [],
      },
      {
        validate: (v) => (v.length > 30 ? 'password more than 30 characters' : undefined),
      },
    ],
  },
});

// 更新字段值
form.getField('username').setValue('Lee');
form.getField('password').setValue('123456');

// 批量更新字段值
form.setValues((prev) => ({
  ...prev,
  username: 'MiseryLee',
}));

// 触发校验
await form.validate();
await form.validate('password');

// 提交
const isSuccess = await form.submit(
  (values) => {
    // 校验成功并获取到完整的表单值
    requestRemote(values);
  },
  (errors) => {
    // 校验失败并获取到失败信息
    handleError(errors);
  }
);

// 监听值变化
const unsub = form.subscribe('values', {
  // 选择监听，如果不传则监听整个表单
  selector: (state) => state.username,
  listener(values) {
    // 当表单值发生变化时触发回调
  },
  // 是否立即触发，默认为 false
  // 默认的触发逻辑是在一个事件循环中将所有触发事件合并，并在事件循环结束后一次性触发
  // 在特定的业务场景下，可能需要在值变更时立即同步触发
  immediate: true,
  // 是否忽略 reset 导致的变更事件
  ignoreReset: true,
});
// 解除监听
unsub();

// 监听校验结果
form.subscribe('errors', {
  listener(errors) {
    // 当校验结果变化时触发回调
  },
});

// 直接监听字段
form.subscribeField('username', 'value', {
  listener(value) {
    // 当字段值变化时触发回调
  },
});

// 重置表单到初始状态
form.reset();

// 销毁表单实例
// 这个行为会销毁这个表单实例中关联的所有换成、引用和订阅器
// 因此一旦实例被销毁后，此后的其他方法调用是无法正常工作的
form.destroy();

```
npm package: @formmy/react
Description: 一个简单但是够用的表单 react api
Author: MiseryLee
Latest version: 1.2.1

# `@formmy/react`

formmy 库在 react 框架下的适配库，提供了相应的组件、hooks 方便业务使用

## Usage

使用方法参考示例：[Example](https://github.com/miserylee/formmy/blob/main/packages/example/src/examples/LoginForm.tsx)  
核心 API 介绍：[@formmy/core](https://github.com/miserylee/formmy/blob/main/packages/core/README.md)
npm package: @formmy/store
Description: 一个简单但是够用的状态管理库
Author: MiseryLee
Latest version: 1.1.0

# `@formmy/store`

这是一个为 formmy 设计的状态管理类，它具有以下特性：
- 在设计上它是和 formmy 解耦的，可以被用在任何合适的场景中
- 更新状态的方法支持直接设置值，也支持 reducer 的方式更新
- 值变更的监听器可以是同步或者异步的
- 支持进行状态重置，恢复到初始状态
- 接口设计友好，类型完备

## Usage

```typescript
import Store, { updateState } from '@formmy/store';

// 创建 store
const store = new Store({ username: '', password: '' });

// 获取 state
console.log(store.state);

// 监听值变更
store.subscribe({
  // 值选择器，不传时直接选择完整的 state
  selector: (state) => state.username,
  listener: (value) => {
    // 值变更时触发回调，会进行浅比较来避免无谓的更新
  },
  // 是否立即触发，默认为 false，即异步触发
  immediate: true,
  // 是否忽略 reset 引起的值变更，默认为 false
  ignoreReset: true,
});

// 更新值
store.update({ username: 'Lee', password: '123456' });
// reducer 的方式更新值
store.update((prev) => ({
  ...prev,
  username: 'MiseryLee',
}));

// 重置状态到初始值
store.reset();

// 清空监听器
store.clear();

// 帮助函数，使用 reducer 函数来进行对象更新
updateState({ foo: 'bar' }, (prev) => ({
  ...prev,
  foo: 'baz',
}));

//
```
npm package: @formo/analytics
Description: <p align="center"> 	<h1 align="center"><b>Formo Web SDK</b></h1> <p align="center">     Unified analytics for onchain apps.     <br />     <a href="https://formo.so">Website</a>     ·     <a href="https://docs.formo.so">Docs</a>     ·     <a href="https:/
Author: Yos Riady
Latest version: 1.28.6

<p align="center">
	<h1 align="center"><b>Formo Web SDK</b></h1>
<p align="center">
    Unified analytics for onchain apps.
    <br />
    <a href="https://formo.so">Website</a>
    ·
    <a href="https://docs.formo.so">Docs</a>
    ·
    <a href="https://app.formo.so">Dashboard</a>
    ·
    <a href="https://formo.so/slack">Slack</a>
    ·
    <a href="https://twitter.com/getformo">X</a>
  </p>
</p>

## Installation

The Formo Web SDK is a Javascript library that allows you to track user event data from your website and app.

You can install Formo on:
- [Wagmi](https://docs.formo.so/install#wagmi) (recommended)
- [HTML Snippet](https://docs.formo.so/install#html-snippet)
- [React](https://docs.formo.so/install#react)
- [Next.js](https://docs.formo.so/install#next-js)

## Configuration

Visit Formo's [Developer Docs](https://docs.formo.so) for detailed guides on local testing, debugging, and consent management.

## Methodology

Learn how Formo handles [onchain attribution](https://docs.formo.so/data/attribution) and [data collection](https://docs.formo.so/data/what-we-collect).

## Support

Join the [Formo community Slack channel](https://formo.so/slack) for help and questions.

## Contributing

[Contributions](https://github.com/getformo/sdk/blob/main/CONTRIBUTING.md) are welcome! Feel free to open fixes and feature suggestions.
npm package: @formo/analytics-node
Description: <p align="center"> 	<h1 align="center"><b>Formo Node SDK</b></h1> <p align="center">     Server-side analytics for Node.js applications.     <br />     <a href="https://formo.so">Website</a>     ·     <a href="https://docs.formo.so">Docs</a>     ·     <a 
Latest version: 1.0.2

<p align="center">
	<h1 align="center"><b>Formo Node SDK</b></h1>
<p align="center">
    Server-side analytics for Node.js applications.
    <br />
    <a href="https://formo.so">Website</a>
    ·
    <a href="https://docs.formo.so">Docs</a>
    ·
    <a href="https://app.formo.so">Dashboard</a>
    ·
    <a href="https://formo.so/slack">Slack</a>
    ·
    <a href="https://twitter.com/getformo">X</a>
  </p>
</p>

## Installation

```bash
npm install @formo/analytics-node
# or
pnpm add @formo/analytics-node
```

## Configuration

Visit Formo's [Developer Docs](https://docs.formo.so/sdks/server) for detailed guides on configuration, batching, and error handling. 

## Support

Join the [Formo community Slack channel](https://formo.so/slack) for help and questions.

## Contributing

[Contributions](https://github.com/getformo/sdk-node/blob/main/CONTRIBUTING.md) are welcome! Feel free to open fixes and feature suggestions.