Nodality

Instalation

The easiest way to get up and running is to use npm

npm create nodality@latest my-app

Get started

Step 1: Array of elements

Define an array of elements you want to display in your user interface:

let elements = [
  {
    type: "h1",
    text: "Hello"
  }
];

Step 2: Array of nodes

Define an array of nodes that will adjust the behavior of the element. This node adds a stroked text effect:

let nodes = [
  {
    op: "blast"
  }
];

Step 3: Designer

Add elements into the elements method and nodes array into nodesmethod, and use set method to mount the result of the code to the website. Use code: true option to also display the code of the elements.

new Des()
  .nodes(nodes)
  .add(elements)
  .set({
    mount: "#mount",
    code: true
  });

Result

The operations above will result in the following code. You can render this element into any div on your website.

new Text("Hello")
  .set({
    index: "0",
    size: "S1",
    font: "Arial",
    stroke: { 
     op: {
      name: "blast", 
      color: "green",
      width: "1px"
       } 
      },
    })
  .render("#home");

Here is the complete setup:

Generation part

<div id="mount"></div>

<script type="module">
import {Des} from "https://www.unpkg.com/nodality@1.0.0-beta.4/dist/index.esm.js";

let elements = [
  {
    type: "h1",
    text: "Hello"
  }
];

let nodes = [
  {
    op: "blast"
  }
];

new Des()
  .nodes(nodes)
  .add(elements)
  .set({
    mount: "#mount",
    code: true
  });
</script>

Usage part

<div id="mount"></div>
<script type="module">
import {Text} from "https://www.unpkg.com/nodality@1.0.0-beta.4/dist/index.esm.js";

new Text("Hello")
  .set({
    index: "0",
    size: "S1",
    font: "Arial",
    stroke: { 
     op: {
      name: "blast", 
      color: "green",
      width: "1px"
       } 
      },
    })
  .render("#home");
  </script>