\n\n\n\n\n\n[](https://www.npmjs.com/package/cradova)\n[](https://github.com/cradova/cradova.js/blob/next/LICENSE)\n[](https://www.npmjs.com/package/cradova)\n[](https://github.com/cradova/cradova.js/blob/next/contributing.md)\n\n\n\n \n ## Component in Cradova\n\n```js\nimport { div, h1 } from \"cradova\";\n\nfunction Hello(ctx) {\n\nconst [name, setName] = ctx.useState(\"\");\n\n return div(\n\n h1(\"Hello \" + name, {\n className: \"title\",\n style: {\n color: \"grey\",\n },\n }),\n\n input({\n oninput(e){\n setName(e.target.value);\n }\n }),\n\n )\n}\n\n\ndocument.body.append(div(hello)); // \n```\n\n# Contents\n\n- [What is Cradova](#what-is-cradova)\n- [Why Cradova?](#whats-the-benefit)\n- [Installation](#installation)\n- [Examples](#examples)\n- [Documentation](#documentation)\n- [Getting Help](#getting-help)\n- [Contributing](#contributing)\n\n## Why Cradova?\n\nCradova is not react, it's simpler, faster for most components and basically bare javascript syntax, no bundler needed.\n\nAnd.\nCradova follows the\n[VJS specification](https://github.com/codedynasty-dev/cradova/blob/main/VJS_spec/specification.md)\n\n## What's the benefit?\n\nFast and simple with and fewer abstractions and yet easily composable.\n\nCradova is not built on virtual DOM or diff algorithms. Instead, State\nmanagement is even based and only affect dom parts is updated, least repaint, done in a way that is simple, easy and fast.\n\n## Is this a big benefit?\n\nUndoubtedly, this provides a significant advantage.\n\n[current version changes](https://github.com/codedynasty-dev/cradova/blob/main/CHANGELOG.md#v400)\n\n## Installation\n\n### From npm\n\n```bash\nnpm i cradova\n```\n\n### CDN sources\n\n```html\n\n\n\n\n```\n\n## Basic Samples\n\nThis a collection of basic examples that can give you some ideas\n\n```js\nimport {\n br,\n button,\n Function,\n createSignal,\n div,\n h1,\n reference,\n useRef,\n} from \"cradova\";\n\n// hello message\n\nfunction HelloMessage() {\n return div(\"Click to get a greeting\", {\n onclick() {\n const name = prompt(\"what are your names\");\n this.innerText = name ? \"hello \" + name : \"Click to get a greeting\";\n },\n });\n}\n\n// reference (not state)\n\nfunction typingExample() {\n const ref = useRef();\n return div(\n input({\n oninput() {\n ref.current(\"text\").innerText = this.value;\n },\n placeholder: \"typing simulation\",\n }),\n p(\" no thing typed yet!\", { reference: ref.bindAs(\"text\") })\n );\n}\n\nfunction App() {\n return div(typingExample, HelloMessage);\n}\n\ndocument.body.append(App());\n```\n\n## Simple Todo list\n\nLet's see a simple TodoList example\n\n```js\nimport {\n button,\n Function,\n createSignal,\n div,\n h1,\n input,\n main,\n p,\n useRef,\n useState,\n} from \"../dist/index.js\";\n\n// creating a store\nconst todoStore = new Signal({\n todo: [\"take bath\", \"code coded\", \"take a break\"],\n});\n\n// create actions\nconst addTodo = function (todo: string) {\n todoStore.publish(\"todo\", [...todoStore.store.todo, todo]);\n};\n\nconst removeTodo = function (todo: string) {\n const ind = todoStore.store.todo.indexOf(todo);\n todoStore.store.todo.splice(ind, 1);\n todoStore.publish(\"todo\", todoStore.store.todo);\n};\n\n\nfunction TodoList() {\n // can be used to hold multiple references\n const referenceSet = useRef();\n // bind Function to Signal\n todoStore.subscribe(\"todo\", todoList);\n // vjs\n return main(\n h1(`Todo List`),\n div(\n input({\n placeholder: \"type in todo\",\n reference: referenceSet.bindAs(\"todoInput\"),\n }),\n button(\"Add todo\", {\n onclick() {\n addTodo(\n referenceSet.elem(\"todoInput\")!.value || \"\"\n );\n referenceSet.elem(\"todoInput\")!.value = \"\";\n },\n })\n ),\n todoList\n );\n}\n\nconst todoList = function () {\n const data = this.pipes.get(\"todo\");\n return div(\n data.map((item: any) =>\n p(item, {\n title: \"click to remove\",\n onclick() {\n removeTodo(item);\n },\n })\n )\n );\n};\ndocument.body.appendChild(TodoList());\n```\n\n## Getting Help\n\nTo get further insights and help on Cradova, visit the\n[Discord](https://discord.gg/b7fvMg38) and [Telegram](https://t.me/codedynasty-devHQ)\nCommunity Chats.\n\n## Contributing\n\nWe are currently working to\n[set](https://github.com/codedynasty-dev/cradova/blob/main/contributing.md) up the\nfollowing:\n\n- Cradova Docs\n- Sample projects\n- maintenance and promotion\n\n```\n ██████╗ ██████╗ █████═╗ ███████╗ ███████╗ ██╗ ██╗ █████╗\n██╔════╝ ██╔══██╗ ██╔═╗██║ █ ██ ██╔═════╝█ ██║ ██║ ██╔═╗██\n██║ ██████╔╝ ███████║ █ ██ ██║ ██ ██║ ██║ ██████╗\n██║ ██╔══██╗ ██║ ██║ █ ██ ██║ ██ ╚██╗ ██╔╝ ██║ ██╗\n╚██████╗ ██║ ██║ ██║ ██║ ███████╔╝ ████████ ╚███╔╝ ██║ ██║\n ╚═════╝ ╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚══════╝ ╚════╝ ╚══╝ ╚═╝ ╚═╝\n```\n\n## MIT Licensed\n\nOpen sourced And Free.\n\n### Contribution and License Agreement\n\nIf you contribute code to this project, you are implicitly allowing your code to\nbe distributed under same license. You are also implicitly verifying that all\ncode is your original work.\n\n## Supporting Cradova development\n\nYour Support is a good force for change anytime you do it, you can ensure Our\nprojects, growth, Cradova, Cradova, JetPath etc, growth and improvement by\nmaking a re-occurring or fixed sponsorship to\n[github sponsors](https://github.com/sponsors/FridayCandour):\n\nSupport via cryptos -\n\n- BTC: `bc1q228fnx44ha9y5lvtku70pjgaeh2jj3f867nwye`\n- ETH: `0xd067560fDed3B1f3244d460d5E3011BC42C4E5d7`\n- LTC: `ltc1quvc04rpmsurvss6ll54fvdgyh95p5kf74wppa6`\n- TRX: `THag6WuG4EoiB911ce9ELgN3p7DibtS6vP`\n\n---\n\nBuild Powerful Web Apps. Ship Faster. Ship Smaller.","readmeFilename":"README.md"}
![\"Logo\"](\"https://raw.githubusercontent.com/CodeDynasty-dev/cradova/main/icon.png\"){kind=icon}
\n \n\n