{"id":13901391,"url":"https://github.com/ascoders/gaea-editor","last_synced_at":"2025-05-16T05:03:40.671Z","repository":{"id":37733121,"uuid":"68707338","full_name":"ascoders/gaea-editor","owner":"ascoders","description":"Design websites in your browser. A smart web editor!","archived":false,"fork":false,"pushed_at":"2022-05-22T01:50:45.000Z","size":3290,"stargazers_count":1345,"open_issues_count":16,"forks_count":221,"subscribers_count":41,"default_branch":"master","last_synced_at":"2025-04-08T14:13:11.292Z","etag":null,"topics":["editor","web-design","web-editor"],"latest_commit_sha":null,"homepage":"https://gaeajs.github.io/gaea-site/","language":"TypeScript","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/ascoders.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}},"created_at":"2016-09-20T11:57:51.000Z","updated_at":"2025-03-08T06:34:28.000Z","dependencies_parsed_at":"2022-07-13T03:50:33.633Z","dependency_job_id":null,"html_url":"https://github.com/ascoders/gaea-editor","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ascoders%2Fgaea-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ascoders%2Fgaea-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ascoders%2Fgaea-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ascoders%2Fgaea-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ascoders","download_url":"https://codeload.github.com/ascoders/gaea-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254471040,"owners_count":22076583,"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":["editor","web-design","web-editor"],"created_at":"2024-08-06T21:01:19.379Z","updated_at":"2025-05-16T05:03:40.622Z","avatar_url":"https://github.com/ascoders.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","![Open Source Love svg3](https://badges.frapsoft.com/os/v3/open-source.svg?v=103)","Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# Gaea Editor \u0026middot; [![CircleCI Status](https://img.shields.io/travis/ascoders/gaea-editor/master.svg?style=flat)](https://travis-ci.org/ascoders/gaea-editor) [![npm version](https://img.shields.io/npm/v/gaea-editor.svg?style=flat)](https://www.npmjs.com/package/ascoders/gaea-editor) [![code coverage](https://img.shields.io/codecov/c/github/ascoders/gaea-editor/master.svg)](https://codecov.io/github/ascoders/gaea-editor/ascoders/gaea-editor) [![Total alerts](https://img.shields.io/lgtm/alerts/g/ascoders/gaea-editor.svg?logo=lgtm\u0026logoWidth=18)](https://lgtm.com/projects/g/ascoders/gaea-editor/alerts/) [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/ascoders/gaea-editor.svg?logo=lgtm\u0026logoWidth=18)](https://lgtm.com/projects/g/ascoders/gaea-editor/context:javascript)\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"./docs/images/home-snapshot.png\" height=600/\u003e\n    \u003ch3 align=\"center\"\u003egaea-editor\u003c/h3\u003e\n    \u003cp align=\"center\"\u003e\n        \u003ci\u003e\n            Help develops build a scalable website visualization builder.\n        \u003c/i\u003e\n    \u003cp\u003e\n    \u003cp align=\"center\"\u003e\n        \u003ci\u003e\n            \u003ca target=\"_blank\" href=\"https://gaeajs.github.io/gaea-site/\"\u003eTry it online.\u003c/a\u003e\n        \u003c/i\u003e\n    \u003c/p\u003e\n\u003c/p\u003e\n\n## Requirement\n\n- Node \u003e 8.0\n- Typescript 3.0\n\n## Quick start\n\n```bash\nnpm i gaea-editor --save\n```\n\nAnd then, it's easy to use:\n\n```typescript\nimport Editor from 'gaea-editor';\n\nReactDOM.render(\n  \u003cdiv style={{ width: '100vw', height: '100vh' }}\u003e\n    \u003cEditor /\u003e\n  \u003c/div\u003e,\n  document.getElementById('react-root')\n);\n```\n\n- For vue - [gaea-editor-vue](https://github.com/CharlieLau/gaea-editor-vue), thanks [CharlieLau](https://github.com/CharlieLau).\n\n## Add custom component to the drag menu\n\nYou can add any react components to the drag menu, through the following line of code:\n\n```typescript\nimport BasicComponents from 'gaea-basic-components';\n\u003cEditor componentClasses={[...BasicComponents, CustomComponent1, CustomComponent2]} /\u003e;\n```\n\n\u003e `BasicComponents` support `container`, `button`, `icon`, `select`, `switch`. And there must be at least one component to set `isContainer=true` that can be used as outer container.\n\u003e\n\u003e Generally speaking, with `BasicComponents` concat is ok, because the component `container` `BasicComponents` offered is a container.\n\nAdd `editSetting` to each component props, to let the editor know how to edit it visualizations:\n\n```typescript\ndefaultProps = {\n  editSetting: {\n    key: 'my-custom-key', // Unique key.\n    name: 'Custom one', // The name shown in drag menu.\n    isContainer: false, // Can be dragged in.\n    editors: [\n      {\n        field: 'title',\n        text: 'Text',\n        type: 'string'\n      }\n    ] // Tell gaea-editor, which props can be edited and how to edit it.\n  }\n};\n```\n\n## More about `editors`\n\ngaea-editor provides several built-in type editing props. If you need to expand it, you can refer to [custom plugin](./docs/custom-plugin.md).\n\ncommon field:\n\n- `field`: which props to edit. EX: `value` `visible` `style.backgroundColor`.\n- `text`: If exist, will appear in the form label to prompt the user.\n\nThe following are the built-in types:\n\n### string\n\n![](./docs/images/string.png)\n\nSuitable for any string editing scene.\n\n```typescript\n{\n    type: 'string',\n    text: 'Text',\n    field: 'value'\n}\n```\n\n### number\n\n![](./docs/images/number.png)\n\nSuitable for any number editing scene.\n\nIn many cases, it is suggested that `inputRange` and `outputRange` be set to the same value.\n\n```typescript\n{\n    type: 'number',\n    text: 'Text',\n    field: 'value',\n    data: {\n        useSlider: true,\n        step: 1,\n        inputRange: [0, 100],\n        outputRange: [0, 1]\n    }\n}\n```\n\n### boolean\n\n![](./docs/images/boolean.png)\n\nSuitable for any boolean editing scene.\n\n```typescript\n{\n    type: 'boolean',\n    text: 'Checked',\n    field: 'value'\n}\n```\n\n### select\n\n![](./docs/images/select.png)\n\nSuitable for enumable editing scene.\n\n```typescript\n{\n    type: 'select',\n    text: 'Text',\n    field: 'value',\n    data: [{\n        text: 'Default',\n        value: 0\n    }, {\n        text: 'Small',\n        value: 1\n    }, {\n        text: 'Large',\n        value: 2\n    }]\n}\n```\n\n### color\n\n![](./docs/images/color.png)\n\nSuitable for color picker editing scene.\n\n```typescript\n{\n    type: 'color',\n    text: 'Text',\n    field: 'style.backgroundColor',\n}\n```\n\n### display\n\n![](./docs/images/display.png)\n\nSuitable for layout editing scene.\n\nBecause this type will edit multiple props properties, such as `style.display` `style.flexDirection`, so don't need to specify the `field` field.\n\n```typescript\n{\n    type: 'display',\n    text: 'Text'\n}\n```\n\n### box-editor\n\n![](./docs/images/box-editor.png)\n\nSuitable for margin-padding editing scene.\n\nBecause this type will edit multiple props properties, such as `margin` `padding`, so don't need to specify the `field` field.\n\n```typescript\n{\n    type: 'box-editor',\n    text: 'Text'\n}\n```\n\n### array\n\n![](./docs/images/array-string.png)\n\n**Super type**, allow visualizations to edit an array type props.\n\n```typescript\n{\n    type: 'array',\n    text: 'values',\n    data: 'string'\n}\n```\n\nYou can change `string` to `boolean`, than it can edit boolean array:\n\n![](./docs/images/array-boolean.png)\n\n### object array\n\n![](./docs/images/array-object.png)\n\n**Super type**, allow visualizations to edit an array type props.\n\nEach field in `data` describes how the key should be edited in the object in array.\n\n\u003e Each field in `data` is a `editor` type. You can even nested `array` or `object` type inside.\n\n```typescript\n{\n    type: 'array',\n    text: 'Options',\n    data: [{\n        field: \"value\",\n        type: \"string\",\n        text: \"Value\"\n    }, {\n        field: \"text\",\n        type: \"string\",\n        text: \"Text\"\n    }, {\n        field: \"disabled\",\n        type: \"boolean\",\n        text: \"Disabled\"\n    }]\n}\n```\n\n### object\n\n![](./docs/images/object.png)\n\n**Super type**, allow visualizations to edit a object type props.\n\nEach field in `data` describes how the key should be edited in this object.\n\n\u003e Each field in `data` is a `editor` type. You can even nested `array` or `object` type inside.\n\n```typescript\n{\n    type: 'object',\n    text: 'Text',\n    data: [{\n        field: \"name\",\n        type: \"string\",\n        text: \"Name\"\n    }, {\n        field: \"age\",\n        type: \"number\",\n        text: \"Age\"\n    }]\n}\n```\n\n## Options\n\nYou can add custom components, custom plugins, save callback, and read saved data.\n\n| Props                | Type                                                     | Description                                                                                                                                                                                    |\n| -------------------- | -------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| onSave               | `(info?: string) =\u003e void`                                | When you click the Save button, feed back to you to save the information                                                                                                                       |\n| defaultValue         | `object`                                                 | Editor initial value, you can pass the value of the onSave callback and resume the draft                                                                                                       |\n| componentClasses     | `Array\u003cReact.ComponentClass\u003cIGaeaProps\u003e\u003e`                | React classes. Any react component is supported, but you need some configuration information to tell the editor how to edit it. see [custom-component-config](docs/custom-component-config.md) |\n| plugins              | `IPlugin[]`                                              | Advanced usage for custom editor functionality.                                                                                                                                                |\n| locale               | string                                                   | `zh` or `cn`                                                                                                                                                                                   |\n| ViewportRender       | React.ReactElement\\\u003cany\\\u003e                                | You can rewrite viewport element.                                                                                                                                                              |\n| disableBuiltInPlugin | string[]                                                 | Disable built in plugins.                                                                                                                                                                      |\n| preComponents        | Array\u003c{ gaeaKey: string; components: IPreComponent[]; }\u003e | See docs/basic.tsx                                                                                                                                                                             |\n\n## Parameter: `onSave`\n\n```typescript\nexport function renderGaeaEditor() {\n  return (\n    \u003cEditor\n      onSave={value =\u003e {\n        // send the value data to your server.\n      }}\n    /\u003e\n  );\n}\n```\n\n## Parameter: `defaultValue`\n\nThe `defaultValue` came from `onSave`.\n\n```typescript\nexport function renderGaeaEditor() {\n  return \u003cEditor defaultValue={value} /\u003e;\n}\n```\n\n## Parameter: `componentClasses`\n\n```typescript\nclass MyInput extends React.Component {\n  render() {\n    return \u003cinput /\u003e;\n  }\n}\n\nexport function renderGaeaEditor() {\n  return \u003cEditor componentClasses={[MyInput]} /\u003e;\n}\n```\n\n\u003e [LiveDemo](https://jsfiddle.net/47rpn9ud/2/)\n\nRead more in [custom-component-config](docs/custom-component-config.md).\n\n## Parameter: `plugins`\n\nFirst you should install `dob-react`.\n\n```bash\nnpm i dob-react\n```\n\n```typescript\nimport { Connect } from 'dob-react'\n\n@Connect\nclass Plugin extends React.Component {\n  render() {\n  \treturn 'plugin'\n  }\n}\n\nconst plugin {\n  position: \"mainToolEditorTypeShow\",\n  class: ShowEditor\n}\n\nexport function renderGaeaEditor() {\n    return (\n        \u003cEditor plugins={[ Plugin ]}/\u003e\n    )\n}\n```\n\n\u003e [CustomEditTypeLiveDemo](https://jsfiddle.net/kq935dbq/3/)\n\nWhat is `position`? What can i do with plugin? See more in [custom-plugin](docs/custom-plugin.md)\n\n# Communication\n\nTalk to us about gaea-editor using DingDing.\n\n\u003cimg src=\"https://img.alicdn.com/tfs/TB1O1XRtG61gK0jSZFlXXXDKFXa-1242-1602.jpg\" width=500 /\u003e\n\n# Local development run\n\n```bash\ngit clone https://github.com/ascoders/gaea-editor.git\ncd gaea-editor\nnpm i\nnpm run docs\n```\n\nWill automatically open the default browser.\n\n\u003e Unfortunately, source debugging is not support windows. Here is [way](https://github.com/ascoders/gaea-editor/issues/60) \n\n# Deploy\n\nStep 1, get value by `onSave` method in `gaea-editor`:\n\n```tsx\nimport Editor from 'gaea-editor';\n\nReactDOM.render(\u003cEditor onSave={value =\u003e saveToServer(value)} /\u003e, document.getElementById('react-root'));\n```\n\nstep 2, install `gaea-render`, and pass value to it:\n\n```bash\nnpm i gaea-render\n```\n\n```tsx\nimport Render from 'gaea-render';\n\nconst value = getValueFromServer(); // \u003cEditor onSave={value =\u003e // From here. } /\u003e\n\nReactDOM.render(\u003cRender value={value} /\u003e, document.getElementById('react-root'));\n```\n\n## Custom component\n\nBy default, both `gaea-editor` and `gaea-render` using `gaea-basic-components`. You can overwrite it by these code:\n\n```tsx\nimport Editor from 'gaea-editor';\nimport Render from 'gaea-render';\n\nReactDOM.render(\u003cEditor componentClasses={myCustomComponents} /\u003e, document.getElementById('react-editor'));\nReactDOM.render(\u003cRender componentClasses={myCustomComponents} /\u003e, document.getElementById('react-render'));\n```\n\nOr `concat` `gaea-basic-components`:\n\n```tsx\nimport Editor from 'gaea-editor';\nimport Render from 'gaea-render';\nimport BasicComponents from 'gaea-basic-components';\n\nReactDOM.render(\n  \u003cEditor componentClasses={[...BasicComponents, myCustomComponents]} /\u003e,\n  document.getElementById('react-editor')\n);\nReactDOM.render(\n  \u003cRender componentClasses={[...BasicComponents, myCustomComponents]} /\u003e,\n  document.getElementById('react-render')\n);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fascoders%2Fgaea-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fascoders%2Fgaea-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fascoders%2Fgaea-editor/lists"}