# Using CSS and JS function defined in Julia module for Pluto

**URL:** <https://discourse.julialang.org/t/using-css-and-js-function-defined-in-julia-module-for-pluto/132455>\
**Category:** Pluto\
**Tags:** pluto, javascript\
**Created:** [September 17, 2025, 8:03am UTC](https://discourse.julialang.org/t/using-css-and-js-function-defined-in-julia-module-for-pluto/132455 "2025-09-17T08:03:21Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![dmetivie](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/dmetivie/32/6926_2.png) [@dmetivie](https://discourse.julialang.org/u/dmetivie)\
**Post date:** [September 17, 2025, 8:03am UTC](https://discourse.julialang.org/t/using-css-and-js-function-defined-in-julia-module-for-pluto/132455/1 "2025-09-17T08:03:21Z")

</div>

I am creating a Julia package PlutoXXX.jl with some CSS and JS code.

I want when checking a checkbox inside the Pluto notebook to activate the CSS and calling the JS function defined inside my module to activate a mode similar to the Pluto presentation mode.

Before using the module form, I was calling all that directly with something like

```julia
using HypertextLiteral
# ╔═╡ 67847c64-df3e-40b2-b9d0-10d1d14ebe71
css_code = read("pathtomyfile/always.css", String)
# ╔═╡ 38535edf-6cb2-478d-823d-6754fa8c89f3
# somehow LocalRessource do no work but this does
@htl("""
<style>
$(css_code)
</style>
""")

```

and for the JS

```julia
# ╔═╡ 1363008d-1a2a-479b-a3cf-1b2fdfab86e6
# # this does work but not @htl ...
PlutoUI.LocalResource("pathtomyfile/functions.js")
@bind mode html"""
<input id="activate_mode" type="checkbox" style="display:none;">
<button onclick="activate_mode.click()">Activate mode Mode</button>
"""

```

Now I want to put that inside a module PlutoXXX.jl to just have to call

```julia
# something like that
using PlutoXXX
@bind activate_mode CheckBox()
PlutoXXX.mode(activate_mode)

```

1. Right now the copying what I was doing with the CSS seems to work.
2. But for the JS just copying `PlutoUI.LocalResource("pathtomyfile/functions.js")` does not work and does not seem to be link to that activate\_mode checkbox.
3. Any idea how to do that properly?

I must admit I don’t know much about JS and HTML and used some LLM to help me with that.

---

<div class="post-metadata">

**Author:** ![dmetivie](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/dmetivie/32/6926_2.png) [@dmetivie](https://discourse.julialang.org/u/dmetivie)\
**Post date:** [September 17, 2025, 10:14am UTC](https://discourse.julialang.org/t/using-css-and-js-function-defined-in-julia-module-for-pluto/132455/2 "2025-09-17T10:14:11Z")

</div>

```julia-auto
function mode()
    css_code = read("../css/always.css", String)

    return @htl("""
     <style>
     $(css_code)
     </style>
	 $(PlutoUI.LocalResource("../js/functions.js"))
     """)
end

function button_mode()
    return html"""
    <input id="toggle_input" type="checkbox">
    <button onclick="toggle_input.click()">⧉ Mode</button>
    """
end

```

with in the notebook

```julia-auto
using PlutoXXX
button_mode()

```

does what I want. The new CSS is displayed only in “mode” with in the JS something

```julia-auto
document.body.classList.add("mode");

```

For now, it seems enough but I am sure there are so many ways to improve…

---

<div class="post-metadata">

**Author:** ![fonsp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/fonsp/32/222349_2.png) [@fonsp](https://discourse.julialang.org/u/fonsp)\
**Post date:** [September 29, 2025, 7:36am UTC](https://discourse.julialang.org/t/using-css-and-js-function-defined-in-julia-module-for-pluto/132455/3 "2025-09-29T07:36:30Z")

</div>

Hey!

It’s a bit hard to say without seeing what the JS and CSS code is. CSS code you can always “turn on and off” by adding/removing a stylesheet, but JS is not so obvious.

I would use JavaScript to add and remove the `style` element to the page. Like so:

```html
<div>
<label>
	<input type=checkbox>
	<strong>Enable style</strong>
</label>

<script>
// Create <style> element with my CSS
const style_contents = $(style_contents)
const style = document.createElement("style")
style.textContent = style_contents

// The checkbox
const input = currentScript.parentElement.querySelector("input")
const update = () => {
	if(input.checked) {
		document.head.appendChild(style)
	} else {
		style.remove()
	}
}
input.addEventListener("change", update)
</script>

</div>

```

I’m not sure about adding/removing the JS. I think I would always add it, and use a simple `if` to control functionality with the checkbox.

These techniques are described in the “Advanced” section of the Pluto docs, e.g. [JavaScript API — Pluto.jl](https://plutojl.org/en/docs/javascript-api/)

* * *

PS:

> [@dmetivie](#):
>
> ```html
> <input id="activate_mode" type="checkbox" style="display:none;">
> <button onclick="activate_mode.click()">Activate mode Mode</button>
> 
> ```

This UI element is better served with the `<label>` element.