{"id":13671396,"url":"https://github.com/dozjs/doz","last_synced_at":"2025-05-01T13:31:24.027Z","repository":{"id":31964436,"uuid":"127509332","full_name":"dozjs/doz","owner":"dozjs","description":"A JavaScript framework for building UI, almost like writing in VanillaJS. For modern browser.","archived":false,"fork":false,"pushed_at":"2025-02-26T11:07:24.000Z","size":5760,"stargazers_count":44,"open_issues_count":5,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-27T21:47:45.199Z","etag":null,"topics":["es6-proxy","javascript-framework","props","proxy","tagged-template-literals","ui-components","vanilla-js","vdom","vdom-library"],"latest_commit_sha":null,"homepage":"https://doz.js.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dozjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-31T07:25:13.000Z","updated_at":"2024-02-19T15:37:20.000Z","dependencies_parsed_at":"2024-06-18T18:34:04.166Z","dependency_job_id":"f431b3d2-e0e4-41de-b2b3-edc3ab6fb28f","html_url":"https://github.com/dozjs/doz","commit_stats":{"total_commits":1877,"total_committers":4,"mean_commits":469.25,"dds":"0.16782099094299419","last_synced_commit":"7ac55d2a21a52c70e26fd2e88915f0da36cf9c85"},"previous_names":[],"tags_count":247,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dozjs%2Fdoz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dozjs%2Fdoz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dozjs%2Fdoz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dozjs%2Fdoz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dozjs","download_url":"https://codeload.github.com/dozjs/doz/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251881655,"owners_count":21659137,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["es6-proxy","javascript-framework","props","proxy","tagged-template-literals","ui-components","vanilla-js","vdom","vdom-library"],"created_at":"2024-08-02T09:01:08.534Z","updated_at":"2025-05-01T13:31:23.225Z","avatar_url":"https://github.com/dozjs.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n\u003cbr/\u003e\u003cbr/\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/dozjs/doz/master/extra/doz-header.png\" title=\"doz\"/\u003e\n\u003cbr/\u003e\u003cbr/\u003e\n\u003cbr/\u003e\u003cbr/\u003e\nAlmost like writing in VanillaJS. For modern browser.\n\u003cbr/\u003e\u003cbr/\u003e\n\u003ca href=\"https://travis-ci.org/dozjs/doz\" target=\"_blank\"\u003e\u003cimg src=\"https://travis-ci.org/dozjs/doz.svg?branch=master\" title=\"Build Status\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://opensource.org/licenses/MIT\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/License-MIT-yellow.svg\" title=\"License: MIT\"/\u003e\u003c/a\u003e\n\u003cimg src=\"https://img.shields.io/badge/Node.js-%3E%3D10.x.x-green.svg\" title=\"Node.js version\"/\u003e\n\u003cbr/\u003e\u003cbr/\u003e\n\u003ca href=\"https://github.com/dozjs/doz/blob/master/documentation/index.md\"\u003eDocumentation\u003c/a\u003e \n| \u003ca href=\"https://github.com/dozjs/doz/blob/master/documentation/api.md\"\u003eAPI\u003c/a\u003e \n| \u003ca href=\"https://dozjs.github.io/doz/example/\"\u003eDemo\u003c/a\u003e \n| \u003ca href=\"https://github.com/dozjs/doz/tree/master/example\"\u003eBrowse example code\u003c/a\u003e\n\u003cbr/\u003e\u003cbr/\u003e\n👉 \u003ca href=\"https://play.radionorba.it\"\u003eSEE A PROJECT BUILT WITH DOZ\u003c/a\u003e 👈\n\u003cbr/\u003e\u003cbr/\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/dozjs/doz/master/extra/login-form-example.gif\" title=\"A login form built with Doz\"/\u003e\n\u003cbr\u003e\n\u003ca href=\"https://codepen.io/fabioricali/pen/poveXwo\"\u003eLook at the code on Codepen\u003c/a\u003e\n\u003cbr/\u003e\u003cbr/\u003e\n\u003c/div\u003e\n\n## Why\n- 🎼 Works with tagged template literals\n- 🎳 Component based\n- 🧩 WebComponent ready\n- 🏪 Global stores\n- 😆 Global components\n- 🔫 Fast performance\n- 💅 Scoped style\n- 📡 Uses ES6 proxy to observe changes\n- 😁 Simple and familiar API\n- 😱‍ No extra syntax like JSX\n- 💣 No confusion with props and state\n- ⛏ Extensible through: plugins, mixin, components\n- 📽 CSS animation support\n\n## Get started\n```\n$ npx doz-cli app my-app\n$ cd my-app\n$ npm start\n```\n\n## Example\n\n```html\n\u003cdiv id=\"app\"\u003e\u003c/div\u003e\n```\n\n#### Component definition\n\nButtonCounter.js\n```javascript\nimport {Component} from 'doz'\n\nexport default class ButtonCounter extends Component {\n    \n    constructor(o) {\n        super(o);\n        this.props = {\n            counter: 0\n        };\n    }\n\n    template(h) {\n        return h`\n            \u003cstyle\u003e\n                button {\n                    font-size: 16px;\n                    padding: 20px;\n                }\n            \u003c/style\u003e\n\n            \u003cbutton onclick=\"${this.increase}\"\u003e\n                count ${this.props.counter}\n            \u003c/button\u003e\n        `\n    }\n    \n    increase() {\n        this.props.counter++;\n    }\n\n};\n```\n\n#### Make an app with the component defined above\n\napp.js\n```javascript\nimport {appCreate} from 'doz'\nimport ButtonCounter from './ButtonCounter'\n\nappCreate('#app', ButtonCounter);\n```\n\n## Doz ecosystem\n- 👨🏻‍💻 [doz-cli](https://github.com/dozjs/doz-cli) provides a boilerplate to creating app and component\n- 👨🏼‍🎨 [doz-ssr](https://github.com/dozjs/doz-ssr) server side rendering\n- 🤳🏼 [doz-snap](https://github.com/dozjs/doz-snap) transforms app to static HTML\n- 👩🏼‍🚀 [doz-router](https://github.com/dozjs-cmp/doz-router) a complete component for routing\n- ✍🏼 [doz-metatag](https://github.com/dozjs/doz-metatag) a plugin for managing basic OG meta tag in your app (perfect with doz-ssr)\n\n#### CDN unpkg\n```html\n\u003cscript type=\"module\"\u003e\n    import {Component} from 'https://unpkg.com/doz/dist/doz.min.js'\n    //...\n\u003c/script\u003e\n```\n\n## Changelog\nYou can view the changelog \u003ca target=\"_blank\" href=\"https://github.com/dozjs/doz/blob/master/CHANGELOG.md\"\u003ehere\u003c/a\u003e\n\n## License\nDoz is open-sourced software licensed under the \u003ca target=\"_blank\" href=\"http://opensource.org/licenses/MIT\"\u003eMIT license\u003c/a\u003e\n\n## Author\n\u003ca target=\"_blank\" href=\"http://rica.li\"\u003eFabio Ricali\u003c/a\u003e\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdozjs%2Fdoz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdozjs%2Fdoz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdozjs%2Fdoz/lists"}