A UI framework for the Web.

import { AramApp, Box, Title, Text, Button, state } from 'aram'

function App() {
    const count = state(0)

    return AramApp(
        Box({ pad: 24 },
            Title({}, 'Hello Aram!'),
            Text({}, count.$()),
            Button({ onClick: () => count.set(c => c + 1) }, 'Click me')
        )
    )
}

App()

• Box - Container with padding, margin, background
• Row / Column - Flexbox layouts
• Center - Center content
• Header / Section - Semantic containers

• Title - Headings with size, weight, color
• Text - Paragraphs
• Link - Anchor links

• Button - Clickable buttons with styles
• Input - Text inputs with events

• Image - Lazy loading, async decoding
• Video - Controls, autoplay, poster
• Audio - Full playback controls
• Divider / Spacer - Visual separators

• For - List rendering
• If / Show - Conditional rendering

• Spinner / Progress - Loading states
• Badge - Labels
• toast() - Notifications

• state() - Reactive state
• .$() - Subscribe to changes
• .set() - Update state

MIT © Aruvili