Copyright	(C) 2016-2025 David M. Johnson
License	BSD3-style (see the file LICENSE)
Maintainer	David M. Johnson <code@dmj.io>
Stability	experimental
Portability	non-portable
Safe Haskell	None
Language	Haskell2010

Miso.Html

Contents

Elements
Attributes
Events
Virtual DOM

Description

Example usage:

import Miso

data IntAction = Add | Subtract

intView :: Int -> View IntAction
intView n
 = div_
 [ class_ "main"
 ]
 [ btn_
   [ onClick Add
   ]
   [ text_ "+"
   ]
 , text_ $ pack (show n)
 , btn_
   [ onClick Subtract
   ]
   [ text_ "-"
   ]
 ]

More information on how to use miso is available on GitHub

http://github.com/dmjio/miso

Synopsis

a_ :: [Attribute action] -> [View action] -> View action
abbr_ :: [Attribute action] -> [View action] -> View action
address_ :: [Attribute action] -> [View action] -> View action
area_ :: [Attribute action] -> [View action] -> View action
article_ :: [Attribute action] -> [View action] -> View action
aside_ :: [Attribute action] -> [View action] -> View action
audio_ :: [Attribute action] -> [View action] -> View action
b_ :: [Attribute action] -> [View action] -> View action
base_ :: [Attribute action] -> [View action] -> View action
bdi_ :: [Attribute action] -> [View action] -> View action
bdo_ :: [Attribute action] -> [View action] -> View action
blockquote_ :: [Attribute action] -> [View action] -> View action
body_ :: [Attribute action] -> [View action] -> View action
br_ :: [Attribute action] -> View action
button_ :: [Attribute action] -> [View action] -> View action
canvas_ :: [Attribute action] -> [View action] -> View action
caption_ :: [Attribute action] -> [View action] -> View action
cite_ :: [Attribute action] -> [View action] -> View action
code_ :: [Attribute action] -> [View action] -> View action
col_ :: [Attribute action] -> View action
colgroup_ :: [Attribute action] -> [View action] -> View action
datalist_ :: [Attribute action] -> [View action] -> View action
dd_ :: [Attribute action] -> [View action] -> View action
del_ :: [Attribute action] -> [View action] -> View action
details_ :: [Attribute action] -> [View action] -> View action
dfn_ :: [Attribute action] -> [View action] -> View action
dialog_ :: [Attribute action] -> [View action] -> View action
div_ :: [Attribute action] -> [View action] -> View action
dl_ :: [Attribute action] -> [View action] -> View action
doctype_ :: View action
dt_ :: [Attribute action] -> [View action] -> View action
em_ :: [Attribute action] -> [View action] -> View action
embed_ :: [Attribute action] -> View action
fencedframe_ :: [Attribute action] -> [View action] -> View action
fieldset_ :: [Attribute action] -> [View action] -> View action
figcaption_ :: [Attribute action] -> [View action] -> View action
figure_ :: [Attribute action] -> [View action] -> View action
footer_ :: [Attribute action] -> [View action] -> View action
form :: [Attribute action] -> [View action] -> View action
h1_ :: [Attribute action] -> [View action] -> View action
h2_ :: [Attribute action] -> [View action] -> View action
h3_ :: [Attribute action] -> [View action] -> View action
h4_ :: [Attribute action] -> [View action] -> View action
h5_ :: [Attribute action] -> [View action] -> View action
h6_ :: [Attribute action] -> [View action] -> View action
head_ :: [Attribute action] -> [View action] -> View action
header_ :: [Attribute action] -> [View action] -> View action
hgroup_ :: [Attribute action] -> [View action] -> View action
hr_ :: [Attribute action] -> View action
html_ :: [Attribute action] -> [View action] -> View action
i_ :: [Attribute action] -> [View action] -> View action
iframe_ :: [Attribute action] -> [View action] -> View action
img_ :: [Attribute action] -> View action
input_ :: [Attribute action] -> View action
ins_ :: [Attribute action] -> [View action] -> View action
kbd_ :: [Attribute action] -> [View action] -> View action
label_ :: [Attribute action] -> [View action] -> View action
legend_ :: [Attribute action] -> [View action] -> View action
li_ :: [Attribute action] -> [View action] -> View action
link_ :: [Attribute action] -> View action
main_ :: [Attribute action] -> [View action] -> View action
map_ :: [Attribute action] -> [View action] -> View action
mark_ :: [Attribute action] -> [View action] -> View action
menu_ :: [Attribute action] -> [View action] -> View action
meta_ :: [Attribute action] -> View action
meter_ :: [Attribute action] -> [View action] -> View action
nav_ :: [Attribute action] -> [View action] -> View action
nodeHtml :: MisoString -> [Attribute action] -> [View action] -> View action
noscript_ :: [Attribute action] -> [View action] -> View action
object_ :: [Attribute action] -> [View action] -> View action
ol_ :: [Attribute action] -> [View action] -> View action
optgroup_ :: [Attribute action] -> [View action] -> View action
option_ :: [Attribute action] -> [View action] -> View action
output_ :: [Attribute action] -> [View action] -> View action
p_ :: [Attribute action] -> [View action] -> View action
picture_ :: [Attribute action] -> [View action] -> View action
pre_ :: [Attribute action] -> [View action] -> View action
progress_ :: [Attribute action] -> [View action] -> View action
q_ :: [Attribute action] -> [View action] -> View action
rp_ :: [Attribute action] -> [View action] -> View action
rt_ :: [Attribute action] -> [View action] -> View action
ruby_ :: [Attribute action] -> [View action] -> View action
s_ :: [Attribute action] -> [View action] -> View action
samp_ :: [Attribute action] -> [View action] -> View action
script_ :: [Attribute action] -> MisoString -> View action
search_ :: [Attribute action] -> [View action] -> View action
section_ :: [Attribute action] -> [View action] -> View action
select_ :: [Attribute action] -> [View action] -> View action
slot_ :: [Attribute action] -> [View action] -> View action
small_ :: [Attribute action] -> [View action] -> View action
source_ :: [Attribute action] -> View action
span_ :: [Attribute action] -> [View action] -> View action
strong_ :: [Attribute action] -> [View action] -> View action
style_ :: [Attribute action] -> MisoString -> View action
sub_ :: [Attribute action] -> [View action] -> View action
summary_ :: [Attribute action] -> [View action] -> View action
sup_ :: [Attribute action] -> [View action] -> View action
table_ :: [Attribute action] -> [View action] -> View action
tbody_ :: [Attribute action] -> [View action] -> View action
td_ :: [Attribute action] -> [View action] -> View action
template_ :: [Attribute action] -> [View action] -> View action
textarea_ :: [Attribute action] -> [View action] -> View action
tfoot_ :: [Attribute action] -> [View action] -> View action
th_ :: [Attribute action] -> [View action] -> View action
thead_ :: [Attribute action] -> [View action] -> View action
time_ :: [Attribute action] -> [View action] -> View action
tr_ :: [Attribute action] -> [View action] -> View action
track_ :: [Attribute action] -> View action
u_ :: [Attribute action] -> [View action] -> View action
ul_ :: [Attribute action] -> [View action] -> View action
var_ :: [Attribute action] -> [View action] -> View action
video_ :: [Attribute action] -> [View action] -> View action
wbr_ :: [Attribute action] -> View action
module Miso.Html.Property
module Miso.Html.Event
module Miso.Html.Types

