Crate cotis_web 

Browser/WASM render backend for the Cotis UI framework.

cotis-web implements CotisRendererAsync for HTML/CSS output. Layout output from cotis-layout is converted to cotis_defaults::render_commands draw commands by cotis-pipes, then mapped to DOM elements via CSS absolute positioning and a companion JavaScript module (renderer.js).

Stack

• wasm-bindgen / web-sys — Rust ↔ browser FFI
• serde_json — custom-element property serialization
• renderer.js — frame timing, input, DOM host management (loaded via wasm-bindgen module = attribute)

This crate is async-only: use HTMLRenderer with AsyncRenderApp, not the sync CotisRenderer trait.

DOM model

Each render command id maps to one host element with id cotis-{id}. Drawables accumulate CSS on that node via HTMLCanvas::ensure_command_element and HTMLCanvas::current_element_css_push. At the end of a frame, HTMLCanvas::finish removes DOM nodes that were not used.

Quick start

use cotis::cotis_app::{AsyncRenderApp, CotisApp};
use cotis_layout::preamble::CotisLayoutManager;
use cotis_pipes::cotis_layout_pipes::CotisLayoutToRenderListPipeForGenerics;
use cotis_utils::math::Dimensions;
use cotis_web::renderer::HTMLRenderer;

let renderer = HTMLRenderer::new();
let manager = CotisLayoutManager::new(Dimensions::new(800.0, 800.0));
let mut app = CotisApp::new(renderer, manager, CotisLayoutToRenderListPipeForGenerics);
// AsyncRenderApp::compute_frame_async(&mut app, |layout| { ... }).await;

See web-example for a complete UI tree with custom HTML, images, and form state reading.

WASM bootstrap

Typical page load sequence (see bundled resources/on-root/index.html):

1. await init() — load the .wasm binary (wasm-bindgen glue).
2. init_wasm() — initialize logging and a panic hook (wasm export from this crate).
3. Call an app entry export:
   • main_run — WASM export in the app crate (e.g. web-example) that calls cotis_launch_async after init_wasm(). Requires the app_launch feature on cotis / cotis-web.

Build workflow

Use the cotis-web-builder crate / CLI plugin to run wasm-pack, copy renderer.js and index.html, and patch the WASM import path.

Modules

Module	Visibility	Role
renderer	public	HTMLRenderer — main app-facing type
rendering	public	HTMLCanvas, HTMLDrawable, draw pipeline
images	public	URLImage trait and URLImageEnum for CSS background-image
color	public	Cotis Color → CSS string helpers
custom_data	public	ExtraHTMLData for custom DOM tags and styles
cotis_traits	public	Cotis context trait impls on HTMLRenderer
start_up	public	init, main_run helpers for WASM app crates
interactivity	crate-private	Mouse/keyboard providers for the browser
web_functions	crate-private	Low-level JS FFI bindings

Custom HTML and images

Attach ExtraHTMLData as the extra_data generic on ElementConfig / render commands to control the host element tag (div, button, …) and optional inline CSS.

Use URLImageEnum as the image type parameter and implement URLImage (or use the provided enum) so image drawables emit background-image: url(...).

Read back form state with HTMLRenderer::get_custom_element_html and HTMLRenderer::get_custom_element_properties.

Load fonts with HTMLRenderer::load_font and a FontManager.

Features

By default, only solid Color values are supported.

Feature	Effect
complex_color	Background/fill colors become ColorLayer
complex_colored_text	Text colors become ColorLayer (implies complex_color in cotis-defaults)

Enable via Cargo, e.g. cotis-web = { path = "...", features = ["complex_color"] }.

Gradient roadmap: when features are enabled, non-Solid ColorLayer variants currently map to "transparent" in the Rust draw path. Full CSS gradient support is planned; the legacy JSON draw_frame path in renderer.js already handles gradients but is not used by HTMLRenderer.

Related crates (not part of this crate)

• cotis-web-builder — WASM build routine
• web-example — full example application

Modules

color

CSS color conversion helpers for HTML drawables.

cotis_traits

Cotis context trait implementations for HTMLRenderer.

custom_data

Custom HTML host data for render commands.

images

Image URL types for web rendering.

renderer

Application-facing renderer type for browser/WASM targets.

rendering

DOM canvas and drawable trait for mapping Cotis render commands to HTML/CSS.

start_up

WASM entry points exported to JavaScript.