view-sync

Lightweight alternative to Alpine.js' x-model attribute, that is CSP friendly (no 'unsafe-eval' needed).

Installation

With npm/yarn/pnpm/bun:

npm i view-sync

Usage

HTML:

<!-- Initialize view-sync and set initial value to "world" -->
<div id="app" data-sync-init="hello" data-sync-value="world">
    <!-- Value of these will be updated with value of `hello` in sync with each other -->
    <input type="text" data-sync="hello">
    <textarea data-sync="hello"></textarea>

    <!-- Text content of this will be updated with value of `hello` -->
    <span data-sync-text="hello"></span>

    <!-- This will be hidden if value of `hello` is falsy -->
    <div data-sync-state="hello">
        I will be hidden if `hello` is falsy
    </div>
</div>

JavaScript/TypeScript:

import { ViewSync } from 'view-sync';
ViewSync.Init();