<form-builder>

A web component for building form using Drag'n'Drop.

<form-builder>

<form-builder> is a Drag'n'Drop builder written using LitElement

As easy as HTML

<form-builder> is just an HTML element. You can use it anywhere you can use HTML!

<form-builder></form-builder>

Configure

<form-builder> can be configured with JSON. You can subscribe to 'form-builder-updated' event to get updates.

<form-builder id="builder"></form-builder>
<script>
document.querySelector('#builder').controlList = [{ control: 'textbox' }];
document.querySelector('#builder').addEventListener('form-builder-updated', (event) => {
console.log('form-builder-updated ', event.detail);
});
</script>

Declarative rendering

<form-builder> can be used with declarative rendering libraries like Angular, React, Vue, and lit-html

import {html, render} from 'lit-html';

const name="lit-html";

render(html`
<form-builder></form-builder>
`
, document.body);