open-index/open-npm huggingface dataset:
npm package: @formbox/antd-theme
Description: Ant Design theme for Formbox Renderer
Latest version: 0.3.0

# @formbox/antd-theme

Ant Design theme for Formbox Renderer.

## Install

```bash
pnpm add @formbox/renderer @formbox/antd-theme
# or
npm install @formbox/renderer @formbox/antd-theme
```

## Use

```tsx
import Renderer from "@formbox/renderer";
import { theme } from "@formbox/antd-theme";
import "@formbox/antd-theme/style.css";

<Renderer fhirVersion="r5" questionnaire={questionnaire} theme={theme} />;
```
npm package: @formbox/fhir
Description: FHIR R4/R5 adapters and shared types for Formbox
Latest version: 0.3.0

# @formbox/fhir

FHIR R4/R5 adapter implementations and shared types used by Formbox packages.

## When to use

Use this package if you need direct access to Formbox FHIR adapters or versioned FHIR type helpers outside `@formbox/renderer`.

If you are only rendering forms, install `@formbox/renderer` and a theme package instead.

## Install

```bash
pnpm add @formbox/fhir
# or
npm install @formbox/fhir
```

## TypeScript note

If you use versioned type helpers (`QuestionnaireOf`, `QuestionnaireResponseOf`, etc.), install `@types/fhir` in your app as a dev dependency.

```bash
pnpm add -D @types/fhir
# or
npm install -D @types/fhir
```

## Exports

This package exports:

- R4 and R5 adapter classes for supported datatypes/resources
- Adapter contracts and shared FHIR types used by the adapter layer
- Versioned public type helpers such as:
  - `FhirVersion`
  - `QuestionnaireOf<V>`
  - `QuestionnaireResponseOf<V>`
  - `QuestionnaireItemOf<V>`
  - `AttachmentOf<V>`

## Usage

### Choose versioned types

```ts
import type { QuestionnaireOf } from "@formbox/fhir";

const questionnaire: QuestionnaireOf<"r5"> = {
  resourceType: "Questionnaire",
  status: "active",
  item: [{ linkId: "name", text: "Name", type: "string" }],
};
```

### Use adapters for version-specific fields

```ts
import {
  R4AttachmentAdapter,
  R5AttachmentAdapter,
  type Attachment,
} from "@formbox/fhir";

const r4 = new R4AttachmentAdapter();
const r5 = new R5AttachmentAdapter();

const r4Attachment: Attachment = {};
const r5Attachment: Attachment = {};

r4.setSize(r4Attachment, "128");
r5.setSize(r5Attachment, "128");

// R4 stores numeric size, adapter bridges as string
// R5 stores string size directly
```

## Design notes

- R5 adapters are pass-through for R5-native fields.
- R4 adapters handle conversion for R4/R5 structural differences.
- Shared generated types are intentionally conservative and exclude divergent unions.

## Contributor workflow

Run from repo root:

```bash
pnpm --filter @formbox/fhir lint
pnpm --filter @formbox/fhir typecheck
pnpm --filter @formbox/fhir test
pnpm --filter @formbox/fhir build
```

## Regenerating common types

`generated-types.ts` is generated. Do not edit it by hand.

```bash
pnpm --filter @formbox/fhir generate-types
```
npm package: @formbox/mantine-theme
Description: Mantine theme for Formbox Renderer
Latest version: 0.3.0

# @formbox/mantine-theme

Mantine theme for Formbox Renderer.

## Install

```bash
pnpm add @formbox/renderer @formbox/mantine-theme
# or
npm install @formbox/renderer @formbox/mantine-theme
```

## Use

Mantine components require a provider in the React tree. This package re-exports `MantineProvider` as `Provider`.

```tsx
import Renderer from "@formbox/renderer";
import { Provider, theme } from "@formbox/mantine-theme";
import "@formbox/mantine-theme/style.css";

<Provider>
  <Renderer fhirVersion="r5" questionnaire={questionnaire} theme={theme} />
</Provider>;
```
npm package: @formbox/nshuk-theme
Description: NHS Design theme for Formbox Renderer
Latest version: 0.3.0

