Reactive UI Control System Preview

Declarative
Permissions in HTML

Control rendering, visibility, and behavior of any element using only if="" attributes — no JavaScript required in your templates.

Live State Controls

Modify smartState · Watch demos react instantly

true
true
false
true
false
true
Quick Presets
👑 Admin ✏️ Editor 👁 Viewer 🚪 Guest 💰 Premium 💸 No Balance
Live Demos
1 · Inline if — Role-based (mode: hide) mode: hide
/* Any element gets if="" */ <div if="user.role === 'admin'"> Admin Panel </div> <div if="user.role === 'editor'"> Editor Tools </div> <div if="user.role === 'viewer'"> Read-only View </div>
Admin Panel · Full access
Editor Tools · Can edit content
Read-only View · No edits allowed
Guest access only
2 · Compound Expression — && / || / ! mode: hide
<div if="isLoggedIn && user.balance > 1000"> Premium Feature </div> <button if="!isLoggedIn"> Login to Continue </button> <div if="user.role === 'admin' || features.newDashboard"> New Dashboard </div>
$1500
Premium Balance · Unlocked
New Dashboard Preview
3 · mode="remove" — Removed from DOM mode: remove
<div if="permissions.deleteUser" mode="remove" > <button>Delete User</button> </div> /* Inspect DOM — element physically removed when false */
↑ Toggle permissions above · inspect DOM
4 · mode="disable" — Inputs Disabled mode: disable
<div if="permissions.editUser" mode="disable" > <input placeholder="Username" /> <button>Save</button> </div>
5 · <smart-permission> + mode="replace" + <fallback> mode: replace
<smart-permission if="user.role === 'admin'" mode="replace" > <button class="danger"> Delete Account </button> <fallback> <span>⛔ No Access</span> </fallback> </smart-permission>
No Access — Admin only Permission denied
6 · Feature Flags mode: hide
<div if="features.analytics"> <smart-chart ...></smart-chart> </div> <div if="features.newDashboard"> New Dashboard Beta </div>
24.8k
Analytics · Monthly active users
🧪 New Dashboard (Beta Feature)
7 · Lazy Rendering — Not mounted until true lazy
<div if="isVisible" lazy > Heavy Component </div> /* Element never mounted until condition is true */
✅
Lazily Mounted
Was not in DOM until isVisible = true
↑ Toggle "isVisible" above to mount/unmount
8 · Enter / Leave Animations enter + leave
<div if="isLoggedIn" enter="slide" leave="fade" > Welcome back! </div> <div if="features.analytics" enter="scale" leave="slide" > Analytics Widget </div>
👋 Welcome back, Ketan!
📊
Analytics Widget
Animated enter/leave
Live smartState Store