Documentation Overview

Introduction to Eronom

Welcome to the official Eronom Framework documentation. Eronom is a next-generation full-stack web framework designed for extreme performance, minimal memory footprints, and intuitive signal-based reactivity.

💡 Why Eronom?

Traditional web frameworks re-render component trees using virtual DOM reconciliation. Eronom compiles .erm components down to direct fine-grained signal subscriptions that update precise DOM elements instantaneously.

Quick Start (60 Seconds)

Initialize a new Eronom application using the CLI system binary:

                        # Create a new project directory

                        eronom init my-app

                        # Move to project directory

                        cd my-app

                        # Start the Rust-powered HMR dev server

                        eronom dev .

Open your browser to http://localhost:4000. Any file edit in app/pages/ will trigger instant HMR updates!

Project Architecture & Structure

Eronom projects adhere to a clean, transparent directory structure:

my-app/

├── app/

│   ├── components/       # Reusable .erm component files

│   │   ├── Header.erm

│   │   └── Footer.erm

│   ├── layouts/          # Root HTML layout wrappers

│   │   └── layout.erm

│   └── pages/            # File-system page routes

│       └── index.erm     # Served at /

├── server/

│   └── api/

│       └── routes.er     # Server HTTP endpoints

└── eronom.toml           # Eronom configuration file

Reactive Signals (useState)

State management in Eronom is powered by fine-grained signals initialized with useState().

<script>

  // Initialize a reactive state signal

  let count = useState(0);

  // Computed signal that automatically tracks dependencies

  let double = useState(() => count * 2);

</script>

<div>

  <button onClick={() => count++}>

    Count is {count} (Double: {double})

  </button>

</div>

Live Interactive Docs Sandbox

Computed Value: 5

Control Flow (if / for Directives)

Eronom supports clean native template directives for conditional rendering and looping without complex map syntax:

<script>

  let items = useState(["Apple", "Banana", "Cherry"]);

  let isLoggedIn = useState(true);

</script>

if isLoggedIn {

  <h3>Welcome back!</h3>

  for item, i in items {

    <p>Item {i + 1}: {item}</p>

  }

} else {

  <p>Please log in to continue.</p>

}

Context API & State Sharing

Share signals seamlessly across child components without prop drilling:

// Export state signal from root page

export let activeTheme = useState('dark');

// Import signal inside child Header component

import { activeTheme } from "@pages/index.erm";