Structured data

Modern web projects need a clean way to manage content and data. Nue helps you keep your code tidy by storing different types of information in separate YAML files. This means your content stays neat and easy to work with, without cluttering up your main files.

Types of data

Nue organizes data into three key types, each serving a distinct purpose in your website.

Information architecture

This data outlines your site’s structure — navigation, hierarchies, and connections. Define it in YAML, like in site.yaml:

documentation:
  Getting started:
    - Why Nue: /docs/
    - Installation: /docs/installation.html
  Building sites:
    - Content: /docs/content-authoring.html
    - Data: /docs/data.html

This hierarchy shapes navigation menus or sidebars directly, no extra coding required.

Content metadata

Metadata adds context to your content — titles, dates, SEO fields. It’s typically set in a page’s front matter:

# blog/post.md
--
title: "Building a Design System"
description: "A systematic approach to mathematical design"
author: "John Doe"
date: 2024-01-15
og_image: "/images/design-system.jpg"
--

This keeps content files clean while feeding layouts and search engines.

Application data

Application-specific data supports functionality — think product details or team info. Store it in a separate YAML file, like team.yaml:

team:
  - name: Sarah Chen
    role: Design Engineer
    bio: "Focused on mathematical design systems"
    twitter: "@sarahchen"
  - name: James Smith
    role: Frontend Architect
    bio: "Standards-first development advocate"
    twitter: "@jamessmith"

Use this data in templates or islands wherever it’s needed.

Data inheritance

Nue’s data flows through three levels — global, application, and page — ensuring consistency with room for overrides.

Global data

Set site-wide defaults in site.yaml:

title_template: "%s / Nue Framework"
description: "The standards-first web framework"
author: "Tero Piirainen"
og_image: "/images/nue-og.jpg"

Application data

Override globals for specific areas in files like blog.yaml:

title: "Blog"
title_template: "%s / Blog"
description: "Latest writings about standards-first development"
og_image: "/images/blog-og.jpg"

Page data

Fine-tune individual pages in front matter:


---
title: "Mathematical Design Systems"
description: "Creating interfaces through calculated precision"
og_image: "/images/math-design.jpg"
---

Data cascades from global to page, balancing uniformity and control.

Why YAML?

Nue picks YAML for its readability and natural fit with content hierarchies. Compare this:

Building websites:
  - Step-by-step tutorial: tutorial.html
  - Content: content-authoring.html

To JSON’s noisier equivalent:

{
  "Building websites": [
    {"Step-by-step tutorial": "tutorial.html"},
    {"Content": "content-authoring.html"}
  ]
}

YAML’s simplicity shines for content-driven data, avoiding the complexity of JavaScript state or typed systems when it’s not needed.