In Every Framework

One engine, four adapters. Here’s the same scene — a label, a click-to-move rectangle, and a circle, all selectable — built with each one. React, Vue, and Svelte run live below; switch the tabs to compare. The Angular adapter is identical in shape and is shown as code.

React

ReactScene.tsx

import { ACCircle, ACLayer, ACRect, ACStage, ACText } from '@veyrajs/react'
import { useState } from 'react'
import { palette } from '../_demo-theme'

// A live React island: the declarative @veyrajs/react API actually running.
export default function ReactScene() {
  const [x, setX] = useState(60)
  return (
    <div className="veyrajs-demo">
      <ACStage width={620} height={300} selectable>
        <ACLayer>
          <ACText
            x={18}
            y={14}
            text="@veyrajs/react — click the rect; drag the handles"
            fontSize={13}
            fill={palette.slate}
          />
          <ACRect
            x={x}
            y={70}
            width={150}
            height={90}
            fill={palette.blue}
            onClick={() => setX((v) => v + 20)}
          />
          <ACCircle x={380} y={150} radius={52} fill={palette.cyan} />
        </ACLayer>
      </ACStage>
    </div>
  )
}

Vue

VueScene.vue

<script setup lang="ts">
import { ref } from 'vue'
import { ACStage, ACLayer, ACRect, ACCircle, ACText } from '@veyrajs/vue'
import { palette } from '../_demo-theme'

// A live Vue island: the declarative @veyrajs/vue API actually running.
const x = ref(60)
</script>

<template>
  <div class="veyrajs-demo">
    <ACStage :width="620" :height="300" selectable>
      <ACLayer>
        <ACText :x="18" :y="14" text="@veyrajs/vue — click the rect; drag the handles" :fontSize="13" :fill="palette.slate" />
        <ACRect :x="x" :y="70" :width="150" :height="90" :fill="palette.blue" @click="x += 20" />
        <ACCircle :x="380" :y="150" :radius="52" :fill="palette.cyan" />
      </ACLayer>
    </ACStage>
  </div>
</template>

Svelte

SvelteScene.svelte

<script lang="ts">
  import { ACStage, ACLayer, ACRect, ACCircle, ACText } from '@veyrajs/svelte'
  import { palette } from '../_demo-theme'

  // A live Svelte 5 island: the declarative @veyrajs/svelte API actually running.
  let x = $state(60)
</script>

<div class="veyrajs-demo">
  <ACStage width={620} height={300} selectable>
    <ACLayer>
      <ACText x={18} y={14} text="@veyrajs/svelte — click the rect; drag the handles" fontSize={13} fill={palette.slate} />
      <ACRect {x} y={70} width={150} height={90} fill={palette.blue} onclick={() => (x += 20)} />
      <ACCircle x={380} y={150} radius={52} fill={palette.cyan} />
    </ACLayer>
  </ACStage>
</div>

Angular

The Angular adapter mirrors the same API. This docs site doesn't wire live Angular islands, so it's shown as code — see the Angular adapter guide.

hello-scene.component.ts

import { Component, signal } from '@angular/core'
import { ACStage, ACLayer, ACRect, ACCircle, ACText } from '@veyrajs/angular'

// The same scene with the Angular adapter — standalone components, ac-* selectors.
@Component({
  selector: 'hello-scene',
  standalone: true,
  imports: [ACStage, ACLayer, ACRect, ACCircle, ACText],
  template: `
    <ac-stage [width]="620" [height]="300" selectable>
      <ac-layer>
        <ac-text
          [x]="18" [y]="14"
          text="@veyrajs/angular — click the rect; drag the handles"
          [fontSize]="13" fill="#64748b" />
        <ac-rect
          [x]="x()" [y]="70" [width]="150" [height]="90"
          fill="#2563eb" (click)="x.set(x() + 20)" />
        <ac-circle [x]="380" [y]="150" [radius]="52" fill="#0ea5e9" />
      </ac-layer>
    </ac-stage>
  `,
})
export class HelloScene {
  readonly x = signal(60)
}

Each adapter is a thin, declarative wrapper over the same imperative core — see the Adapters section for the full API of each.