Misc features

Logging in the web browser

To output to the web browser's console (ie console.log() in JS), use the log!, which is imported in the seed prelude: log!("On the shoulders of", 5, "giants".to_string()). You can use the error! macro in a similar way, equivalent to JS's console.error().

Custom tags

Seed generally restricts the element tags allowed by using Enums for the tags, and a predefined set of element-creation macros. If you wish to use a custom tag, you can use using Tag::from (El and Tag are exposed in the prelude), either with the El::empty constructor, or using the custom! element-construction macro, where we pass our custom tag as an argument:

let mut custom_el = El::empty(Tag::Custom("mytag".to_string()));
custom_el.set_text("Words");

custom![ Tag::from("anothertag".into())
    custom_el,
]

An example is provided as part of the window_events example.

Local storage

You can store page state locally using web_sys's Storage struct

Seed provides convenience functions seed::storage::get_storage, which returns the web_sys::storage object, and seed::storage::store_data to store an arbitrary Rust data structure that implements serde's Serialize. Example use:

extern crate serde;
use seed::{*, prelude::*};

// ...
#[derive(Serialize, Deserialize)]
struct Data {
    // Arbitrary data (All sub-structs etc must also implement Serialize and Deserialize)
}

let storage = seed::storage::get_storage();
seed::storage::store(storage, "my-data", Data::new());

// ...

let loaded_serialized = storage.get_item("my-data").unwrap().unwrap();
let data = serde_json::from_str(&loaded_serialized).unwrap();

Display markdown and raw HTML

Seed supports creating elements from markdown text, using pulldown-cmark internally. Use the El::from_markdown() method to create an element that accepts a markdown &str as its only parameter, and displays it normally as html. Note that it does not support syntax highlighting. You can render raw HTML with El::from_html(html), where html is a &str of HTML. You can also use the raw! and md! macros for from_html and from_markdown respectively.

Example:

fn view(model: &Model) -> Vec<Node<Msg>> {

    let markdown = 
"
## Hello world

Let's set the existence-of-God issue aside for a later volume,
and just [learn to code](https://play.rust-lang.org/).
";

    let html = 
"
<div>
    <p>It is a truth universally acknowledged, that a single man in 
    possession of a good fortune, must be in want of a good time.</p>
</div>
";
    
    vec![
        Node::from_markdown(markdown)   // or md!(markdown)
        Node::from_html(html)  // or raw!(html)
    ]
}

This works for SVG as well:

fn view(model: &Model) -> Impl View<Msg> {
    Node::from_html(
r#"
<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="5" y="5" width="20" height="20"></rect>
</svg>
"#)
}

Using web_sys to view element data.

web_sys, which Seed uses internally, can be used to view information about elements. For example:

fn get_height(id: &str) -> i32 {	
    let html_el = seed::document().get_element_by_id("my_el").unwrap();
    let h = html_el.client_height();	
    log!("Height {:?}", h);	
    h	
}

Where we've given the element we wish to query id my_el.

Some convenience functions

You can use seed::document() and seed::window() to access the web_sys document and window functions. Example:

fn view(model: &Model) -> Vec<Node<Msg>> {
    vec![
        button![ 
            simple_ev("click", Msg::Increment), 
            format!("Hello, World × {}", model.val),
            did_mount(|_| {
                seed::document().set_title("New title")
            })
        ]
    ]
}

Additionally, use seed::html_document() in the same way, to return a HtmlDocument

We also include seed::canvas(), and seed::canvas_context().

You can call seed::cookies() to retrieve all cookies from the current HtmlDocument.