{"id":26136186,"url":"https://github.com/xcancloud/openapidesigner","last_synced_at":"2026-01-19T21:52:48.641Z","repository":{"id":281612748,"uuid":"939835620","full_name":"xcancloud/OpenAPIDesigner","owner":"xcancloud","description":"OpenAPIDesigner is an open-source OpenAPI specification design tool that allows developers to design, write, and validate OpenAPI specifications.","archived":false,"fork":false,"pushed_at":"2025-03-10T07:19:11.000Z","size":63,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-10T08:26:02.257Z","etag":null,"topics":["openapi","openapi-edtor","openapi-specification","swagger"],"latest_commit_sha":null,"homepage":"https://www.xcan.cloud","language":"JavaScript","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/xcancloud.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":"2025-02-27T07:26:46.000Z","updated_at":"2025-03-10T07:19:15.000Z","dependencies_parsed_at":"2025-03-10T08:36:34.556Z","dependency_job_id":null,"html_url":"https://github.com/xcancloud/OpenAPIDesigner","commit_stats":null,"previous_names":["xcancloud/openapidesigner"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xcancloud%2FOpenAPIDesigner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xcancloud%2FOpenAPIDesigner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xcancloud%2FOpenAPIDesigner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xcancloud%2FOpenAPIDesigner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xcancloud","download_url":"https://codeload.github.com/xcancloud/OpenAPIDesigner/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242951090,"owners_count":20211572,"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":["openapi","openapi-edtor","openapi-specification","swagger"],"created_at":"2025-03-11T00:56:44.364Z","updated_at":"2026-01-19T21:52:48.634Z","avatar_url":"https://github.com/xcancloud.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# OpenAPIDesigner\n\n[English](README.md) | [中文](README_zh.md)\n\n[![Vue3](https://img.shields.io/badge/Vue-3.5.13-red)](https://cn.vuejs.org/guide/introduction)\n[![UI](https://img.shields.io/badge/Ant%20Design-3.2.20-brightgreen)](https://2x.antdv.com/components/overview)\n[![Style](https://img.shields.io/badge/Tailwind%20CSS-3.4.17-green)](https://tailwindcss.com/docs)\n[![Open API](https://img.shields.io/badge/Open%20API-3.0.1-blue)](https://swagger.io/specification/)\n\nOpenAPIDesigner is an open-source visual design tool for creating, editing and validating OpenAPI 3.0 specifications.\n\n## ✨ Features\n\n- Visual API specification designer\n- Real-time OpenAPI schema validation\n- Multi-framework integration (Vue/React/Plain JS)\n- Dual-language support (English/Chinese)\n- Dynamic API documentation preview\n\n## 📦 Installation\n\n```bash\nnpm install open-api-designer\n```\n\n## 🚀 Usage\n\n### Basic HTML Integration\n\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"utf-8\"\u003e\n  \u003cscript type=\"module\" src=\"your-entry-file.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv class=\"openapi-container\"\u003e\n\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n```javascript\nimport OpenApiDesigner from 'open-api-designer';\n\nconst initialSpec = {\n  openapi: \"3.0.1\",\n  info: {\n    title: \"API Docs\",\n    version: \"1.0.0\"\n  }\n};\n\nconst wrap = document.querySelector('.openapi-container');\n\n\nconst designer = new OpenApiDesigner();\n\nwrap.innerHTML= `\u003c${designer.compName}\u003e \u003c/${designer.compName}\u003e`\ncustom.setAttribute('open-api-doc', JSON.stringify(initialSpec));\n```\n\n### Framework Integration\n\n#### React\n\n```jsx\nimport OpenApiDesigner from 'open-api-designer';\n\nfunction renderCustomElement(tagName, props) {\n  return React.createElement(tagName, props);\n}\n\nexport default function ApiDesigner() {\n  const designInstance = new OpenApiDesigner({});\n  return renderCustomElement(designInstance.compName, {'open-api-doc': 'https://generator3.swagger.io/openapi.json'})\n}\n```\n\n#### Vue\n\n```vue\nimport { onMounted, ref } from 'vue';\nimport OpenApiDesigner from 'open-api-designer';\n\nconst designInstance = ref();\nonMounted(() =\u003e {\n  designInstance.value = new OpenApiDesigner();\n});\n\nconst changeLanguage = () =\u003e {\n  designInstance.value \u0026\u0026 designInstance.value.changeLanguage('en')\n}\n\n\u003ctemplate\u003e\n  \u003ccomponent :is=\"designInstance.compName\" open-api-doc=\"{}\"\u003e\u003c/component\u003e\n\u003c/template\u003e\n\n```\n\n## ⚙️ Configuration Options\n\n### Constructor Parameters\n\n| Parameter         | Type     | Default | Description                  |\n|-------------------|----------|---------|------------------------------|\n| `defaultFontSize` | string   | 13      | Default font size for display |\n\n### Attribute Parameters\n\n| Parameter         | Type     | Default | Description                          |\n|-------------------|----------|---------|---------------------------------------|\n| `open-api-doc`    | string   | '{}'    | OpenAPI documentation JSON data or URL to JSON file |\n| `language`        | string   | en      | UI language (en/zh_CN)                |\n\n### Core Methods\n\n| Method               | Description                               |\n|----------------------|-------------------------------------------|\n| `getDocApi()`        | Get current OpenAPI JSON specification    |\n| `updateData()`       | Update specification data                 |\n| `changeLanguage(value)` | Change language (en/zh_CN)               |\n\n## 🧪 Demo Preview\n\n```bash\nnpm run build\nnpm run demo \n\n\u003e open-api-designer@1.0.0 demo\n\u003e http-server -p 8080 \u0026 open http://127.0.0.1:8080/demo/index.html\n```\nAccess demo at `http://127.0.0.1:8080/demo/index.html`\n\n## 📜 License\n\nLicensed under [Apache-2.0 license](http://www.apache.org/licenses/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxcancloud%2Fopenapidesigner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxcancloud%2Fopenapidesigner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxcancloud%2Fopenapidesigner/lists"}