Examples

See ELF.js in action with code samples and interactive demonstrations of core features.

Getting Started

                import { elf } from '/elf.js';

elf.init(() => {
  // Create a simple button component
  elf.ui.addComponent({
    id: 'counter-button',
    template: '<button class="elf-button">Count: {{ count }}</button>',
    data: { count: 0 },
    events: {
      click: () => {
        elf.components.counter-button.data.count += 1;
      }
    }
  });
});

              

Code Examples

Basic Component

                elf.ui.addComponent({
  id: 'hello-world',
  template: '<div class="p-4 bg-gray-800/50 rounded">Hello {{ name }}!</div>',
  data: { name: 'User' }
});

              

A simple component demonstrating data binding and templating.

Event Handling

                elf.ui.addComponent({
  id: 'form-input',
  template: `<input type="text" class="elf-input" v-model="name" />
  <div>You typed: {{ name }}</div>`,
  data: { name: '' }
});

              

Real-time data binding with input elements and event propagation.

WASM Module

                elf.wasm.loadModule('/modules/math.wasm').then(instance => {
  elf.ui.addComponent({
    id: 'fibonacci',
    template: `<input type="number" v-model="n" />
    <div>Result: {{ result }}</div>`,
    data: { n: 0, result: 0 },
    watch: {
      n: function() {
        this.data.result = instance.exports.fibonacci(this.data.n);
      }
    }
  });
});

              

Demonstrating Rust-to-JS WebAssembly integration for mathematical operations.

3D Graphics

                import * as THREE from 'three';

elf.ui.addComponent({
  id: '3d-scene',
  template: `<div id="three-container" class="w-full h-64"></div>`,
  mounted: function() {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, ...);
    const renderer = new THREE.WebGLRenderer();
    document.getElementById('three-container').appendChild(renderer.domElement);
    
    // Add cube and animation loop
  }
});

              

Using WebGPU/WebGL for 3D rendering with ELF.js component lifecycle hooks.

Try It Yourself

Live Code Editor

const exampleComponent =

{

template: `<div>{{ message }}</div>`,

data: { message: 'Hello ELF!' }

};

Our interactive playground is coming soon. In the meantime, try these examples in your local dev environment.

Open Playground (Soon)