DUICE (Data-binding UI Component Element)

🗒️ Conception

1. MVC Auto-Binding (Between Data and DOM)

Automatically synchronizes data and UI by binding JavaScript Object and Array to HTML DOM elements.
Changes to data are immediately reflected in the UI, and user input in the UI automatically updates the underlying data.
This bidirectional binding is powered internally by JavaScript Proxy and the Observer pattern.

2. Low Learning Curve (Just HTML + JavaScript)

If you know basic HTML and JavaScript, you’re ready to go.
No need to learn complex syntax or frameworks — just write standard HTML and bind data intuitively.

3. Pure JavaScript, No Dependencies

This library is built with pure vanilla JavaScript — no dependencies, no conflicts.
It’s lightweight, framework-agnostic, and can be seamlessly used alongside any other JavaScript libraries or frameworks.

🖥️ Demo site

Website

Example project

Plain HTML + Integrated with Vue/React examples

Live Examples

Credentials: developer/developer
Because of cold start, Waits about 30 seconds to start the server.

🔗 References

Git Repository

NPM Package

Plugin project

Plugin project integrated with pagination, codemirror, marked, jsplumb …

🏁 Getting Started

CDN (jsdelivr.net)

<script src="https://cdn.jsdelivr.net/npm/duice/dist/duice.min.js"></script>
<!-- (optional) symple style -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/duice/dist/duice.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/duice/dist/duice-theme.css">

CDN (unpkg.com)

<script src="https://unpkg.com/duice/dist/duice.min.js"></script>
<!-- (optional) symple style -->
<link rel="stylesheet" href="https://unpkg.com/duice/dist/duice.css">
<link rel="stylesheet" href="https://unpkg.com/duice/dist/duice-theme.css">

NPM package

npm install duice

📁 Object Element

Data binding example between Object Proxy - HTML Element.

Javascript

const user = new duice.ObjectProxy({
    id: 'apple',
    name: 'Apple'
});

HTML

<span data-duice-bind="user" data-duice-property="id"></span>
<input type="text" data-duice-bind="user" data-duice-property="name"/>

Attribute

attribute	description
data-duice-bind=”[object]”	Object name to bind
data-duice-property=”[property of object]”	Object Property name to bind
data-duice-format=”[data format clause]”	ex) string(‘###-###’), number(2), date(‘yyyy-MM-dd’)
data-duice-if=”[reutrn false to hiddne]”	javascript code for decide to hidden or not
data-duice-execute=”[code to execute]”	javascript code to execute when element is updated

Event

// Fires before property is changing.
duice.ObjectProxy.onPropertyChanging(user, event => {
    console.log(event);
});
// Fires after property is changed.
duice.ObjectProxy.onPropertyChanged(user, event => {
    console.log(event);
});

📁 Array Element

Data binding example between Array Proxy - HTML Element.

Javascript

const users = new duice.ArrayProxy([
    {id: 'apple', name: 'Apple'},
    {id: 'monkey', name: 'Monkey'},
    {id: 'orange', name: 'Orange'}
]);

HTML

<table>
    <tr>
        <th>no</th>
        <th>name</th>
        <th>name</th>
    </tr>
    <tr data-duice-bind="users" data-duice-foreach="user,status">
        <td data-duice-bind="status" data-duice-property="count"></td>
        <td data-duice-bind="user" data-duice-property="id"></td>
        <td><input type="text" data-duice-bind="user" data-duice-property="name"/></td>
    </tr>
</table>

Attribute

attribute	description
data-duice-bind=”[array]”	Object name to bind
data-duice-foreach=”[element name],[status name]”	element object and status variable name
data-duice-recursive=”[id name],[parent id name]”	if recursive, id and parent id name
data-duice-if=”[reutrn false to hiddne]”	javascript code for decide to hidden or not
data-duice-execute=”[code to execute]”	javascript code to execute when element is updated

Event

// Fires before property is changing.
duice.ObjectProxy.onPropertyChanging(users, event => {
    console.log(event);
});
// Fires after property is changed.
duice.ObjectProxy.onPropertyChanged(users, event => {
    console.log(event);
});
// Fires before item is selecting.
duice.ArrayProxy.onItemSelecting(users, event => {
    console.log(event);
});
// Fires after item is selected.
duice.ArrayProxy.onItemSelected(users, event => {
    console.log(event);
});
// Fires before item is moving.
duice.ArrayProxy.onItemMoving(users, event => {
    console.log(event);
});
// Fires after item is moved.
duice.ArrayProxy.onItemMoved(users, event => {
    console.log(event);
});

📁 Dialog(alert,confirm,prompt,custom dialog)

Custom alert, confirm, prompt dialog example.

Javascript

// await style
async function confirmAwait() {
    if(await duice.confirm('<b>Hello~</b>\nThis is confirm message!\nYes or No?')){
        alert(true);
    }else{
        alert(false);
    }
}

// then style
async function confirmThen() {
    duice.confirm('<b>Hello~</b>\nThis is confirm message!\nYes or No?').then((result) =>{
        if(result) {
            alert(true);
        }else{
            alert(false);
        }
    });
}

// custom dialog from HTML Dialog Element
async function openDialog() {
    duice.openDialog(document.getElementById('myDialog')).then(()=>{
        alert('do next');
    });
}

HTML

<dialog id="myDialog">
    <pre>
        Custom Dialog
    </pre>
</dialog>