{"id":19278968,"url":"https://github.com/bicyclesystems/rnbw","last_synced_at":"2025-07-22T03:37:15.242Z","repository":{"id":190254556,"uuid":"561112208","full_name":"bicyclesystems/rnbw","owner":"bicyclesystems","description":"design, code","archived":false,"fork":false,"pushed_at":"2025-03-24T12:11:20.000Z","size":9334,"stargazers_count":62,"open_issues_count":29,"forks_count":15,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-22T00:38:01.636Z","etag":null,"topics":["ai","code","design","ui"],"latest_commit_sha":null,"homepage":"https://rnbw.design","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/bicyclesystems.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2022-11-03T01:11:40.000Z","updated_at":"2025-04-07T13:56:37.000Z","dependencies_parsed_at":"2024-03-10T09:33:55.139Z","dependency_job_id":"0b05d322-a54a-44e9-b9f4-ec362fb78b85","html_url":"https://github.com/bicyclesystems/rnbw","commit_stats":null,"previous_names":["rnbwdev/rnbw","weareunderdesign/rnbw","bicyclesystems/rnbw"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bicyclesystems/rnbw","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bicyclesystems%2Frnbw","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bicyclesystems%2Frnbw/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bicyclesystems%2Frnbw/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bicyclesystems%2Frnbw/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bicyclesystems","download_url":"https://codeload.github.com/bicyclesystems/rnbw/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bicyclesystems%2Frnbw/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266420960,"owners_count":23926023,"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","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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":["ai","code","design","ui"],"created_at":"2024-11-09T21:12:49.264Z","updated_at":"2025-07-22T03:37:15.219Z","avatar_url":"https://github.com/bicyclesystems.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rnbw 0.1\n\nwelcome to rnbw!\n\n## get started\n\nto learn rnbw, go to https://rnbw.design/guide.\n\n## run it locally:\n\n1. npm install\n2. npm start\n3. visit `http://localhost:8080/`\n\n## architecture\n\nrainbow has three core parts:\n\n1. action panel (left panel - react-complex-tree)\n   1. files tree view\n   2. nodes tree view\n      1. settings panel\n2. stage (live preview and design editor)\n3. code (code editor - monaco-editor)\n\neach time you change any part, the other parts change as well. this means there’s a unique id for each node so that we can detect which node has been changed and update its states globally.\n\neach object with events is called a “node” - so when the nodes change, the global state also changes.\n\n## codebase\n\n`/config` - we will use it for some project config settings. such as “toast-duration”.\n\n`/_node` - all of the node apis including parse,serialize file would be there.\n\n`/_redux` - redux code goes into this folder. each reducer has its sub-folder.\n\n`/app` - the code related to the root app component goes here.\n\n`/components` - all of the react fc goes here.\n\n`/pages` - the in-project pages we are gonna build. they will work inside the browser- router\n\n`/services` - functions or constants useful for coding.\n\n`/types` - the global interfaces or types we use in the app.\n\nfor each react-redux-reducer, we must keep the following structure.\n\n```\n/template\n\tindex.ts - import/export everything in index.ts. use path alias to import.\n\tselectors.ts\n\tslice.ts\n\ttypes.ts - an interface or type for each code part or fc.\n```\n\n## dependencies\n\nrainbow is heavily dependent on incredible technologies. if you’re considering contributing code, study the below packages and libraries and get ready to fully customize them .\n\n- [react](https://github.com/facebook/react) - 💁‍♂️\n- [@monaco-editor/react](https://github.com/suren-atoyan/monaco-react) - the code editor.\n- [react-complex-tree](https://github.com/lukasbach/react-complex-tree) - an non-opinionated accessible tree component.\n- [⌘k](https://github.com/pacocoursey/cmdk) is a command menu react component.\n- [redux](https://github.com/reduxjs/redux)\n      - @reduxjs/toolkit\n      - redux-injectors\n      - [redux-undo](https://github.com/omnidan/redux-undo)\n- [parse5](https://github.com/inikulin/parse5)\n- [file-system-access](https://www.npmjs.com/package/file-system-access) - file system apis\n- [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels) - for creating resizable panels\n- [react-top-loading-bar](https://github.com/klendi/react-top-loading-bar) - for showing a loading bar at the top\n- [workbox-window](https://developer.chrome.com/docs/workbox/) - service worker library for giving pwa features\n- [idb-keyval](https://www.npmjs.com/package/idb-keyval) - promise-based keyval store implemented with indexeddb\n- [prettier](https://www.npmjs.com/package/prettier) - for prettifying the code\n- [jszip](https://stuk.github.io/jszip/) - for zipping the project files before downloading\n- [morphdom](https://github.com/patrick-steele-idem/morphdom) - dom-diffing lib to update stage without reloading\n- [buffer](https://www.npmjs.com/package/buffer) - it’s a polyfill. the buffer module from node.js, for the browser.\n\n### dependencies by rainbow\n\n- [references](https://github.com/rnbwdev/references) - an open collection of web references.\n  - inventory - rainbow is using it as the source of information for rainbow node types.\n  - validation - the validation mechanism is heavily based on the segmentation of nodes.\n- [rene.css](https://github.com/rnbwdev/rene.css) a utility-first css framework for styling clean, simple, and lightweight interfaces, fully customizable with variables, themes, and icons. easy syntax to quickly “get it” and create any design in any framework.\n- [svg-icon.js](https://github.com/rnbwdev/svg-icon.js) - an svg icon component for the web. optimized for smooth design and development experience. it fits into any web framework and can be used anyhow.\n- [raincons](https://github.com/rnbwdev/raincons) - 12x12 icon set.\n\n## community\n\njoin the [community](https://github.com/orgs/rnbwdev/discussions) to chat with other community members, ask questions ideas, and share your work.\n\n## license\n\n[GNU General Public License, version 3](https://www.gnu.org/licenses/gpl-3.0.en.html)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbicyclesystems%2Frnbw","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbicyclesystems%2Frnbw","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbicyclesystems%2Frnbw/lists"}