Skip to content
/ doz Public

A JavaScript framework for building UI, almost like writing in VanillaJS. For modern browser.

License

Notifications You must be signed in to change notification settings

dozjs/doz

Repository files navigation







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

Author

Fabio Ricali