Using JavaScript in Rayven Interface Node

Rayven’s Interface node embeds a pre‑loaded set of front‑end libraries so that you can build rich, interactive interfaces without attaching external scripts

Overview

Rayven’s HTML node embeds a pre‑loaded set of front‑end libraries so that you can build rich, interactive interfaces without attaching external scripts. All libraries are bundled and made available globally. This article gives technical users a concise reference and practical patterns for using each library directly from the node’s JavaScript editor.

When the JavaScript code runs

• The HTML section is injected first, followed by CSS, then your JavaScript.

• The DOM is therefore available when your JS executes, but you should still wrap jQuery code in $(function(){ ... }) or document.addEventListener('DOMContentLoaded', ...) for clarity.

• All libraries are attached to the global window object; you do not need to add <script> tags or import statements.

Quick reference

Library usage patterns

jQuery / jQuery‑UI

$(function () {
  $('#btn-save').on('click', () => {
    $('#dialog').dialog({ modal: true });
  });
});

Bootstrap components

$(function () {
  $('#openModal').on('click', () => $('#myModal').modal('show'));
});

DataTables

$(function () {
  $('#ordersTable').DataTable({
    pageLength: 25,
    ajax: '/data/orders.json'
  });
});

Chart.js

const ctx = document.getElementById('salesChart').getContext('2d');
new Chart(ctx, {
  type: 'bar',
  data: { /* … */ },
  options: { responsive: true }
});

Highcharts

Highcharts.chart('container', {
  series: [{ data: [1, 3, 2, 4] }]
});

Moment.js

const formatted = moment('2025-07-08').format('dddd, MMMM Do YYYY');

Crypto‑JS

const hash = CryptoJS.SHA256('secret').toString();

SimpleBar & Perfect‑Scrollbar

new SimpleBar(document.querySelector('#logPane'));

Wickedpicker

$('#timeInput').wickedpicker({ twentyFour: true });

Slick Carousel

$('.banner').slick({ autoplay: true });

Spectrum Colorpicker

$('#color').spectrum({ preferredFormat: 'hex' });

Packery

const grid = document.querySelector('.grid');
new Packery(grid, { itemSelector: '.grid-item', gutter: 10 });

DateRangePicker

$('#daterange').daterangepicker({
  startDate: moment().subtract(29, 'days'),
  endDate: moment()
});

Lightbox2

<a href="large.jpg" data-lightbox="gallery"><img src="thumb.jpg"></a>

Green Audio Player

new GreenAudioPlayer('.audio-player', { stopOthersOnPlay: true });

Using the JS Editor effectively

1. No imports needed – the runtime already holds all libraries.

2. Avoid global namespace clashes: stick to const and let.

3. Group code by responsibility: initialise UI widgets first, then bind data.

4. Clean up on node refresh by removing timers or event listeners:

   const unsub = rayven.onDestroy(() => $('#ordersTable').DataTable().destroy());

5. Performance: prefer one charting library per node; disable animations if not required.

6. Security: never pass secrets to Crypto‑JS on the client; use it only for hashing or non‑secret cryptography.

Q&A

Q: How do I know which versions are loaded?
A: Open the browser dev‑tools console and output Chart.version or $.fn.popover.Constructor.VERSION. Rayven bundles stable, non‑beta versions and upgrades them during platform releases.

Q: Can I add third‑party plugins for these libraries?
A: Yes, as long as the plugin attaches itself via the library’s global namespace and does not require module imports. Include the plugin’s code in the HTML or JS panel.

Q: Do I need to wrap my code in export default or require()?
A: No. The editor executes in the browser context—everything is already in scope.

Q: How do I reference assets (images, JSON) at runtime?
A: Use relative URLs if the assets are uploaded to the same node package, or absolute URLs if they’re stored elsewhere.

Q: What happens if two libraries try to control the same element (e.g., scrollbars)?
A: Pick one and disable the other’s handlers or you may get unpredictable behaviour.