Crate mathquill_leptos 

MathQuill + Leptos = ❤️

A simple, easy-to-use and hard to abuse API for using MathQuill in Leptos. Is only really tested using CSR (Client Side Rendering), although it shouldn’t cause issues with SSR.

Running examples

# install trunk however you like
cargo install trunk

trunk serve --example field
trunk serve --example static

You need to load the JQuery JS library and the MathQuill JS library before using this crate, download from their github releases page and a copy of jQuery (e.g. here). You will then need to include <script> tags to load them. See the MathQuill documentation for more details

Simple example

Using a mutable field:

use leptos::prelude::*;
use mathquill_leptos::components::MathQuillField;

// please note, you will still need to load the library,
// this example won't work as-is (in your own code)
fn main() {
  let current = RwSignal::new(String::from("initial=i^3*n*a*l"));

  leptos::mount::mount_to_body(move || {
    view! {
      <MathQuillField latex=current />
      <p> { move || format!("You have typed in Latex: {}", current.read()) } </p>
    }
  });
}

Using a static field:

use leptos::{leptos_dom::logging::console_log, prelude::*};
use mathquill_leptos::components::MathQuillStatic;

// please note, you will still need to load the library,
// this example won't work as-is (in your own code)
fn main() {
  leptos::mount::mount_to_body(move || {
    let current = RwSignal::new(String::from("1 + 1 = 2"));

    view! {
      <label for="latex-input">"Type latex here:"</label>
      <input id="latex-input" type="text" bind:value=current />

      <p>"And your latex will appear rendered here:"</p>
      <MathQuillStatic latex=current />
    }
  });
}

Modules

components