Velox.js

The fast frontend framework with its own scripting language.

Velox.js lets you control your HTML pages using .vlx script files and <?velox > tags — no build step, no bundler, no JSX. Just drop velox.js into your page and start writing scripts.

Quick start

npx velox my-app
cd my-app

Open public/index.html in your browser (via a local server — e.g. VS Code Live Server, or npx serve .).

How it works

The Velox runtime (velox.js) scans your HTML for <?velox ... > tags when the page loads. Each tag either runs a command directly or wires up an event listener.

Run a command on page load:

<?velox Dom.setText("Hello!") $target="$id(output)" >

Run a .vlx script file on page load:

<?velox Velox.run("assets/scripts/velox/myscript.vlx") $target="$id(output)" >

Wire a button click to a command:

<?velox $on click "$id(myBtn)": Dom.setText("Clicked!") $target="$id(output)" >

Wire a button click to a .vlx file:

<?velox $on click "$id(myBtn)": Velox.run("myscript.vlx") $target="$id(output)" >

The runtime must be loaded before </body>:

<script src="assets/scripts/velox/velox.js"></script>

.vlx scripts

.vlx files are plain text scripts with one statement per line, separated by ;.

// myscript.vlx

Dom.setText("Loaded from script!") $target="$id(output)";
Dom.addClass("active") $target="$id(output)";
Anim.fadeIn("400") $target="$id(output)";

Var.set("user:Alice");
echo("Script finished");

Project structure

my-app/
├── public/
│   └── index.html
├── assets/
│   ├── css/
│   │   └── style.css
│   └── scripts/
│       └── velox/
│           ├── velox.js        ← runtime
│           └── myscript.vlx   ← your scripts go here
├── .velox/
│   └── conf/
│       └── config.jsonc
├── storage/
│   ├── env/
│   │   └── quickPaths.json
│   └── variables/
│       └── normal.json
├── tags/
│   └── json/
│       └── UrlS.json
└── velox.project.json

Selectors

| Syntax | Selects | |---|---| | $id(myId) | #myId | | $class(myClass) | first .myClass | | $query(.card > p) | any CSS selector | | $tag(div) | first <div> |

Command categories

| Category | Commands | |---|---| | DOM | setText setHtml append prepend remove clear show hide toggle addClass removeClass toggleClass setAttr removeAttr setStyle focus click scrollTo getValue setValue | | Animation | fadeIn fadeOut slide shake pulse | | Events | $on click hover input change submit keydown load | | Form | getValue setValue clear serialize | | Storage | Store.set get remove clear | | Cookies | Cookie.set get remove | | Variables | Var.set get clear | | Network | Url.get getJson post postJson fetch · iframe.Url | | File | file.localFetch | | Page | redirect reload title meta scrollTop | | Router | Router.define go start | | Template | Template.render | | Script/Style | Script.load · Style.load | | Logging | echo echo.warn echo.err |

See SYNTAXES.md for the full reference.

Requirements

• Node.js >= 16 (for the CLI scaffolder)
• A local HTTP server to serve your project (required for fetch() to work)

License

MIT