DplSchemaForm Web Component

DplSchemaForm is a web component that wraps the RJSF

You can see the demo & or options here:

Adding to the page

<script type="module" src="https://components.dynamicplatform.com/dpl-schema-form/1.0.2/dpl-schema-form.js"></script>

Usage

To use the DplSchemaForm component in your HTML:

<dpl-schema-form>
<script type="application/json" slot="schema">
{
    "title": "Form test!",
    "type": "object",
    "required": ["title"],
    "properties": {
        "title": {
            "type": "string",
            "title": "Title"
        },
        "done": {
            "type": "boolean",
            "title": "Done?",
            "default": false
        }
    }
}    
</script>
</dpl-schema-form>

Set the schema, uiSchema and formData properties to customize the form:

<dpl-schema-form>
<script type="application/json" slot="schema">
{
    "title": "Hello World Form - From Playground",
    "type": "object",
    "required": ["title"],
    "properties": {
        "title": {
            "type": "string", 
            "title": "Title"
        },
        "done": {
            "type": "boolean", 
            "title": "Done?", 
            "default": false
        }
    }
}
</script>
<script type="application/json" slot="uiSchema">
{}
</script>
<script type="application/json" slot="formData">
{
        "title": "Title from data",
        "done": true
}
</script>
</dpl-schema-form>

Release Notes