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

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

Elements

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

<a>

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

<abbr>

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

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

<area>

Since: 1.9.0.0

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

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

<aside>

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

<audio>

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

<b>

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

<base>

Since: 1.9.0.0

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

<bdi>

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

<bdo>

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

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

<body>

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

<br>

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

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

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

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

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

<cite>

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

<code>

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

<col>

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

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

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

<dd>

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

<del>

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

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

<dfn>

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

Since: 1.9.0.0

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

<div>

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

<dl>

doctype_ :: View parent action Source #

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

<dt>

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

<em>

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

<embed>

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

Since: 1.9.0.0

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

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

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

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

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

<form>

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

view :: Model -> View parent 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 parent action] -> View parent action Source #

<h1>

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

<h2>

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

<h3>

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

<h4>

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

<h5>

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

<h6>

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

<head>

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

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

Since: 1.9.0.0

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

<hr>

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

<html>

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

<i>

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

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

<img>

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

<input>

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

<ins>

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

<kbd>

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

<label>

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

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

<li>

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

<link>

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

<main>

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

<map>

Since: 1.9.0.0

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

<mark>

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

<menu>

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

<meta>

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

<meter>

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

<nav>

nodeHtml :: MisoString -> [Attribute action] -> [View parent action] -> View parent 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 parent action] -> View parent action Source #

Since: 1.9.0.0

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

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

<ol>

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

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

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

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

<p>

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

Since: 1.9.0.0

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

<pre>

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

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

<q>

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

<rp>

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

<rt>

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

<ruby>

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

<s>

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

<samp>

script_ :: [Attribute action] -> MisoString -> View parent 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:

script_ [] "</script>"

search_ :: [Attribute action] -> [View parent action] -> View parent action Source #

Since: 1.9.0.0

section_ :: [Attribute action] -> [View parent action] -> View parent action Source #

select_ :: [Attribute action] -> [View parent action] -> View parent action Source #

slot_ :: [Attribute action] -> [View parent action] -> View parent action Source #

<slot>

Since: 1.9.0.0

small_ :: [Attribute action] -> [View parent action] -> View parent action Source #

<small>

source_ :: [Attribute action] -> View parent action Source #

span_ :: [Attribute action] -> [View parent action] -> View parent action Source #

<span>

strong_ :: [Attribute action] -> [View parent action] -> View parent action Source #

style_ :: [Attribute action] -> MisoString -> View parent action Source #

<style>

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

That means that if any part of the text is not trusted there's a potential CSS injection. Read more at https://owasp.org/www-project-web-security-testing-guide/stable/4-Web_Application_Security_Testing/11-Client-side_Testing/05-Testing_for_CSS_Injection

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

style_ [] "</style>"

sub_ :: [Attribute action] -> [View parent action] -> View parent action Source #

<sub>

summary_ :: [Attribute action] -> [View parent action] -> View parent action Source #

sup_ :: [Attribute action] -> [View parent action] -> View parent action Source #

<sup>

table_ :: [Attribute action] -> [View parent action] -> View parent action Source #

<table>

tbody_ :: [Attribute action] -> [View parent action] -> View parent action Source #

<tbody>

td_ :: [Attribute action] -> [View parent action] -> View parent action Source #

<td>

template_ :: [Attribute action] -> [View parent action] -> View parent action Source #

Since: 1.9.0.0

textarea_ :: [Attribute action] -> [View parent action] -> View parent action Source #

tfoot_ :: [Attribute action] -> [View parent action] -> View parent action Source #

<tfoot>

th_ :: [Attribute action] -> [View parent action] -> View parent action Source #

<th>

thead_ :: [Attribute action] -> [View parent action] -> View parent action Source #

<thead>

time_ :: [Attribute action] -> [View parent action] -> View parent action Source #

<time>

tr_ :: [Attribute action] -> [View parent action] -> View parent action Source #

<tr>

track_ :: [Attribute action] -> View parent action Source #

<track>

u_ :: [Attribute action] -> [View parent action] -> View parent action Source #

<u>

ul_ :: [Attribute action] -> [View parent action] -> View parent action Source #

<ul>

var_ :: [Attribute action] -> [View parent action] -> View parent action Source #

<var>

video_ :: [Attribute action] -> [View parent action] -> View parent action Source #

<video>

wbr_ :: [Attribute action] -> View parent action Source #

<wbr>

svg_ :: [Attribute action] -> [View model action] -> View model action Source #

<svg>

Attributes

module Miso.Html.Property

Events

module Miso.Html.Event