# Franklin: How to obtain output of fdplotly() as HTML string?

**URL:** <https://discourse.julialang.org/t/franklin-how-to-obtain-output-of-fdplotly-as-html-string/39944>\
**Category:** General Usage\
**Tags:** question\
**Created:** [May 22, 2020, 8:35am UTC](https://discourse.julialang.org/t/franklin-how-to-obtain-output-of-fdplotly-as-html-string/39944 "2020-05-22T08:35:10Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sijun](https://avatars.discourse-cdn.com/v4/letter/s/b2d939/32.png) [@Sijun](https://discourse.julialang.org/u/Sijun)\
**Post date:** [May 22, 2020, 8:35am UTC](https://discourse.julialang.org/t/franklin-how-to-obtain-output-of-fdplotly-as-html-string/39944/1 "2020-05-22T08:35:10Z")

</div>

I would like to know how I can obtain HTML string from fdplotly() in Franklin.

This is because I what to put the HTML in an outer div so that I can create a tabular layout for plotly plots.

Imaginary code will look something like:

```julia
p = PlotlyJS.scatter()
html = fdplotly(json(p); return_as_string=true) 
# maybe there must be an option to prevent fdplotly() from 
# printing right away at this point and instead return HTML 
# string so that user can put the result in a way he likes

println("""
~~~
<div style="display:flex; flex-wrap: wrap;">
   $(html)
<div>
~~~""")

```

---

<div class="post-metadata">

**Author:** ![tlienart](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tlienart/32/7640_2.png) [@tlienart](https://discourse.julialang.org/u/tlienart)\
**Post date:** [May 22, 2020, 8:46am UTC](https://discourse.julialang.org/t/franklin-how-to-obtain-output-of-fdplotly-as-html-string/39944/2 "2020-05-22T08:46:51Z")

</div>

Hello!

So for your specific use case I think you could do

```julia
fdplotly(json(p); style="display:flex; flex-wrap:wrap;") 

```

but granted you might want to do something specific with the string, if you look at the code it should be pretty simple to build your own: this is the string I use in `fdplotly`:

```julia
~~~
<div id="$id" style="$style"></div>

<script>
	var fig = $json;
	CONTAINER = document.getElementById('$id');
	Plotly.newPlot(CONTAINER, fig.data, fig.layout)
</script>
~~~

```

you can modify this as you’d like 🙂 you could also create your own function with your own specs

---

<div class="post-metadata">

**Author:** ![Sijun](https://avatars.discourse-cdn.com/v4/letter/s/b2d939/32.png) [@Sijun](https://discourse.julialang.org/u/Sijun)\
**Post date:** [May 22, 2020, 9:01am UTC](https://discourse.julialang.org/t/franklin-how-to-obtain-output-of-fdplotly-as-html-string/39944/3 "2020-05-22T09:01:06Z")

</div>

@tlienart, thank you for your prompt reply!

whatever style I pass to `fdplotly()` is meant for that particular div that fdplotly() creates for me.  
I wanted to put the auto generated div in an outer div that I define myself.

Let me try the second example; This approach is really great; I can control divs arbitrarily. Thank you again for your valuable suggestion. 🙂