$ ls lab/

Lab

Small, working things. Everything below is interactive — go ahead and poke around.

$ open lab/components

Component playground

UI components with live prop controls. Tweak the props to see the rendered output and usage code update, with accessibility notes for each piece.

~/lab/components — button.tsx

<Button variant="primary" size="md">
  Deploy changes
</Button>

$ open lab/email-previewer

Email template previewer

Paste email HTML and see it rendered at desktop or mobile width. A few quality checks run as you type — alt text, absolute links, table widths, unsubscribe link, spam-trigger words.

~/lab/email-previewer — untitled.html

<!DOCTYPE html>
<html>
<body style="margin:0;padding:24px 0;background:#f4f4f7;font-family:Helvetica,Arial,sans-serif;">
  <table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0"
         style="background:#ffffff;border-radius:8px;overflow:hidden;max-width:100%;">
    <tr>
      <td style="background:#1f2430;padding:24px;">
        <span style="color:#ffffff;font-size:14px;font-weight:bold;letter-spacing:2px;">ACME STORE</span>
      </td>
    </tr>
    <tr>
      <td style="padding:24px;">
        <h2 style="margin:0 0 8px;font-size:18px;color:#1f2430;">Your order is confirmed</h2>
        <p style="margin:0 0 16px;font-size:14px;color:#5a6372;line-height:1.6;">
          Thanks, Sam! Order #48291 is on its way.
          Estimated delivery: Aug 8.
        </p>
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="font-size:14px;color:#1f2430;">
          <tr>
            <td style="padding:8px 0;border-bottom:1px solid #eceef2;">Trail Runner GTX</td>
            <td style="padding:8px 0;border-bottom:1px solid #eceef2;" align="right">$129.00</td>
          </tr>
          <tr>
            <td style="padding:8px 0;border-bottom:1px solid #eceef2;">Wool socks &times;2</td>
            <td style="padding:8px 0;border-bottom:1px solid #eceef2;" align="right">$24.00</td>
          </tr>
          <tr>
            <td style="padding:8px 0;font-weight:bold;">Total</td>
            <td style="padding:8px 0;font-weight:bold;" align="right">$153.00</td>
          </tr>
        </table>
        <a href="https://acme.example.com/orders/48291"
           style="display:block;margin-top:20px;padding:12px;background:#0e7490;border-radius:6px;color:#ffffff;font-size:14px;font-weight:600;text-align:center;text-decoration:none;">
          Track your order
        </a>
      </td>
    </tr>
    <tr>
      <td style="padding:16px 24px;border-top:1px solid #eceef2;font-size:11px;color:#9aa1ad;">
        Acme Store &middot; 123 Main St, Dallas TX &middot;
        <a href="https://acme.example.com/unsubscribe" style="color:#9aa1ad;">Unsubscribe</a>
      </td>
    </tr>
  </table>
</body>
</html>

checks:running…