# Rendering Reactive{string} in StippleUI page
**URL:** https://discourse.julialang.org/t/rendering-reactive-string-in-stippleui-page/107257
**Category:** Web Stack
**Tags:** stipple, stippleui
**Created:** [December 7, 2023, 6:50am UTC](https://discourse.julialang.org/t/rendering-reactive-string-in-stippleui-page/107257 "2023-12-07T06:50:16Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@Ben\_Sivan](https://discourse.julialang.org/u/Ben_Sivan)
#### Post date: [December 7, 2023, 6:50am UTC](https://discourse.julialang.org/t/rendering-reactive-string-in-stippleui-page/107257/1 "2023-12-07T06:50:16Z")
Hi!
I followed through the basic example of reactive UI in the GenieFramework.
The very simple webapp below is a lineage tracking app of biological samples based on lineage graph. The user writes a sample name and gets back all its parents.
The `model.output` is initialized as an empty String.
The `get_all_parents` function returns a Vector of names or an empty String.
When reaching to the `model.output` directly and passing it to the `render_output` function I’m getting the expected behavior. Unfortunately to render the whole page I need to pass through the `page` function that exposes the model values through the synthax: `"{{ var }}" or span("", @text(:var)).`
When passing that to the `render_output` I’m getting nothing.
I’ve also tried to bypass that by doing `page(model, generate_interface(model))` which didn’t work also.
Just passing the output without the `render_output` function is printing the array but not as I want it. example: `["name1", "name2"]`
To reproduce the example, comment the `include("lineage_tracking.jl")` and define the default output as `output::Union{String, Vector{String}} = ["name1", "name2"], READONLY`.
I would appreciate any help with this 🙏.
```julia
"""
lineage tracking web app
"""
# packages
using Stipple, StippleUI
include("lineage_tracking.jl")
const graph_file = "lineage_graph.mg"
@vars model_vars begin
input::String = ""
output::Union{String, Vector{String}} = "", READONLY
end
function handlers(model)
on(model.input) do input
model.output[] = get_all_parents(graph_file, input)
end
return model
end
function render_output(output)
if output != ""
paragraphs = [p(elm) for elm in output]
else
paragraphs = ""
end
return paragraphs
end
function generate_interface()
# result = render_output("{{ output }}")
result = render_output(span("", @text(:output)))
ui = row(
cell(class = "st-module", [
h1("Lineage Tracking")
textfield(class = "q-my-md", "Sample name", :input, hint = "Enter Sample name to compute lineage", @on("keyup.enter", "process = true"))
card(class = "q-my-md", [
card_section(h2("Result"))
card_section(result)
])
])
)
return ui
end
route("/") do
model = model_vars |> init |> handlers
page(model, generate_interface()) |> html
end
Genie.isrunning(:webserver) || up()
```
---
### Author:  [@Pere](https://discourse.julialang.org/u/Pere)
#### Post date: [December 14, 2023, 6:32pm UTC](https://discourse.julialang.org/t/rendering-reactive-string-in-stippleui-page/107257/2 "2023-12-14T18:32:09Z")
The issue you’re having is that you’re trying to evaluate the `output` variable in the `render_output` function when it doesn’t have a value.
The `generate_interface` function is evaluated once to generate the HTML code for the page. If you check this code by running `generate_interface` in the REPL, you’ll see that the part generated by `card_section(result)` is empty. This is because a few lines above you’re passing the string `""`to `render_output`, which results in `""`.
If you want to perform any action on the value of a reactive variable, you need to do so in a handler.
For instance, you could do
```julia
@app begin
@out output = ["one", "two"]
@in input = ""
@out rendered_code = ""
@onchange input begin
rendered_code = render_output(output)
end
end
ui() = [p("some components before"), "{{rendered_code}}", p("some components after)]
@page("/", ui)
```
Note that I’m using a different syntax from your example. This is the new API we introduced some 9 months ago which you can find explained [here](https://learn.genieframework.com/docs/reference/reactive-ui/introduction)
Where did you find the example to get started with your app? It’s outdated so I’d like to remove it. If you need more help, you can find us on Discord [Genie Community](https://discord.gg/BB5ZBWma)
---
### Author:  [@Ben\_Sivan](https://discourse.julialang.org/u/Ben_Sivan)
#### Post date: [December 21, 2023, 1:57pm UTC](https://discourse.julialang.org/t/rendering-reactive-string-in-stippleui-page/107257/3 "2023-12-21T13:57:13Z")
Hi Pere,
Thank you for your prompt response and assistance. I appreciate your help in troubleshooting the issue I encountered with rendering multi-paragraph output in the GenieFramework.
I’d like to clarify that the example I provided was indeed reactive and functional; however, the challenge arose when attempting to render multi-paragraph output instead of a single string.
I did try the solution you suggested, and it worked similarly with the same problem of rendering. Additionally, I intentionally avoided the macro-overload syntax for the sake of transparency in program logic. I find it easier to follow the code when less is hidden behind the scenes, despite the convenience of a more “low code” solution.
Looking forward to your insights and recommendations.
Best regards,
Ben\_Sivan