# @formbox/nshuk-theme

NHS Design System theme for Formbox Renderer. See the NHS Design System at https://service-manual.nhs.uk/design-system.

## Install

```bash
pnpm add @formbox/renderer @formbox/nshuk-theme
# or
npm install @formbox/renderer @formbox/nshuk-theme
```

## Use

```tsx
import Renderer from "@formbox/renderer";
import { theme } from "@formbox/nshuk-theme";
import "@formbox/nshuk-theme/style.css";

<Renderer fhirVersion="r5" questionnaire={questionnaire} theme={theme} />;
```
npm package: @formbox/renderer
Description: Formbox Renderer for FHIR R4 and R5 Questionnaires
Latest version: 0.3.0

# @formbox/renderer

React renderer for FHIR R4 and R5 Questionnaires. You must provide a theme package.

## Install

```bash
pnpm add @formbox/renderer @formbox/hs-theme
# or
npm install @formbox/renderer @formbox/hs-theme
```

## Peer dependencies

Install these in your app (your package manager will usually warn you):

- react, react-dom
- mobx, mobx-react-lite, mobx-utils
- classnames
- fhirpath
- @lhncbc/ucum-lhc

## Usage

```tsx
import Renderer from "@formbox/renderer";
import { theme } from "@formbox/hs-theme";
import "@formbox/hs-theme/style.css";

function Form() {
  return (
    <Renderer fhirVersion="r5" questionnaire={questionnaire} theme={theme} />
  );
}
```

If you want strong typing, use the versioned type helpers from the renderer:

```ts
import type { QuestionnaireOf } from "@formbox/renderer";

const questionnaire: QuestionnaireOf<"r5"> = {
  resourceType: "Questionnaire",
  status: "active",
  item: [{ linkId: "first", text: "First name", type: "string" }],
};
```

These types map directly to `fhir/r4` or `fhir/r5` based on the version you pass.

## Renderer props

- `questionnaire` (required): FHIR Questionnaire resource.
- `theme` (required): Theme object.
- `defaultQuestionnaireResponse`: Initial QuestionnaireResponse value.
- `defaultLanguage`: Initial language value.
- `onChange`: Called on every response change.
- `onSubmit`: Called after validation passes.
- `onLanguageChange`: Called when user selects another language.
- `terminologyServerUrl`: Base URL for ValueSet `$expand` requests.
- `launchContext`: Named resources made available to expressions (for SDC `launchContext` support).
- `fhirVersion`: `"r4"` or `"r5"` (required).

## Partially controlled mode

Use `Renderer` from `@formbox/renderer/controlled` when `language` and `strings` are managed outside the renderer and the response is seeded from a default value.

```tsx
import Renderer from "@formbox/renderer/controlled";
import en from "@formbox/strings/en";

<Renderer
  fhirVersion="r5"
  questionnaire={questionnaire}
  defaultQuestionnaireResponse={questionnaireResponse}
  language={language}
  strings={en}
  onChange={onChange}
  onLanguageChange={onLanguageChange}
  theme={theme}
/>;
```

## Themes and custom themes

- Theme packages live under `themes/*` in this repo.
- Build your own theme with `@formbox/theme` (see `packages/theme/doc/index.md`).
npm package: @formbox/strings
Description: Localized UI strings for Formbox Renderer
Latest version: 0.3.0

# @formbox/strings

Localized UI strings for Formbox renderer packages.

## Install

```bash
pnpm add @formbox/strings
# or
npm install @formbox/strings
```

## Usage

Import all bundled locales:

```ts
import strings from "@formbox/strings";

const en = strings.en;
const ru = strings.ru;
```

Import a single locale:

```ts
import fi from "@formbox/strings/fi";
```

Example with `@formbox/renderer/controlled`:

```tsx
import ControlledRenderer from "@formbox/renderer/controlled";
import fi from "@formbox/strings/fi";

<ControlledRenderer
  fhirVersion="r5"
  questionnaire={questionnaire}
  defaultQuestionnaireResponse={questionnaireResponse}
  language="fi"
  strings={fi}
  onChange={onChange}
  onLanguageChange={onLanguageChange}
  theme={theme}
/>;
```

