---
title: 'Static HTML'
description: "Learn how to use JSONEval-Rs in plain Vanilla JavaScript/HTML setups via standard ES Module imports without any bundler."
navigation:
  icon: 'i-simple-icons-html5'
seo:
  title: 'Static HTML'
  description: "Learn how to use JSONEval-Rs in plain Vanilla JavaScript/HTML setups via standard ES Module imports without any bundler."
---

# Using JSONEval-Rs in Static HTML (Vanilla JS)

If you aren't using a bundler, the `@json-eval-rs/vanilla` package handles standard browser WASM instantiation. You can import it directly via ES Modules or CDNs.

## Using a CDN (No Installation Required)

You can load the Webcore and Vanilla JS packages efficiently directly inside a `<script type="module">` tag using esm.sh or unpkg.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONEval-Rs Vanilla Example</title>
</head>
<body>
    <h2>Form Validation</h2>
    <form id="myForm">
        <label>
            Age:
            <input type="number" id="ageInput" />
        </label>
        <div id="errorBox" style="color: red;"></div>
        <button type="submit">Submit</button>
    </form>

    <script type="module">
        // Import dynamically from an NPM CDN (e.g. unpkg or esm.sh)
        import { JSONEval } from 'https://esm.sh/@json-eval-rs/webcore';
        import * as wasmModule from 'https://esm.sh/@json-eval-rs/vanilla';

        let evaluator;

        async function init() {
            const schema = {
                type: "object",
                properties: {
                    age: {
                        rules: {
                            minValue: { value: 18, message: "Must be at least 18 years old" },
                            required: { value: true, message: "Age is required" }
                        }
                    }
                }
            };

            // Initialize the evaluator using the vanilla WASM module
            evaluator = new JSONEval({
                schema: JSON.stringify(schema),
                wasmModule
            });

            console.log("JSONEval-Rs initialized!");
        }

        async function validateForm(event) {
            event.preventDefault();
            
            if (!evaluator) {
                console.error("Evaluator not ready");
                return;
            }

            const ageValue = document.getElementById("ageInput").value;
            const data = { age: ageValue === '' ? null : Number(ageValue) };

            const result = await evaluator.validate({
                data: JSON.stringify(data)
            });

            const errorBox = document.getElementById("errorBox");
            if (result.has_error) {
                // Map out error messages to UI
                errorBox.innerHTML = result.errors.map(err => `<div>${err.message}</div>`).join('');
            } else {
                errorBox.innerHTML = '<div style="color: green;">Success! Valid logic.</div>';
            }
        }

        document.getElementById("myForm").addEventListener("submit", validateForm);

        // Run initialization
        init();

        // Clean up when leaving (optional in a global scope, but good practice)
        window.addEventListener("beforeunload", () => {
            if (evaluator) evaluator.free();
        });
    </script>
</body>
</html>
```

## Using NPM/Yarn Locally Without Bundlers

If you've downloaded the packages locally but simply want to serve them through a static web server:

```bash
yarn add @json-eval-rs/webcore @json-eval-rs/vanilla
```

You would serve your `node_modules` folder statically or move the files, then import them via relative paths:

```html
<script type="module">
    import { JSONEval } from './node_modules/@json-eval-rs/webcore/dist/index.js';
    import * as wasmModule from './node_modules/@json-eval-rs/vanilla/pkg/index.js';

    async function init() {
        const schema = { /* ... */ };
        const evalInstance = new JSONEval({ schema: JSON.stringify(schema), wasmModule });
        // ...
    }
    
    init();
</script>
```

*(Note: Ensure your web server is configured to serve `.wasm` files with the `application/wasm` MIME type, otherwise the browser will reject execution).*
