Download rafter.html
(or the same file from the Export tab on the website).
Double-click it. It opens in your browser and works offline.
That one file has everything inside it (the app, the 3D engine and the fonts), so there is
nothing else to install. Designs are kept in that browser; use Save JSON to keep a copy or
move a design to another computer.
Parametric Minecraft roof designer that runs in the browser. Lay out footprint boxes, pick a roof
type and pitch per box, and Rafter builds the roof the way Minecraft builders do: slabs for 1:2,
stairs for 1:1, block-plus-stair for 2:1, with vanilla stair corner shapes at hips and valleys.
Roofs from overlapping boxes merge automatically, so crossing gables make valleys and a small box on
a big roof makes a dormer. Output: a 3D preview, layer-by-layer build plans, a materials list, and
.litematic / .schem schematics.
Also: an interior tool (a cutaway of any building to add rooms, inner walls, doors, more
floors, stairs and furniture), every building block (344, from planks to glazed terracotta, leaves,
glass and furnishing blocks like chests, lanterns, carpets and beds), curved roofs
(rounded / flared pagoda / bell), Japanese irimoya roofs and upturned eave corners, round domes, cones and spires, style presets you can save,
and one-click details (roof trim, ridge, corner posts, eave beams, foundation course, glass-pane windows).
Static files only. No build tooling, no server code.
Files
File
What it is
page.html
The page source (body only; the claude.ai artifact host wraps it)
index.html
Generated from page.html by python build.py; this is what a web server serves
Node tests plus sample-farmhouse.litematic / .schem built from the sample design
External dependencies load from CDNs at runtime: three.js 0.160.0 (jsDelivr), pako 2.1.0 (cdnjs),
Google Fonts. The page needs internet access for those; everything else is local.
Building
No build step is needed to develop: serve the folder with any static web server
(python3 -m http.server, nginx, Caddy, ...) and open it. .js files must be served as
text/javascript, which every common server does by default.
python3 build.py regenerates index.html after editing page.html.
node standalone.mjs (Node 18+) builds dist/rafter.html, the single offline file, with
three.js, pako and the fonts inlined. It downloads its build tools once into .standalone-cache/.
Using it
Layout: the header holds undo/redo, presets, Open / Save / Reset and Export. Under it the
toolbar has the tools (Select, Paint, Place, Erase, Turn, Depth, Asset, Interior) with their options, and the view
controls (layer slider, Slice, Snap, Frame). Vertical tabs run down both sides: Objects,
Palette and Assets on the left; Properties, Layers, Materials and Export on
the right. Selecting something opens Properties. Click the open tab again to fold its panel away
for a bigger 3D view. On a phone the tabs sit in a row under the 3D view.
Texture (box properties) is shared by every box: change it on any box and all of them
follow. Tick "Own texture" on a box to give it separate settings. Walls and roofs can mix in up to six other blocks. Set how many
with "Wall/Roof mix blocks", then pick each one, or leave a slot on Auto for a look-alike.
With the Grime pattern the mixes are layered by height: mix 1 (Top) highest, the last (Bottom) lowest,
blending into each other rather than meeting in lines.
Assets (left tab: Asset Studio, or Place / Edit beside each asset) opens the Asset Studio, a separate 3D builder for parts like windows,
doors, balconies and lamps, saved in the project's gallery. Build against a sample wall: Erase
cuts holes into it, blocks in its layer replace it, blocks in front stick out. Eleven starter
assets are one click away (Add a starter). "Place on building" (or the Asset tool) then
places it: point at the side of any wall and it turns to face out of it; click to place.
Placed copies stay linked to their asset, so editing it updates every copy; each copy can be
selected, moved, turned (R) or deleted like any object.
Interior (I, or "Decorate inside" under Interior in a box's properties) decorates inside one
box. The view becomes a cutaway: the roof and everything above the storey you are on is sliced
off, and the walls facing you are left out (they follow the camera as you orbit), so you look
into the rooms. The storeys below stay closed. With nothing selected, click a building to go in.
+ Floor adds another storey four blocks above the floor shown (in the brush block); the
storey list switches between them. Floor heights can be changed, or floors removed, under
Interior in the box's properties.
Room: drag a rectangle on the floor and its sides become inner walls, up to the ceiling
(the next floor or the roof), in the brush block. Wall draws a single straight one.
Door: click an inner wall to cut a two-high doorway there (click again to close it). Tick
Door blocks to hang a door of the brush block (wood, iron or copper; others get oak). It
opens away from the side you click.
Tests
node --test test/*.test.mjs
Open test/viewer.smoke.html from a local static server to eyeball every stair shape and texture.
Support
Rafter is free. If it saved you some building time and you'd like to say thanks, you can
buy me a coffee on Ko-fi. Totally optional.
License
MIT: free to use, copy, change and share, for any purpose, including commercial. See LICENSE.
Stairs: click the floor where a flight should start; it climbs the way you look (R or
Turn turns it) up to the next floor and cuts the stairwell out of it.
Furnish: pick a piece (table, dining table, chair, sofa, bed, double bed, bookshelf, wall
shelf, lantern, floor lamp, rug, kitchen counter, crafting corner, chest, ladder, fireplace)
or one of your own assets. Click the floor to place it (R or Turn turns it), or click the foot
of a wall to back it onto the wall. Pieces are ordinary assets: the first one placed is added
to the Assets tab, and changing it in the Asset Studio changes every copy.
Remove: click an inner wall, floor, staircase or piece to take it out.
Everything inside belongs to its box: it moves, turns (R), scales, clones and deletes with it,
survives undo, and is in the exported schematic. Paint (Whole part) repaints a whole inner wall,
floor or staircase. Esc (or another tool) leaves.
Lock: the lock beside each object in the list pins it in place. A locked object can still be
selected and restyled, but it can't be dragged, resized, nudged, turned, scaled or deleted until
you unlock it.
Scale… (Objects panel) makes the whole build, or just the selected object, bigger or
smaller by any factor (×½ to ×8). Edges scale about the build's centre at ground level, so
shared walls stay shared, gaps grow in proportion and roofs keep their pitch; overhangs,
chopped tops, windows and doors scale too, and hand-placed blocks become blocks of blocks.
Undo puts it back.
Snap (on by default, top of the 3D view): while you drag out an area or move an object it
snaps to the centres, corners and edge middles of the other objects, with a ring marking the
point. Ctrl+drag an area to draw it out from the centre, so a circle started on a roof's centre
stays centred on it.
Boxes are footprints. Click one in the list or in the 3D view, drag it to move, drag the
nodes on its 3D frame to resize (faces move one side, including the top and bottom for height;
corners move two sides; hold Shift to keep it square; works for boxes, fills, pillars and wall
segments), drag the round knob to rotate in
90° steps (or press R / Shift+R, or the Rotate button), or type exact numbers in Properties. Wall
segments rotate too.
Move arrows: a selected box, pillar or wall segment shows red (x), green (up/down) and blue (z)
arrows. Drag one to move along just that axis; the green one lifts the box, e.g. to sit a tower or
spire on top of another roof. Keys: arrows move, Page Up / Page Down raise and lower (Shift = 5).
Mouse: right-drag orbits (so does left-drag on empty space), middle-drag pans, the wheel zooms.
Walls, windows and doors (Details): window width, height, sill height and gap, panes or glass
blocks, flat or arched tops, which walls get them, frames and sills; a doorway on any side with
its own width and height; timber studs at a set spacing. Corner posts, eave beams and the
foundation course are there too.
Pillars: thickness (1–5), full blocks or a thin wall post, and a base and capital ring made
of blocks, stairs or slabs.
Clone: the Clone panel under any selected object or placed blocks makes N copies east, west,
north, south, up or down with a gap; Ctrl+D makes one. Copying a box up stacks floors.
Roof types: flat, shed, gable, hip, half-hip (jerkinhead), irimoya (Japanese hip-and-gable:
a hip skirt on the ends with a gable standing on it), gambrel, mansard, round. Upturned corners
curl the eaves up into each corner (lift in blocks + how far along the eave the curl reaches); try it
with the Japanese preset. Chop top takes a set number of layers off the top of any roof, leaving it
flat; the flat is capped solid (a flat roof you can build on), with slabs, or left open with just
a rim, in the roof material or one you pick. Pitch is rise per
block of run: 0.5 (slabs), 1 (stairs), 1.5, 2 (block + stair), 3. Overhang, ridge cap
(block / slab / wall), and under-eave soffit stairs are per box.
Tools (bar at the bottom of the 3D view): Select (V) moves and edits objects. Paint (B)
repaints the whole wall, roof, trim, post or foundation you click, or just one block in
"One block" mode. Place (P) puts a block, slab, stairs, pane, door, trapdoor, carpet or fence post against the face
you click or on the ground; stairs and doors face the way you look, slabs go top or bottom by where
you click, and a trapdoor clicked on a wall hangs open against it (on a floor it lies flat). Doors
come in every wood, iron and copper; select a placed door to open or close it or flip its hinge.
Turn (T) turns any block that has a direction (stairs, doors, trapdoors, panes, logs) a
quarter clockwise when you click it, Shift+click turns it back. It works on roof stairs and
asset blocks too, not just ones you placed. Depth (D) breaks up flat walls: click a wall
block to push it one block in, or pull it one block out (Push in / Pull out, Shift+click does
the other one); in Area mode drag a panel on a wall to recess or raise the whole thing. Add
depth to all (and Add depth in a box's Depth section) turns on posts that stand a block
proud of the wall, windows set one block back, a stair ledge at the foot and under the eave, and
a little stair hood over each window; shutters (open trapdoors beside each window) are one more
tick. Area (A) mode:
drag a rectangle to place a whole floor, erase or repaint every block on that layer in one step
(Shift keeps it square). Circle mode does the same with the circle or oval that fits the
rectangle. A placed area becomes a fill: one object (listed under Fills) that you select, move,
resize, rotate, clone and repaint like a box, with no roof or wall details. A fill can be a
rectangle or a circle, solid or hollow (just the rim, for round towers and rings), any height, and
full blocks, slabs, stairs or panes. If you
start on a wall face and the rectangle stands up in that wall, so you can paint or erase a window
shape straight into it. On the layer plan any drag works this way. Pane places glass panes
that run along the wall you click. Erase (E)
removes blocks. Shift+drag paints, places or erases a stroke; Alt+click picks up a block's
material. The layer plan takes clicks too, on the current layer. In Select, click a block
you placed to select it (Shift+click for more), or Alt+drag a rectangle to select every
placed block inside it (works from any tool; Shift+Alt adds). Make fill turns a selected
solid rectangle of matching blocks into one fill. Drag them to move, or use the arrow keys
(Shift = 5) and Page Up / Page Down; Delete removes them and R turns stairs. Edits on a box move and rotate
with it; "Clear edits" removes them all.
Texture: per box, mix a share of look-alike blocks into the walls and roof (mossy and
cracked bricks, nearby wood tones, ...) as patches, scatter, grime (heavier low down) or
streaks. Mixes are picked automatically or chosen by hand; Reshuffle gives a new layout.
Peaks and valleys come from overlapping boxes; the higher roof wins at each column.
Boxes on roofs: a box that sits on another roof, or whose walls stand clear of it all round
(a tower, from the ground or from the roof, or a smaller storey set back on a lower floor), gets
its own roof, and the roof below runs on unbroken right up to its walls. Dormers and wings
set into a roof still merge with it. "Meets roofs below" (Footprint) overrides this per box:
Auto, Sits on top, or Merges into them.
Walls are generated under the roof per box (gable ends fill automatically) and stop where they
would enter another box's room or hit another roof. Add free-standing wall segments and pillars
from the Objects panel.
Palette: every material is chosen from a swatch grid. The palette bar in the header lists the
blocks in use; click "Palette" or a chip to open the palette manager, a window you can drag
around. It lists every block with its count and share, and every role it plays (roof, walls,
trim, corners, beams, base, windows, frames, sills, roof cap, texture mixes, pillars, segments,
fills, hand-placed blocks). Click a role to change the block there only, Replace to change it
everywhere, or Swap to trade two blocks. Scope it to the selected object, hover a row to see
where that block is in 3D, and blocks missing a shape a role needs (no stairs for a roof) are
flagged.
Layer plans: step through Y layers; arrows point uphill on stairs, hatch marks slabs. The 3D
view slices to the same layer so you can build along.
Export: .litematic for Litematica (put it in .minecraft/schematics) or .schem for
WorldEdit. The data version defaults to 5023 (Minecraft 26.3); change it for other versions.
Designs save as JSON and are also kept in the browser's local storage.