## Available locales

- `de`
- `en`
- `es`
- `fi`
- `fr`
- `it`
- `nl`
- `pl`
- `pt`
- `ru`
- `sv`
- `tr`

## Development

From repo root:

```bash
pnpm --filter @formbox/strings lint
pnpm --filter @formbox/strings typecheck
pnpm --filter @formbox/strings build
```
npm package: @formbricks/errors
Description: A helper package containing general error classes for Formbricks
Latest version: 0.1.0

# @formbricks/errors

> Error handling for @formbricks packages

## Installation

```bash
npm install @formbricks/errors
```

## Usage

```ts
import { Result, ok, err, okVoid } from "@formbricks/errors";

type CustomError = {
  code: "custom_error";
  message: string;
};

type AnotherCustomError = {
  code: "another_custom_error";
  message: string;
  anotherField: number;
};

type SuccessType = {
  id: string;
};

const test = (): Result<SuccessType, CustomError | AnotherCustomError> => {
  /* There are 4 ways to return a Result from this function */
  // return ok({ id: '123' })
  // return err({ code: 'custom_error', message: 'Custom error message' })
  // return err({ code: 'another_custom_error', message: 'Another custom error message', anotherField: 123 })
  /*
    If SuccessType is void
  */
  // return okVoid()
};

const result = test();

if (result.ok === true) {
  console.log(result.value.id); // you have full type safety here
} else if (result.error.code === "custom_error") {
  console.log(result.error.message); // you have full type safety here
} else if (result.error.code === "another_custom_error") {
  console.log(result.error.anotherField); // you have full type safety here
  console.log(result.error.message);
}
```

## Inspiration

