Hackage :: [Package]

web-view: Type-safe HTML and CSS with intuitive layouts and composable styles.

This is a package candidate release! Here you can preview how this package release will appear once published to the main package index (which can be accomplished via the 'maintain' link below). Please note that once a package has been published to the main package index it cannot be undone! Please consult the package uploading documentation for more information.

[maintain] [Publish]

Type-safe HTML and CSS with intuitive layouts and composable styles. Inspired by Tailwindcss and Elm-UI . See documentation for the Web.View module below

[Skip to Readme]

Properties

Versions 0.2.0, 0.2.2, 0.2.3, 0.3.1, 0.4.0, 0.5.0, 0.6.0, 0.6.1, 0.6.2, 0.6.2
Change log CHANGELOG.md
Dependencies base (>=4.16 && <5), bytestring (>=0.11 && <0.13), casing (>0.1.3.0 && <0.2), containers (>=0.6 && <1), effectful-core (>=2.3 && <3), file-embed (>=0.0.10 && <0.1), html-entities (>=1.1.4.7 && <1.2), http-types (>=0.12 && <0.13), string-interpolate (>=0.3.2 && <0.4), text (>=1.2 && <3) [details]
License BSD-3-Clause
Author Sean Hess
Maintainer seanhess@gmail.com
Category Web
Home page https://github.com/seanhess/web-view
Bug tracker https://github.com/seanhess/web-view/issues
Source repo head: git clone https://github.com/seanhess/web-view
Uploaded by seanhess at 2024-12-24T19:54:56Z

Modules

[Index] [Quick Jump]

Downloads

Maintainer's Corner

Package maintainers

For package maintainers and hackage trustees

Readme for web-view-0.6.2

[back to package description]

Web View

Hackage

Type-safe HTML and CSS with intuitive layout and composable styles. Inspired by Tailwindcss and Elm-UI

Write Haskell instead of CSS

Type-safe utility functions to generate styled HTML.

myPage = col (gap 10) $ do
  el (bold . fontSize 32) "My page"
  button (border 1) "Click Me"

Leverage the full power of Haskell functions for reuse, instead of relying on CSS.

header = bold
h1 = header . fontSize 32
h2 = header . fontSize 24
page = gap 10

myPage = col page $ do
  el h1 "My Page"
  ...

This approach is inspired by Tailwindcss' Utility Classes

Intuitive Layouts

Easily create layouts with row, col, grow, and space

holygrail :: View c ()
holygrail = layout id $ do
  row section "Top Bar"
  row grow $ do
    col section "Left Sidebar"
    col (section . grow) "Main Content"
    col section "Right Sidebar"
  row section "Bottom Bar"
  where section = 'border' 1

Embedded CSS

Views track which styles are used in any child node, and automatically embed all CSS when rendered.

>>> renderText $ el bold "Hello"

<style type='text/css'>.bold { font-weight:bold }</style>
<div class='bold'>Hello</div>

Stateful Styles

We can apply styles when certain states apply. For example, to change the background on hover:

button (bg Primary . hover (bg PrimaryLight)) "Hover Me"

Media states allow us to create responsive designs

el (width 100 . media (MinWidth 800) (width 400))
  "Big if window > 800"

Try Example Project with Nix

If you want to get a feel for web-view without cloning the project run nix run github:seanhess/web-view to run the example webserver locally

Local Development

Nix

Prepend targets with ghc982 or ghc966 to use GHC 9.8.2 or GHC 9.6.6

You can also get a development shell for the example project with:

cd example
nix develop ../#ghc982-example
cabal run

You can import this flake's overlay to add web-view to all package sets and override ghc966 and ghc982 with the packages to satisfy web-view's dependencies.

{
  inputs = {
    nixpkgs.url = "github:nixos/nixpkgs/nixpkgs-unstable";
    web-view.url = "github:seanhess/web-view"; # or "path:/path/to/cloned/web-view";
    flake-utils.url = "github:numtide/flake-utils";
  };

  outputs = { self, nixpkgs, web-view, flake-utils, ... }:
    flake-utils.lib.eachDefaultSystem (
      system:
      let
        pkgs = import nixpkgs {
          inherit system;
          overlays = [ web-view.overlays.default ];
        };
        haskellPackagesOverride = pkgs.haskell.packages.ghc966.override (old: {
          overrides = pkgs.lib.composeExtensions (old.overrides or (_: _: { })) (hfinal: hprev: {
            # your overrides here
          });
        });
      in
      {
        devShells.default = haskellPackagesOverride.shellFor {
          packages = p: [ p.web-view ];
        };
      }
    );
}

Learn More

View Documentation on Hackage

View on Github

View Examples

Contributors