A EASY UI

Build interfaces
with let.

AEUI is a frontend framework that manages state with JavaScript variables.
Update the screen without a state update function.

Create a project Explore examples

AEUI is under development. APIs and behavior may change.

Counter.jsxAEUI
export default function Counter() {
  let count = 0;

  return (
    <button onClick={() => count++}>
      Clicks: {count}
    </button>
  );
}
Edit the code and try it

Try it yourself.

Edit the examples and see the results.

let

Change a variable. Update the screen.

Declare state with let and change its value with code like count++. No separate state setter needed.

Changes from clicks and input appear on screen automatically.

Try itReplace count++ with count += 5, then click the button.

array / object

Update values inside arrays directly.

Change an object inside an array with item.quantity++. No need to create a new array or call a state update function.

Try itAdd coffee or bread. Only the quantity of the item you choose updates.

watch

Run code when state changes.

Pass a callback and the values to observe to watch. This example switches the theme when dark changes.

Try itClick the button to switch between light and dark themes.

JSX

Start with familiar JSX.

If you know JSX, you can start using AEUI right away. Start your project with the syntax you already know.

ReadingList.jsxJSX
export default function ReadingList() {
  let savedOnly = false;
  let books = [
    { title: 'Dune', author: 'Frank Herbert', saved: true },
    { title: '1984', author: 'George Orwell', saved: false },
  ];

  return (
    <section className="reading-list">
      <label>
        <input type="checkbox" checked={savedOnly}
          onChange={() => savedOnly = !savedOnly} />
        Show saved books
      </label>

      {books
        .filter(book => !savedOnly || book.saved)
        .map(book => (
          <article key={book.title}>
            <h2>{book.title}</h2>
            <p>{book.author}</p>
            <button onClick={() => book.saved = !book.saved}>
              {book.saved ? 'Saved' : 'Save'}
            </button>
          </article>
        ))}
    </section>
  );
}

GET STARTED

Create your
next project.

create-aeui-app generates your project files and Vite configuration.

Getting started guide ↗
Terminal
npx create-aeui-app@latest my-app
cd my-app
npm install
npm run dev

Node.js 22.x (22.12 or later), or 24 and above

The current npm release is 0.0.1. The examples above use the upcoming version.