Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/michael-tiger-2010/wyvernjs/llms.txt

Use this file to discover all available pages before exploring further.

This page walks you through a complete working example using all four WyvernJS modules in a browser environment. By the end, you will have a page that renders a UI with TianFeng’s tree(), manipulates DOM elements with DiWu’s chainable methods, runs an async test suite with FireWyrm, and captures a performance benchmark with ShuiHu — all with zero dependencies and no build step.
1

Add WyvernJS to your page

The fastest way to get started is a single CDN script tag that loads all four modules at once. Add it to the <head> or just before the closing </body> tag of your HTML file:
<script src="https://cdn.jsdelivr.net/npm/@mchen_dragon/wyvernjs@latest/main/wyvern.js"></script>
This registers dw, tf, fw, sh (and their long-form aliases) as globals on window. No bundler, no npm install, no further configuration needed.
2

Initialize the modules

DiWu and TianFeng must be initialized before their features are available. Add the following in your own <script> block, after the WyvernJS script tag:
dw.init();  // extends DOM prototypes with chainable methods and Proxy properties
tf.init();  // populates window with helpers: tree, route, createStore, wait, device, etc.
FireWyrm (fw) and ShuiHu (sh) require no init call — they are ready to use immediately.
3

Manipulate the DOM with DiWu

After dw.init(), every DOM element gains chainable methods and Proxy-based property accessors. Here is a taste of what is now available on any element:
// Chainable styling, content, and event binding in one expression
document.querySelector('#app')
  .css({ backgroundColor: '#1c3c44', padding: '20px', borderRadius: '8px' })
  .text('Hello from WyvernJS')
  .on('click', () => sh.log('App clicked'));

// Proxy-based class toggling — reads and writes feel like plain object properties
const btn = document.querySelector('#btn');
btn.classes.active = true;   // adds the 'active' class
btn.classes.active = false;  // removes the 'active' class
console.log(btn.classes.active); // → false

// Proxy-based attribute access
btn.attrs['data-id'] = '42';          // sets attribute
console.log(btn.attrs['data-id']);    // → '42'

// Visibility shortcuts
btn.hide();       // stores original display value, sets display:none
btn.show();       // restores original display value
btn.toggle();     // flips between hidden and visible

// Animate to a final CSS state using the Web Animations API
btn.animateTo({ opacity: '0', transform: 'translateY(-10px)' }, 300);
4

Build UI with TianFeng tree()

After tf.init(), tree() and body are available on window. tree() is a JSX-like array syntax that creates real DOM nodes without any transpiler:
// tree() accepts nested arrays of [tag, props, children]
// prop keys starting with 'on' become event listeners automatically
body.append(tree([
  ['div', { style: 'text-align:center' }, [
    ['h1', {}, ['WyvernJS Demo']],
    ['p',  {}, ['Zero-dependency vanilla JS tools']],
    ['button', { id: 'runTests', onclick: runTests }, ['Run Tests']]
  ]]
])[0]);
tree() returns an array of the top-level DOM nodes it created. [0] grabs the first (and only) root element, which is then appended directly to body.
You can pass a second argument to tree() to have it append the created elements to a parent automatically: tree(definition, body) — no manual append call needed.
5

Write tests with FireWyrm

FireWyrm (fw) runs tests asynchronously in a sequential queue. Start a suite with fw.start(), group tests into sections, assert values with chainable matchers, and close with fw.end():
function runTests() {
  fw.start();

  // fw.section() groups tests in the console output
  fw.section('Math');
  fw.assert('Addition works',       () => 1 + 1).is(2);
  fw.assert('Multiplication works', () => 3 * 4).is(12);

  // fw.test() accepts sync or async functions — return true to pass
  fw.section('Async');
  fw.test('Wait resolves', async () => {
    await wait(50); // wait() is provided by tf.init()
    return true;
  });

  // fw.assert() has 25+ chainable matchers
  fw.section('Type checks');
  fw.assert('Result is a number', () => 3 * 4).isNumber();
  fw.assert('Array has three items', () => [1, 2, 3]).hasLength(3);

  fw.end(); // flushes remaining sections and prints final results
}
Results are printed to the console with ✅/❌ per test and a summary per section.
6

Log and benchmark with ShuiHu

ShuiHu (sh) provides structured logging with four severity levels and a step-based benchmark timer built on performance.now():
// Logging — all calls are stored in an in-memory history
sh.log('App initialized');                        // level: debug
sh.warn('This is a warning', { context: 'startup' }); // level: warn

// Benchmarking — use any label as a dynamic property on sh.time
sh.time.render.start();
for (let i = 0; i < 20; i++) {
  // ... do some work ...
  sh.time.render.step(i); // records delta time and a numeric flag
}
sh.time.render.stop(); // logs the full benchmark report

// Retrieve filtered log history — returns an array of { msg, label, context }
const logs = sh.outputLogs('warn'); // only 'warn', 'error', and 'dire' entries
console.table(logs);
The sh.time proxy accepts any label — sh.time.myFunction.start(), sh.time.apiCall.start(), etc. Each benchmark is tracked independently and removed from memory on .stop() or .cancel().
Each module is fully independent. For a minimal setup, import and initialize only what you need. For example, a pure logging setup requires only the ShuiHu script tag — no init() call, just sh.log() straight away.

​
Next Steps

DiWu Overview

Deep-dive into every DOM method, event helper, animation, and Proxy property that DiWu adds.

TianFeng Overview

Explore the full TianFeng toolkit: routing, stores, fetch helpers, device detection, and more.

Build docs developers (and LLMs) love

Get started for freeTalk to us