{"id":14981606,"url":"https://github.com/underhive/visual-react-editor","last_synced_at":"2025-10-29T07:32:29.848Z","repository":{"id":215530966,"uuid":"715375361","full_name":"Underhive/visual-react-editor","owner":"Underhive","description":"Edit react apps like you edit figma designs.","archived":false,"fork":false,"pushed_at":"2024-04-01T22:11:10.000Z","size":71942,"stargazers_count":64,"open_issues_count":6,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-01T23:35:07.368Z","etag":null,"topics":["design","editor","figma","nodejs","react","toolbox","typescript","web"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/underhive","language":"JavaScript","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/Underhive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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":"2023-11-07T02:31:08.000Z","updated_at":"2025-01-22T16:59:49.000Z","dependencies_parsed_at":"2024-06-12T17:30:14.402Z","dependency_job_id":"fe09c17b-9742-4962-8e50-714ccdeb3ec8","html_url":"https://github.com/Underhive/visual-react-editor","commit_stats":{"total_commits":1228,"total_committers":39,"mean_commits":"31.487179487179485","dds":0.2711726384364821,"last_synced_commit":"eb2b3a457d1be1461900006957fc8ff206a6e0c2"},"previous_names":["underhive/web-editor","underhive/visual-react-editor"],"tags_count":71,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Underhive%2Fvisual-react-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Underhive%2Fvisual-react-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Underhive%2Fvisual-react-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Underhive%2Fvisual-react-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Underhive","download_url":"https://codeload.github.com/Underhive/visual-react-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238791892,"owners_count":19531027,"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":["design","editor","figma","nodejs","react","toolbox","typescript","web"],"created_at":"2024-09-24T14:03:55.683Z","updated_at":"2025-10-29T07:32:24.469Z","avatar_url":"https://github.com/Underhive.png","language":"JavaScript","readme":"# Underhive\n\n![underhive-web-editor](https://i.imgur.com/HlmOoK4.png)\n\n## Introduction\n\nUnderhive ushers in a new way of web development, where React applications can be edited visually, akin to working within Figma or similar design tools. Our tool allows designers and developers to directly manipulate their application's UI elements in a visual editor, merging the convenience of design software with the robust framework of React.\n\n## Features\n\n- Visual editing in a Figma-like environment within your React app.\n- A CLI tool to serve a proxy server for live code updates.\n- Designed for use in a development environment to ensure safety.\n\n## Installation\n\nTo install Underhive, run the following command in your project directory:\n\n```bash\nnpm install underhive\n```\n\n## Setup\n\nImport Underhive in your main React file:\n\n```javascript\nimport { attachEditor, detachEditor } from 'underhive';\n```\n\nUse `attachEditor` to enable the visual editing environment:\n\n```javascript\nif (process.env.NODE_ENV === 'development') {\n  attachEditor();\n}\n```\n\nInvoke `detachEditor` to disable the visual editor:\n\n```javascript\ndetachEditor();\n```\n\nMake sure these functions are used within a development environment check.\n\n## Usage\n\nInitialize Underhive in your project with:\n\n```bash\nnpx ucli init\n```\n\nThis will set up Underhive and modify your `package.json` to include the Underhive server command using `concurrently`. This ensures that your existing start script and the Underhive server will run simultaneously.\n\nTo start your project with Underhive, use:\n\n```bash\nnpm start\n```\n\n## Tribute\nThis project wouldn't be possible without the original efforts of the creators of [ProjectVisBug](https://github.com/GoogleChromeLabs/ProjectVisBug).\n\n## Star History\n\n[![Star History Chart](https://api.star-history.com/svg?repos=Underhive/visual-react-editor\u0026type=Date)](https://star-history.com/#Underhive/visual-react-editor\u0026Date)\n \n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funderhive%2Fvisual-react-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funderhive%2Fvisual-react-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funderhive%2Fvisual-react-editor/lists"}