Handsel

A canvas made of real HTML and CSS.

Handsel is a design canvas where every layer is a real element. Draw frames, write text, drop in images or paste HTML, then copy the code. Your files stay on this device.

Open Handsel
A live Handsel canvas with a bakery home page. Its layers can be selected and moved.

Copy it as code The layer is the markup.

Click a layer and its HTML and CSS light up. What you copy is what the canvas draws: the same elements with the same styles. 

<div class="home"><div class="nav"><p class="wordmark">Morrow</p><div class="links"><p class="breads">Breads</p><p class="pastries">Pastries</p><p class="visit-us">Visit us</p></div><div class="order-ahead"><p class="label">Order ahead</p></div></div><div class="hero"><p class="heading">Slow bread,<br><em>baked by sunrise.</em></p><p class="intro">Naturally leavened loaves, folded by hand over two days and out of the oven at six. Order by nine at night and collect them warm.</p><div class="actions"><div class="order-button"><p class="label-2">Order for tomorrow</p></div><div class="menu-button"><p class="label-3">See the menu</p></div></div></div><p class="hours">Open Tuesday to Sunday, 7am to 2pm</p><div class="photo"><div class="board"><div class="loaf"><div class="score"></div><div class="score-2"></div><div class="score-3"></div></div></div><div class="tag"><div class="dot"></div><p class="label-4">Out of the oven at 6am</p></div></div></div>

Paste HTML, get layers Bring what you already have.

Paste a snippet and each element lands as a frame, a text layer or an image you can move and edit. Inline styles like color, size and spacing come with it. Scripts and unsafe links are left out.

807 characters

Layers 5

  • Pasted
  • Frame
  • Text
  • Text
  • Text
  • Text

Auto layout is flexbox. Nothing to translate.

A frame with auto layout is a flex container, so gap and padding are the CSS you copy. Drag the sliders and the cards reflow the way a browser would lay them out.

16px
24px
display: flex;
gap: 16px;
padding-top: 24px;
padding-right: 24px;
padding-bottom: 24px;
padding-left: 24px;

On your device. Files live in this browser.

  • It works signed out. There is no account to make and nothing to sign in to.
  • Nothing you draw is uploaded. Images you drop in are kept in this browser too.
  • Clearing this browser’s site data removes your files, so download a page you want to keep.

Why the name.

A handsel is a gift given at the start of something new, for luck, like a coin tucked into a new purse.

Every interface starts as a blank page. Handsel is a small gift for that moment: a place to try the idea in the material it will ship in.