Components are the fundamental building blocks of a Nijor user interface. You can think of them as custom HTML tags equipped with custom attributes (props) and encapsulated logic.
Every component in Nijor is defined in its own .nijor file. By bundling markup, behavior, and styling into a single file, Nijor components are highly modular, reusable, and easy to maintain.
A typical Nijor component file contains three self-contained blocks: a template for markup, an optional script for logic, and an optional style block for scoped CSS.
<body>
<!-- Your HTML structure goes here -->
</body>
<style>
/* Your CSS styling goes here */
/* Styles here are scoped and will only apply to the HTML inside this component */
</style>
<script>
// Your JavaScript logic goes here
</script>
Props allow you to pass dynamic data down from parent components to child components. In Nijor, you declare which props a component accepts by destructuring them directly inside the props attribute of the <template> tag.
Once declared, these props can be referenced directly in your template using curly brace interpolation {variableName}, or inside your <script> block as standard variables.
Nijor also provides a special html prop, which automatically represents the inner markup passed between the component's opening and closing tags (similar to children in React or slots in Vue).
<body props="{ name , age }">
<h1>Hello, { name }!</h1>
<p>You are { age } years old, which makes you { isEligible } to drive.</p>
</body>
<script>
const isEligible = parseInt(age) >= 18 ? "eligible" : "not eligible";
</script>
User interactions are managed using standard inline event listeners. In .nijor files, events are declared using the on:event syntax (e.g., onclick becomes on:click).
To expose your event handlers to the template, you must declare the handler functions inside the <script> tag and prefix them with the export keyword.
<body>
<p id="msg">Click the button below...</p>
<button on:click="sayHello()">Say Hello</button>
</body>
<script>
export function sayHello() {
document.getElementById('msg').innerHTML = "Hello, World!";
}
</script>
To use a child component inside another component, page, or layout, import it using the self-closing <import> tag outside the <template> block:
<import name="component-tag-name" source="path-to-component">
Component names are case-insensitive, just like standard HTML tags. You can name your component anything, but you must avoid using reserved native names: body, head, import, style, and script.
Below is a full example demonstrating how to build a reusable notification card component and import it into a parent dashboard page.
<body props="{ title , html }">
<div class="box">
<h3>{ title }</h3>
<p>{ html }</p>
<button on:click="showMessage('{html}')">Show Details</button>
</div>
</body>
<script>
export function showMessage(msg) {
alert(msg);
}
</script>
<style>
.box {
border: 1px solid #ddd;
padding: 16px;
border-radius: 8px;
background: #fafafa;
max-width: 320px;
margin-bottom: 12px;
}
button {
margin-top: 8px;
padding: 6px 12px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
<import name="notification-box" source="@/components/notification-box.nijor">
<body>
<h1>System Alerts Dashboard</h1>
<notification-box title="Update Available">A new version of the framework is ready to install.</notification-box>
<notification-box title="Connection Warning">The application is currently running in offline fallback mode.</notification-box>
</body>
Nijor components expose two native lifecycle callbacks that allow you to hook into the mount and unmount processes:
<body>
<!-- Component Markup -->
</body>
<script>
export function onMount(){
// Runs immediately after the component is injected into the DOM.
// Has full access to passed props.
// Can be declared as async (useful for data fetching).
}
export function onUnmount(){
// Runs immediately after the component is removed from the DOM.
// Has full access to passed props.
// Must be synchronous; cannot be async.
}
</script>