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
- 🎼 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
$ npx doz-cli app my-app $ cd my-app $ npm start <div id="app"></div>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++; } };app.js
import {appCreate} from 'doz' import ButtonCounter from './ButtonCounter' appCreate('#app', ButtonCounter);- 👨🏻💻 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)
<script type="module"> import {Component} from 'https://unpkg.com/doz/dist/doz.min.js' //... </script>You can view the changelog here
Doz is open-sourced software licensed under the MIT license