Documentation

Welcome to ελεγός (Elecos), the framework that combines declarative UI design with reactive state management. Below you'll find step-by-step guides, best practices, and advanced concepts to help you build applications.

⚡️ Quick Start

Begin your ελεγός journey with this 3-minute walkthrough. We'll create a new project and build a simple counter application.

npm create elecos@latest my-app
cd my-app
npm run dev

The CLI will automatically install dependencies and launch the development server.

🛠️ Installation Options

Vite Template

The recommended installation method for creating new ελεγός projects. Includes TypeScript, ESLint, and Prettier.

npm create vite@latest my-project -- --template elecos-ts

Manual Setup

Add ελεγός to an existing project using the framework's core library.

npm install ελεγός

🧱 Core Components

State Management

Create reactive state that automatically updates UI components:

// Example: Basic State
import { state, component } from 'ελεγός';

const count = state(0);

component('Counter', () => {
  return (
    <div class="flex gap-4 items-center">
      <button @click="count.value--">-
      <span>{count}
      <button @click="count.value++">+
    </div>
  );
});

Component Lifecycle

Component hooks for managing initialization and cleanup:

component('DataLoader', () => {
  const data = ref(null);
  const loading = ref(true);

  onMount(async () => {
    data.value = await fetchData();
    loading.value = false;
  });

  return (
    <div>
      {loading.value ? (
        <div class="animate-pulse text-blue-400">Loading...
      ) : (
        <pre>{JSON.stringify(data, null, 2)}

)} </div> ); });