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/uiimport '@formdown/ui';
// Use <formdown-ui> in your HTML/JSXDocumentation
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