Patching buffalos ...

Help translation
become a patron Become
Saves: ?
server local
never never
never never
Sign In

I'll teach you to draw rivers now.

  • Click on the river tool

  • Click on the red square at the bottom of this text block. A blue dot will mark the beginning of your river

  • Then click on the grey hex (short for "hexagon") with a "i" on it

  • And then the yellow hex with a heart on it

  • And then the same hex to make the blue dot disappear

Welcome to the Hextml tutorial!

  • Look at the right of your screen. Click on the paintbrush icon

  • Now click anywhere on the map to put forested hills instead of the terrain that was here before.
  • Still on the left you should see a section where you can find "common" terrains. Click on the dunes.
  • And click anywhere on the map to put dunes here.
  • Now click on the bucket
  • Click on the clear blue sea around the map. EVERYTHING is dunes now.
  • You can use the stamp tool the same way you used the paintbrush tool except it will put small icons inside the hexagon. They can be useful to graphically remember what's in this hex.
  • You can drag and drop icons to move them between hexes.
  • To remove an icon you can either drop it outside of the map or use the "Hex" tab
  • Do not try to draw a river by keeping the mouse button pressed. It will work but it won't be pretty.

  • To remove river use the following tool and click on the river you want to remove. You may have to click multiples times to delete all the rivers.

  • To draw roads us those:

  • Click on the lobing arrow on the red hex at the bottom of the text box to go to part 2 of this tutorial

  • You can save your work with the floppy icon on the top of the page

Save often to avoid loosing your data.

  • An you can load it back later with the folder icon

  • The picture icon save the current map as a image on your computer but it might take a while to generate the image

-- part 2 is here

The previous version of this tutorial can still be accessed here.

Welcome to part 2 of this tutorial.

  • Change the background color of any hexagon by using the paintbrush and by selecting a color in the "Background" section of the "Terrains" tab.
  • Try painting some red on the big grey zone undex this text block.
  • You can use custom colors by clicking on the palette icon at the top of the background section

  • Let's now see the fog of war! Click on this icon in the background section

  • Paint it on some of the green hexes you just painted, they will appear darker.

  • Activates fog of war with this icon on the left vertical bar

  • Those green hexes are hidden now. You can use it if you want to show some of your map to your players but not all of it.

Go to part 3 by clicking the round arrow in the red hex below

  • The left bar contains many buttons. Forget about the purples one for now.
  • The others are pretty self explanatory once you clicked on them. Just try ;)
  • If it does something weird clicking on the same button will go back to the previous state so don't worry.
  • If you put icons in an hexagon with the stamp tool you can change the order in the list below the icon list by drag and droping.
  • Droping a icon on the trash will delete it
  • The "Text" section is how I type these texts. It contains text that is showed on the map
  • The notes section contains hidden notes. I use this part for notes that that are meant only for me when I'm DMing.
  • If you click on the blue hex below you will see some notes that I wrote
  • While the blue hex is selected (it will appear redish) click on the 20 sided die at the top right of the window. You will enter DM mode.
  • Click on the same D20 to get out of this mode and go back to the edit mode.
  • You will now add the link to the next part of this tutorial yourself.
  • Click on the green hex below
  • In the submaps tab there is a drop down menu, select "part 4" in it
  • Click "Add sub map link" on the left of the drop down menu
  • A round arrow should appear in the green hex.
  • Click on it to go to part 4

Some notes that I wrote.

Let's talk about the Map settings window

  • There is many advanced options in this tab but you will proably only use those related to map size
  • Use the + and - button to resize the map
  • Be careful with the minus button as it can delete things on the map
  • use the undo button on top to undo your actions if need be

  • You can also set the size of the map with the text fields
  • Be careful with big maps as they can be quite slow
  • You can create new maps in the Submaps tab
  • Just click on the "New map" button to create a new one
  • And click on an existing map to switch between maps
  • Feel free to try the other options and if anything goes wrong click on the Tutorial link at the top of this page

The next part will be about how to use custom terrains

Nice beach right? You found the secret spot in the tutorial!
You win a life-long premium membership :)
Send me an email to playest11 at gmail dot com to claim your price.
It will only be valid if you are the first one to claim it of course so don't get your hopes up :)

  • Open the Resource window with this button (top right)

  • One resource is already uploaded and there is two checkboxes next to it

  • Check both of them

  • If you go back to the Terrains tab (and Hex tab) an the Hex tab you will see that this picture can now be used as a custom terrains (and icon).

  • As a matter of fact I already used it on this map.

  • Because self-promotion is always a good thing ... or not.

  • And obviously click on the X will delete this resource
  • You can upload your own resource by clicking on the Upload resource button
  • Clicking on the Background button next to it will toglle this picture as a background image for the map.
  • This is where the opacity , background zoom, background horizontal and vertical offset feature of the Maps tab might come handy


Everything happens on the left menu with the first two icons

  • You will need the help of a friend to try this.

  • If you don't have friends :( you can open a new window in private/incognito mode and use it as a second browser

  • Click on the first icon to launch the collaborative Mode

  • An help window will appear

  • Then you can share the given URL with your friends and work together on the map

By default your friends will be in viewer mode which mean that you control what they see for every map with the following buttons in the submenu

will show/hide the hex number

will show/hide the borders of the hexes

will enable/disable the fog of war

will show/hide the text and the icons

This button promotes everyone to editor so that everyone can modify the map and see everything

This button puts everyone else into viewer mode

This button will make every viewer jump to the current map centered on the currently selected hex

Dragon's cave

If you liked this tutorial you can help me by becoming a patron :)

Editing ...


Paint the map with those textures.


Painting those with the stamp tool. You can move them between hexes by draging them. Drag them outside the map to remove them.


Paint the background of hexes. It will override the normal color.


Import images with the "+" button and use them anywhere.


These tiles are better used with square grid. Change the grid’s shape if you need to.


These tiles are better used with a square grid. Change the grid’s shape if you need to.
Select an hexagon and add/modify content here.


Drag the elements onto each other to move them.


Display text on the selected hexagon.

Secret notes

Make "secret" notes about the selected hex here.
Select an hex and a submap before adding a link. Then, click on the arrow icon to jump to the submap.


Show/hide credits