{"id":13516413,"url":"https://github.com/codaxy/cxjs","last_synced_at":"2025-05-14T13:07:04.470Z","repository":{"id":37866915,"uuid":"68187142","full_name":"codaxy/cxjs","owner":"codaxy","description":"CxJS - Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.","archived":false,"fork":false,"pushed_at":"2025-05-03T18:36:21.000Z","size":15327,"stargazers_count":491,"open_issues_count":49,"forks_count":68,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-05-08T01:20:00.521Z","etag":null,"topics":["charts","drag-and-drop","form-controls","form-validation","grid-component","react","themes","ui","widgets"],"latest_commit_sha":null,"homepage":"https://cxjs.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codaxy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","contributing":null,"funding":null,"license":"LICENSE-THIRD-PARTY.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-09-14T08:13:08.000Z","updated_at":"2025-05-03T18:36:25.000Z","dependencies_parsed_at":"2024-03-25T09:43:27.141Z","dependency_job_id":"930880a7-71d5-434d-8876-4a4985ebd88f","html_url":"https://github.com/codaxy/cxjs","commit_stats":{"total_commits":2754,"total_committers":41,"mean_commits":67.17073170731707,"dds":0.3874364560639071,"last_synced_commit":"3be467e6be582f7ac7aa121075bf55528ced049e"},"previous_names":["codaxy/cx"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codaxy%2Fcxjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codaxy%2Fcxjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codaxy%2Fcxjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codaxy%2Fcxjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codaxy","download_url":"https://codeload.github.com/codaxy/cxjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253839229,"owners_count":21972299,"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":["charts","drag-and-drop","form-controls","form-validation","grid-component","react","themes","ui","widgets"],"created_at":"2024-08-01T05:01:22.102Z","updated_at":"2025-05-14T13:06:59.453Z","avatar_url":"https://github.com/codaxy.png","language":"JavaScript","readme":"\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://cxjs.io\"\u003e\n    \u003cimg src=\"misc/logo/cx.svg\" alt=\"cxjs logo\" height=\"140\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/cx\" alt=\"version\" /\u003e \n    \u003cimg src=\"https://img.shields.io/npm/dm/cx\" alt=\"downloads\" /\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\nCxJS, or simply Cx, is a feature-rich JavaScript framework for building complex web front-ends, such as BI tools,\ndashboards and admin apps.\n\n## Learn CxJS\n\nExplore CxJS by checking out available online resources:\n\n-  [Documentation](https://cxjs.io/docs)\n-  [Gallery of Widgets \u0026 Themes ](https://cxjs.io/gallery)\n-  [Fiddle](https://cxjs.io/fiddle)\n-  [Demo Apps](https://cxjs.io/demos)\n-  [Examples](https://cxjs.io/examples)\n\nIf you need help, ask a question on [StackOverflow](https://stackoverflow.com/questions/tagged/cxjs).\nIf you find a bug, please [raise an issue](https://github.com/codaxy/cxjs/issues).\n[Request an invite to our Slack channel](https://cxjs.io/support)\nand become a member of the CxJS community.\n\n## Starting a new project\n\nCxJS is available as an NPM package - `cx`, which includes\ncompiled code, source code and TypeScript definitions.\n\nBesides the `cx` package, you'll need other packages such as `cx-react` (or `cx-preact`) and `babel-preset-cx-env`.\n\nYou'll also need to configure Babel and webpack.\n\nThe quickest way to setup everything up is to use CLI:\n\n```bash\nnpm install cx-cli --global\ncx create my-app\ncd my-app\nnpm start\n```\n\nOr if you prefer Yarn:\n\n```bash\nyarn create cx-app my-app\ncd my-app\nyarn start\n```\n\nAlternatively, you can download the files from one of the project templates:\n\n-  https://github.com/codaxy/cxjs-tailwindcss-template\n-  https://github.com/codaxy/cx-starter-kit\n-  https://codesandbox.io/s/github/codaxy/cxjs-codesandbox-template\n\n### Themes\n\nOnce you create a new project, you may want to try our ready-to-use visual themes:\n\n-  [cx-theme-material](https://www.npmjs.com/package/cx-theme-material) ([Demo](https://cxjs.io/gallery/material))\n-  [cx-theme-frost](https://www.npmjs.com/package/cx-theme-frost) ([Demo](https://cxjs.io/gallery/frost))\n-  [cx-theme-dark](https://www.npmjs.com/package/cx-theme-dark) ([Demo](https://cxjs.io/gallery/dark))\n\nInstall the theme using `npm` or `yarn`.\n\n```bash\nnpm install cx-theme-frost\n```\n\nOpen `my-app/app/index.scss` and replace\n\n```\n@import \"~cx/src/variables\";\n@import \"~cx/src/index\";\n```\n\nwith\n\n```\n@import \"~theme-package-name/src/variables\";\n@import \"~theme-package-name/src/index\";\n```\n\nPlease read theme NPM package documentation to learn how to enable theme specific features.\n\n## Features\n\nCxJS uses React for DOM manipulation and offers many high-level features on top of it.\n\n### Widgets\n\n-  form elements ([DateTimeField](https://cxjs.io/docs/widgets/date-time-fields), [LookupField](https://cxjs.io/docs/widgets/lookup-fields), [ColorField](https://cxjs.io/docs/widgets/color-fields))\n-  advanced [Grid (data table)](https://cxjs.io/gallery/material/grid) control\n-  navigation elements ([Menu](https://cxjs.io/gallery/material/menu/states), [Tab](https://cxjs.io/docs/widgets/tabs), [Link](https://cxjs.io/docs/widgets/links))\n-  overlays ([Window](https://cxjs.io/docs/widgets/windows), [MsgBox](https://cxjs.io/docs/widgets/msg-boxes), [Tooltip](https://cxjs.io/docs/widgets/tooltips), [Toast](https://cxjs.io/docs/widgets/toasts))\n\n### Charts\n\n-  various chart types ([PieChart](https://cxjs.io/docs/charts/pie-charts), [LineGraph](https://cxjs.io/docs/charts/line-graphs), [ColumnGraph](https://cxjs.io/docs/charts/column-graphs), [BarGraph](https://cxjs.io/docs/charts/bar-graphs))\n-  axis types ([CategoryAxis](https://cxjs.io/docs/charts/category-axis), [NumericAxis](https://cxjs.io/docs/charts/numeric-axis), [TimeAxis](https://cxjs.io/docs/charts/time-axis))\n-  help elements ([Legend](https://cxjs.io/docs/charts/legend), [Marker](https://cxjs.io/docs/charts/markers), [Range](https://cxjs.io/docs/charts/ranges))\n\n### UI Concepts\n\n-  [form validation](https://cxjs.io/docs/widgets/validation-groups)\n-  [culture sensitive formatting and localization](https://cxjs.io/docs/concepts/localization)\n-  [client-side routing](https://cxjs.io/docs/concepts/router)\n-  [selection models](https://cxjs.io/docs/concepts/selections)\n\n### State Management\n\n-  [two-way data-binding](https://cxjs.io/docs/concepts/data-binding)\n-  [controllers](https://cxjs.io/docs/concepts/controllers)\n-  [computed values](https://cxjs.io/docs/concepts/controllers#computed-values)\n-  [triggers](https://cxjs.io/docs/concepts/controllers#triggers)\n-  [repeater](https://cxjs.io/docs/concepts/repeater)\n-  [rescope](https://cxjs.io/docs/concepts/rescope)\n-  [sandbox](https://cxjs.io/docs/concepts/sandbox)\n-  [data proxy](https://cxjs.io/docs/concepts/data-proxy)\n\n### Layout\n\n-  [inner (form) layouts](https://cxjs.io/docs/concepts/inner-layouts)\n-  [outer (page) layouts](https://cxjs.io/docs/concepts/outer-layouts)\n\n### Theming\n\n-  [SCSS variables and mixins](https://cxjs.io/docs/concepts/css)\n-  ready to use themes ([Material](https://cxjs.io/gallery/material), [Frost](https://cxjs.io/gallery/frost), [Dark](https://cxjs.io/gallery/dark))\n\n## Development\n\nThis is a monolith repository used to develop main npm packages, documentation, widget gallery and fiddle. It uses yarn workspaces, so please use `yarn` to install packages and run the applications.\n\n```bash\nyarn install\n```\n\nBuild CxJS:\n\n```bash\nyarn build\n```\n\nRun tests:\n\n```bash\nyarn test\n```\n\nRun Docs:\n\n```bash\nyarn start\n```\n\nRun Gallery:\n\n```bash\nyarn gallery\n```\n\nRun Fiddle:\n\n```bash\nyarn fiddle\n```\n\n## License\n\nCxJS is available under [the MIT License](./LICENSE.md).\n","funding_links":[],"categories":["JavaScript","TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodaxy%2Fcxjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodaxy%2Fcxjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodaxy%2Fcxjs/lists"}