A Easy UI

Build interfaces
with let.

AEUI is a frontend framework that manages state with JavaScript variables.
Change a value with code like count++, and the change appears on screen.

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

Code examples

let

The screen updates when a variable’s value changes.

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

When does the component run?The component body runs once when it first appears on screen. Screen updates do not run let count = 0 again, so the increased value is preserved.

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.

How are changes detected?AEUI compares previous and current values, including the properties of objects inside arrays. When item.quantity++ increases a quantity, that change appears on screen.

watch

Run code when state changes.

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

When does watch run?With [dark], the callback skips the initial render and runs when dark changes.

JSX

Start with familiar JSX.

Start building with AEUI using the JavaScript and JSX you know. Create interfaces with common expressions such as map and conditionals.

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

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