How I Built a Reactive State System in Pure JavaScript

When I started building Levelo JS, one of the most interesting challenges was creating a reactive state system.

At first, I wanted something that felt similar to React. My goal was to make state access simple and intuitive, where developers could work with state values directly without extra function calls.

But once I started implementing it, I quickly realized that building a reactive system is much harder than it looks.

The First Idea

My original plan was to create a getter/setter system where state values could be accessed directly, similar to how developers usually work with variables.

On paper, it sounded simple.

In reality, it introduced many challenges.

The framework needs to know exactly when a value is being read, when it changes, and which parts of the UI depend on that value. Handling all of that correctly without adding unnecessary complexity turned out to be much more difficult than I expected.

Rethinking the API

Instead of spending weeks trying to perfect the original idea, I decided to focus on building a working MVP first.

That's when I started experimenting with a function-based approach.

The API eventually became:

import { state } from 'levelojs';

function Counter() {
  const [count, setCount] = state(0);

  return (
    // UI
  );
}

This approach felt much simpler to implement while still providing the reactive behavior I wanted.

Interestingly, this design ended up being closer to SolidJS than React.

Building It

I wasn't working completely alone.

Part of the implementation was something I explored together with AI while experimenting with different ideas and approaches.

The goal wasn't to copy another framework.

The goal was to understand how reactivity actually works behind the scenes and then build a system that fits the design philosophy of Levelo JS.

Once the function-based API was in place, many parts of the system became easier to reason about.

The implementation became cleaner, debugging became simpler, and progress became much faster.

What I Learned

This project taught me something important:

The first idea is not always the best idea.

Sometimes developers spend too much time chasing the "perfect" solution when a simpler solution can move the project forward much faster.

I still find the direct getter/setter approach interesting, and I may revisit it in the future.

But for an MVP, the function-based API was the right decision.

Final Thoughts

Building a reactive state system taught me that reactivity is not magic.

Behind every simple API, there is a lot of design, experimentation, and problem-solving.

Levelo JS is still evolving, and there are many things I want to improve.

But creating the state system was one of the moments where I learned the most about framework development and how modern JavaScript libraries work under the hood.

If you're building your own library or framework, don't be afraid to choose the simpler solution first.

You can always improve it later.