A lightweight, decorator-based TypeScript framework for building modern Web Components with reactive properties, automatic DOM updates, and zero dependencies.
- Zero Dependencies: No external runtime dependencies - pure TypeScript compiled to standard Web Components
- Lightweight and Fast: Minimal size with high performance
- Decorator-Based API: Use familiar TypeScript decorators like
@Property,@Attribute, and@EventAction - Reactive Properties: Automatic DOM updates when properties change with
@ChangeHooks - Shadow DOM Support: Choose between Shadow DOM (open/closed) or Light DOM
- Built-in Hooks: 11+ pre-built hooks for common DOM operations
- TypeScript First: Full TypeScript support with type-safe decorators and intellisense
- MIT License: Free to use in any project
Try out Bazlama Web Component with interactive examples:
- Full Documentation & Interactive Samples - Complete documentation with live examples
- DaisyUI Component Library - Modern UI components with DaisyUI and Router
- Core Examples - Basic usage examples
npm install bazlama-web-componentEnable decorators in your tsconfig.json:
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"target": "ES2020",
"module": "ESNext",
"moduleResolution": "bundler"
}
}import {
BazlamaWebComponent,
CustomElement,
Property,
Attribute,
ChangeHooks,
EventAction,
useElementText
} from "bazlama-web-component"
@CustomElement("hello-world")
class HelloWorld extends BazlamaWebComponent {
constructor() {
super()
this.InitBazlamaWebComponent()
}
@ChangeHooks([useElementText(".greeting")])
@Attribute("name", true)
@Property({ defaultValue: "World" })
name: string = "World"
@EventAction(".btn", "click")
onButtonClick() {
this.name = "Bazlama"
}
getRenderTemplate() {
return `
<div class="container">
<h1 class="greeting">Hello, World!</h1>
<button class="btn">Change Name</button>
</div>
`
}
}<!DOCTYPE html>
<html>
<head>
<script type="module" src="./hello-world.ts"></script>
</head>
<body>
<hello-world name="Developer"></hello-world>
</body>
</html>For complete documentation, examples, and live demos, visit our samples page.
TypeScript decorators provide declarative syntax for defining properties, attributes, and event handlers.
@Property creates reactive properties. When changed, hooks are automatically triggered.
@ChangeHooks connects property changes to DOM updates without manual manipulation.
@EventAction binds DOM events to methods with automatic cleanup.
Components use Shadow DOM by default for style encapsulation. Use ShadowRootMode.None for light DOM.
useElementText- Update element text contentuseElementProperty- Sync with element propertiesuseElementAttribute- Manage element attributesuseElementStyle- Apply CSS stylesuseToggleClass- Toggle CSS classesuseSwitchClass- Switch between classesuseAddRemoveClass- Add/remove classes conditionallyuseElementInputValue- Sync with input valuesuseFunction- Execute custom functionsuseCustomHook- Create custom logic- And more...
New versions are automatically published to NPM when a version tag is pushed to the repository.
See RELEASE.md for detailed release process and CHANGELOG.md for version history.
Contributions are welcome! Please feel free to submit issues and pull requests.
MIT License - see LICENSE file for details.