Developing Introduction
Start here to choose the right Diwa integration path for your stack. Every guide follows the same flow: install, initialize, render, handle events, then validate readiness and accessibility.
Support Matrix
| Framework | Packages | Status | Guide |
|---|---|---|---|
| Vanilla JS | @diwacopilot/components | Supported | Open |
| Next.js | @diwacopilot/components | Supported | Open |
| React | @diwacopilot/components + @diwacopilot/components-react | Supported | Open |
| Angular | @diwacopilot/components + @diwacopilot/components-angular | Supported | Open |
| Vue | @diwacopilot/components + @diwacopilot/components-vue | Supported | Open |
| Astro | Planned | Phase 2 | Open |
| React Router | Planned | Phase 2 | Open |
| Remix | Planned | Deferred | Open |
Prerequisites
- - Node.js 20+ and npm/pnpm/yarn.
- - A modern bundler/framework build pipeline.
- - Global token stylesheet loaded once in your app shell.
- - Keyboard and accessibility checks included in your definition of done.
Choose Your Framework Guide
Install and Initialize Decision Tree
Use this quick rule set when deciding between direct custom elements and framework wrappers.
if (framework === 'vanilla' || framework === 'next-custom-elements') {
install('@diwacopilot/components');
registerWithLoader();
} else if (framework === 'react') {
install('@diwacopilot/components @diwacopilot/components-react');
useReactWrappers();
} else if (framework === 'angular') {
install('@diwacopilot/components @diwacopilot/components-angular');
useAngularProxies();
} else if (framework === 'vue') {
install('@diwacopilot/components @diwacopilot/components-vue');
useVueWrappers();
}