Introduction to Neon Framework

Neon Framework is a standalone, Dart-based mobile UI framework engineered for building high-performance native applications on Android and iOS with zero dependency on Flutter.

Unlike traditional cross-platform frameworks that embed large custom graphics engines (like Skia or Impeller) or bridge through JavaScript runtimes, Neon owns its entire runtime while rendering 100% native platform components (android.widget.* on Android and UIKit.* on iOS).

The Core Philosophy

Native Components, Reactive Logic, Zero Bloat
Neon decouples business logic and widget composition from platform-specific rendering using a lightning-fast HTTP/socket bridge.

  • Standalone Dart SDK: Written in pure Dart. It owns its lifecycle, widget composition tree, rendering pipeline, and state container.
  • True Native Views: A Neon button is a true Android MaterialButton or iOS UIButton — not a canvas emulation.
  • Zero Flutter Dependency: No flutter_tools, no Flutter engine binary, no Flutter framework lock-in.
  • Ultra-lightweight Bundles: Minimal binary overhead compared to 15MB+ heavy runtime engines.
  • High Productivity CLI: Integrated neon command line with 3-tier hot reload (UI-only, state-preserving, and structural fallback).

Architectural Snapshot

Neon employs a decoupled Client-Server Native Architecture:

  1. Dart Engine (Backend): Runs an embedded high-speed HTTP server (default: http://localhost:8080). It manages the widget tree, reactive state (NeonSignal), event dispatching, and serializes the active UI into an optimized JSON schema.
  2. Native Shells (Android & iOS):
    • Android (MainActivity.kt): Native Kotlin application that fetches the JSON tree, dynamically builds native Android View hierarchies, and streams user events back via POST /action.
    • iOS (ViewController.swift): Native UIKit Swift application that inflates the JSON tree into native iOS controls and dispatches touch interactions back to the Dart engine.
┌────────────────────────────────────────────────────────┐
│                   Dart Runtime (Local)                 │
│  NeonApp.run() ──► Reactive Signals ──► JSON Serializer│
└──────────────────────────┬─────────────────────────────┘
                           │ HTTP (localhost:8080)
            GET / (Tree)   │   POST /action (Events)
                           ▼
┌────────────────────────────────────────────────────────┐
│                   Native Platform Shell                │
│  Android: Kotlin ViewTree (Material 3)                 │
│  iOS: Swift UIKit Hierarchy                            │
└────────────────────────────────────────────────────────┘

Quick Example: A Reactive Neon Counter

Writing code in Neon feels immediate and natural to Dart developers:

import 'package:neon_framework/neon.dart';

void main() {
  NeonApp.run(
    title: 'Neon Showcase',
    theme: NeonThemeData.dark(),
    home: const CounterScreen(),
  );
}

class CounterScreen extends StatefulWidget {
  const CounterScreen({super.key});

  @override
  NeonState<CounterScreen> createState() => _CounterScreenState();
}

class _CounterScreenState extends NeonState<CounterScreen> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  NeonWidget build(NeonBuildContext context) {
    return Container(
      padding: NeonEdgeInsets.all(24.0),
      alignment: NeonAlignment.center,
      child: Column(
        mainAxisAlignment: NeonMainAxisAlignment.center,
        children: [
          Text(
            'Current Count:',
            style: NeonTextStyle(fontSize: 18, color: NeonColor(0xFF9E9E9E)),
          ),
          SizedBox(height: 12),
          Text(
            '$_counter',
            style: NeonTextStyle(
              fontSize: 48,
              fontWeight: NeonFontWeight.bold,
              color: NeonColor(0xFF00E5FF),
            ),
          ),
          SizedBox(height: 32),
          FilledButton(
            key: 'btn-increment', // Keys route actions back to Dart callbacks!
            onPressed: _increment,
            child: Text('Increment Counter'),
          ),
        ],
      ),
    );
  }
}

Next Steps

Explore the core guides to start building: