Getting started

Try Nørd in your Browser

There are several ways to try out Nørd online, without ever opening a code editor.

To try out Nørd in a plain, HTML based setup, you can use this JSFiddle
You can check out a more elaborate example based on Vite + TS in this StackBlitz project.
Check out the CodeSandbox starter Template to start developing right in your browser.

Creating a Nørd Application

INFO

You need to have Node.js version 18.0 or higher installed to use the scaffolder.

yarnnpm

# Scaffold a project using yarn
$ yarn create @grainular/nord

# Scaffold a project using npm
$ npm create @grainular/nord

The command will install and execute @grainular/create-nord, the official Nørd scaffolding tool. Follow the presented prompts and select a template to scaffold a project in the selected directory.

Nørd Web: A basic html based setup without any build tools.
Nørd Web (modules): A html based application utilising JavaScript modules.
Nørd Vite: A modern, Vite based template.
Nørd Vite TypeScript: A modern, Vite based template using TypeScript.

TIP

The Nørd Vite TypeScript template is the recommended way to develop a Nørd application. To learn more about Vite, check out the Vite docs

Follow the instructions provided by the CLI to start developing your Application.

Rolling your own Nørd

There are generally two different ways to use Nørd in an application. Using the npm package or including the script via CDN.

Using the npm package

You can install the @grainular/nord package via yarn or npm:

yarnnpm

# Install the package using yarn
$ yarn add @grainular/nord

# Install the package using npm
$ npm install @grainular/nord

Depending on your application setup, you can use the require or import syntax to import the package contents into your application.

WARNING

Nørd is a browser only framework and will not run in a pure node environment. The npm package must always be used with a build tool like, vite, rollup or webpack.

// main.js

import { createComponent, render } from '@grainular/nord';

const App = createComponent((html) => {
    // ...rest of the component
});

render(App, { target: document.querySelector('#app') });

Using a CDN

If you would like to forego the build setup, you can use Nørd without any kind of builder in a pure browser environment. Nørd is available using the unpkg CDN. Depending on your style of application, there are two different ways to setup an CDN based Nørd app.

iifemodules

html

<main id="app"></main>
<script src="http://unpkg.com/@grainular/nord"></script>
<!-- You can then access the Nørd namespace from the global window object -->
<script>
    const { render, createComponent } = window.nord;

    const App = createComponent((html) => {
        // ... rest of your component
    });
    render(App, { target: document.querySelector('#app') });
</script>

// main.ts
import * as nord from 'http://unpkg.com/@grainular/nord/dist/index.mjs';

const App = nord.createComponent((html) => {
    // ... rest of your component
});

nord.render(App, { target: document.querySelector('#app') });

Next Steps

Now that you are able to create and setup your Nørd application, take a look at how a Application works, how the Component syntax works, or how to create Grains, the reactive primitive of Nørd

Getting started ​

Try Nørd in your Browser ​

Creating a Nørd Application ​

Rolling your own Nørd ​

Using the npm package ​

Using a CDN ​

Next Steps ​