{"id":13800107,"url":"https://github.com/utkarshkukreti/purescript-hedwig","last_synced_at":"2026-01-08T13:06:41.660Z","repository":{"id":58231111,"uuid":"145825609","full_name":"utkarshkukreti/purescript-hedwig","owner":"utkarshkukreti","description":"Hedwig is a fast, type safe, declarative PureScript library for building web applications.","archived":false,"fork":false,"pushed_at":"2020-06-25T06:50:13.000Z","size":171,"stargazers_count":130,"open_issues_count":8,"forks_count":11,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-09-30T01:06:20.818Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"PureScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/utkarshkukreti.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-23T08:38:18.000Z","updated_at":"2025-02-11T15:50:42.000Z","dependencies_parsed_at":"2022-08-30T18:40:12.727Z","dependency_job_id":null,"html_url":"https://github.com/utkarshkukreti/purescript-hedwig","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/utkarshkukreti/purescript-hedwig","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/utkarshkukreti%2Fpurescript-hedwig","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/utkarshkukreti%2Fpurescript-hedwig/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/utkarshkukreti%2Fpurescript-hedwig/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/utkarshkukreti%2Fpurescript-hedwig/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/utkarshkukreti","download_url":"https://codeload.github.com/utkarshkukreti/purescript-hedwig/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/utkarshkukreti%2Fpurescript-hedwig/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28245384,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2026-01-08T02:00:06.591Z","response_time":241,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T00:01:09.387Z","updated_at":"2026-01-08T13:06:41.632Z","avatar_url":"https://github.com/utkarshkukreti.png","language":"PureScript","readme":"# Hedwig\n\nHedwig is a fast, type safe, declarative PureScript library for building web\napplications.\n\n### [Getting Started](#getting-started) | [Examples](#examples)\n\n## Features\n\n### Fast\n\nThe performance of Hedwig is competitive with mainstream JavaScript frameworks,\nboth in terms of CPU usage and Memory consumption. In\n[js-framework-benchmark][jfb], Hedwig performs\n[as well as or better than][jfb-results] React, Angular, and Vue.\n\n### Small\n\nA Hello World program weighs in at around 11kB minified + gzipped. The\n[js-framework-benchmark][jfb] implementation weighs in at around 16kB.\n\n### Declarative Animations\n\nAnimations are essential to maintain a direct and engaging real-world feel.\nHedwig makes adding animations easy using a declarative CSS transition based\nAPI. [Read More \u0026darr;](#animations)\n\n### Integration with Developer Tools\n\nHedwig integrates with Redux DevTools to provide an interactive state\nmodification viewer and time travelling debugger. [Read More \u0026darr;](#developer-tools)\n\n## Getting Started\n\nYou'll need to have [Node.js](https://nodejs.org/) and\n[pulp](https://github.com/purescript-contrib/pulp) installed.\n\nYou can either clone the starter template or follow the instructions below to\ncreate an application from scratch.\n\n### Starter Template\n\nClone the repository, install the dependencies, and start the dev server:\n\n```\n$ git clone https://github.com/utkarshkukreti/purescript-hedwig-starter my-app\n$ cd my-app\n$ npm install\n$ bower install\n$ npm start\n```\n\nand open `index.html` in your browser.\n\n### From Scratch\n\nInitialize a new project using `pulp` and create an empty `package.json`:\n\n```\n$ mkdir my-app\n$ cd my-app\n$ pulp init\n$ echo '{}' \u003e package.json\n```\n\nInstall the dependencies:\n\n```\n$ bower install --save purescript-hedwig\n$ npm install --save purescript-hedwig\n```\n\nCreate an HTML file to load the JS (save this to `index.html`):\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003ctitle\u003eMy App\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cmain\u003e\u003c/main\u003e\n    \u003cscript src=\"index.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nCreate and mount the application (save this to `src/Main.purs`):\n\n```\nmodule Main where\n\nimport Prelude\n\nimport Effect (Effect)\nimport Hedwig as H\nimport Hedwig ((:\u003e))\n\ntype Model = Int\n\ninit :: Model\ninit = 0\n\ndata Msg = Increment | Decrement\n\nupdate :: Model -\u003e Msg -\u003e Model\nupdate model = case _ of\n  Increment -\u003e model + 1\n  Decrement -\u003e model - 1\n\nview :: Model -\u003e H.Html Msg\nview model = H.main [H.id \"main\"] [\n  H.button [H.onClick Decrement] [H.text \"-\"],\n  H.text (show model),\n  H.button [H.onClick Increment] [H.text \"+\"]\n]\n\nmain :: Effect Unit\nmain = do\n  H.mount \"main\" {\n    init: init :\u003e [],\n    update: \\msg model -\u003e update msg model :\u003e [],\n    view\n  }\n```\n\nCompile the application:\n\n```\n$ pulp browserify --to index.js\n```\n\nFinally, open `index.html` in your browser. You should now see the text \"Hello,\nworld!\" appear on the screen.\n\n## Animations\n\nHedwig provides two main functions to add animation to elements:\n\n![Hedwig Declarative Animations](https://gist.githubusercontent.com/utkarshkukreti/ad83e5a0eb7e6f456e20be0778aae843/raw/2d5ca8641f267aef08d7d658e0fa4ab24b997c21/purescript-hedwig-transition.gif)\n\n### (1) Hedwig.transition :: String -\u003e Trait msg\n\nAdding this to the traits list of an element will make Hedwig to add 6 classes\nto the element at different times. The `String` argument is the prefix to use\nfor the classes. Let's say we do `div [Hedwig.transition \"fade\"] [text \"Hello\"]`\n. This will apply 6 classes:\n\n1.  fade-enter: Starting state for enter. Added before element is inserted,\n    removed one frame after element is inserted.\n\n2.  fade-enter-active: Active state for enter. Applied during the entire entering\n    phase. Added before element is inserted, removed when transition/animation\n    finishes. This class can be used to define the duration, delay and easing\n    curve for the entering transition.\n\n3.  fade-enter-to: Ending state for enter. Added one frame after element is\n    inserted (at the same time v-enter is removed), removed when\n    transition/animation finishes.\n\n4.  fade-leave: Starting state for leave. Added immediately when a leaving\n    transition is triggered, removed after one frame.\n\n5.  fade-leave-active: Active state for leave. Applied during the entire leaving\n    phase. Added immediately when leave transition is triggered, removed when the\n    transition/animation finishes. This class can be used to define the duration,\n    delay and easing curve for the leaving transition.\n\n6.  fade-leave-to: Ending state for leave. Added one frame after a leaving\n    transition is triggered (at the same time v-leave is removed), removed when\n    the transition/animation finishes.\n\n[Inspiration for the feature and source of the description above.](https://vuejs.org/v2/guide/transitions.html#Transition-Classes).\n\nWith a tiny bit of CSS, you can create all sorts of animations with the above.\nSee the [AnimatedList.purs](./examples/AnimatedList.purs) and\n[AnimatedList.css](./examples/AnimatedList.css) and its\n[Live Demo](http://utkarshkukreti.github.io/purescript-hedwig/AnimatedList.html)\nfor an example.\n\n`Hedwig.transition'` is similar but lets you specify custom class names to add\nfor each stage.\n\n2.  Hedwig.transitionGroup :: String -\u003e Trait msg\n\nA transition group enables normal transition on all its children elements, plus\nit keeps track of the positions of its children, and whenever that changes,\nadds CSS classes and a CSS transform to them. With a line of CSS, you can\nanimate the movement of the nodes:\n\n```css\n.fade-move {\n  transition: transform 0.2s;\n}\n```\n\nSee [AnimatedList.purs](./examples/AnimatedList.purs) and\n[AnimatedList.css](./examples/AnimatedList.css) and its\n[Live Demo](http://utkarshkukreti.github.io/purescript-hedwig/AnimatedList.html)\nfor an example.\n\n`Hedwig.transitionGroup'` is similar but lets you specify custom class names to\nadd for each stage.\n\n## Developer Tools\n\nHedwig integrates with Redux DevTools to provide an interactive state\nmodification viewer and time travelling debugger.\n\n![Hedwig with Redux DevTools](https://gist.githubusercontent.com/utkarshkukreti/ad83e5a0eb7e6f456e20be0778aae843/raw/2d5ca8641f267aef08d7d658e0fa4ab24b997c21/purescript-hedwig-redux-2.gif)\n\n(To try this right now, install the [Redux DevTools Chrome\nExtension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en)\nand head over to [this page](https://utkarshkukreti.github.io/purescript-hedwig/Counters.html).)\n\nTo enable this, you need to do two things:\n\n1.  Import `Hedwig.Devtools`\n\n2.  In your `main` function, before you mount the application, call\n    `Hedwig.Devtools.init`.\n\nFor an example, check out the source of the [Counters](./examples/Counters.purs)\nexample.\n\nAfter recompiling your application, you should see all messages and state being\nlogged into the Redux tab of Chrome DevTools window.\n\n## Examples\n\nThe `examples/` directory contains a bunch of examples:\n\n- [HelloWorld](./examples/HelloWorld.purs)\n  ([Demo](http://utkarshkukreti.github.io/purescript-hedwig/HelloWorld.html)) -\n  Just writes the text \"Hello, world!\" to the screen.\n\n- [Counter](./examples/Counter.purs)\n  ([Demo](http://utkarshkukreti.github.io/purescript-hedwig/Counter.html)) -\n  A numeric counter with increment and decrement buttons.\n\n- [Counters](./examples/Counters.purs)\n  ([Demo](http://utkarshkukreti.github.io/purescript-hedwig/Counters.html)) -\n  A dynamic list of numeric counters.\n\n- [Dice](./examples/Dice.purs)\n  ([Demo](http://utkarshkukreti.github.io/purescript-hedwig/Dice.html)) -\n  Rolls a dice using the purescript-random package.\n  Showcases how a Hedwig application can run side effects.\n\n- [Prompt](./examples/Prompt.purs)\n  ([Demo](http://utkarshkukreti.github.io/purescript-hedwig/Prompt.html)) -\n  Prompts the user to enter their name by calling `window.prompt`.\n  Also showcases how to run functions with side effects.\n\n- [AnimatedList](./examples/AnimatedList.purs)\n  ([Demo](http://utkarshkukreti.github.io/purescript-hedwig/AnimatedList.html)) -\n  An animated list of boxes.\n\n- [JsFrameworkBenchmark](./examples/JsFrameworkBenchmark.purs)\n  ([Demo](http://utkarshkukreti.github.io/purescript-hedwig/JsFrameworkBenchmark.html)) -\n  An implementation of [js-framework-benchmark][jfb]. See benchmark results\n  [here][jfb-results].\n\n[jfb]: https://github.com/krausest/js-framework-benchmark\n[jfb-results]: https://gist.githubusercontent.com/utkarshkukreti/ad83e5a0eb7e6f456e20be0778aae843/raw/2d5ca8641f267aef08d7d658e0fa4ab24b997c21/Screen%2520Shot%25202018-08-24%2520at%25202.04.20%2520PM.png\n","funding_links":[],"categories":["UI Libraries"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Futkarshkukreti%2Fpurescript-hedwig","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Futkarshkukreti%2Fpurescript-hedwig","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Futkarshkukreti%2Fpurescript-hedwig/lists"}