Getting Started

Formdown transforms markdown-like syntax into interactive HTML forms. Write forms as naturally as writing text.

What is Formdown?

# Contact Form
@name*: []
@email*: @[]
@message: T4[]
@submit: [submit label="Send Message"]

Becomes a fully functional contact form with validation!

Core Features

Feature	Description	Example
Human Readable	Forms written like natural text	`@name*: []`
Type Safe	Built-in validation and type checking	`@email*: @[]`
Zero Dependencies	Works anywhere HTML works	`<formdown-ui>...</formdown-ui>`
Framework Agnostic	React, Vue, Angular, vanilla JS	Import and use immediately

Quick Examples

Basic Form

@name*: []
@email*: @[]
@submit: [submit]

Advanced Form

@username*{^[a-zA-Z0-9_]{3,20}$}: [placeholder="3-20 characters"]
@email*: @[]
@age: #[min=18 max=100]
@interests{Web,Mobile,AI}: c[]
@submit: [submit label="Register"]

Inline Fields

Hello ___@name*! Your order #___@order_id is ready.
Delivery date: ___@delivery_date[date required]

Quick Start

1. Add to HTML (CDN)

<script src="https://unpkg.com/@formdown/ui@latest/dist/standalone.js"></script>
<formdown-ui>
    @name*: []
    @email*: @[]
    @submit: [submit]
</formdown-ui>

2. Install Package (NPM)

npm install @formdown/ui

import '@formdown/ui';
// Use <formdown-ui> in your HTML/JSX

Documentation

Getting Started

Installation - Setup and framework integration
Basic Syntax - Core concepts and field types
Shorthand Syntax - Faster form creation

Reference

Field Reference - Complete field type reference
Validation - Form validation rules
JavaScript API - Programmatic control

Tools & Examples

Editor Tools - Development environment
Examples - Real-world form examples

Live Demo

🚀 Interactive Demo - Try Formdown in your browser
📁 Sample Forms - Browse .fd files

Community

Getting Started

Formdown transforms markdown-like syntax into interactive HTML forms. Write forms as naturally as writing text.

What is Formdown?

# Contact Form
@name*: []
@email*: @[]
@message: T4[]
@submit: [submit label="Send Message"]

Becomes a fully functional contact form with validation!

Core Features

Feature	Description	Example
Human Readable	Forms written like natural text	`@name*: []`
Type Safe	Built-in validation and type checking	`@email*: @[]`
Zero Dependencies	Works anywhere HTML works	`<formdown-ui>...</formdown-ui>`
Framework Agnostic	React, Vue, Angular, vanilla JS	Import and use immediately

Quick Examples

Basic Form

@name*: []
@email*: @[]
@submit: [submit]

Advanced Form

@username*{^[a-zA-Z0-9_]{3,20}$}: [placeholder="3-20 characters"]
@email*: @[]
@age: #[min=18 max=100]
@interests{Web,Mobile,AI}: c[]
@submit: [submit label="Register"]

Inline Fields

Hello ___@name*! Your order #___@order_id is ready.
Delivery date: ___@delivery_date[date required]

Quick Start

1. Add to HTML (CDN)

<script src="https://unpkg.com/@formdown/ui@latest/dist/standalone.js"></script>
<formdown-ui>
    @name*: []
    @email*: @[]
    @submit: [submit]
</formdown-ui>

2. Install Package (NPM)

npm install @formdown/ui

import '@formdown/ui';
// Use <formdown-ui> in your HTML/JSX