open-index/open-npm huggingface dataset:
npm package: @markdown2ui/parser
Description: Reference parser for the markdown2ui v0.9 specification
Latest version: 0.9.1

# @markdown2ui/parser

Reference parser for the [markdown2ui](../../README.md) v0.9 specification. Converts plain-text markup into a structured AST (JSON).

Unlike JSON Schema or XML-based UI specs, markdown2ui markup is plain text that LLMs can generate with near-zero reasoning overhead — the syntax is barely more complex than a bulleted list. The parser handles the rest: tokenization, grouping, ID derivation, and optional normalization of common LLM mistakes.

## Installation

```bash
npm install @markdown2ui/parser
```

## API

### `parse(input: string): AST`

Parse markup into an AST.

```ts
import { parse } from '@markdown2ui/parser';

const ast = parse(`
Favorite color
- Red
- Blue (default)
- Green
`);

// ast.version === '0.9'
// ast.blocks[0].type === 'single-select'
```

### `normalize(input: string): string`

Fix common LLM/SLM mistakes before parsing. Handles wrong list markers (`*` instead of `-`), checkbox variants (`[v]` instead of `[x]`), missing spaces, and more.

```ts
import { parse, normalize } from '@markdown2ui/parser';

const fixed = normalize(sloppyMarkup);
const ast = parse(fixed);
```

## AST Structure

```ts
interface AST {
  version: '0.9';
  blocks: Block[];
}
```

`Block` is a union of 16 types: `single-select`, `multi-select`, `sequence`, `confirmation`, `text-input`, `typed-input`, `slider`, `date`, `time`, `datetime`, `file-upload`, `image-upload`, `header`, `hint`, `divider`, `prose`, `group`.

## Type Exports

All AST types are exported for use with TypeScript:

```ts
import type {
  AST, Block,
  SingleSelectBlock, SingleSelectOption,
  MultiSelectBlock, MultiSelectOption,
  SequenceBlock, ConfirmationBlock,
  TextInputBlock, TypedInputBlock,
  SliderBlock, DateBlock, TimeBlock, DatetimeBlock,
  FileUploadBlock, ImageUploadBlock,
  HeaderBlock, HintBlock, DividerBlock, ProseBlock, GroupBlock,
  FormatAnnotation, TypedInputFormat,
} from '@markdown2ui/parser';
```

## Conformance Tests

The parser is tested against 115+ conformance tests in [`tests/`](../../tests/). Each test pairs a `.txt` input with an `.ast.json` expected output.

## Links

- [Specification v0.9](../../docs/markdown2ui-spec-v0_9.md)
- [Live Playground](https://tiniclaw.github.io/markdown2ui/)
npm package: @markdown2ui/react
Description: React renderer for markdown2ui v0.9
Latest version: 0.9.1

# @markdown2ui/react

React renderer for [markdown2ui](../../README.md) v0.9. Renders interactive form UI from markup or a pre-parsed AST.

The renderer owns all design decisions — layout, spacing, colors, component style. The markup only describes *what* input is needed, never *how* it looks. This keeps the LLM focused on reasoning while the client delivers a polished, platform-native experience. Supports both compact (key-value) and verbose (full metadata) submission formats to match your LLM integration needs.

## Installation

```bash
npm install @markdown2ui/react @markdown2ui/parser
```

## Usage

```tsx
import { Markdown2UI } from '@markdown2ui/react';
import '@markdown2ui/react/styles.css';

function App() {
  const markup = `
> name: Your name | John Doe
Favorite color
- Red
- Blue (default)
- Green
`;

  return (
    <Markdown2UI
      source={markup}
      onSubmit={(result) => console.log(result)}
    />
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `source` | `string \| AST` | required | Raw markup string or pre-parsed AST |
| `normalizeInput` | `boolean` | `false` | Run the normalizer to fix SLM mistakes |
| `format` | `'compact' \| 'verbose'` | `'compact'` | Submission output format |
| `onSubmit` | `(result, ast) => void` | - | Called when the user submits |
| `submitLabel` | `string` | `'Submit'` | Submit button label |
| `className` | `string` | - | Additional CSS class |

## Submission Formats

**Compact** (default) — flat key-value pairs, minimal tokens:

```
name: John Doe
favorite_color: Blue
```

**Verbose** — full metadata:

```json
{
  "name": { "type": "text-input", "label": "Your name", "value": "John Doe" },
  "favorite_color": { "type": "single-select", "label": "Favorite color", "value": "Blue" }
}
```

## Theming

Import the default styles, then override CSS custom properties:

```css
.m2u-form {
  --m2u-font: 'Inter', sans-serif;
  --m2u-radius: 8px;
  --m2u-accent: #6366f1;
}
```

## Icon Resolution

The package exports utilities for custom icon resolution:

```ts
import {
  processText, processTextGroup,
  createAssetResolver, createMapResolver, chainResolvers,
} from '@markdown2ui/react';
```

## Links

- [Live Playground](https://tiniclaw.github.io/markdown2ui/)
- [Parser package](../parser/)
- [Specification v0.9](../../docs/markdown2ui-spec-v0_9.md)