Configuration Reference¶

<nemo>
  <variable name="..." ... />       <!-- Variable definitions (0 or more) -->
  <app>...</app>                     <!-- Application and window settings -->
  <script src="..." />               <!-- Script loading configuration -->
  <templates>...</templates>         <!-- Reusable component templates -->
  <data>...</data>                   <!-- Data source and sink definitions -->
  <layout>...</layout>               <!-- UI component tree -->
</nemo>

<variable name="button_height" type="int" default="48" />
<variable name="api_base" type="string" default="https://api.example.com" />

min-height="${var.button_height}"
url="${var.api_base}/users"

<app title="My Application">
  <window title="Window Title" width="1024" height="768" min-width="320" min-height="240">
    <header-bar github-url="https://github.com/user/repo" theme-toggle="true" />
  </window>

  <theme name="kanagawa" mode="dark">
    <extend name="custom" primary="#FF6600" background="#1A1A2E" />
  </theme>
</app>

<script src="./scripts" />

<templates>
  <template name="nav_item">
    <button variant="ghost" size="sm" on-click="on_nav" />
  </template>

  <template name="content_page">
    <panel visible="false">
      <stack id="inner" direction="vertical" spacing="12" padding="32" slot="true" />
    </panel>
  </template>
</templates>

<layout type="stack">
  <panel id="nav_home" template="nav_item" label="Home" />
  <panel id="nav_settings" template="nav_item" label="Settings" />
</layout>

<templates>
  <template name="card">
    <panel padding="16">
      <stack id="body" direction="vertical" slot="true" />
    </panel>
  </template>
</templates>

<layout type="stack">
  <panel id="user_card" template="card">
    <label id="title" text="User Profile" />
  </panel>
</layout>

<data>
  <source name="name" type="...">
    <!-- source-specific attributes -->
  </source>

  <sink name="name" type="...">
    <!-- sink-specific attributes -->
  </sink>
</data>

<source name="ticker" type="timer" interval="1" />

<source name="api" type="http" url="https://httpbin.org/get" interval="30" method="GET" timeout="30" />

<source name="stream" type="websocket" url="wss://api.example.com/stream" />

<source name="sensors" type="mqtt" host="localhost" port="1883" topics='["sensors/#", "alerts/high"]' client-id="nemo-app" />

<source name="events" type="redis" url="redis://127.0.0.1:6379" channels='["app-events", "notifications"]' />

<source name="messages" type="nats" url="nats://127.0.0.1:4222" subjects='["updates.>", "commands.*"]' />

<source name="config_file" type="file" path="/path/to/data.json" watch="true" format="json" />

<sink name="commands" type="mqtt" host="localhost" port="1883" topic="commands" />

<sink name="outbound" type="redis" url="redis://127.0.0.1:6379" channel="app-commands" />

<sink name="nats_out" type="nats" url="nats://127.0.0.1:4222" subject="commands.>" />

<layout type="stack">
  <component_type id="id">
    <!-- properties as attributes -->
    <label id="child_id" text="Nested child" />
  </component_type>
</layout>

<stack id="toolbar" direction="horizontal" spacing="8" padding="16" />

<panel id="card" padding="16" border="2" border-color="theme.border" shadow="md" />

<label id="title" text="Hello World" size="xl" />

<text id="paragraph" content="A longer block of text content." />

<button id="submit" label="Submit" variant="primary" on-click="on_submit" />

<input id="name_input" placeholder="Enter your name" disabled="false" />

<checkbox id="agree" label="I agree to the terms" checked="false" on-click="on_agree_changed" />

<select id="color_picker" options='["Red", "Green", "Blue"]' value="Red" />

<icon id="settings_icon" name="settings" size="md" />

<image id="logo" src="/path/to/image.png" alt="Company logo" />

<progress id="upload_progress" value="75" />

<list id="task_list" items='["Task 1", "Task 2", "Task 3"]' />

<notification id="alert" message="Operation completed successfully" kind="success" />

<modal id="confirm_dialog" title="Confirm Action" open="false">
  <label id="body" text="Are you sure?" />
</modal>

<tooltip id="help" content="This is additional context">
  <icon id="icon" name="help" />
</tooltip>

<tabs id="view_tabs">
  <label id="tab1" text="Tab 1 Content" />
  <label id="tab2" text="Tab 2 Content" />
