Master the fundamentals of ebosma with step-by-step tutorials and in-depth documentation.
Start LearningUse our CLI to scaffold a new ebosma application in seconds.
npm create ebosma@latest
For advanced setups, you can install ebosma packages individually.
npm install @ebosma/core @ebosma/state @ebosma/ui
{
"type": "module",
"dependencies": {
"@ebosma/core": "^2.0.0",
"@ebosma/state": "^1.3.0"
}
}
Built-in state management with automatic UI updates and derived values.
import { state, computed } from '@ebosma/state'\n\nconst counter = state(0)\nconst\nconst doubled = computed(() => counter.value * 2)
Composable UI architecture with type-safe props and lifecycle hooks.
import { Component } from '@ebosma/core'\n\nexport default function Button({ label, onClick }) {\n return <button onClick={onClick}>{label}</button>\n}
project-root/
├── src/
│ ├── components/
│ │ └── Main.astro
│ ├── app.js
│ └── styles.css
└── package.json
import { state } from "@ebosma/state";\nimport Button from "./components/Button.astro";\n\nconst count = state(0);\n\nexport default function App() {\n return (\n <div class="p-8 text-center">\n <h1>Counter: {count.value}</h1>\n <div class="flex gap-4 justify-center mt-4">\n <Button\n label="+1"\n onClick={() => count.value++}\n />\n <Button\n label="-1"\n onClick={() => count.value--}\n />\n </div>\n </div>\n );\n}
import { Component } from "@ebosma/core";\n\nexport default function Button({ label, onClick }) {\n return <button\n class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700"\n onClick={onClick}\n >\n {label}\n </button>;\n}
View live on StackBlitz
ebosma supports TypeScript types and prop validation out of the box.
import type { ComponentProps } from '@ebosma/core';\n\ninterface ButtonProps {\n label: string;\n onClick: () => void;\n isPrimary?: boolean;\n}\n\nexport default function Button({ label, onClick, isPrimary = true }: ButtonProps) {\n return <button\n class={`px-4 py-2 rounded ${isPrimary ? 'bg-indigo-600 text-white' : 'bg-slate-300'}`}\n onClick={onClick}\n >{label}</button>\n}
The full web framework for developers who demand both power and simplicity.
View More Examples