{"id":41074400,"url":"https://github.com/pschiffmann/initiative","last_synced_at":"2026-01-22T13:15:22.141Z","repository":{"id":157134302,"uuid":"619288150","full_name":"pschiffmann/initiative","owner":"pschiffmann","description":null,"archived":false,"fork":false,"pushed_at":"2024-03-17T11:09:32.000Z","size":1058,"stargazers_count":0,"open_issues_count":13,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-11-16T03:22:05.334Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pschiffmann.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2023-03-26T19:57:29.000Z","updated_at":"2023-08-16T20:47:54.000Z","dependencies_parsed_at":"2024-01-20T14:29:03.051Z","dependency_job_id":"df9aa39e-80f9-4db3-8ce2-7f13fbf7a646","html_url":"https://github.com/pschiffmann/initiative","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pschiffmann/initiative","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pschiffmann%2Finitiative","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pschiffmann%2Finitiative/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pschiffmann%2Finitiative/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pschiffmann%2Finitiative/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pschiffmann","download_url":"https://codeload.github.com/pschiffmann/initiative/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pschiffmann%2Finitiative/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28663778,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-22T01:17:37.254Z","status":"online","status_checked_at":"2026-01-22T02:00:07.137Z","response_time":144,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2026-01-22T13:15:21.086Z","updated_at":"2026-01-22T13:15:22.135Z","avatar_url":"https://github.com/pschiffmann.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# InitiativeJS\n\nA React framework for professional developers to build your business logic in isolation, then compose your app UI with zero boilerplate code.\n\n**[Get started](./doc/01-installation.md)** | **[API docs](./doc/api-reference.md)**\n\n### Case study\n\nLet's look at an example component from an online shop app.\nThis component renders a single item from the users shopping cart, and lets them remove the item if they no longer want to purchase it.\n\nHere is how that component might be implemented traditionally:\n\n\u003ctable\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```ts\nfunction ShoppingCartItem({ item }) {\n  const { id, name, quantity, totalPrice } = item;\n\n  const deleteItemMutation = useDeleteItemMutation();\n  const deleteItem = useCallback(\n    () =\u003e deleteItemMutation(id),\n    [(id, deleteItemMutation)],\n  );\n\n  const { t } = useTranslation();\n\n  const [dialogOpen, setDialogOpen] = useState(false);\n  const openDialog = useCallback(() =\u003e setDialogOpen(true), []);\n  const closeDialog = useCallback(() =\u003e setDialogOpen(false), []);\n\n  return (\n    \u003ctr\u003e\n      \u003ctd\u003e{name}\u003c/td\u003e\n      \u003ctd\u003e{t(\"shopping-cart.item.quantity\", { quantity })}\u003c/td\u003e\n      \u003ctd\u003e{t(\"shopping-cart.item.total-price\", { totalPrice })}\u003c/td\u003e\n      \u003ctd\u003e\n        \u003cIconButton\n          aria-label={t(\"shopping-cart.item.delete-button\")}\n          onClick={openDialog}\n        \u003e\n          \u003cDeleteIcon /\u003e\n        \u003c/IconButton\u003e\n        \u003cDialog open={dialogOpen} onClose={closeDialog}\u003e\n          \u003cTypography variant=\"h6\"\u003e\n            {t(\"shopping-cart.delete-item-dialog.title\")}\n          \u003c/Typography\u003e\n          \u003cTypography variant=\"body1\"\u003e\n            {t(\"shopping-cart.delete-item-dialog.description\")}\n          \u003c/Typography\u003e\n          \u003cFlex flexDirection=\"row\" justifyContent=\"end\"\u003e\n            \u003cButton onClick={closeDialog}\u003e\n              {t(\"shopping-cart.delete-item-dialog.cancel-button\")}\n            \u003c/Button\u003e\n            \u003cButton\n              variant=\"filled\"\n              color=\"danger\"\n              startIcon={\u003cDeleteIcon /\u003e}\n              onClick={deleteItem}\n            \u003e\n              {t(\"shopping-cart.delete-item-dialog.confirm-button\")}\n            \u003c/Button\u003e\n          \u003c/Flex\u003e\n        \u003c/Dialog\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  );\n}\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```\n.\n.\n.\n⎫\n⎪\n⎬ 🛠️ business logic\n⎪\n⎭\n.\n} 🎨 style props\n.\n⎫\n⎬ 🧵 ui state\n⎭\n.\n.\n⎫\n⎪\n⎬ 🏗️ composition \u0026\n⎪ 🎨 style props\n⎪\n⎪\n⎭\n} 🧵 ui state\n⎫\n⎬ 🏗️ composition\n⎭\n} 🧵 ui state\n⎫\n⎪\n⎬ 🏗️ composition \u0026\n⎪ 🎨 style props\n⎪\n⎪\n⎭\n} 🧵 ui state\n⎫\n⎪\n⎬ 🏗️ composition \u0026\n⎪ 🎨 style props\n⎪\n⎭\n} 🛠️ business logic\n⎫\n⎪\n⎬ 🏗️ composition \u0026\n⎪ 🎨 style props\n⎪\n⎪\n⎭\n.\n.\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\nFor comparison, here is the same component implemented with InitiativeJS:\n\n```ts\nfunction ShoppingCartItemBloc({ item, slots, OutputsProvider }) {\n  const { id, name, quantity, totalPrice } = item;\n\n  const deleteItemMutation = useDeleteItemMutation();\n  const deleteItem = useCallback(\n    () =\u003e deleteItemMutation(id),\n    [(id, deleteItemMutation)],\n  );\n\n  return (\n    \u003cOutputsProvider deleteItem={deleteItem}\u003e\n      \u003cslots.Child /\u003e\n    \u003c/OutputsProvider\u003e\n  );\n}\n```\n\n_Wait, what happened to the JSX?_\n\nThe code you want to focus on during development, debugging and review is the business logic.\nBut often times, component composition code and style props make up the overwhelming part of your component files, creating noise and distracting from the relevant lines of code.\n\nInitiativeJS is built around a key observation: Unlike business logic code, component composition code is very standardized – so much so that it can easily be auto-generated.\nAll you need is a way to describe your UI structure to the code generator.\n\nAnd that's where the InitiativeJS editor comes into play.\nThe editor is a core part of the framework that let's you compose and style your existing React components into pages and views.\n\n\u003cdiv style=\"height: 500px; background-color: #eee; display: grid; place-items: center\"\u003eimage placeholder\u003c/div\u003e\n\nThe editor generates standard React code – here's an [example output](./packages/@pschiffmann/InitiativeJS-demo/InitiativeJS/scenes/article-management/scene.tsx).\nThe generated file exports a React component that you can import and render anywhere in your app.\nThe component has the exact same behaviour as hand-written code, but you save yourself the tedious typing work, and keep your business logic free from UI clutter.\n\n### InitiativeJS at a glance\n\nInitiativeJS is ...\n\n- An API layer for building isolated components.\n  Declare schemas for your components that describe the component inputs and outputs – i.e. what data must be passed into your component through props, and what data your component exposes to its subtree (through an `\u003cOutputsProvider /\u003e`).\n- A no-code editor to compose components.\n  Compose your components into pages, views, or even new reusable components.\n  Configure all style props inside the editor to keep your hand-written files clutter free: colors, font styles, margins and positions, labels, and translations.\n- Fully type safe.\n  Inside the schemas you define types for your inputs and outputs, and the editor will ensure that you only assign compatible values to a component input.\n  The schema doubles as a component props interface, so schema and component will always be in sync.\n- Compatible with the tools you know and love.\n  Use any React package, any build tool, SSR.\n- Incrementally adoptable.\n  You can migrate existing apps one page, view or component at a time.\n- Built for professional development workflows.\n  Scenes are saved as tsx files and stored in your git repository.\n  The generated code uses the schema types as well, so TypeScript will detect breaking changes in your generated scenes after you edit a schema or update an npm package.\n\nCheck out the **[tutorial](./doc/01-installation.md)** to learn how InitiativeJS works in detail.\n\n## Pricing and license terms\n\nRefer to the [license](./LICENSE) for full details, but here is a quick summary.\n\n### For app developers\n\nInitiativeJS is free to use for for personal use and open source projects.\nYou may also install and try out InitiativeJS for evaluation purposes.\n\nIf you use InitiativeJS in a commercial product, each developer on your team that uses the InitiativeJS Editor must [purchase a license](TODO).\nLicenses come with 12 months of updates from the date of purchase.\nYou may continue to use all versions of InitiativeJS that were released during that time period, but upgrading to later InitiativeJS versions requires a new license.\n\nBoth community and commercial license allow you to ship generated scene code to production.\nHowever, you're not permitted to ship code to production that was imported from `@initiativejs/schema` – like `NodeSchema` and `t.Type`.\nRefer to the [docs](./docs/01-installation.md) to learn how you can configure your bundler to exclude these files from production builds.\n\n### For npm package authors\n\nBuilding reusable InitiativeJS nodes, types and libraries and publishing them as npm packages is free.\nYou can publish your package under any license you like, be it open source or for-profit.\n\nWhen bundling your package code before publishing, make sure that your bundle doesn't include code from `@initiativejs/schema` – like `NodeSchema` or `t.Type`.\nInstead, your code may only include import statements to the `@initiativejs/schema` package.\nRefer to the [docs](./docs/01-installation.md) to learn how you can configure your bundler to exclude these files from production builds.\n\n## Contributing\n\nThe best way you can contribute to the project right now is by sharing your feedback with us.\nPlease tell us about anything you're unhappy with – everything from minor inconveniences to full showstoppers.\nBrowse our [Github issue tracker](https://github.com/pschiffmann/InitiativeJS.ts/issues) and upvote issues (by responding with 👍), comment your own requirements and ideas, or open a new issue.\n\nIf you want to contribute code or documentation, that awesome!\nBut before you start working on a PR, please talk to us first.\nFor local development and debugging, follow the setup instructions [here](https://github.com/pschiffmann/InitiativeJS.ts/blob/main/doc/local-development.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpschiffmann%2Finitiative","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpschiffmann%2Finitiative","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpschiffmann%2Finitiative/lists"}