https://github.com/elm/html

Use HTML in Elm!
https://github.com/elm/html

elm html

Last synced: 10 days ago
JSON representation

Use HTML in Elm!

• Host: GitHub
• URL: https://github.com/elm/html
• Owner: elm
• License: bsd-3-clause
• Created: 2016-03-14T22:33:53.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-09-21T22:32:44.000Z (about 1 year ago)
• Last Synced: 2024-10-08T12:14:30.915Z (about 1 month ago)
• Topics: elm, html
• Language: Elm
• Homepage: https://package.elm-lang.org/packages/elm/html/latest/
• Size: 456 KB
• Stars: 394
• Watchers: 32
• Forks: 99
• Open Issues: 74
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-ccamel - elm/html - Use HTML in Elm! (Elm)

README

        
# HTML

Quickly render HTML in Elm.

## Examples

The HTML part of an Elm program looks something like this:

```elm

import Html exposing (Html, button, div, text)

import Html.Events exposing (onClick)

type Msg = Increment | Decrement

view : Int -> Html Msg

view count =

  div []

    [ button [ onClick Decrement ] [ text "-" ]

    , div [] [ text (String.fromInt count) ]

    , button [ onClick Increment ] [ text "+" ]

    ]

```

If you call `view 42` you get something like this:

```html



  -

  
42

  +



```


This snippet comes from a complete example. You can play with it online [here](https://elm-lang.org/examples/buttons) and read how it works [here](https://guide.elm-lang.org/architecture/user_input/buttons.html).

You can play with a bunch of other examples [here](https://elm-lang.org/examples).

## Learn More

**Definitely read through [guide.elm-lang.org](https://guide.elm-lang.org/) to understand how this all works!** The section on [The Elm Architecture](https://guide.elm-lang.org/architecture/index.html) is particularly helpful.

## Implementation

This library is backed by [elm/virtual-dom](https://package.elm-lang.org/packages/elm/virtual-dom/latest/) which handles the dirty details of rendering DOM nodes quickly. You can read some blog posts about it here:

  - [Blazing Fast HTML, Round Two](https://elm-lang.org/blog/blazing-fast-html-round-two)

  - [Blazing Fast HTML](https://elm-lang.org/blog/blazing-fast-html)