Skip to main content

Tooling

Create nodality​

Create Nodality package allows you to quickly bootstrap a new Nodality application. For deploying instructions see Deploy. To create simple app use:

npm create nodality@latest my-app

Navigate to your app:

cd my-app

Simple Nodality app will be created. It consists of several files here are the most important:

  • index.html - basic HTML with <div> where the app will be created.
  • src/app.js - Your Nodality app code

index.html​

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>my-app</title>

  <script type="importmap">
  {
    "imports": {
      "nodality": "/dist/lib.bundle.js"
    }
  }
  </script>

   <style>
      * {
         margin: 0;
         padding:0;
         box-sizing: border-box;
       }
   </style>

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

  <script type="module" src="/src/app.js"></script>
</body>
</html>

/src/app.js​

import * as Nodality from "nodality";

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

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

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

Nodality CLI​

Nodality CLI allows you to quickly scaffold a Nodality app and add components using command line interface.

  1. First make new NodeJS project:
npm init -y
  1. Install CLI:
npm i nodality cli
  1. Make new project:
nodality-cli create projectName
cd projectName
npm run build
npm start
  1. Add a component:
nodality-cli component Nice

The following component will be generated in Nice.js file:

import * as Nodality from "nodality";

class Nice extends Base {
    constructor(props) {
        super();
        this.props = props;
    }

    render(){
        return new Text(this.props.year)
        .set({
            color: "#1abc9c"
        });
    }
}

export { Nice };

You can now add the component into your app.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>App</title>

  <script type="importmap">
  {
    "imports": {
      "nodality": "/dist/lib.bundle.js"
    }
  }
  </script>
</head>
<body>
  <div id="mount"></div>

  <script type="module" src="/src/app.js"></script>

    <script type="module">
      import {Nice} from "./Nice.js";
      
      new Nice({
          year: "2025"
        })
        .mount("#mount");
    </script>
</body>
</html>

To recompile the app after changes, run:

npm run build && npm start

Create Nodality React​

Nodality support React integration. For more see: Integration

npx create-nodality-react my-app

Create Nodality Vue​

Nodality support Vue integration. For more see: Integration

npx create-nodality-vue my-app