Crate hyperchad_template 

Template system for building HTML-like user interfaces.

This crate provides a declarative template syntax via the container! macro, along with rendering traits and DSL functions for building dynamic UIs.

Main Features

• Template Syntax - Use the container! macro to write HTML-like templates
• Rendering - Implement RenderContainer to convert custom types to containers
• Actions DSL - Define interactive behaviors with the fx function
• Styling - Use calc for calculations and color functions like rgb()/rgba()
• Viewport Units - Create responsive layouts with vw(), vh(), dvw(), dvh()

Basic Usage

use hyperchad_template::{container, to_html};

// Create a simple template
let containers = container! {
    div {
        h1 { "Hello, World!" }
        div { "Welcome to HyperChad templates." }
    }
};

// Convert to HTML string
let html = to_html(&containers);

Styling with Attributes

use hyperchad_template::container;

let containers = container! {
    div width=100% height=vh(100) background=rgb(240, 240, 240) {
        h1 color=rgb(0, 120, 200) { "Styled Header" }
    }
};

Interactive Actions

use hyperchad_template::container;

let containers = container! {
    button fx-click=fx { show("modal") } {
        "Open Modal"
    }
    div id="modal" hidden {
        "Modal Content"
    }
};

Custom Components

Implement RenderContainer to create reusable components:

use hyperchad_template::{container, Containers, RenderContainer};
use core::convert::Infallible;

struct Alert {
    message: String,
    level: AlertLevel,
}

enum AlertLevel {
    Info,
    Warning,
}

impl RenderContainer for Alert {
    type Error = Infallible;

    fn render_to(&self, containers: &mut Containers) -> Result<(), Self::Error> {
        let class = match self.level {
            AlertLevel::Info => "alert-info",
            AlertLevel::Warning => "alert-warning",
        };
        *containers = container! {
            div class=(class) {
                (self.message.clone())
            }
        };
        Ok(())
    }
}

Re-exports

pub use hyperchad_actions as actions;

pub use hyperchad_color as color;

pub use hyperchad_template_actions_dsl as template_actions_dsl;

pub use hyperchad_transformer as transformer;

pub use hyperchad_transformer_models as transformer_models;

Modules

calc

Helper module for calc() expressions and mathematical operations on Number types

color_functions

Helper module for color functions

prelude

Prelude module that re-exports commonly used traits.

unit_functions

Helper functions for creating viewport unit values.

Macros

container

The main template macro for creating HTML-like containers.

Structs

Container

The core container type that represents a single UI element.

ContainerList

A wrapper around Vec<Container> that provides convenient methods without requiring trait imports.

IfExpression

Re-export logic types for responsive and conditional rendering (requires logic feature).

ParseSelectorError

Re-export all transformer model types for convenience.

Enums

AlignItems

Re-export all transformer model types for convenience.

Cursor

Re-export all transformer model types for convenience.

ElementTarget

Re-export all transformer model types for convenience.

FontWeight

Re-export all transformer model types for convenience.

ImageFit

Re-export all transformer model types for convenience.

ImageLoading

Re-export all transformer model types for convenience.

JustifyContent

Re-export all transformer model types for convenience.

LayoutDirection

Re-export all transformer model types for convenience.

LayoutOverflow

Re-export all transformer model types for convenience.

LinkTarget

Re-export all transformer model types for convenience.

OverflowWrap

Re-export all transformer model types for convenience.

Position

Re-export all transformer model types for convenience.

Responsive

Re-export logic types for responsive and conditional rendering (requires logic feature).

Route

Re-export all transformer model types for convenience.

Selector

Re-export all transformer model types for convenience.

SwapStrategy

Re-export all transformer model types for convenience.

Target

Re-export all transformer model types for convenience.

TextAlign

Re-export all transformer model types for convenience.

TextDecorationLine

Re-export all transformer model types for convenience.

TextDecorationStyle

Re-export all transformer model types for convenience.

TextOverflow

Re-export all transformer model types for convenience.

UserSelect

Re-export all transformer model types for convenience.

Visibility

Re-export all transformer model types for convenience.

WhiteSpace

Re-export all transformer model types for convenience.

Traits

ContainerVecExt

Extension trait to add missing methods to Vec<Container>

ContainerVecMethods

Extension methods for Vec<Container> that are automatically available.

IntoActionEffect

Trait for converting various types to ActionEffect.

IntoBorder

Trait for converting various types to border tuples (Color, Number).

RenderContainer

Represents a type that can be rendered as a Container.

ToBool

Trait for converting values to bool.

Functions

fx

FX DSL function for template actions

if_responsive

Re-export logic types for responsive and conditional rendering (requires logic feature).

into_html

Convert a Vec<Container> to an HTML string, consuming the vector.

to_html

Convert a Vec<Container> to an HTML string without requiring trait imports.

Type Aliases

Containers

The result type for the container! macro.