flare-ella
v1.0.6
Published
A blazing-fast reactive UI framework with built-in routing, components, and reactivity.
Maintainers
tehillzReadme
Flare-Ella
Flare-Ella is a blazing-fast, reactive UI framework for building modern web applications.
It features reactive state management, components, nested routing, and is fully TypeScript-ready — all without the overhead of a virtual DOM.
Features
- 🔥 Reactive State – Fine-grained
signalandeffectsystem for instant DOM updates - 🧩 Components – Props, lifecycle hooks (
onMount,onUnmount), nested components - 🌐 Router – Nested SPA routing with automatic mount/unmount
- ⚡ Tiny Runtime – Fast and minimal, no virtual DOM overhead
- 🛠 TypeScript Ready – Strongly typed for modern web development
Getting Started
Follow these steps to start a new project using Flare-Ella:
1. Initialize a new project
mkdir my-flare-app
cd my-flare-app
npm init -yStep2:
#install flare-ella
npm install flare-ellaInstall Vite for development
npm install --save-dev viteUpdate package.json scripts
"scripts": {
"dev": "vite",
"build": "tsc",
"clean": "rm -rf dist"
}
my-flare-app/
├── src/
│ ├── main.ts # Entry point for your app
│ └── App.ts # Root component
├── index.html # HTML file for Vite
├── package.json
├── tsconfig.jsonExample
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Flare App</title>
</head>
<body>
<script type="module" src="./src/main.ts"></script>
</body>
</html>create a root component
#src/app.ts
import { component } from "flare-ella";
export const App = component(() => {
const div = document.createElement("div");
div.textContent = "Hello, Flare-Ella!";
div.style.fontFamily = "Arial, sans-serif";
div.style.fontSize = "2rem";
div.style.textAlign = "center";
div.style.marginTop = "2rem";
return div;
});
mount the app
main.ts
import { mount } from "flare-ella";
import { App } from "./App";
// Automatically mounts the root component
mount(App, document.body);Run the development server
npm run devBuild for Production
npm run build