Elements

a_ :: [Attribute action] -> [View action] -> View action Source #

<a>

abbr_ :: [Attribute action] -> [View action] -> View action Source #

<abbr>

address_ :: [Attribute action] -> [View action] -> View action Source #

area_ :: [Attribute action] -> [View action] -> View action Source #

<area>

Since: 1.9.0.0

article_ :: [Attribute action] -> [View action] -> View action Source #

aside_ :: [Attribute action] -> [View action] -> View action Source #

<aside>

audio_ :: [Attribute action] -> [View action] -> View action Source #

<audio>

b_ :: [Attribute action] -> [View action] -> View action Source #

<b>

base_ :: [Attribute action] -> [View action] -> View action Source #

<base>

Since: 1.9.0.0

bdi_ :: [Attribute action] -> [View action] -> View action Source #

<bdi>

bdo_ :: [Attribute action] -> [View action] -> View action Source #

<bdo>

blockquote_ :: [Attribute action] -> [View action] -> View action Source #

body_ :: [Attribute action] -> [View action] -> View action Source #

<body>

br_ :: [Attribute action] -> View action Source #

<br>

button_ :: [Attribute action] -> [View action] -> View action Source #

canvas_ :: [Attribute action] -> [View action] -> View action Source #

Note this just renders a canvas element. See also canvas_ which supports canvas drawing DSL.

caption_ :: [Attribute action] -> [View action] -> View action Source #

cite_ :: [Attribute action] -> [View action] -> View action Source #

<cite>

code_ :: [Attribute action] -> [View action] -> View action Source #

<code>

col_ :: [Attribute action] -> View action Source #

<col>

colgroup_ :: [Attribute action] -> [View action] -> View action Source #

datalist_ :: [Attribute action] -> [View action] -> View action Source #

dd_ :: [Attribute action] -> [View action] -> View action Source #

<dd>

del_ :: [Attribute action] -> [View action] -> View action Source #

<del>

details_ :: [Attribute action] -> [View action] -> View action Source #

dfn_ :: [Attribute action] -> [View action] -> View action Source #

<dfn>

dialog_ :: [Attribute action] -> [View action] -> View action Source #

Since: 1.9.0.0

div_ :: [Attribute action] -> [View action] -> View action Source #

<div>

dl_ :: [Attribute action] -> [View action] -> View action Source #

