{"id":13659863,"url":"https://github.com/grislyeye/vellum-monster","last_synced_at":"2026-03-07T22:31:41.509Z","repository":{"id":12481823,"uuid":"71950742","full_name":"grislyeye/vellum-monster","owner":"grislyeye","description":"Web component for displaying 5th Edition monster stat blocks","archived":false,"fork":false,"pushed_at":"2023-01-06T13:58:39.000Z","size":2503,"stargazers_count":21,"open_issues_count":23,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2026-02-10T14:38:31.746Z","etag":null,"topics":["armor","attack-bonus","challenge-rating","css","custom-theme","custom-themes","dnd","dnd5e","html","javascript","lit-element","lit-html","monster","npc","rpg","stat-blocks","stats","theme","vellum-monster","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/grislyeye.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"rg-wood","ko_fi":"grislyeye"}},"created_at":"2016-10-26T00:32:48.000Z","updated_at":"2025-04-24T18:46:05.000Z","dependencies_parsed_at":"2023-01-13T16:58:23.680Z","dependency_job_id":null,"html_url":"https://github.com/grislyeye/vellum-monster","commit_stats":null,"previous_names":["rgladwell/dnd-stat-block","rgladwell/vellum-stat-block","rgladwell/5e-stat-block-component"],"tags_count":62,"template":false,"template_full_name":null,"purl":"pkg:github/grislyeye/vellum-monster","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grislyeye%2Fvellum-monster","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grislyeye%2Fvellum-monster/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grislyeye%2Fvellum-monster/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grislyeye%2Fvellum-monster/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/grislyeye","download_url":"https://codeload.github.com/grislyeye/vellum-monster/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grislyeye%2Fvellum-monster/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30234516,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T19:01:10.287Z","status":"ssl_error","status_checked_at":"2026-03-07T18:59:58.103Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["armor","attack-bonus","challenge-rating","css","custom-theme","custom-themes","dnd","dnd5e","html","javascript","lit-element","lit-html","monster","npc","rpg","stat-blocks","stats","theme","vellum-monster","webcomponents"],"created_at":"2024-08-02T05:01:13.082Z","updated_at":"2026-03-07T22:31:41.191Z","avatar_url":"https://github.com/grislyeye.png","language":"JavaScript","funding_links":["https://github.com/sponsors/rg-wood","https://ko-fi.com/grislyeye"],"categories":["JavaScript"],"sub_categories":[],"readme":"# \u0026lt;vellum-monster\u0026gt; [![Build Status](https://github.com/grislyeye/vellum-monster/actions/workflows/node.js.yml/badge.svg)](https://github.com/grislyeye/vellum-monster/actions/workflows/node.js.yml)\n\nWeb component for displaying monster stat blocks for the fifth edition of the world's most popular table-top roleplaying game. Based on [Val Markovic's Statblock5e](https://valloric.github.io/statblock5e/) but with the following, additional features:\n\n  * Simpler (just one import vs 5)\n  * Theme-able\n  * Automatically calculate values (average hit points and challenge rating)\n\nTo install:\n\n```sh\nnpm install --save vellum-monster\n```\n\nYou can also use the CDN:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vellum-monster@1.0.2/dist/vellum-monster.min.js\"\u003e\u003c/script\u003e\n```\n\n![Simple Screenshot](demo/warhorse-screenshot.png)\n\nThe above stat block is written as follows:\n\n```html\n\u003cvellum-monster\n  id=\"warhorse\"\n  class=\"official\"\n  name=\"Warhorse\"\n  size=\"Large\"\n  type=\"beast\"\n  alignment=\"unaligned\"\n  ac=\"11\"\n  armor=\"natural armor\"\n  hp=\"20\"\n  hit-die=\"16d10 + 48\"\n  speeds='[\"60 ft.\"]'\n  cr=\"½\"\n\n  str=\"18\"\n  dex=\"12\"\n  con=\"13\"\n  int=\"2\"\n  wis=\"12\"\n  cha=\"7\"\n\n  senses='[\"passive Perception 11\"]'\n  traits='[\n    {\n      \"name\": \"Trampling Charge\",\n      \"description\": \"If the horse moves at least 20 feet straight toward a creature and then hits it with a hooves attack on the same turn, that target must succeed on a DC 14 Strength saving throw or be knocked prone. If the target is prone, the horse can make another attack with its hooves against it as a bonus action.\"\n    }\n  ]'\n  actions='[\n    {\n      \"name\": \"Hooves\",\n      \"type\": \"melee-attack\",\n      \"bonus\": \"+4\",\n      \"reach\": \"5ft.\",\n      \"target\": \"one target\",\n      \"damage\": \"2d6 + 4\",\n      \"damageType\": \"bludgeoning\"\n    }\n  ]'\n\u003e\n\u003c/vellum-monster\u003e\n```\n\nThis module also includes a theme to give your stat blocks a more \"official\" look. Simply add the following to your HTML file `head` element:\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"vellum-monster/themes/official/style.css\"\u003e\n```\n\n### Calculating Challenge Rating\n\nIf you do not provide the challenge rating for your monster, `\u003cvellum-monster\u003e` will attempt to automatically calculate and fill this value in for you, based on armor class, hit points, damage and attack bonus.\n\nTraits, actions, reactions and legendary actions can adjust the effective value of these stats when calculating challenge rating. Each of these objects of can declare a `hpAdjustment`, `acAdjustment`, `damageAdjustment` or `attackAdjustment` which can increase or decrease the effective hit points, armor class, damage or attack bonus when calculating CR.\n\n## Custom Themes\n\nTo create a custom theme for your stat blocks using something like the following CSS:\n\n```css\nhtml vellum-monster.my-theme,\nhtml vellum-stat-block.my-theme {\n\n  // custom styles here\n\n}\n```\n\nYou can then add standard CSS. The `\u003cvellum-monster\u003e` and `\u003cvellum-monster\u003e` support the following custom CSS properties:\n\n| Property                               | Description\n| -------------------------------------- | ---\n| `--stat-block-width`                   | Describes the width property for the stat block, as per the [CSS `width` property](https://developer.mozilla.org/en/docs/Web/CSS/width).\n| ` --stat-block-background`             | Describes the background property for the stat block body, as per the [CSS `background` property](https://developer.mozilla.org/en/docs/Web/CSS/background).\n| `--stat-block-bar-border`              | Describes the border property for top and bottom stat block bars, as per the [CSS `border` property](https://developer.mozilla.org/en/docs/Web/CSS/border).\n| ` --stat-block-bar-background`         | Describes the background property for top and bottom stat block bars, as per the [CSS `background` property](https://developer.mozilla.org/en/docs/Web/CSS/background).\n| `--stat-block-border-color`            | The [colour](https://developer.mozilla.org/en-US/docs/Web/CSS/color) for the stat block borders on the right and left.\n| `--stat-block-header-color`            | The [colour](https://developer.mozilla.org/en-US/docs/Web/CSS/color) of the section headings and stat block header text.\n| `--stat-block-heading-font-family`     | The [font-family](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) of the section headings and stat block header text.\n| `--stat-block-divider-color`           | The [colour](https://developer.mozilla.org/en-US/docs/Web/CSS/color) of the divider between sections of the stat block.\n| `--stat-block-two-column-width`        | If the `two-column` class is applied to the stat block, this defines the width of the wider stat block.\n| `--stat-block-two-column-column-width` | If the `two-column` class is applied to the stat block, this defines the width of the width of the columns within the stat block.\n\nSee the [official theme](https://github.com/grislyeye/vellum-monster/blob/master/themes/official/style.css) for an example of how to style your stat blocks\n\n## Custom Stat Blocks\n\nThe `\u003cvellum-stat-block\u003e` element allows you to create custom stat-blocks layouts. This could be for information that doesn't conform to the stand monster stat block, such as [location stat blocks](https://imgur.com/a/aIVfv). Or to represent non-standard information the `\u003cvellum-monster\u003e` element doesn't yet support.\n\nFor example:\n\n```html\n\u003cvellum-stat-block\n  class=\"official\"\n  name=\"Custom Stat Block\"\n  description=\"Demonstration of custom stat blocks\"\n\u003e\n\n  \u003cvellum-stat name=\"Test Stat 1\"\u003eTest Stat Value 1\u003c/vellum-stat\u003e\n\n  \u003cvellum-stat-block-divider\u003e\u003c/vellum-stat-block-divider\u003e\n\n  \u003cvellum-stat name=\"Test Stat 2\"\u003eTest Stat Value 2\u003c/vellum-stat\u003e\n\n\u003c/vellum-monster\u003e\n```\n\n**Note:** Users are encouraged `\u003cvellum-monster\u003e` element for monster descriptions wherever possible, and [raise bugs](https://github.com/grislyeye/vellum-stat-block/issues/new) where it doesn't support what you want to do. Rather than fall-back to the `\u003cvellum-stat-block\u003e`.\n\n## NPC Stat Blocks\n\nThe `\u003cvellum-npc\u003e` element allows you to display a NPC in more roleplaying terms and is a work in progress.\n\n## Hacking\n\nRequirements:\n\n  * [Node.js](http://nodejs.org/)\n\nTo set-up your environment execute:\n\n    $ npm install\n\nTo run demo page:\n\n    $ npm run start\n\nTo run tests execute:\n\n    $ npm test\n\nTo run the tests you need to have Java 8 installed.\n\n## Rights\n\nThis software is copyrighted by Ricardo Gladwell and Val Markovic 2014-2018. It is licensed under the [Apache License, Version 2.0](LICENSE.txt). All monster statistics are Open Game Content and licensed under the [Open Gaming License](OGL.txt).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrislyeye%2Fvellum-monster","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrislyeye%2Fvellum-monster","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrislyeye%2Fvellum-monster/lists"}