KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #codex #typescript #ai-agents #claude-code #dsh #dsh-plugin #cli #deepseek-harness #macos #ai-agent #open-source

lit-html-rs

★ 31 Open GitHub ↗

lit-html in Rust

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# lit-html-rs

A Rust library for using the HTML template library [lit-html](https://lit-html.polymer-project.org/) created by the Google Polymer project.

**this library is still in very early stages**

```toml
[dependencies]
lit-html = "0"
```

Here's a demo of the iconic [todo list](https://richardanaya.github.io/lit-html-rs/examples/todo_list/).

# Basics

`lit-html` works by creating templates that efficiently render to the DOM.  When you are building a `TemplateData` object your data is being moved from WebAssembly into an object in JavaScript that can be used by the `lit-html` template.

You can put the following data on TemplateData:
* strings
* numbers
* booleans
* callbacks functions

```rust
use js::*;
use lit_html::*;

#[no_mangle]
pub fn main() {
    let mut data = TemplateData::new();
    data.set("name", "Ferris");
    render(html!(r#"<h1>Hello ${_.name}</h1>"#, &data), DOM_BODY);
}
```

See it working [here](https://richardanaya.github.io/lit-html-rs/examples/helloworld/).

# Counter

You can build up complex UI by creating Templates that contain other data bound templates. `lit-html` efficiently manipulates the DOM when data changes.

```rust
use js::*;
use lit_html::*;

static mut COUNT: u32 = 0;

fn counter() -> Template {
    let mut data = TemplateData::new();
    data.set("count", unsafe { COUNT });
    data.set("increment", || {
        unsafe { COUNT += 1 };
        rerender();
    });
    html!(
        r#"The current count is ${_.count} <button @click="${_.increment}">+</button>"#,
        data
    )
}

fn app() -> Template {
    let mut data = TemplateData::new();
    data.set("content", counter());
    html!(
        r#"<div>This is a counter in Rust!</div><div>${_.content}</div>"#,
        data
    )
}

fn rerender() {
    render(&app(), DOM_BODY);
}

#[no_mangle]
pub fn main() {
    rerender();
}
```

See it working [here](https://richardanaya.github.io/lit-html-rs/examples/counter/).

# License

This project is licensed under either of

* Apache License, Version 2.0, ([LICENSE-APACHE](LICENSE-APACHE) or
   http://www.apache.org/licenses/LICENSE-2.0)
 * MIT license ([LICENSE-MIT](LICENSE-MIT) or
   http://opensource.org/licenses/MIT)

at your option.

### Contribution

Unless you explicitly state otherwise, any contribution intentionally submitted
for inclusion in `js-wasm` by you, as defined in the Apache-2.0 license, shall be
dual licensed as above, without any additional terms or conditions.

lit-html-rs

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README