Open builder

A form renderer for the moving parts of your application.

tired of forms?
use <de-form> now

Construct forms from application state and data, not hard-coded screens. Built with web components. Framework agnostic.

Try it belowBuild your own
SEE IT IN ACTIONONE COMPONENT, ENDLESS ARRANGEMENT

Render forms at runtime,
based on your data.

Interactive example · No data is sent
Examples
Simple

Make a simple form,

  • set what's mandatory/optional
  • reveal further questions based on values
  • sensible validation out of the box

Try selecting "Phone"

This is a local example. Nothing is submitted to a server.

Field typesTHE RENDERER TOOLKIT

15 field types.
And growing.

Pick the field type in your configuration; deForm handles the rendering.

Enter something

  • Texttext
  • Emailemail
  • Passwordpassword
  • Numbernumber
  • Long texttextarea
  • Datedate
  • Colorcolor

Make a choice

  • Selectselect
  • Radio groupradio
  • Radio buttonsradioButton
  • Checkboxcheckbox
  • Toggletoggle
  • Switchable fieldtoggleField

Set a value

  • Rangerange
  • Ratingrating

These are configuration types, not separate components. The same <de-form> renders them all.

The approachCONFIGURATION, NOT SCREENS

A form is a view
of your data.

Product types, account roles, existing records, feature flags: your application already carries the information that determines what a form should ask. Use that information to assemble a configuration, then hand it to <de-form>.

The component renders typed fields, handles validation and change tracking, and can reveal fields when answers change. Your application stays in charge of the data and submission.

InputApplication state
+ data
DescribeForm
configuration
Render<de-form>
Use it anywhereWEB COMPONENTS

One custom element.
Your choice of framework.

deForm is built with Lit and Shoelace. It uses the web component standard, so the form can live alongside the rest of your application without dictating its framework.

Read the READMEOpen the form builder
Start herenpm install @deform-wg/deform@rcimport '@deform-wg/deform';<de-form></de-form>Open source · MIT licensed