{"id":26121498,"url":"https://github.com/s15n/ive","last_synced_at":"2026-02-02T23:51:38.972Z","repository":{"id":225385528,"uuid":"763055521","full_name":"s15n/ive","owner":"s15n","description":"An extremely small Web Framework but just as powerful as all the others: Reactive without React.","archived":false,"fork":false,"pushed_at":"2024-12-29T09:13:26.000Z","size":36,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T03:51:21.333Z","etag":null,"topics":["framework","frontend","jsx","lightweight","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/s15n.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2024-02-25T12:51:03.000Z","updated_at":"2024-12-29T09:13:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"fcbef1f2-96f8-41f4-b4e6-19a03e2f2951","html_url":"https://github.com/s15n/ive","commit_stats":null,"previous_names":["s15n/ive"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s15n%2Five","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s15n%2Five/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s15n%2Five/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s15n%2Five/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/s15n","download_url":"https://codeload.github.com/s15n/ive/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248717252,"owners_count":21150388,"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":["framework","frontend","jsx","lightweight","typescript"],"created_at":"2025-03-10T14:23:16.980Z","updated_at":"2026-02-02T23:51:38.928Z","avatar_url":"https://github.com/s15n.png","language":"TypeScript","readme":"# IVE\n\n[![npm](https://img.shields.io/npm/v/ive-fw)](https://www.npmjs.com/package/ive-fw)\n[![npm](https://img.shields.io/npm/dt/ive-fw)](https://www.npmjs.com/package/ive-fw)\n![GitHub](https://img.shields.io/github/license/s15n/ive)\n\nIVE /ˈaɪ.viː/ is an extremely lightweight front-end framework best used\nalongside Vite and TypeScript.\n\n## Features\n\n- Extremely small and lightweight \u003c!--(in fact, the smallest framework I know of)--\u003e\n- No virtual DOM \u003c!--, no diffing, no reconciliation (idk what that means)--\u003e\n- No dependencies\n- TypeScript and JSX support\n- Really just two functions: `ive.createState` and `ive.watch`\n- Convenience functions on top for awaiting promises and routing\n\n## Installation\n\nCreate a vite project (creates a new folder with the project name)\n```bash\nnpm init vite\n```\nUse the following settings:\n- Select framework: `vanilla`\n- Select variant: `TypeScript`\n\nInstall IVE\n```bash\nnpm install ive-fw\n```\n\n## Usage\n\n```typescript\nimport ive from 'ive-fw/ive';\n```\n\nYou have to add the following to your `tsconfig.json` file:\n```jsonc\n{\n  \"compilerOptions\": {\n    /* ... */\n    \"jsx\": \"preserve\",\n    \"jsxFactory\": \"ive._jsx\",\n    \"jsxFragmentFactory\": \"ive._jsxFragment\",\n    /* ... */\n  }\n}\n```\n\nAnd you might need to add this line somewhere in your code (best in a separate `jsx.ts` file)\n```typescript\nimport 'ive-fw/jsx';\n```\n\nAnd you're good to go!\n\n## Example\n\n### Hello, World!\n\nCreate a new file `App.tsx` with the following content:\n```tsx\nimport ive from 'ive-fw/ive';\n\nconst Hello = ({ name }: { name: string }) =\u003e (\n    \u003ch1\u003eHello, {name}!\u003c/h1\u003e\n);\n\nexport default () =\u003e (\n    \u003cdiv\u003e\n        \u003cHello name=\"World\" /\u003e\n    \u003c/div\u003e\n);\n```\n\nRender this component in `main.ts`:\n```typescript\nimport App from './App';\n\ndocument.body.appendChild(App());\n```\n\n### Counter with State\n\nCreate a new file `Counter.tsx` with the following content:\n```tsx\nimport ive from 'ive-fw/ive';\n\nconst counter = ive.createState(0);\n\nexport default ive.watch([counter], ([count]) =\u003e (\n    \u003cdiv\u003e\n        \u003ch1\u003eCounter\u003c/h1\u003e\n        \u003cp\u003e{count}\u003c/p\u003e\n        \u003cbutton on:click={() =\u003e counter.set(count + 1)}\u003eIncrement\u003c/button\u003e\n    \u003c/div\u003e\n));\n```\nThis component will be re-rendered every time the `counter` state changes.\n\nKeep in mind that events need to be prefixed with `on:` in ive in order to work.\n\n\n### Fetching Data (awaiting Promises)\n\nIve provides a convenience function `ive.wait` to await promises.\nThough it really is just a wrapper around `ive.watch`.\n\nCreate a new file `Posts.tsx` with the following content:\n```tsx\nimport ive from 'ive-fw/ive';\n\nexport default ive.wait(fetch('https://jsonplaceholder.typicode.com/posts').then((response) =\u003e response.json()), (posts) =\u003e (\n    \u003cdiv\u003e\n        \u003ch1\u003ePosts\u003c/h1\u003e\n        \u003cul\u003e\n            {posts.map((post: any) =\u003e (\n                \u003cli\u003e\n                    \u003ch2\u003e{post.title}\u003c/h2\u003e\n                    \u003cp\u003e{post.body}\u003c/p\u003e\n                \u003c/li\u003e\n            ))}\n        \u003c/ul\u003e\n    \u003c/div\u003e\n), () =\u003e ( // optional loading component\n    \u003cdiv\u003e\n        \u003ch1\u003eLoading...\u003c/h1\u003e\n    \u003c/div\u003e\n), (error) =\u003e ( // optional error component\n    \u003cdiv\u003e\n        \u003ch1\u003eError\u003c/h1\u003e\n        \u003cp\u003e{JSON.stringify(error)}\u003c/p\u003e\n    \u003c/div\u003e\n));\n```\n\n### Routing\n\nIve provides a convenience function `ive.router` to conditionally render components based on the current route.\nAgain, it really is just a wrapper around `ive.watch`.\n\nCreate a new file `Routing.tsx` with the following content:\n```tsx\nimport ive from 'ive-fw/ive';\n\nconst Home = () =\u003e (\n    \u003cdiv\u003e\n        \u003ch1\u003eHome\u003c/h1\u003e\n        \u003cp\u003eWelcome to the home page!\u003c/p\u003e\n        \u003cLink href=\"/about\"\u003eAbout\u003c/Link\u003e\n    \u003c/div\u003e\n);\n\nconst About = () =\u003e (\n    \u003cdiv\u003e\n        \u003ch1\u003eAbout\u003c/h1\u003e\n        \u003cp\u003eLearn more about us!\u003c/p\u003e\n    \u003c/div\u003e\n);\n\nconst Greet = ({ name }: { name: string }) =\u003e (\n    \u003cdiv\u003e\n        \u003ch1\u003eGreet\u003c/h1\u003e\n        \u003cp\u003eHello, {name}!\u003c/p\u003e\n    \u003c/div\u003e\n);\n\nexport default ive.router(\"/\", {\n    '/': \u003cHome /\u003e, // statically rendered\n    '/about': About, // lazily rendered\n    '/greet/{name}': Greet, // lazily rendered with parameters\n}, () =\u003e ( // optional fallback route\n    \u003cdiv\u003e\n        \u003ch1\u003e404\u003c/h1\u003e\n        \u003cp\u003ePage not found!\u003c/p\u003e\n    \u003c/div\u003e\n));\n```\n\nYou could also use dynamic imports to lazily load components:\n```tsx\nexport default ive.route({\n    '/greet/{name}': import('./Greet')\n});\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs15n%2Five","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fs15n%2Five","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs15n%2Five/lists"}