Introduction
Welcome to Logix — an Effect-native runtime for frontend state and business logic.
Welcome to Logix.
Logix is an Effect-native runtime for state and business logic designed for modern frontend applications. It integrates deeply with the Effect ecosystem and is built to solve the hard parts of real-world business logic: async orchestration, state linkage, and type safety.
Do these situations hurt?
[!TIP] If any of these resonate with you, Logix might be what you need.
- useEffect race-condition hell: you switch tabs quickly, response A overwrites response B, and the UI flickers.
- State sync nightmare: state is passed across components via prop drilling; one Context change causes a full re-render.
- Scattered async logic: cancellation, retries, and loading states live everywhere; bugs never stop.
- Form linkage debugging: field A changes → B validates → C becomes disabled… where did the chain break? DevTools can’t tell you.
Who is this for?
- You have React / Vue / frontend engineering experience and want something better than
useState + useEffectfor complex business logic. - You’re new to Effect / functional programming and don’t want to be overwhelmed by new terminology on day one.
Prerequisites
- Basic TypeScript experience
- Familiarity with core frontend concepts: components, state, event handling
What you’ll get
- A clear sense of what Logix is built to solve, and how it differs from Redux / MobX.
- An intuitive picture of “Module / Logic / Runtime / Bound API
$”. - A concrete next-step learning path (what to read and which examples to run).
Why Logix?
1. Intent-first
UI components focus on rendering and dispatching intent (Actions), instead of embedding complex business logic.
2. Reactive flows
Use declarative Flow APIs to handle async races, debouncing, throttling, and state linkage—without the useEffect waterfall.
3. Type-safe
With strong typing based on effect/Schema, you get great autocomplete and type checking from API to UI.
4. Modular
Encapsulate business logic in independent Modules that are easy to test, reuse, and maintain.
Next: where to start
If you want to get a demo running as quickly as possible, read in this order:
- Quick Start: Your first app — a counter app in under 30 minutes.
- Tutorial: Your first business flow (cancelable search) — debouncing, auto-cancel, and error handling.
- Tutorial: Complex list query — production patterns for multi-source triggers, auto-reset, and race handling.
- Modules & State — a systematic model of Module / State / Action.
[!TIP] If you’re building real forms (multiple fields, validations, dynamic arrays), don’t hand-roll form state in Get Started. Follow the
@logixjs/formtrack instead—it’s faster and the boundaries are already baked in.
If you’re interested in the “why” behind the design, continue after the three steps above: