Skip to content
A JavaScript framework for building UI, almost like writing in VanillaJS. For modern browser.
JavaScript HTML Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
documentation
example
extra
polyfill
src
test
types
.gitignore
.npmignore
.postcssrc
.travis.yml
CHANGELOG.md
LICENSE
README.md
index.js
package-lock.json
package.json
version-to-tag.sh
webpack.config.js

README.md







Almost like writing in VanillaJS. For modern browser.



Documentation | API | Demo | Browse example code

👉 SEE A PROJECT BUILT WITH DOZ 👈

Why

  • 🎼 Works with tagged template literals
  • 🎳 Component based
  • 🏪 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

Another framework?

In the web there are many frameworks that do all the same things. But a lot of them are complex, we need to know a lot of directives and they make confusion for example with the context of "this". Doz was created to make the development of web applications easy, by reading this simple documentation you will be able to immediately start creating something without getting lost in words and multiple import of functions.

Get started

$ npx doz-cli app my-app
$ cd my-app
$ npm start

Example

<div id="app"></div>

Component definition

ButtonCounter.js

import {Component, tag} from 'doz'

@tag('button-counter')
export default class extends Component {

    props = {
        counter: 0
    };
    
    template(h) {
        return h`
            <style>
                button {
                    font-size: 16px;
                    padding: 20px;
                }
            </style>

            <button onclick="this.props.counter++">
                ${this.props.title} ${this.props.counter}
            </button>
        `
    }

};

Make an app with the component defined above

app.js

import Doz from 'doz'
import ButtonCounter from './ButtonCounter'

new Doz({

    root: '#app',

    template(h) {
        return h`
            <${ButtonCounter} title="Click me!"/>
        `
    }

});

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 src="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

You can’t perform that action at this time.