</tabs>

<accordion id="faq" items='[{"title": "Question 1", "content": "Answer 1", "open": true}, {"title": "Question 2", "content": "Answer 2"}, {"title": "Question 3", "content": "Answer 3"}]' multiple="true" bordered="false" />

<alert id="error_alert" title="Error" message="Something went wrong." variant="error" />

<avatar id="user_avatar" name="Alice Johnson" />

<badge id="notification_badge" count="5">
  <button id="btn" label="Inbox" />
</badge>

<collapsible id="details" title="Show Details" open="false">
  <text id="content" content="Hidden content revealed when expanded." />
</collapsible>

<dropdown_button id="actions" label="Actions" variant="primary" items='["Copy", "Paste", "Cut"]' />

<radio id="size_picker" options='["Small", "Medium", "Large"]' value="Medium" direction="horizontal" />

<slider id="volume" min="0" max="100" step="1" value="50" />

<spinner id="loading" size="lg" />

<switch id="dark_mode" label="Dark Mode" checked="true" />

<tag id="status_tag" label="Active" variant="success" outline="true" />

<toggle id="favorite" label="Favorite" icon="star" checked="false" />

<sidenav_bar id="sidebar" collapsed="false" width="200">
  <sidenav_bar_item id="nav_home" icon="globe" label="Home" />
  <sidenav_bar_item id="nav_inbox" icon="inbox" label="Inbox" />
  <sidenav_bar_item id="nav_settings" icon="settings" label="Settings" />
</sidenav_bar>

<sidenav_bar_item id="nav_home" icon="globe" label="Home" />

<table id="users" stripe="true"
  columns='[{"key": "name", "label": "Name", "width": 150}, {"key": "email", "label": "Email", "width": 220}, {"key": "role", "label": "Role", "width": 120}]'
  data='[{"name": "Alice", "email": "alice@example.com", "role": "Admin"}, {"name": "Bob", "email": "bob@example.com", "role": "Editor"}]'
/>

<tree id="file_tree" items='[{"id": "src", "label": "src", "expanded": true, "children": [{"id": "src/main.rs", "label": "main.rs"}, {"id": "src/lib.rs", "label": "lib.rs"}]}, {"id": "Cargo.toml", "label": "Cargo.toml"}]' />

<line_chart id="revenue" x-field="month" y-field="revenue" dot="true" height="300"
  data='[{"month": "Jan", "revenue": 186}, {"month": "Feb", "revenue": 305}, {"month": "Mar", "revenue": 237}]'
/>

<bar_chart id="visitors" x-field="month" y-field="visitors" show-label="true" height="300"
  data='[{"month": "Jan", "visitors": 275}, {"month": "Feb", "visitors": 200}]'
/>

<area_chart id="traffic" x-field="month" y-fields='["desktop", "mobile"]' height="300"
  data='[{"month": "Jan", "desktop": 186, "mobile": 80}, {"month": "Feb", "desktop": 305, "mobile": 200}]'
/>

<pie_chart id="browsers" value-field="amount" height="300"
  data='[{"label": "Chrome", "amount": 275}, {"label": "Safari", "amount": 200}, {"label": "Firefox", "amount": 187}]'
/>

<candlestick_chart id="stocks" x-field="date" open-field="open" high-field="high" low-field="low" close-field="close" height="300"
  data='[{"date": "Mon", "open": 100.0, "high": 110.0, "low": 95.0, "close": 108.0}, {"date": "Tue", "open": 108.0, "high": 115.0, "low": 102.0, "close": 104.0}]'
/>

<label id="display" text="Waiting...">
  <binding source="data.ticker" target="text" transform="tick" />
</label>

<text id="raw_data" content="No data yet" bind-content="data.api" />

<binding source="data.api" target="content" />

<label id="sensor" text="Loading...">
  <binding source="data.sensors" target="text" transform="payload" />
</label>

<button id="btn" label="Click" on-click="handle_click" />

on-click="utils::format_data"

min-height="${var.button_height}"
url="${var.api_base}/endpoint"

path="${env.HOME}/config"

title="Hello ${var.user_name}!"

text="${var.enabled ? 'Active' : 'Inactive'}"

border-color="#FF6600"
border-color="#FF660080"   <!-- with alpha -->