Example Gallery

Real Loom components with generated React, Vue, and Svelte output.

Operations

Metrics Dashboard

dashboard.loom

source

- props
  revenue: string = "$42.8k"
  trend: string = "+12%"

- pug
section.dashboard
  header
    h1 Revenue
    span {trend}
  strong {revenue}
  p Updated from workspace analytics.

react

export function MetricsDashboard({ revenue = "$42.8k", trend = "+12%" }) {
  return <section className="dashboard"><header><h1>Revenue</h1><span>{trend}</span></header><strong>{revenue}</strong><p>Updated from workspace analytics.</p></section>
}

vue

<template>
  <section class="dashboard">
    <header><h1>Revenue</h1><span>{{ trend || '+12%' }}</span></header>
    <strong>{{ revenue || '$42.8k' }}</strong>
    <p>Updated from workspace analytics.</p>
  </section>
</template>

svelte

<section class="dashboard">
  <header><h1>Revenue</h1><span>{trend}</span></header>
  <strong>{revenue}</strong>
  <p>Updated from workspace analytics.</p>
</section>