- [Rust Result](https://doc.rust-lang.org/std/result/enum.Result.html)
- [true-myth](https://github.com/true-myth/true-myth)
npm package: @formbricks/n8n-nodes-formbricks
Description: A n8n node to connect Formbricks and send survey data to hundreds of other apps.
Author: PratikAwaik
Latest version: 1.0.2

# n8n-nodes-formbricks

This is an n8n community node. It lets you use Formbricks in your n8n workflows.

Formbricks is an open-source experience management solution that lets you understand what customers think & feel about your product by running highly targeted surveys inside your product.

[n8n](https://n8n.io/) is a [fair-code licensed](https://docs.n8n.io/reference/license/) workflow automation platform.

[Installation](#installation)  
[Operations](#operations)  
[Credentials](#credentials) <!-- delete if no auth needed -->  
[Compatibility](#compatibility)  
[Usage](#usage) <!-- delete if not using this section -->  
[Resources](#resources)

## Installation

Follow the [installation guide](https://docs.n8n.io/integrations/community-nodes/installation/) in the n8n community nodes documentation.

## Operations

Run workflows on new responses you receive for your surveys.

## Credentials

You can use this integration in Formbricks Cloud as well as self-hosted instances of Formbricks. You only need a Formbricks API Key for this. Please check out the [Formbricks Docs]() for more information.

## Compatibility

This package was developed & tested with n8n > 1.4.0.

## Usage

Please check out the [Formbricks Docs](https://formbricks.com/docs/api/api-key-setup) for more information on how to use the integration.

## Resources

- [n8n community nodes documentation](https://docs.n8n.io/integrations/community-nodes/)
- [Formbricks Docs](https://formbricks.com/docs/integrations/n8n)
npm package: @formbricks/react-native
Description: Formbricks React Native SDK allows you to connect your app to Formbricks, display surveys and trigger events.
Author: Formbricks
Latest version: 2.4.0

# Formbricks React Native SDK

[![npm package](https://img.shields.io/npm/v/@formbricks/react-native?style=flat-square)](https://www.npmjs.com/package/@formbricks/react-native)
[![MIT License](https://img.shields.io/badge/License-MIT-red.svg?style=flat-square)](https://opensource.org/licenses/MIT)

Please see [Formbricks Docs](https://formbricks.com/docs).
Specifically, [Framework Guides](https://formbricks.com/docs/xm-and-surveys/surveys/website-app-surveys/framework-guides).

## What is Formbricks

Formbricks is your go-to solution for in-product micro-surveys that will supercharge your product experience! 🚀 For more information please check out [formbricks.com](https://formbricks.com).

## How to use this library

1. Install the Formbricks package inside your project using npm:

```bash
npm install @formbricks/react-native
```

1. Import Formbricks and initialize the widget in your main component (e.g., App.tsx or App.js):

```javascript
import Formbricks, { track } from "@formbricks/react-native";

export default function App() {
  return (
    <View>
      {/* Your app code */}
      <Formbricks
        appUrl="https://app.formbricks.com"
        environmentId="your-environment-id"
      />
    </View>
  );
}
```

Replace your-environment-id with your actual environment ID. You can find your environment ID in the **Connections instructions** in the Formbricks **Configuration** pages.

For more detailed guides for different frameworks, check out our [Framework Guides](https://formbricks.com/docs/getting-started/framework-guides).
npm package: @formcrafts/embed
Description: Library to embed Formcrafts forms
Author: Formcrafts
Latest version: 1.0.38

## Introduction

You can use Formcrafts' embed library `@formcrafts/embed` to embed forms using vanilla JavaScript. The library is available as an npm package, and works well with frameworks like Svelte, React, Vue, and Angular.

## Installation

To add the Formcrafts JavaScript library to your project, install it using npm:

```shellscript
npm install @formcrafts/embed --save
```

## Importing the library

To make the library available in your code, import the necessary modules:

```javascript
import { createInlineForm, createPopup } from "@formcrafts/embed"
```

## Embed - Inline

### Initialize the form

```javascript
const myInlineForm = createInlineForm({
  form: "form_key", // Your form key
  target: document.getElementById("element_id"), // Target element
  seamless: true, // Removes form border, shadow, and padding
  width: 500, // Max width of the form
  redirectWithin: true, // Keep redirect within form frame
  values: {
    field1: "Jack Smith",
    field2: ["Chocolate", "Vanilla"],
  }, // Prefill values
})
```

### Available methods

You can use the following methods to interact with the inline form:

```javascript
myInlineForm.on("load", (height: number) => {}) // Fires when the form loads
myInlineForm.on("submit:success", () => {}) // Fires on a successful form submit
myInlineForm.destroy() // Remove the form instance
myInlineForm.values({
  field1: "New value",
}) // Update the values of the form
```

## Embed - Popup

### Initialize the form

```javascript
const myPopupForm = createPopup({
  form: "form_key", // Your form key
  width: 500, // Max width of the form
  redirectWithin: true, // Keep redirect within form frame
  values: {
    field1: "Jack Smith",
    field2: ["Chocolate", "Vanilla"],
  }, // Prefill values
})
```

### Available methods

You can use the following methods to interact with the popup form:

```javascript
myPopupForm.on("load", (height: number) => {}) // Fires when the form loads
myPopupForm.on("submit:success", () => {}) // Fires on a successful form submit
myPopupForm.load() // Load the form. Can be used to load the form before showing it. Optional.
myPopupForm.open() // Open the popup
myPopupForm.close() // Close the popup
myPopupForm.destroy() // Destroy the popup and the form instance
myPopupForm.values({
  field1: "New value",
}) // Update the values of the form
```
npm package: @formdata-helper/base
Description: Easy functions for converting formdata instances to an object.
Latest version: 1.1.0

# @formdata-helper/base

Easy functions for converting formdata instances to an object.

**Why would I use this instead of passing my `FormData` instance to `Object.fromEntries`?**

There are two big things that `Object.fromEntries` does not handle. The biggest issue is forms with multiple values under the same key. Creating an object with `Object.fromEntries` will only grab the last value assigned to this key, even though `FormData` is storing multiple values for this key. Second, `@formdata-helper/base` allows for easily assigning a type to the parsed object.

## Usage
Use your package manager to install either `@formdata-helper/base`. The base library can be used in browser environments and is what powers all other libraries.

```javascript
import { parseForm } from "@formdata-helper/base"

const formdataInstance = new FormData();
formdataInstance.append('single', 'foo');
formdataInstance.append('multiple', 'bar');
formdataInstance.append('multiple', 'baz');
const asObject = parseForm(formdataInstance);
console.log(asObject);
// Output: { single: 'foo', multiple: ['bar', 'baz'] }
```

## Typescript
@formdata-helper fully supports typescript. All functions are shipped with type definitions. You can also define the type of form you are parsing.

```typescript
import { parseForm } from "@formdata-helper/base"

type Form = {
  single: string;
  multiple: string[];
}

const formdataInstance = new FormData();
formdataInstance.append('single', 'foo');
formdataInstance.append('multiple', 'bar');
formdataInstance.append('multiple', 'baz');
const asObject = parseForm<Form>(formdataInstance);
```
It may be helpful to use typescript helpers alter the properties to nullable until you validate the fields were filled out correctly.
npm package: @formdata/create-project
Description: Create Form-Data projects with a single command
Latest version: 0.82.0

# @formdata/create-project

Create Form-Data projects with a single command.

## Usage

```bash
# npm create
npm create @formdata/project@latest my-project

# or, using npx
npx @formdata/create-project my-project

# or, install globally
npm install -g @formdata/create-project
create-project my-project
```

## Features

- 🚀 **Quick Setup**: Create a new Form-Data project with a single command
- 🔐 **Authentication**: Automatic login to Form-Data service
- 🏢 **Workspace Selection**: Select which workspace to use for your project
- 📁 **Project Structure**: Creates proper directory structure and configurations
- 📋 **Guided Setup**: Interactive prompts for project setup

## What This Tool Does

When you run this tool, it will:

1. Create a new directory for your project
2. If you're already logged in to Form-Data:
   - Display a list of workspaces to choose from
   - Allow you to log in with a different account
3. If you're not logged in, guide you through the login process
4. Create the `form-data.config.json` file with the selected workspace
5. Create the `forms` folder for your form definitions
6. Install necessary dependencies
7. Provide instructions for next steps

## Project Structure

The created project will have the following structure:

```
my-project/
├── package.json
├── form-data.config.json
└── forms/
```

## Next Steps After Creation

Once your project is created, you can:

1. Create a new form: `fd form create --name my-form --template contact`
2. Edit the form in `forms/my-form.fd`
3. Preview your form: `fd preview --name my-form`
4. Deploy your form: `fd deploy`

For more detailed instructions on how to use the cli, check out [@formdata/cli](../cli) package. 

## Requirements

- Node.js 14 or higher
- npm 6 or higher

## License

MIT
npm package: @formdown/editor
Description: Development tool for Formdown syntax with advanced editing features
Author: iyulab
Latest version: 0.4.0

# @formdown/editor

Web component editor for Formdown syntax.

## Installation

```bash
npm install @formdown/editor
```

## Usage

### HTML

```html
<script type="module">
  import '@formdown/editor'
</script>

<formdown-editor 
  content="@name: [text required]"
  show-preview="true">
</formdown-editor>
```

### JavaScript

```typescript
import '@formdown/editor'

const editor = document.querySelector('formdown-editor')
editor.content = '@name: [text required]'
editor.showPreview = true

// Listen for content changes
editor.addEventListener('contentChange', (event) => {
  console.log('New content:', event.detail.content)
})
```

## Properties

- `content` (string) - The Formdown content to edit
- `showPreview` (boolean) - Whether to show live preview
- `readonly` (boolean) - Make editor read-only

## Events

- `contentChange` - Fired when content changes
  - `detail.content` - Updated content

## Features

- Syntax highlighting
- Live preview
- Error detection
- Auto-completion hints
- Responsive design

## Documentation

For complete documentation, visit the [Formdown documentation](https://github.com/iyulab/formdown).

## License

MIT
npm package: @formdown/ui
Description: Pure HTML renderer for Formdown syntax
Author: iyulab
Latest version: 0.4.0

# @formdown/ui

Web component viewer for rendering Formdown forms.

## Installation

```bash
npm install @formdown/ui
```

## Usage

### HTML

```html
<script type="module">
  import '@formdown/ui'
</script>

<formdown-ui 
  content="@name: [text required]
@email: [email required]"
  submit-text="Submit Form">
</formdown-ui>
```

### JavaScript

```typescript
import '@formdown/ui'

const viewer = document.querySelector('formdown-ui')
viewer.content = '@name: [text required]'
viewer.submitText = 'Submit Form'

// Listen for form submissions
viewer.addEventListener('formSubmit', (event) => {
  console.log('Form data:', event.detail.data)
})
```

## Properties

- `content` (string) - The Formdown content to render
- `submitText` (string) - Text for submit button (default: "Submit")
- `showLabels` (boolean) - Whether to show field labels (default: true)

## Events

- `formSubmit` - Fired when form is submitted
  - `detail.data` - Form data object
- `fieldChange` - Fired when any field changes
  - `detail.field` - Field name
  - `detail.value` - Field value

## Features

- Real-time form rendering
- Form validation
- Custom styling support
- Responsive design
- Accessibility features

## Documentation

For complete documentation, visit the [Formdown documentation](https://github.com/iyulab/formdown).

## License

MIT
npm package: @formecms/sdk
Description: TypeScript SDK for the Forme CMS — typed HTTP client for Management and Delivery APIs.
Latest version: 0.1.1

# @formecms/sdk

TypeScript SDK for [Forme CMS](https://formecms.com) — typed HTTP client for the Management and Delivery APIs.

## Installation

```bash
pnpm add @formecms/sdk
# or
npm install @formecms/sdk
```

## Quick start

```typescript
import { createClient } from "@formecms/sdk";

// Read Key → DeliveryClient (published content)
const delivery = createClient({
  baseUrl: "https://delivery.forme.sh",
  apiKey: "ce_read_YOUR_KEY_HERE",
});

const entries = await delivery.entries.list({ limit: 10 });
if (entries.ok) {
  console.log(entries.data.items);
}

// Secret Key → ManagementClient (create, update, publish)
const mgmt = createClient({
  baseUrl: "https://management.forme.sh",
  apiKey: "ce_secret_YOUR_KEY_HERE",
});

const model = await mgmt.contentModels.create({
  apiId: "BlogPost",
  name: "Blog Post",
  type: "page",
  fields: [
    { apiId: "title", name: "Title", type: "shortText", required: true, localized: true },
    { apiId: "body", name: "Body", type: "richText", localized: true },
  ],
});
```

The SDK auto-detects your key type: `ce_secret_` keys return a `ManagementClient`, `ce_read_` keys return a `DeliveryClient`.

## Documentation

- [SDK Guide](https://formecms.com/docs/sdk) — full API reference with examples
- [Quickstart](https://formecms.com/docs/quickstart) — go from zero to published content in 15 minutes
- [API Reference](https://formecms.com/docs/api-reference) — REST API details

## License

MIT
npm package: @formepdf/core
Description: WASM-powered PDF rendering engine for Forme
Latest version: 0.9.1

# @formepdf/core

WASM-powered PDF rendering engine for [Forme](https://github.com/formepdf/forme).

## Install

```bash
npm install @formepdf/react @formepdf/core
```

## Usage

```tsx
import { Document, Page, Text } from '@formepdf/react';
import { renderDocument } from '@formepdf/core';
import { writeFileSync } from 'fs';

const doc = (
  <Document>
    <Page size="Letter" margin={54}>
      <Text style={{ fontSize: 24 }}>Hello Forme</Text>
    </Page>
  </Document>
);

const pdfBytes = await renderDocument(doc);
writeFileSync('output.pdf', pdfBytes);
```

## What this package does

This package contains the compiled WASM binary of Forme's Rust layout engine. It handles:

- Page-native layout with automatic content splitting
- Font loading, subsetting, and TrueType embedding
- PDF generation with links, bookmarks, images, and SVG
- Table layout with automatic header repetition

You write components with `@formepdf/react`. This package turns them into PDF bytes.

## API

### `renderDocument(jsx)`

Takes a JSX document tree and returns a `Uint8Array` of PDF bytes.

### `renderDocumentWithLayout(jsx)`

Returns both the PDF bytes and layout metadata (element positions, sizes, page info). Used by the dev server for the element inspector.

## Docs

Full documentation at [docs.formepdf.com](https://docs.formepdf.com)