A lightweight, high-performance web framework built for modern frontend development, featuring fine-grained reactivity and a declarative component model. Inspired by leptos and solidjs.
Supports MBX, a JSX-like component syntax, providing a familiar and expressive way to build reactive web applications.
macOS/Linux:
curl -fsSL https://raw.githubusercontent.com/Arcelyth/aitne/main/scripts/install.sh | bashaitne CLI depends on moonbit async library which not supports Windows now
aitne init your_project
cd your_project
moon updateBuild your project:
aitne buildaitne run
This will start a web server on http://localhost:8000 by default which depends on eirene.toml config file.
Todo list:
fn todo_app() -> &View {
let (input_val, set_input_val) = @reactive.create_signal("")
let (todo, set_todo) = @reactive.create_signal(["Example."])
let add_item = _ => {
let text = input_val.get()
if text != "" {
set_todo.set(todo.get() + [text])
}
set_input_val.set("")
}
let remove_item = item => {
let new_list = todo.get().filter(fn(t) { t != item })
set_todo.set(new_list)
}
<div>
<h1> Todo List </h1>
<div>{() => todo.get().length().to_string() }</div>
<div>
<input
type="text"
value={input_val}
on:input={ev => set_input_val.set(event_target_value(ev))}
/>
<button on:click={add_item}> Add </button>
</div>
<ul>
<ForEach
each={()=>todo.get().iter()}
key={(x)=>{return x}}
children={(item) => {
<li>
{() => item}
<button on:click={_ => remove_item(item)}> "Delete" </button>
</li>
}}
/>
</ul>
</div>
}Simple router usage:
///|
pub fn app() -> &View {
<Router base="/">
<Routes fallback={() => <NotFound />}>
<Route path="/" view={() => <Home />} />
<ParentRoute
path="/users"
view={() => <UsersPage />}>
<Route path="/:id" view={() => <UserDetailPage />}/>
</ParentRoute>
<ParentRoute
path="/t"
view={() => <TryPage />}>
<Route path="/t1" view={() => <TryPage />} />
</ParentRoute>
</Routes>
</Router>
}
///|
fn main {
let _ = @dom.mount_to_body(() => <App />)
}
Aitne provides first-class support for component-scoped CSS directly inside your mbx source files using ${ ... }$ CSS blocks.
You can write inline CSS rules, import external stylesheets use expand syntax !"path.css"/!'path.css', assign styles to variables and reference class names safely inside your component bindings.
pub fn counter_btn(incr?: Int = 1) -> &View {
let style = ${
!"./counter_btn.module.css"
.btn {
background-color: #000000;
}
}$
let (count, set_count) = @reactive.create_signal(0)
<button on:click={(_) => { set_count.update((v) => { v + incr }) }} class={()=>style.btn}>
Click me: {() => count.get().to_string()}
</button>
}
Aitne also offers experimental support for compiling applications to WebAssembly GC, delivering significant performance gains.
Experimental: WebAssembly support is currently experimental and may be unstable. APIs, runtime behavior, and build configuration may change without notice. It is not recommended for production use at this stage.
Eirene is an efficient, lightweight web server built in MoonBit, specifically for the Aitne ecosystem. It designed for serving static assets, handling Single Page Application (SPA) routing fallbacks, and providing Hot Module Replacement (HMR) during development. An example 'eirene.toml' config file:
[app]
name = "examples"
mode = "development"
entry_html = "index.html"
[build]
target = "js"
src_dir = "src"
out_dir = "."
[server]
host = "127.0.0.1"
port = 8000
hmr_enabled = falseThis library still work in progress, not production ready!