How to hydrate a to_html() result?

[victorfds]

Dear Leptos Team,

I'm facing an issue where a component loses interactivity when rendered as an HTML string.
Below is a minimal example:

#[component]
fn Counter(initial_value: i32) -> impl IntoView {
    let (value, set_value) = signal(initial_value);
    view! {
        <div>
            <button
                class="bg-amber-300 hover:bg-amber-100 text-gray-900 font-bold py-2 px-4 rounded transition duration-300 ease-in-out cursor-pointer"
                on:click=move |_| set_value.update(|value| *value -= 1)
            >
                "-1"
            </button>
            <span class="text-gray-50 text-xl">
                "Value: " {move || value.get().to_string()} "!"
            </span>
            <button
                class="bg-amber-300 hover:bg-amber-100 text-gray-900 font-bold py-2 px-4 rounded transition duration-300 ease-in-out cursor-pointer"
                on:click=move |_| set_value.update(|value| *value += 1)
            >
                "+1"
            </button>
        </div>
    }
}

#[component]
fn HomePage() -> impl IntoView {
    let counter_rendered = view! { <Counter initial_value=4 /> };
    let mut string_components = "<Counter />".to_string();

    if cfg!(feature = "ssr") {
        string_components = string_components.replace("<Counter />", &counter_rendered.to_html());
    }

  view! {
        <section>
            <article>
               <div inner_html=string_components  />
            </article>
        </section>
    }
}

The Counter component displays correctly via inner_html, but its buttons are non-functional, likely due to the static HTML string lacking Leptos' reactive event bindings. Is it possible to retain interactivity in this scenario, or is an alternative approach needed? Any advice would be greatly appreciated.

I'm using the Axum + Leptos template with Leptos version 0.8.2.

Best regards,

Victor Ferreira da Silva

[gbj]

You're right, that absolutely won't work.

I'm not entirely sure what you're trying to accomplish here/why it can't be done with the normal APIs, but perhaps it's distilled from an example that makes more sense.

I'm not sure I understand why the example above isn't this:

#[component]
fn HomePage() -> impl IntoView {
  view! {
        <section>
            <article>
               <div><Counter initial_value=4 /></div>
            </article>
        </section>
    }
}

I'm happy to try to help if you can provide more details about what you're trying to do.

[victorfds]

Thank you for your response!

What I'm trying to achieve is the ability to use Leptos components inside a Markdown file. This idea is inspired by the approach used in VitePress, where Vue components can be embedded directly within Markdown content.

So after processing the Markdown, I got a HTML String, then, I need to inject the actual component at the corresponding positions.

[gbj]

Oh yeah, that's quite interesting. It seems to me that what they're doing would be expressed in Rust terms by a proc macro that could parse Markdown and also Leptos's view syntax, and would transform the Markdown into the same builder-syntax output that the view macro uses.

There's been some discussion but I don't think anyone's made an up-to-date library to do this. (It can be done entirely in user-land, and doesn't need explicit framework support.)

[victorfds]

Thank you for guiding me on how to do this. 😉