@formdown/ui

Web component viewer for rendering Formdown forms.

Installation

npm install @formdown/ui

Usage

HTML

<script type="module">
  import '@formdown/ui'
</script>

<formdown-ui 
  content="@name: [text required]
@email: [email required]"
  submit-text="Submit Form">
</formdown-ui>

JavaScript

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.

License

MIT