5e Homebrew Monster Template
In general, these templates can be added to any monster that does at least 9 damage and has 21 hit points and shouldn’t be used if the monster’s CR is over 18. If a creature has less than 21 hit points, but more than 6, increase the monster's hit points to 21, then apply the template. Excel Statblock Monster Template - Basic Information and Purpose This is an Excel template for single-column monster stat-blocks. I began this. D&D 5e Rules On A Page. I have used it many times in both my own homebrew campaigns and in the few adventures I have for the Guild.
Statblock5e provides an easy way to display a creature statblock that looksalmost exactly like the statblocks from the 5th edition D&D Monster Manual.
This is implemented as a set of custom elements following the WebComponents specs: ES Modules, CustomElements, and the Shadow DOM.
While statblock5e has been tested the most in Chrome, it may also work in any browser that properly implements the Web Components v1 specs. Make sure you are using at least Chrome 61 or Firefox 63.Nlop download for mac windows 10.
There are no dependencies (JavaScript or otherwise), this is entirelyself-contained.
There's very little JavaScript actually; just a bit of boilerplate thatdefines the custom elements and some minor logic for computing the ability modifiersfor the ability table. Other than that, it's pure HTML, CSS & SVG.
Here's the markup that produced the above picture. No user-level CSS orJavaScript is necessary.
The example text is copyright Wizards of the Coast; they make it available forfree on their website through the D&D 5E Basic Rules (it's in theDM supplement).
Visual differences from the MM statblocks
Unfortunately this statblock isn't quite pixel-perfect with regards to thestatblocks in the MM. The differences are:
- Different typefaces used. I'm told that the body typeface used in the MM is FF Scala Sans and the one used for the monster name headings is Mrs Eaves Petite Caps. They're not available for free from Google Fonts, so substitutes are used instead.
- No textured background. Obviously, I don't have access to the original textures WotC used. Even if I did, I'm not sure I'd use them since that would mean serving images which I wanted to avoid (scaling/resolution/deployment issues etc).
- No textured block border. Same as above.
There are probably other differences as well but I haven't noticed them. I triedto stick as close to the original as reasonably possible; for instance, I spentwaaay too much time getting the drop-shadow to be the 'correct' shade ofbrown and the tapered horizontal rule to render just right. Why? Because Ihad nothing better to do and it was fun! :)
FAQ
Is there a single-file version?
The demo.html
file in the repository HTML-imports the other HTMLsource files. There's also demo-inlined.html
which rendersexactly the same but has all the HTML-imports inlined directly into thedocument.
The Python script that produces the inlined version is alsoavailable.
How do I make two-column layouts?
See the demo-two-column.html
file (here's a renderedimage). The key thing to notice is the use of the data-two-column
attribute on the <stat-block>
element. You can also use thedata-content-height
attribute to tweak the layout. See thecomments in the demo file for details.
Why aren't you using polyfills?
While polyfills for Web Components do exist, they're not perfect andrequire a preprocessing stage that inlines all HTML imports and rewrites the newCSS selectors like :host
, ::content
, /deep/
etc. There's no easy way totie all this together and frankly, I don't care enough since I'll personallyonly use this for locally hosted pages rendered in Chrome.
If someone wants to do the required work to implement the whole preprocessingpipeline, pull requests are welcome.
Version History
0.0.5
- Updated to the WebComponents v1 spec, since several aspects of WebComponents v0 are being removed in Chrome 73.
- Use ES Modules instead of HTML Imports.
- Use Custom Elements v1 instead of
registerElement()
. - Use
createShadowRoot()
instead ofattachShadow()
. - Use
<slot>
instead of<content>
. - Define
data-content-height
as a CSS custom property instead of as an HTML attribute, so we don't have to use a javascript hack to set the height of the stat-block. - Rewrite
inline-imports.py
to parse the ES module and HTML template files.
0.0.4
- Fixed issue with text floating outside the statblock on Chrome 50+.
0.0.3
- Simpler way of supporting two-column layout.
0.0.2
<property-line>
can now be used for legendary actions since it doesn't hardcode red text.- Support for two-column layout! See the new item in the FAQ.
- Now supporting multiple
<p>
elements inside<property-block>
. All<p>
's after the first will have an indent like in the MM. - Increasing h3 size to be closer to MM.
- Increasing line height of body font to be closer to MM.
- Using a new typeface for monster name heading. Should be closer to MM.
- Slightly increased body font size to be closer to MM font metrics.
0.0.1
- Initial release.
License
This software is licensed under the Apache License, Version 2.0.
Wide Monster Stat Block. DnD 5e Homebrew Editor. You can easily drop in monster stat blocks, whip up a new spell, and put your entire module together with complete ease. You’ll want to be on a actual computer to make edits as the editor is less than satisfactory on mobile. However, once you have completed your masterpiece, you can easily print or share with.
The HomebreweryWelcome traveler from an antique land. Please sit and tell us of what you have seen. The unheard of monsters, who slither and bite. Tell us of the wondrous items and and artifacts you have found, their mysteries yet to be unlocked. Of the vexing vocations and surprising skills you have seen.
Homebrew D&D made easyThe Homebrewery makes the creation and sharing of authentic looking Fifth-Edition homebrews easy. It uses with a little CSS magic to make your brews come to life.Try it! Simply edit the text on the left and watch it update live on the right. Editing and SharingWhen you create your own homebrew you will be given a edit url and a share url. Any changes you make will be automatically saved to the database within a few seconds.
Anyone with the edit url will be able to make edits to your homebrew. So be careful about who you share it with.Anyone with the share url will be able to access a read-only version of your homebrew. Helping outLike this tool? Want to buy me a beer? To help me keep the servers running.This tool will always be free, never have ads, and I will never offer any 'premium' features or whatever. PDF ExportingPDF Printing works best in Chrome. If you are having quality/consistency issues, try using Chrome to print instead.After clicking the 'Print' item in the navbar a new page will open and a print dialog will pop-up.
Set the Destination to 'Save as PDF'. Set Paper Size to 'Letter'. If you are printing on A4 paper, make sure to have the 'A4 page size snippet' in your brew. In Options make sure 'Background Images' is selected.
Re: 5e Xenomorph Monster not sure at balancing, but shouldn't the template include a climb speed? I love what you've done with it, and I have no idea how unbalancing it'd be, but seeing as it's one of the biggest features is the the xenomorphs can strike from anymore.
Hit print and enjoy! You're done!If you want to save ink or have a monochrome printer, add the Ink Friendly snippet to your brew before you print Big things coming in v3.0.0With the next major release of Homebrewery, v3.0.0, this tool will no longer support raw HTML input for brew code. All brews made previous to the release of v3.0.0 will still render normally. New Things All The Time!What's new in the latest update? Check out the full changelog Bugs, Issues, Suggestions?Have an idea of how to make The Homebrewery better?
Or did you find something that wasn't quite right? Head and let me know! Legal JunkThe Homebrewery is licensed using the. Which means you are free to use The Homebrewery is any way that you want, except for claiming that you made it yourself.If you wish to sell or in some way gain profit for what's created on this site, it's your responsibility to ensure you have the proper licenses/rights for any images or resources used. More ResourcesIf you are looking for more 5e Homebrew resources check out and their list of useful resources. Appendix Not quite MarkdownAlthough the Homebrewery uses Markdown, to get all the styling features from the PHB, we had to get a little creative.
Some base HTML elements are not used as expected and I've had to include a few new keywords. Horizontal Rules are generally used to modify existing elements into a different style. For example, a horizontal rule before a blockquote will give it the style of a Monster Stat Block instead of a note. New Pages are controlled by the author. It's impossible for the site to detect when the end of a page is reached, so indicate you'd like to start a new page, use the new page snippet to get the syntax. Code Blocks are used only to indicate column breaks. Since they don't allow for styling within them, they weren't that useful to use.
5e Homebrew Monster Template Download
HTML can be used to get just the right look for your homebrew. I've included some examples in the snippet icons above the editor.ImagesImages must be hosted online somewhere, like imgur. You use the address to that image to reference it in your brew. Images can be included 'inline' with the text using Markdown-style images.
However for background images more control is needed.Background images should be included as HTML-style img tags. Using inline CSS you can precisely position your image where you'd like it to be. I have added both a inflow image snippet and a background image snippet to give you exmaples of how to do it. Crediting MeIf you'd like to credit The Homebrewery in your brew, I'd be flattered! Just reference that you made it with The Homebrewery.
There are no dependencies (JavaScript or otherwise), this is entirelyself-contained.There's very little JavaScript actually; just a bit of boilerplate thatdefines the custom elements and some minor logic for computing the ability modifiersfor the ability table. Other than that, it's pure HTML, CSS & SVG.Here's the markup that produced the above picture.
No user-level CSS orJavaScript is necessary. Animated ArmorMedium construct, unalignedArmor Class18 (natural armor)Hit Points33 (6d8 + 6)Speed25ftDamage Immunitiespoison, psychicCondition Immunitiesblinded, charmed, deafened, exhaustion, frightened, paralyzed,petrified, poisonedSensesblindsight 60 ft. (blind beyond this radius), passive Perception 6Languages—Challenge1 (200 XP)Antimagic Susceptibility.The armor is incapacitated while in the area of an antimagicfield. If targeted by dispel magic, the armor must succeedon a Constitution saving throw against the caster’s spell save DC orfall unconscious for 1 minute.False Appearance.While the armor remains motionless, it is indistinguishable from anormal suit of armor.ActionsMultiattack.The armor makes two melee attacks.Slam.Melee Weapon Attack: +4 to hit, reach 5 ft., one target.Hit: 5 (1d6 + 2) bludgeoning damage.The example text is copyright Wizards of the Coast; they make it through the D&D 5E Basic Rules (it's in the). Visual differences from the MM statblocksUnfortunately this statblock isn't quite pixel-perfect with regards to thestatblocks in the MM.
The differences are:. Different typefaces used. I'm told that the body typeface used in the MMis FF Scala Sans and the one used for the monster name headings isMrs Eaves Petite Caps. They're not available for free from Google Fonts, sosubstitutes are used instead.
No textured background. Obviously, I don't have access to the originaltextures WotC used. Even if I did, I'm not sure I'd use them since that wouldmean serving images which I wanted to avoid (scaling/resolution/deploymentissues etc). No textured block border. Same as above.There are probably other differences as well but I haven't noticed them. I triedto stick as close to the original as reasonably possible; for instance, I spentwaaay too much time getting the drop-shadow to be the 'correct' shade ofbrown and the tapered horizontal rule to render just right. Because Ihad nothing better to do and it was fun!:) FAQ Is there a single-file version?The file in the repository HTML-imports the other HTMLsource files.
There's also which rendersexactly the same but has all the HTML-imports inlined directly into thedocument.The Python script that produces the inlined version. How do I make two-column layouts?See the file. The key thing to notice is the use of there not perfect andrequire a preprocessing stage that inlines all HTML imports and rewrites the newCSS selectors like:host,::content, /deep/ etc. There's no easy way totie all this together and frankly, I don't care enough since I'll personallyonly use this for locally hosted pages rendered in Chrome.If someone wants to do the required work to implement the whole preprocessingpipeline, pull requests are welcome.