doz
Almost like writing in VanillaJS. For modern browser.
Documentation | API | Demo | Browse example code
👉 SEE A PROJECT BUILT WITH DOZ 👈
Look at the code on Codepen
Why
- 🎼 Works with tagged template literals
- 🎳 Component based
- 🧩 WebComponent ready
- 🏪 Global stores
- 😆 Global components
- 🔫 Fast performance
- 💅 Scoped style
- 📡 Uses ES6 proxy to observe changes
- 😁 Simple and familiar API
- 😱 No extra syntax like JSX
- 💣 No confusion with props and state
- ⛏ Extensible through: plugins, mixin, components
- 📽 CSS animation support
Get started
$ npx doz-cli app my-app
$ cd my-app
$ npm start
Example
<div id="app"></div>
Component definition
ButtonCounter.js
import {Component} from 'doz'
export default class ButtonCounter extends Component {
constructor(o) {
super(o);
this.props = {
counter: 0
};
}
template(h) {
return h`
<style>
button {
font-size: 16px;
padding: 20px;
}
</style>
<button onclick="${this.increase}">
count ${this.props.counter}
</button>
`
}
increase() {
this.props.counter++;
}
};
Make an app with the component defined above
app.js
import {appCreate} from 'doz'
import ButtonCounter from './ButtonCounter'
appCreate('#app', ButtonCounter);
Doz ecosystem
- 👨🏻💻 doz-cli provides a boilerplate to creating app and component
- 👨🏼🎨 doz-ssr server side rendering
- 🤳🏼 doz-snap transforms app to static HTML
- 👩🏼🚀 doz-router a complete component for routing
- ✍🏼 doz-metatag a plugin for managing basic OG meta tag in your app (perfect with doz-ssr)
CDN unpkg
<script type="module">
import {Component} from 'https://unpkg.com/doz/dist/doz.min.js'
//...
</script>
Changelog
You can view the changelog here
License
Doz is open-sourced software licensed under the MIT license