# Formatting Pluto widgets

**URL:** <https://discourse.julialang.org/t/formatting-pluto-widgets/59981>\
**Category:** Pluto\
**Created:** [April 25, 2021, 9:41am UTC](https://discourse.julialang.org/t/formatting-pluto-widgets/59981 "2021-04-25T09:41:07Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![maajdl](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/maajdl/32/22838_2.png) [@maajdl](https://discourse.julialang.org/u/maajdl)\
**Post date:** [April 25, 2021, 9:41am UTC](https://discourse.julialang.org/t/formatting-pluto-widgets/59981/1 "2021-04-25T09:41:07Z")

</div>

Hello

I like Pluto.  
Would there be a way to customize the formatting of Pluto widgets.  
Today I have these hopes:

- For a NumberField: controling its width, the border color, the alignment to the right
- For several NumberField used in a Markdown table: align the widgets and make them same size

Thanks for your suggestions

Michel

---

<div class="post-metadata">

**Author:** ![feanor12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/feanor12/32/8212_2.png) [@feanor12](https://discourse.julialang.org/u/feanor12)\
**Post date:** [April 25, 2021, 10:38am UTC](https://discourse.julialang.org/t/formatting-pluto-widgets/59981/2 "2021-04-25T10:38:35Z")

</div>

The input fields are quite easy to implement.  
If you look at the source code of the numberfield you will see that a styled number field would not need much extra work. Assuming you know some html/css.

I just don’t know if the input element has to be the root element. Here I would suggest looking a bit into how the @bind macro works.

[https://github.com/fonsp/PlutoUI.jl/blob/a21df4166deca1535080cebb8bb65a9d989215d5/src/Builtins.jl#L51](https://github.com/fonsp/PlutoUI.jl/blob/a21df4166deca1535080cebb8bb65a9d989215d5/src/Builtins.jl#L51)

---

<div class="post-metadata">

**Author:** ![maajdl](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/maajdl/32/22838_2.png) [@maajdl](https://discourse.julialang.org/u/maajdl)\
**Post date:** [April 25, 2021, 12:17pm UTC](https://discourse.julialang.org/t/formatting-pluto-widgets/59981/3 "2021-04-25T12:17:37Z")

</div>

Thanks a lot !  
To lead lead me from mystery to science !  
Michel

---

<div class="post-metadata">

**Author:** ![feanor12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/feanor12/32/8212_2.png) [@feanor12](https://discourse.julialang.org/u/feanor12)\
**Post date:** [April 25, 2021, 1:00pm UTC](https://discourse.julialang.org/t/formatting-pluto-widgets/59981/4 "2021-04-25T13:00:06Z")

</div>

I had some time to play with it a little.

Here is a gist of a Pluto notebook showing how to implement a custom widget.

@fonsp Did I miss something important? The reason of defining get is not completely clear to me.

> <https://gist.github.com/feanor12/54a20ac37ae4505f4b5d5dabf6ef0189>

---

<div class="post-metadata">

**Author:** ![maajdl](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/maajdl/32/22838_2.png) [@maajdl](https://discourse.julialang.org/u/maajdl)\
**Post date:** [April 25, 2021, 6:58pm UTC](https://discourse.julialang.org/t/formatting-pluto-widgets/59981/5 "2021-04-25T18:58:49Z")

</div>

Thanks a lot!

---

<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:** [April 29, 2021, 5:18pm UTC](https://discourse.julialang.org/t/formatting-pluto-widgets/59981/6 "2021-04-29T17:18:34Z")

</div>

Take a look at:

> **[⚡ Pluto.jl ⚡](https://plutocon2021-demos.netlify.app/fonsp%20%E2%80%94%20javascript%20inside%20pluto)**
>
> Pluto.jl notebooks

and the Interactivity sample notebook available from the Pluto main menu ( [http://localhost:1234/sample](http://localhost:1234/sample) )

---

<div class="post-metadata">

**Author:** ![feanor12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/feanor12/32/8212_2.png) [@feanor12](https://discourse.julialang.org/u/feanor12)\
**Post date:** [May 1, 2021, 4:19pm UTC](https://discourse.julialang.org/t/formatting-pluto-widgets/59981/7 "2021-05-01T16:19:21Z")

</div>

I wrote a small wrapper which enables passing style properties via a Dict.  
[https://github.com/fonsp/PlutoUI.jl/pull/98](https://github.com/fonsp/PlutoUI.jl/pull/98)

Example:

```julia
@bind text CSSWidgetWrapper(TextField(default="hi"),
	Dict(
"backgroundColor"=>"green",
"color"=>"white",
"float"=>"right",
"border"=>"4px solid red",
"width"=>"30%")
)

```