Framework Interop

<eg-grid> is a standard custom element — it works with any framework. Each grid below is rendered and owned by its framework. Drag to rearrange, resize from corners.

Datastar + Cloudflare Workers demo →

React via HTM — no build

// Works like any HTML element in JSX
<eg-grid columns="3" algorithm="push">
  {items.map(item =>
    <div key={item.id}
         data-egg-item={item.id}
         data-egg-colspan={item.w}>
      {item.label}
    </div>
  )}
</eg-grid>

Vue runtime + compiler

// Register as custom element
app.config.compilerOptions
  .isCustomElement = t => t === 'eg-grid'

<eg-grid columns="3" algorithm="push">
  <div v-for="item in items"
       :data-egg-item="item.id"
       :data-egg-colspan="item.w">
    {{ item.label }}
  </div>
</eg-grid>

Solid via html tag — no build

// Custom elements work natively
<eg-grid columns="3" algorithm="push">
  <For each={items}>{item =>
    <div data-egg-item={item.id}
         data-egg-colspan={item.w}>
      {item.label}
    </div>
  }</For>
</eg-grid>