Aristocracy | Premium Community Platform

Community Blocks

Custom Block Studio & Maker

Live sandboxed iframe builder with postMessage inspection

Load Starter Template

Block Name

Category

Version

Tags (comma-separated)

Description

postMessage Output Detected

Your component contains an ARIS_CUSTOM_BLOCK_ANSWER emitter.

Sandbox Security

Blocks run inside sandbox="allow-scripts" without cookies, local storage, or parent DOM access.

HTML + JavaScript Sandbox

<div style="font-family: system-ui, sans-serif; padding: 18px; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; background: rgba(255,255,255,0.03); color: #fff;">
  <div style="font-size: 13px; font-weight: 700; margin-bottom: 12px; color: #38bdf8;">
    Dynamic Monthly Mortgage Estimator
  </div>
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px;">
    <div>
      <label style="font-size: 11px; color: rgba(255,255,255,0.5); display: block; margin-bottom: 4px;">Loan Amount ($):</label>
      <input id="loanAmt" type="number" value="250000" style="width: 100%; box-sizing: border-box; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; padding: 8px 10px; color: #fff; font-size: 13px;" />
    </div>
    <div>
      <label style="font-size: 11px; color: rgba(255,255,255,0.5); display: block; margin-bottom: 4px;">Interest Rate (%):</label>
      <input id="rate" type="number" step="0.1" value="5.5" style="width: 100%; box-sizing: border-box; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; padding: 8px 10px; color: #fff; font-size: 13px;" />
    </div>
  </div>
  <div style="padding: 12px; border-radius: 8px; background: rgba(56,189,248,0.08); border: 1px solid rgba(56,189,248,0.2); display: flex; justify-content: space-between; align-items: center;">
    <span style="font-size: 12px; color: rgba(255,255,255,0.6);">Monthly Estimate:</span>
    <span id="output" style="font-size: 18px; font-weight: 800; color: #4ade80;">$1,419 / mo</span>
  </div>
</div>

Live Sandbox

Live postMessage Event Console

Interact with the preview above. Emitted answers will stream live here.