DOCSEARCHbyAlgolia
Submit Docs

Nue Web Development Ecosystem

repository·master·Indexed 27 days ago

https://github.com/nuejs/nue

A lightweight (1MB) web development ecosystem applying the UNIX philosophy to simplify the creation of content-driven sites and single-page applications. It features Nuedom, an HTML-first markup language with data bindings and event listeners that maps directly to DOM operations without a virtual DOM. The ecosystem includes Nuemark for interactive Markdown content, Nuestate for URL-first state management, Nueserver for edge-compatible development, Nueglow for CSS-first syntax highlighting, and Nueyaml for predictable YAML parsing.

Tokens
49.9K
Snippets
172
Records
324
Agent score
93%

What's inside Nue

  2. Overview of Nue development capabilities

    master

    Nue is designed as a complete ecosystem for various web development needs, following the UNIX philosophy of small, powerful tools. Key capabilities include:

    • Single-page apps (SPAs): Build SPAs using semantic HTML with dynamic expressions and pure JavaScript modules for business logic.
    • Content sites: Build documentation, blogs, and marketing pages using Nuemark content combined with layout modules.
    • Universal hot reload: Instant browser updates for content, CSS, layouts, data, components, server routes, and configurations.
    • Full-stack capabilities: Support for content sites, SPAs, server routes, and backend models within a single toolset.

  3. Overview of Nuedom (Nue)

    master
    Nuedom (or "Nue") is a markup language that extends HTML to enable building websites, applications, and SVG images. Unlike React's programmatic composition model, Nue uses a document-structure model based on a document tree with data bindings and event listeners. It is designed to be DOM-based, mapping its AST directly to DOM operations without a virtual DOM or reconciliation process.

  4. Overview of Nuemark

    master
    Nuemark is a Markdown-based authoring format designed for rich, interactive content. It follows a content-first approach where structure drives presentation, allowing developers to create rich document structures (like grids, stacks, and columns) using clean, indentation-based syntax instead of mixing CSS classes or HTML div/span soup into the content. It is compatible with standard Markdown and common extensions like tables, footnotes, and syntax highlighting.

  5. Overview of Nueyaml

    master
    Nueyaml is a simplified YAML implementation designed to eliminate the unpredictable type-guessing behavior found in standard YAML. It follows a single rule: be predictable. If a value looks like a string to a human, it is treated as a string, preventing common pitfalls like the 'Norway problem' (where NO becomes false) or octal/float conversion errors.

  6. Overview of Nuemark features

    master

    Nuemark is a Markdown-based authoring format designed for rich, interactive content. It provides:

    • Rich document structures: Indentation-based syntax for automatic sections, grids, stacks, and columns.
    • Built-in components: Native support for responsive images, videos, tables, and expandable content.
    • Full Markdown compatibility: Supports standard Markdown plus tables, footnotes, and syntax highlighting.
    • Extensible architecture: Allows developers to define custom tags that authors use naturally.
    • Structured data access: Enables programmatic parsing of document structure, headings, and front matter metadata.

  7. Overview of Nueglow syntax highlighting

    master
    Nueglow is a lightweight, CSS-first syntax highlighting solution designed to work with your existing design system. Unlike traditional highlighters that use massive JSON theme files or complex per-language grammars, Nueglow uses language-agnostic parsing to identify common patterns (strings, comments, keywords, operators) and outputs semantic HTML. This allows you to style your code blocks using standard CSS targeting a small set of HTML elements.

  8. Overview of the Nue development environment

    master
    Nue is a development environment designed following the UNIX philosophy, focusing on being small, fast, and modular. It aims to provide a full-stack development experience without the typical bloat and complexity of modern web frameworks, reducing the ecosystem size from hundreds of megabytes to approximately 1MB.

  9. Key features of Nuemark

    master

    Nuemark provides several advantages for content-driven web development:

    • Rich document structures: Uses indentation-based syntax for automatic sections, grids, stacks, and columns.
    • Built-in components: Out-of-the-box support for responsive images, videos, tables, and expandable content.
    • Full Markdown compatibility: Supports standard Markdown plus tables, footnotes, and syntax highlighting.
    • Extensible architecture: Developers can define custom tags that content authors can use naturally. Components receive arguments, data, and nested content without exposing implementation details.
    • Structured data access: Allows for programmatic parsing and querying of document structure, headings, and front matter metadata.

  10. Understand the Nue Layout System

    master

    Nue uses a modular layout system based on slots and layout modules rather than a single master template.

    Every page is automatically wrapped in a semantic HTML structure:

    <html>
  <head>
    <!-- auto-generated head -->
  </head>
  <body>
    <main>
      <article>
        <!-- your content here -->
      </article>
    </main>
  </body>
</html>

    Instead of inserting content into one spot in a wrapper, you create individual modules (like a header or footer) that fill predefined slots in the page structure.

  11. Core principles of the Nue framework

    master

    Nue is a standards-first web framework designed to reduce complexity by working with modern web standards rather than abstracting them away. It is built on four foundational pillars:

    1. Standards first: Leverages evolved browser capabilities to reduce code volume.
    2. HTML first: Uses semantic HTML as the foundation for layouts, server components, and interactive islands.
    3. Content first: Uses rich Markdown syntax for content (marketing, documentation, etc.) to keep it separate from JavaScript.
    4. Design systems: Employs systematic, mathematical CSS to create interfaces.

    This approach enables faster tooling (sub-100ms updates), cleaner code (no TypeScript imports or utility class bloat), and faster page loads (minimal JavaScript initialization).

  12. Understand the Nue development environment

    master

    Nue provides a complete full-stack development environment contained within approximately 1MB. Unlike traditional frameworks that rely on massive dependency trees, Nue is designed to be a single, integrated system that follows the UNIX philosophy: each tool is focused, all tools are integrated, and everything works on web standards.

    By using Nue, you avoid the 'dependency hell' of modern web development (where a simple 'Hello World' can exceed 400MB) and gain a system with zero external dependencies, meaning zero supply chain vulnerabilities and zero version conflicts.