Package Exports

lydio
lydio/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (lydio) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Lydio

Beautiful, modular, programmatic HTML

Canonical URL: https://alexstevovich.com/r/lydio-nodejs

Write a tag. Make a component. Build a site. All in plain JavaScript.

Quick Example:

const  html  =  new  Tag('html');
const  head  =  html.addTag('head');
const  body  =  html.addTag('body');
body.addText('Lydio is Awesome!');

console.log(html.toHtml());
 
/*
<html><head></head><body>Lydio is Awesome!</body></html>
*/

With Components:

class  MyHeader  extends  Tag {
    constructor(brandSrc, brandAlt) {
    super('header');
    const  brand  =  this.addTag('a').setAttribute('href', '/');
    brand.addLeaf('img').setAttribute('src', brandSrc).setAttribute('alt', brandAlt);
    }
}
 
const  body  =  new  Tag('body');
body.addNode(new  MyHeader('./lydio-brand.webp', 'A picture of Lydio'));

Installation

 npm  install  lydio

Features

API:

Elegant, clear, and minimal HTML writing.
Fluent when you want it to be.
Fully programmatic, full control.
The programmatic nature allows complex HTML components to be easily made and shared.

No framework:

Each piece outputs standard HTML
No forced bundlers
No forced server architecture
No proprietary documents
No black boxes

Core Types

3 core types are offered to express HTML they all extend from one base type

Node (Abstract Base)

Lydio gives you three basic building blocks to express HTML programmatically:

Tag: For regular elements like <div>.
Leaf: For self-closing elements like <img>.
Fragment: For grouping elements without a wrapper.

These all extend from a shared base Node with common methods and properties.

Advanced Features

Bubble

Bubbling a node lets a function recursively be applied to all nested nodes. You can transform an entire hierarchy however you want.

Apply BEM, style scopes and more. You can write your own but I provide a default library of these here:

@lydio/bubbles

Components

You can make reusable configurable components easily. Here's a few premade plugins:

The entire web standard semantics: @lydio/semantics
The head meta web standard: @lydio/meta

Audit

`audit()`

Check your structure at any time with .audit() to catch invalid HTML and get helpful feedback. You can even extend audits on your own components for custom validation.

Meaning

`toMeaning()`

Get a semantic summary of your site, including hidden content like aria-labels and alt text.

Useful for extracting plain-text structure to share with copy editors or LLMs, or for auditing meaningful content across your project.

Each component can override toMeaning() to define its own output.

Css

@lydio/css a companion package for programmatic CSS authoring.

License

Licensed under the Apache License 2.0.

Trademark

“Lydio” and related marks are trademarks of Alex Stevovich.
See TRADEMARK.md for details.