{"id":36540072,"url":"https://github.com/razen-core/rynex","last_synced_at":"2026-01-12T05:43:28.093Z","repository":{"id":319600509,"uuid":"1079098454","full_name":"razen-core/rynex","owner":"razen-core","description":"Cutting-edge TypeScript framework for fast, reactive web apps—no virtual DOM","archived":false,"fork":false,"pushed_at":"2025-10-27T06:21:29.000Z","size":4434,"stargazers_count":9,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-23T13:11:58.271Z","etag":null,"topics":["developer-tools","developertools","fast","framework","frontend","innovative","lightweight","minimalist","modern","next-gen","no-virtual-dom","open-source","productivity","productivity-web","reactive","scalable","typescript","ui","web-development"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/razen-core.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG-ROUTING.md","contributing":"CONTRIBUTING.md","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-19T04:59:56.000Z","updated_at":"2025-10-27T10:52:04.000Z","dependencies_parsed_at":"2025-10-21T08:26:24.226Z","dependency_job_id":null,"html_url":"https://github.com/razen-core/rynex","commit_stats":null,"previous_names":["razen-core/zenweb","razen-core/rynex"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/razen-core/rynex","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razen-core%2Frynex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razen-core%2Frynex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razen-core%2Frynex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razen-core%2Frynex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/razen-core","download_url":"https://codeload.github.com/razen-core/rynex/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razen-core%2Frynex/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28335226,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T00:36:25.062Z","status":"online","status_checked_at":"2026-01-12T02:00:08.677Z","response_time":98,"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":["developer-tools","developertools","fast","framework","frontend","innovative","lightweight","minimalist","modern","next-gen","no-virtual-dom","open-source","productivity","productivity-web","reactive","scalable","typescript","ui","web-development"],"created_at":"2026-01-12T05:43:27.405Z","updated_at":"2026-01-12T05:43:28.085Z","avatar_url":"https://github.com/razen-core.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Rynex Framework\n\n\u003e **ALPHA RELEASE** - New Builder API in development. See [ALPHA-RELEASE-NOTICE.md](./ALPHA-RELEASE-NOTICE.md) for details.\n\nA minimalist TypeScript framework for building reactive web applications with no Virtual DOM.\n\n## Features\n\n- **No Virtual DOM**: Direct DOM manipulation for maximum performance\n- **Reactive State**: Proxy-based reactivity with automatic UI updates\n- **File-Based Routing**: Next.js style routing with dynamic routes\n- **TypeScript First**: Full type safety out of the box\n- **Zero Configuration**: Sensible defaults, works immediately\n- **Production Ready**: Express server with native HTTP fallback\n- **Hot Module Replacement**: Instant feedback during development\n- **Automatic Cache-Busting**: Always serve fresh content to users on deployment\n- **Tiny Bundle**: Approximately 15KB gzipped\n\n## Quick Start\n\n```bash\n# Create new project\nnpx rynex init my-app\ncd my-app\n\n# Install dependencies\npnpm install\n\n# Start development server\npnpm dev\n```\n\nYour application will be running at `http://localhost:3000`\n\n## Example\n\n### Simple Counter Component\n\n```typescript\nimport { state } from 'rynex';\nimport * as UI from 'rynex';\n\nexport default function Counter() {\n  const counterState = state({ count: 0 });\n\n  return UI.vbox({\n    style: { padding: '2rem', gap: '1rem' }\n  }, [\n    UI.text({}, () =\u003e `Count: ${counterState.count}`),\n    UI.hbox({ style: { gap: '0.5rem' } }, [\n      UI.button({\n        onClick: () =\u003e counterState.count--\n      }, 'Decrement'),\n      UI.button({\n        onClick: () =\u003e counterState.count++\n      }, 'Increment')\n    ])\n  ]);\n}\n```\n\n## Core Concepts\n\n### Reactive State Management\n\n```typescript\nimport { state, computed, effect } from 'rynex';\n\n// Create reactive state\nconst appState = state({\n  count: 0,\n  name: 'John'\n});\n\n// Computed values\nconst doubled = computed(() =\u003e appState.count * 2);\n\n// Side effects\neffect(() =\u003e {\n  console.log('Count changed:', appState.count);\n});\n\n// Updates trigger automatic re-renders\nappState.count++;\n```\n\n### File-Based Routing\n\nOrganize pages by file structure:\n\n```\nsrc/pages/\n├── index.ts              # Route: /\n├── about.ts              # Route: /about\n├── blog/\n│   ├── page.ts           # Route: /blog\n│   └── [slug]/\n│       └── page.ts       # Route: /blog/:slug (dynamic)\n└── user/\n    └── [id]/\n        └── page.ts       # Route: /user/:id (dynamic)\n```\n\n### Dynamic Routes\n\n```typescript\nimport * as UI from 'rynex';\nimport { RouteContext } from 'rynex';\n\nexport default function UserPage(ctx: RouteContext) {\n  const userId = ctx.params.id;\n\n  return UI.vbox({\n    style: { padding: '2rem' }\n  }, [\n    UI.h1({}, `User Profile: ${userId}`),\n    UI.text({}, `Viewing profile for user ${userId}`),\n    UI.link({ href: '/' }, 'Go Home')\n  ]);\n}\n```\n\n## CLI Commands\n\n```bash\n# Create new project\nrynex init [project-name]\n\n# Start development server with HMR\nrynex dev\n\n# Build for production\nrynex build\n\n# Start production server\nrynex start\n\n# Add integrations (e.g., Tailwind CSS)\nrynex add tailwind\n\n# Clean build artifacts\nrynex clean\n```\n\n## Styling with Tailwind CSS\n\nRynex supports Tailwind CSS out of the box with a simple opt-in setup:\n\n```bash\n# Add Tailwind CSS to your project\nrynex add tailwind\n\n# Choose your package manager (npm/pnpm/yarn/bun)\n# The command will:\n# - Install tailwindcss, postcss, and autoprefixer\n# - Create tailwind.config.js\n# - Configure your CSS files\n# - Add necessary imports\n\n# Start development\npnpm dev\n```\n\n### Using Tailwind Classes\n\n```typescript\nimport * as UI from 'rynex';\n\nexport default function App() {\n  return UI.container({\n    class: 'flex items-center justify-center min-h-screen bg-gray-100'\n  }, [\n    UI.vbox({\n      class: 'bg-white p-8 rounded-lg shadow-lg max-w-md'\n    }, [\n      UI.text({\n        class: 'text-3xl font-bold text-gray-800 mb-4'\n      }, 'Hello Tailwind!'),\n      UI.button({\n        class: 'bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg transition-colors',\n        onClick: () =\u003e console.log('Clicked!')\n      }, 'Get Started')\n    ])\n  ]);\n}\n```\n\n**Features:**\n- ✅ Automatic class detection in `class: 'flex'` syntax\n- ✅ JIT mode for fast compilation\n- ✅ Hot reload in development\n- ✅ Auto-purging in production\n- ✅ Latest Tailwind CSS v4.x\n\n## Configuration\n\nCreate `rynex.config.js` in your project root:\n\n```javascript\nexport default {\n  entry: 'src/index.ts',\n  output: 'dist/bundle.js',\n  port: 3000,\n  minify: true,\n  sourceMaps: true,\n  hotReload: true,\n\n  // Routing configuration\n  routing: {\n    mode: 'history',\n    fileBasedRouting: true,\n    pagesDir: 'src/pages',\n    scrollBehavior: 'smooth'\n  },\n\n  // Build configuration\n  build: {\n    splitting: true,\n    chunkSize: 500,\n    publicPath: '/'\n  }\n};\n```\n\n## Project Structure\n\n```\nmy-app/\n├── src/\n│   ├── index.ts          # Entry point\n│   ├── App.ts            # Main component\n│   ├── components/       # Reusable components\n│   └── pages/            # Route pages\n├── public/\n│   ├── index.html        # HTML template\n│   └── styles.css        # Global styles\n├── dist/                 # Build output\n├── rynex.config.js      # Configuration\n├── package.json\n└── tsconfig.json\n```\n\n## Documentation\n\nComplete documentation is available in the `docs/` directory:\n\n- [Getting Started](./docs/GETTING_STARTED.md) - Installation and first steps\n- [Routing Guide](./docs/ROUTING_GUIDE.md) - File-based routing and navigation\n- [Configuration](./docs/CONFIGURATION.md) - Project configuration options\n- [Cache-Busting](./docs/CACHE-BUSTING.md) - Automatic cache invalidation for deployments\n- [Examples](./docs/EXAMPLES.md) - Real-world code examples\n\n## Key Features\n\n### UI Helper Functions\n\n- **Layout**: `vbox`, `hbox`, `grid`, `container`, `center`, `stack`\n- **Elements**: `text`, `button`, `input`, `link`, `image`, `div`, `span`\n- **Typography**: `h1-h6`, `p`, `strong`, `em`, `code`, `pre`\n- **Forms**: `form`, `textarea`, `select`, `checkbox`, `radio`\n- **Components**: `card`, `badge`, `avatar`, `modal`, `dropdown`, `tooltip`\n- **Utilities**: `show`, `each`, `when`, `fragment`, `portal`\n\n### Router Features\n\n- File-based routing (Next.js style)\n- Dynamic routes with parameters\n- Catch-all routes\n- Route middleware and guards\n- Lazy loading with code splitting\n- Navigation hooks\n- Router components (Link, NavLink, Breadcrumb)\n\n### State Management\n\n- Proxy-based reactivity\n- Computed values\n- Side effects\n- Batch updates\n- Automatic dependency tracking\n\n## Design Philosophy\n\n1. **Simplicity First**: No complex build configurations\n2. **Direct DOM**: No Virtual DOM overhead\n3. **Reactive by Default**: State changes automatically update UI\n4. **TypeScript Native**: Built with TypeScript for TypeScript\n5. **Performance**: Minimal runtime with efficient updates\n6. **Developer Experience**: Hot reload, source maps, clear errors\n\n## Performance\n\n- No Virtual DOM diffing overhead\n- Direct DOM updates\n- Lazy loading support\n- Code splitting\n- Tree shaking\n- Minification\n- Compression (with Express)\n\n## Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nApache License 2.0 - see [LICENSE](./LICENSE) file for details\n\n## Links\n\n- [GitHub Repository](https://github.com/razen-core/rynex)\n- [Documentation](./docs/)\n- [Examples](./examples/)\n- [Issue Tracker](https://github.com/razen-core/rynex/issues)\n\n---\n\nBuilt with care by the Razen Core\n- Developer: Prathmesh Barot\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frazen-core%2Frynex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frazen-core%2Frynex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frazen-core%2Frynex/lists"}