cotis-web 0.1.0-alpha

Browser/WASM render backend for the Cotis UI framework
Documentation

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 render commands by cotis-pipes, then mapped to DOM elements via CSS absolute positioning and a companion JavaScript module (renderer.js).

Status: Early 0.1.0-alpha release. APIs are still evolving.

Workspace crates

Crate Role
cotis-web WASM renderer backend — HTMLRenderer, DOM draw pipeline, browser interactivity
cotis-web-builder wasm-pack build routine and cotis-cli plugin
web-example Full example WASM application (not published)

Prerequisites

  • Rust stable toolchain (see rust-toolchain.toml)

  • wasm32-unknown-unknown target:

    rustup target add wasm32-unknown-unknown

  • wasm-pack on PATH (for building WASM output)

Installation

Add the renderer crate to your Cargo.toml:

cotis-web = "0.1.0-alpha"

A full browser application also needs layout, pipes, and a WASM app crate. See Quick start.

Quick start

Build and serve the bundled example from the repository:

git clone https://github.com/igna-778/cotis-web
cd cotis-web/web-example
cargo run -p cotis-web-builder-cli -- --output ../target/cotis_web

Then serve the output directory (contains index.html, pkg/, and web-renderer/renderer.js) with any static file server.

With cotis-cli

Install the build routine as a plugin:

cotis-cli install path:/path/to/cotis-web/cotis-web-builder
cotis-cli run cotis-web-builder -- --output ./target/cotis_web

Run from your WASM app crate directory (where Cargo.toml defines the cdylib).

Typical app wiring

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/src/lib.rs for a complete UI tree with custom HTML, images, and form state.

Features

cotis-web

  • app_launch — WASM export helpers via cotis launch hooks (enable on cotis as well)
  • complex_color — layered and gradient color support (forwards to cotis-defaults)
  • complex_colored_text — extends complex_color to text color fields

Ecosystem

Cotis is split across several repositories. This repo provides the browser renderer and build tooling.

Repository Role
cotis Core traits and CotisApp orchestration
cotis-web (this repo) Browser/WASM renderer and build routine
cotis-layout Flexbox-style layout engine
cotis-pipes Layout output to render commands
cotis-cli Plugin host for installable build and run routines
cotis-wgpu Desktop renderer (wgpu + winit + glyphon)
cotis-raylib Desktop renderer (raylib)

Documentation