Handlebars (HBS) Viewer

Write Handlebars templates and render them live with custom JSON context data.

Auto-render

HBS Template.hbs

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
  body { font-family: system-ui, sans-serif; margin: 2rem; background: #f9fafb; color: #111827; }
  h1 { color: #7c3aed; }
  .card { background: white; border-radius: 0.75rem; padding: 1.25rem; margin-bottom: 1rem;
          box-shadow: 0 1px 3px rgba(0,0,0,0.1); border: 1px solid #e5e7eb; }
  .badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 9999px;
           background: #ede9fe; color: #7c3aed; font-size: 0.75rem; font-weight: 600; }
  .tag { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 4px;
         background: #f3f4f6; font-size: 0.75rem; margin-right: 4px; }
</style>
</head>
<body>
  <h1>Hello, {{user.name}}!</h1>
  <p>Welcome to your dashboard. You have <strong>{{stats.messages}}</strong> new messages.</p>

{{#if user.isPremium}}
    <p><span class="badge">⭐ Premium Member</span></p>
  {{else}}
    <p>Upgrade to unlock premium features.</p>
  {{/if}}

<h2>Your Projects</h2>
  {{#each projects}}
    <div class="card">
      <strong>{{name}}</strong> — {{status}}
      <br />
      {{#each tags}}
        <span class="tag">{{this}}</span>
      {{/each}}
    </div>
  {{/each}}

{{#unless projects}}
    <p>No projects yet. Create your first one!</p>
  {{/unless}}
</body>
</html>

JSON Context Data

Your preview will appear here after rendering