<dl>

doctype_ :: View action Source #

dt_ :: [Attribute action] -> [View action] -> View action Source #

<dt>

em_ :: [Attribute action] -> [View action] -> View action Source #

<em>

embed_ :: [Attribute action] -> View action Source #

<embed>

fencedframe_ :: [Attribute action] -> [View action] -> View action Source #

Since: 1.9.0.0

fieldset_ :: [Attribute action] -> [View action] -> View action Source #

figcaption_ :: [Attribute action] -> [View action] -> View action Source #

figure_ :: [Attribute action] -> [View action] -> View action Source #

footer_ :: [Attribute action] -> [View action] -> View action Source #

form :: [Attribute action] -> [View action] -> View action Source #

<form>

For usage in a real-world application with the onSubmit event.

view :: Model -> View action
view model = form [ onSubmit NoOp ] [ input [ type_ "submit" ] ]

Note: onSubmit will use preventDefault = True. This will keep the form from submitting to the server.

h1_ :: [Attribute action] -> [View action] -> View action Source #

<h1>

h2_ :: [Attribute action] -> [View action] -> View action Source #

<h2>

h3_ :: [Attribute action] -> [View action] -> View action Source #

<h3>

h4_ :: [Attribute action] -> [View action] -> View action Source #

<h4>

h5_ :: [Attribute action] -> [View action] -> View action Source #

<h5>

h6_ :: [Attribute action] -> [View action] -> View action Source #

<h6>

head_ :: [Attribute action] -> [View action] -> View action Source #

<head>

header_ :: [Attribute action] -> [View action] -> View action Source #

hgroup_ :: [Attribute action] -> [View action] -> View action Source #

Since: 1.9.0.0

hr_ :: [Attribute action] -> View action Source #

<hr>

html_ :: [Attribute action] -> [View action] -> View action Source #

<html>

i_ :: [Attribute action] -> [View action] -> View action Source #

<i>

iframe_ :: [Attribute action] -> [View action] -> View action Source #

img_ :: [Attribute action] -> View action Source #

<img>

input_ :: [Attribute action] -> View action Source #

<input>

ins_ :: [Attribute action] -> [View action] -> View action Source #

<ins>

kbd_ :: [Attribute action] -> [View action] -> View action Source #

<kbd>

label_ :: [Attribute action] -> [View action] -> View action Source #

<label>

legend_ :: [Attribute action] -> [View action] -> View action Source #

li_ :: [Attribute action] -> [View action] -> View action Source #

<li>

link_ :: [Attribute action] -> View action Source #

<link>

main_ :: [Attribute action] -> [View action] -> View action Source #

<main>

map_ :: [Attribute action] -> [View action] -> View action Source #

<map>

Since: 1.9.0.0

mark_ :: [Attribute action] -> [View action] -> View action Source #

<mark>

menu_ :: [Attribute action] -> [View action] -> View action Source #

<menu>

meta_ :: [Attribute action] -> View action Source #

<meta>

meter_ :: [Attribute action] -> [View action] -> View action Source #

<meter>

nav_ :: [Attribute action] -> [View action] -> View action Source #

<nav>

nodeHtml :: MisoString -> [Attribute action] -> [View action] -> View action Source #

Low-level helper used to construct HTML node in View. Almost all functions in this module, like div_, table_ etc. are defined in terms of it.

noscript_ :: [Attribute action] -> [View action] -> View action Source #

Since: 1.9.0.0

object_ :: [Attribute action] -> [View action] -> View action Source #

ol_ :: [Attribute action] -> [View action] -> View action Source #

<ol>

optgroup_ :: [Attribute action] -> [View action] -> View action Source #

option_ :: [Attribute action] -> [View action] -> View action Source #

output_ :: [Attribute action] -> [View action] -> View action Source #

p_ :: [Attribute action] -> [View action] -> View action Source #

<p>

picture_ :: [Attribute action] -> [View action] -> View action Source #

Since: 1.9.0.0

pre_ :: [Attribute action] -> [View action] -> View action Source #

<pre>

progress_ :: [Attribute action] -> [View action] -> View action Source #

q_ :: [Attribute action] -> [View action] -> View action Source #

<q>

rp_ :: [Attribute action] -> [View action] -> View action Source #

<rp>

rt_ :: [Attribute action] -> [View action] -> View action Source #

<rt>

ruby_ :: [Attribute action] -> [View action] -> View action Source #

<ruby>

s_ :: [Attribute action] -> [View action] -> View action Source #

<s>

samp_ :: [Attribute action] -> [View action] -> View action Source #

<samp>

script_ :: [Attribute action] -> MisoString -> View action Source #

This takes the raw text to be put in the script tag.

That means that if any part of the text is not trusted there's a potential JavaScript injection. Read more at https://owasp.org/www-community/attacks/xss/

You can also easily shoot yourself in the foot with something like: