view-sync

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

Installation

Using a package manager

Install using your preferred package manager:

NPM:

npm i view-sync

Bun:

bun i view-sync

PNPM:

pnpm i view-sync

Yarn:

yarn add view-sync

And then import it like this:

import { ViewSync } from 'view-sync';

Using a CDN

With a <script> tag

<script src="https://cdn.jsdelivr.net/npm/view-sync/dist/view-sync.iife.min.js"></script>
<script>
    ViewSync.Init();
</script>

With a <script type="module"> tag using import

<script type="module">
    import viewsync from https://cdn.jsdelivr.net/npm/view-sync/+esm
</script>

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();