Skip to content

formio/core

Folders and files

NameName
Last commit message
Last commit date
Mar 1, 2024
Feb 14, 2024
Apr 12, 2024
Jun 3, 2023
Aug 16, 2023
Apr 11, 2024
Feb 25, 2021
Dec 8, 2022
Mar 16, 2023
Apr 14, 2021
Apr 4, 2024
Feb 14, 2024
Jan 30, 2024
Jan 30, 2024
Mar 13, 2024

Repository files navigation

Form.io Core JavaScript Rendering Engine

This library is the core rendering engine behind the Form.io platform. It is a tiny (12k gzipped) rendering frameworks that allows for the rendering of complex components as well as managing the data models controlled by each component.

Usage

To use this library, you will first need to install it into your own application.

npm install --save @formio/core

Next, you can create a new component as follows.

import { Components } from '@formio/core';
Components.addComponent({
    type: 'h3',
    template: (ctx) => `<h3>${ctx.component.header}</h3>`
});

And now this component will render using the following.

const header = Components.createComponent({
    type: 'h3',
    header: 'This is a test',
});
console.log(header.render());  // Outputs <h3>This is a test</h3>

You can also use this library by including it in your webpage scripts by including the following.

<script src="https://cdn.jsdelivr.net/npm/@formio/base@latest/dist/formio.core.min.js"></script>

After you do this, you can then do the following to create a Data Table in your website.

FormioCore.render(document.getElementById('data-table'), {
    type: 'datatable',
    key: 'customers',
    components: [
        {
            type: 'datavalue',
            key: 'firstName',
            label: 'First Name'
        },
        {
            type: 'datavalue',
            key: 'lastName',
            label: 'First Name'
        }
    ]
}, {}, {
    customers: [
        {firstName: 'Joe', lastName: 'Smith'},
        {firstName: 'Sally', lastName: 'Thompson'},
        {firstName: 'Mary', lastName: 'Bono'}
    ]
});

See https://formio.github.io/core for more examples of how to use this library.